acid-info/free.technology
1
0
Fork 0
mirror of https://github.com/acid-info/free.technology.git synced 2025-02-28 09:20:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: design adjustment

Browse Source
This commit is contained in:
jinhojang6 2023-12-08 22:19:59 +09:00
parent 1a9e657c44
commit c3402a168b
12 changed files with 111 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/BU/About/BUAbout.tsx
View File

@ -63,6 +63,9 @@ const ShowMore = styled.button`
background: #f2f2f2;
border: none;
user-select: none;
-webkit-user-select: none;
@media (min-width: ${breakpoints.md}px) {
display: none;
}

3
src/components/Button/Button.tsx
View File

@ -33,6 +33,9 @@ const StyledButton = styled.button<ButtonProps>`
border-radius: 2px;
position: relative;
user-select: none;
-webkit-user-select: none;
svg {
path {
stroke: ${(props) => (props.color === 'black' ? 'white' : 'black')};

11
src/components/Footer/Footer.tsx
View File

@ -116,6 +116,9 @@ const GoToTop = styled.button`
border: 1px solid #fff;
background-color: transparent;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
`
const FooterInto = styled.div`
@ -238,6 +241,14 @@ const LinkItems = styled.div`
@media (max-width: ${breakpoints.md}px) {
flex-direction: column;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
`
const Org = styled.div`

8
src/components/Footer/HomeFooter.tsx
View File

@ -114,6 +114,9 @@ const GoToTop = styled.button`
border: 1px solid #fff;
background-color: transparent;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
`
const Description = styled.div`
@ -200,6 +203,11 @@ const LinksColumn = styled.div`
font-weight: 400;
line-height: 130%;
color: white;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
@media (max-width: ${breakpoints.xl}px) {

31
src/components/Jobs/JobFilter.tsx
View File

@ -38,19 +38,17 @@ const JobFilter = ({ data, activeBUs, setActiveBUs }: Props) => {
<Tag active={activeBUs.length === 0} onClick={() => setActiveBUs([])}>
All Jobs
</Tag>
{businessUnits?.length ? (
businessUnits.map((bu: string) => (
<Tag
active={activeBUs.includes(bu)}
key={bu + '-tag'}
onClick={() => toggleBU(bu)}
>
{bu}
</Tag>
))
) : (
<NoJobs>No Open Positions</NoJobs>
)}
{businessUnits?.length
? businessUnits.map((bu: string) => (
<Tag
active={activeBUs.includes(bu)}
key={bu + '-tag'}
onClick={() => toggleBU(bu)}
>
{bu}
</Tag>
))
: null}
</BUs>
<Border />
</Container>
@ -94,11 +92,4 @@ const Border = styled.hr`
margin: 0;
`
const NoJobs = styled.p`
padding-top: 24px;
font-size: 36px;
color: black;
text-decoration: none;
`
export default JobFilter

34
src/components/Jobs/JobList.tsx
View File

@ -41,7 +41,10 @@ const JobList = ({
{jobList?.length ? (
jobList.map((job: any) => <JobItem key={job.id} job={job} />)
) : (
<NoJobs>No Open Positions</NoJobs>
<NoJobs>
No Open Positions
{/* <p>Please get in touch on our Discord.</p> */}
</NoJobs>
)}
</Jobs>
</Container>
@ -99,10 +102,37 @@ const Title = styled.h3`
`
const NoJobs = styled.p`
padding-top: 24px;
font-size: 36px;
color: black;
text-decoration: none;
/* padding-top: 24px; */
display: flex;
height: 100%;
align-items: center;
p {
color: rgba(0, 0, 0, 0.54);
text-overflow: ellipsis;
font-size: 18px;
font-weight: 400;
line-height: 22px;
margin-top: 8px;
@media (max-width: ${breakpoints.md}px) {
font-size: 12px;
}
}
@media (max-width: ${breakpoints.xl}px) {
font-size: 27px;
line-height: 32px;
}
@media (max-width: ${breakpoints.md}px) {
font-size: 16px;
line-height: 130%;
}
`
const CustomBox = styled(Box)`

25
src/components/Portfolio/PortfolioItem.tsx
View File

@ -2,16 +2,14 @@ import { breakpoints } from '@/configs/ui.configs'
import styled from '@emotion/styled'
import Image from 'next/image'
import { useState } from 'react'
import { Badge } from '../Badge'
interface Props {
children: React.ReactNode
title: string
mark: string
est: string
}
export const PortfolioItem = ({ title, mark, est, children }: Props) => {
export const PortfolioItem = ({ title, mark, children }: Props) => {
const [open, setOpen] = useState<boolean>(false)
const handleClick = () => {
@ -19,12 +17,11 @@ export const PortfolioItem = ({ title, mark, est, children }: Props) => {
}
return (
<Container onClick={handleClick}>
<Container onClick={handleClick} isOpen={open}>
<Header>
<Title>
<Image src={mark} width={34} height={34} alt={title + '-logo'} />
<TitleText>{title}</TitleText>
<Badge>est. {est}</Badge>
</Title>
<Toggle>
<ToggleButtonImage
@ -38,14 +35,19 @@ export const PortfolioItem = ({ title, mark, est, children }: Props) => {
)
}
const Container = styled.div`
const Container = styled.div<{ isOpen: boolean }>`
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
border-top: 1px solid rgba(0, 0, 0, 0.18);
transition: transform 0.3s ease;
cursor: pointer;
button {
transition: transform 0.3s ease;
}
p {
text-overflow: ellipsis;
font-size: 22px;
@ -86,8 +88,12 @@ const Container = styled.div`
}
&:hover {
border-top: 1px solid rgba(0, 0, 0, 0.18);
background: rgba(0, 0, 0, 0.02);
background: ${({ isOpen }) =>
isOpen ? 'transparent' : 'rgba(0, 0, 0, 0.05)'};
button {
transform: ${({ isOpen }) => (!isOpen ? 'rotate(45deg)' : 'rotate(0)')};
}
}
@media (max-width: ${breakpoints.xl}px) {
@ -152,6 +158,9 @@ const Toggle = styled.button`
cursor: pointer;
background-color: transparent;
border: none;
user-select: none;
-webkit-user-select: none;
`
const Title = styled.div`

3
src/components/Services/ServiceContact.tsx
View File

@ -135,6 +135,9 @@ const EmailButton = styled.button`
cursor: pointer;
border: none;
user-select: none;
-webkit-user-select: none;
@media (max-width: ${breakpoints.xl}px) {
width: 139px;
height: 57px;

46
src/components/Services/ServiceFilter.tsx
View File

@ -37,19 +37,17 @@ const ServiceFilter = ({
<FilterTitle title="Our Services" length={services.length} />
<Border />
<ServicesContainer>
{services?.length ? (
services.map((service) => (
<Tag
active={activeServices.includes(service.title)}
key={service.title + '-tag'}
onClick={() => toggleService(service.title)}
>
{service.title}
</Tag>
))
) : (
<NoServices>No Open Positions</NoServices>
)}
{services?.length
? services.map((service) => (
<Tag
active={activeServices.includes(service.title)}
key={service.title + '-tag'}
onClick={() => toggleService(service.title)}
>
{service.title}
</Tag>
))
: null}
</ServicesContainer>
<Border />
</Container>
@ -72,21 +70,6 @@ const Container = styled.div`
}
`
const Title = styled.h3`
color: #000;
font-size: 52px;
font-weight: 400;
line-height: 130%;
text-transform: capitalize;
margin-bottom: 24px;
@media (max-width: ${breakpoints.md}px) {
font-size: 22px;
line-height: 122%;
margin-bottom: 16px;
}
`
const ServicesContainer = styled.div`
display: flex;
overflow-x: auto;
@ -112,11 +95,4 @@ const Border = styled.hr`
margin: 0;
`
const NoServices = styled.p`
padding-top: 24px;
font-size: 36px;
color: black;
text-decoration: none;
`
export default ServiceFilter

3
src/components/Services/ServiceItem.tsx
View File

@ -97,6 +97,9 @@ const ServiceButton = styled.button`
padding: 10px 49px 10px 18px;
cursor: pointer;
border: none;
user-select: none;
-webkit-user-select: none;
`
const IconContainer = styled.span`

3
src/components/Tag/Tag.tsx
View File

@ -18,6 +18,9 @@ export const Tag = styled.div<{ active: boolean }>`
border: 1px solid black;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
@media (max-width: ${breakpoints.md}px) {
padding: 4px 10px;
}

12
src/pages/index.mdx
View File

@ -25,7 +25,7 @@ import BU_DATA from '../data/bu-data'
</Hero>
<Portfolio>
<PortfolioItem mark="/icons/bu/logos.svg" title="Logos" est={BU_DATA.logos.hero.est}>
<PortfolioItem mark="/icons/bu/logos.svg" title="Logos">
| Development Status | Vertical |
|--------------------|---------------|
@ -53,7 +53,7 @@ import BU_DATA from '../data/bu-data'
<Link href="/waku"><Button width="150px" height="40px" color="grey">Learn more</Button></Link>
</PortfolioItem>
<PortfolioItem mark="/icons/bu/codex.svg" title="Codex" est={BU_DATA.codex.hero.est}>
<PortfolioItem mark="/icons/bu/codex.svg" title="Codex">
| Development Status | Vertical |
|--------------------|---------------|
@ -67,7 +67,7 @@ import BU_DATA from '../data/bu-data'
<Link href="/codex"><Button width="150px" height="40px" color="grey">Learn more</Button></Link>
</PortfolioItem>
<PortfolioItem mark="/icons/bu/nomos.svg" title="Nomos" est={BU_DATA.nomos.hero.est}>
<PortfolioItem mark="/icons/bu/nomos.svg" title="Nomos">
| Development Status | Vertical |
|--------------------|---------------|
@ -81,7 +81,7 @@ import BU_DATA from '../data/bu-data'
<Link href="/nomos"><Button width="150px" height="40px" color="grey">Learn more</Button></Link>
</PortfolioItem>
<PortfolioItem mark="/icons/bu/status.svg" title="Status" est={BU_DATA.status.hero.est}>
<PortfolioItem mark="/icons/bu/status.svg" title="Status">
| Development Status | Vertical |
|--------------------|---------------|
@ -95,7 +95,7 @@ import BU_DATA from '../data/bu-data'
<Link href="/status"><Button width="150px" height="40px" color="grey">Learn more</Button></Link>
</PortfolioItem>
<PortfolioItem mark="/icons/bu/keycard.svg" title="Keycard" est={BU_DATA.keycard.hero.est}>
<PortfolioItem mark="/icons/bu/keycard.svg" title="Keycard">
| Development Status | Vertical |
|--------------------|---------------|
@ -109,7 +109,7 @@ import BU_DATA from '../data/bu-data'
<Link href="/keycard"><Button width="150px" height="40px" color="grey">Learn more</Button></Link>
</PortfolioItem>
<PortfolioItem mark="/icons/bu/nimbus.svg" title="Nimbus" est={BU_DATA.nimbus.hero.est}>
<PortfolioItem mark="/icons/bu/nimbus.svg" title="Nimbus">
| Development Status | Vertical |
|--------------------|---------------|