acid-info/free.technology
1
0
Fork 0
mirror of https://github.com/acid-info/free.technology.git synced 2025-03-01 01:40:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: responsive design for 1440px breakpoint

Browse Source
This commit is contained in:
jinhojang6 2023-12-07 00:03:37 +09:00
parent fc2d7a2d16
commit e4cd910a05
10 changed files with 184 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Badge/Badge.tsx
View File

@ -16,6 +16,11 @@ export const Badge = styled.div`
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.18);
@media (max-width: ${breakpoints.xl}px) {
font-size: 9px;
padding: 3px 7.5px;
}
@media (max-width: ${breakpoints.md}px) {
font-size: 12px;
padding: 4px 8px;

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

@ -76,6 +76,14 @@ const Container = styled.footer`
line-height: 42px;
}
@media (max-width: ${breakpoints.xl}px) {
h2 {
font-size: 27px;
line-height: 32px;
padding-block: 18px;
}
}
@media (max-width: ${breakpoints.md}px) {
width: 100%;
margin-top: 74px;
@ -127,9 +135,28 @@ const Description = styled.div`
background-color: transparent;
border: 1px solid #fff;
color: #fff;
box-sizing: border-box;
cursor: pointer;
}
@media (max-width: ${breakpoints.xl}px) {
margin-top: 24px;
margin-bottom: 48px;
gap: 30px;
p {
font-size: 27px;
line-height: 32px;
}
button {
width: 95px;
font-size: 11px;
line-height: 15px;
padding: 8px 16px;
}
}
@media (max-width: ${breakpoints.md}px) {
width: 100%;
margin-top: 8px;
@ -149,7 +176,7 @@ const Links = styled.div`
padding-bottom: 64px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
@media (max-width: ${breakpoints.md}px) {
@media (max-width: ${breakpoints.xl}px) {
padding-bottom: 48px;
}
`
@ -172,6 +199,18 @@ const LinksColumn = styled.div`
color: white;
}
@media (max-width: ${breakpoints.xl}px) {
h3 {
font-size: 12px;
line-height: 15px;
}
a {
font-size: 12px;
line-height: 130%;
}
}
@media (max-width: ${breakpoints.md}px) {
h3 {
font-size: 12px;
@ -179,7 +218,7 @@ const LinksColumn = styled.div`
a {
font-size: 12px;
line-height: 130%;
line-height: 15px;
}
}
`
@ -199,6 +238,15 @@ const Bottom = styled.div`
}
}
@media (max-width: ${breakpoints.xl}px) {
padding-block: 15px;
p {
font-size: 12px;
line-height: 15px;
}
}
@media (max-width: ${breakpoints.md}px) {
p {
font-size: 12px;

9
src/components/Hero/Description.tsx
View File

@ -24,6 +24,15 @@ const Container = styled.div`
line-height: 122%;
}
@media (max-width: ${breakpoints.xl}px) {
margin-block: 18px;
padding-block: 18px;
p {
font-size: 16px;
line-height: 122%;
}
}
@media (max-width: ${breakpoints.md}px) {
p {
font-size: 14px;

22
src/components/Hero/Hero.tsx
View File

@ -37,6 +37,28 @@ const Container = styled.div`
margin-bottom: 165px;
@media (max-width: ${breakpoints.xl}px) {
h1,
h2 {
font-size: 27px;
line-height: 32px;
}
h2 {
margin-bottom: 24px;
}
button {
width: 110px;
height: 32px;
font-size: 11px;
line-height: 15px;
padding: 8px 26px;
}
margin-bottom: 150px;
}
@media (max-width: ${breakpoints.md}px) {
h1,
h2 {

20
src/components/Mission/Mission.tsx
View File

@ -86,6 +86,21 @@ const Container = styled.div`
padding: 20px 0 8px 0;
}
@media (max-width: ${breakpoints.xl}px) {
margin-top: 165px;
margin-bottom: 111px;
h2 {
font-size: 27px;
line-height: 32px;
}
p {
font-size: 16px;
line-height: 122%;
}
}
@media (max-width: ${breakpoints.md}px) {
h2 {
font-size: 22px;
@ -117,6 +132,11 @@ const Title = styled.h3`
line-height: 130%;
width: 100%;
padding-block: 16px;
@media (max-width: ${breakpoints.xl}px) {
font-size: 27px;
line-height: 32px;
}
`
const Content = styled.div`

16
src/components/Portfolio/Portfolio.tsx
View File

@ -36,9 +36,20 @@ const Header = styled.div`
font-weight: 400;
}
@media (max-width: ${breakpoints.xl}px) {
padding-block: 18px;
margin-bottom: 42px;
sup {
font-size: 12px;
margin-left: 0px;
}
}
@media (max-width: ${breakpoints.md}px) {
padding-block: 16px;
margin-bottom: 48px;
sup {
font-size: 12px;
margin-left: 0px;
@ -52,6 +63,11 @@ const Title = styled.p`
line-height: 130%;
box-sizing: border-box;
@media (max-width: ${breakpoints.xl}px) {
font-size: 27px;
line-height: 32px;
}
@media (max-width: ${breakpoints.md}px) {
font-size: 22px;
line-height: 122%;

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

@ -85,6 +85,26 @@ const Container = styled.div`
padding: 20px 0 8px 0;
}
@media (max-width: ${breakpoints.xl}px) {
table {
margin-bottom: 15px;
}
table th,
table tr {
font-size: 13px;
line-height: 18px;
padding: 15px 0 6px 0;
}
p {
font-size: 16px;
line-height: 122%;
margin-top: 30px;
margin-bottom: 24px;
}
}
@media (max-width: ${breakpoints.md}px) {
p {
font-size: 14px;
@ -114,6 +134,10 @@ const Header = styled.div`
padding-block: 24px;
box-sizing: border-box;
@media (max-width: ${breakpoints.xl}px) {
padding-block: 18px;
}
@media (max-width: ${breakpoints.md}px) {
padding-block: 16px;
}
@ -140,8 +164,9 @@ const TitleText = styled.h3`
font-size: 22px;
line-height: 26px;
@media (max-width: ${breakpoints.md}px) {
@media (max-width: ${breakpoints.xl}px) {
font-size: 16px;
line-height: 20px;
}
`
@ -149,6 +174,10 @@ const Content = styled.div`
width: 100%;
padding-bottom: 40px;
@media (max-width: ${breakpoints.xl}px) {
padding-bottom: 30px;
}
@media (max-width: ${breakpoints.md}px) {
padding-bottom: 16px;
@ -162,6 +191,11 @@ const ToggleButtonImage = styled.img`
width: 48px;
height: 48px;
@media (max-width: ${breakpoints.xl}px) {
width: 36px;
height: 36px;
}
@media (max-width: ${breakpoints.md}px) {
width: 18px;
height: 18px;

15
src/components/Team/Member.tsx
View File

@ -1,3 +1,4 @@
import { breakpoints } from '@/configs/ui.configs'
import styled from '@emotion/styled'
import Image from 'next/image'
@ -27,6 +28,11 @@ const Container = styled.div`
font-size: 22px;
font-weight: 400;
line-height: 130%;
@media (max-width: ${breakpoints.xl}px) {
font-size: 16px;
line-height: 20px;
}
}
p {
@ -35,6 +41,11 @@ const Container = styled.div`
font-weight: 400;
text-transform: capitalize;
opacity: 0.5;
@media (max-width: ${breakpoints.xl}px) {
font-size: 13px;
line-height: 18px;
}
}
`
@ -43,6 +54,10 @@ const ImageContainer = styled.div`
width: 100%;
margin-bottom: 16px;
aspect-ratio: 1;
@media (max-width: ${breakpoints.xl}px) {
margin-bottom: 12px;
}
`
const MemberImage = styled(Image)`

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

@ -1,3 +1,4 @@
import { breakpoints } from '@/configs/ui.configs'
import styled from '@emotion/styled'
import React from 'react'
@ -24,12 +25,22 @@ const Title = styled.p`
font-weight: 400;
line-height: 130%;
padding-block: 20px;
@media (max-width: ${breakpoints.xl}px) {
font-size: 16px;
line-height: 20px;
padding-block: 18px;
}
`
const Grid = styled.div`
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
@media (max-width: ${breakpoints.xl}px) {
gap: 12px;
}
`
export default Team

2
src/pages/index.mdx
View File

@ -20,7 +20,7 @@ import BU_DATA from '../data/bu-data'
<Button color="black" width="150px" height="40px" padding="10px 34px">Learn more</Button>
<Description>
A mission-driven tech startup studio. We take ideas from the drawing board to market with financial, technical, legal, people operations, and brand-building support at every step. Our startups are free to focus on what they do best — building public goods to safeguard civil liberties in the digital age.
A mission-driven tech startup studio. We take ideas from the drawing board to market with financial, technical, legal, people operations, and brand-building support at every step. <br/><br/> Our startups are free to focus on what they do best — building public goods to safeguard civil liberties in the digital age.
</Description>
</Hero>