Skip to content

Commit

Permalink
feat: add about responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@fbuireu
fbuireu committed May 7, 2024
1 parent 0c2b4c4 commit c27652a
Show file tree
Hide file tree
Showing 8 changed files with 86 additions and 55 deletions.
Binary file modified .yarn/install-state.gz
View file
Binary file not shown.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,13 @@
},
"devDependencies": {
"@astrojs/ts-plugin": "^1.6.1",
"@biomejs/biome": "1.7.2",
"@biomejs/biome": "1.7.3",
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@testing-library/react": "^15.0.6",
"@testing-library/react-hooks": "^8.0.1",
"@types/markdown-it": "^14.1.1",
"@types/node": "^20.12.8",
"@types/node": "^20.12.10",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"@types/three": "^0.164.0",
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Testimonials from "@components/organisms/testimonials/Testimonials.astro"
import MyWork from "@components/organisms/myWork/MyWork.astro";
import LatestArticles from "@components/organisms/latestArticles/LatestArticles.astro";
// todo (current): responsive
// todo (current): responsive (about: city cards + latest articles slider)
// todo: tags page
// todo: add resume (PDF) in about?
// todo: dynamic content
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/organisms/aboutLatestArticles/AboutLatestArticles.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ articles.sort((a, b) => new Date(b.data.publishDate).valueOf() - new Date(a.data
</h3>
<div class="about-latest-articles__inner">
<div class="about-latest-articles__quote__wrapper">
<h3 class="about-latest-articles__quote">Lorem ipsum dolir sit Amet. Dolor sit amet.</h3>
<h4 class="about-latest-articles__quote">Lorem ipsum dolir sit Amet. Dolor sit amet.</h4>
<h6 class="about-latest-articles__quote__author">Ferran Buireu</h6>
</div>
<AboutLatestArticlesSlider client:load articles={articles} />
Expand Down
35 changes: 28 additions & 7 deletions src/ui/components/organisms/aboutLatestArticles/about-latest-articles.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
@layer about.latest-articles {
.about-latest-articles__wrapper {
margin-bottom: 12rem;
@media (max-width: 720px) {
margin-bottom: 5rem;
}
}

.about-latest-articles__title {
Expand All @@ -10,38 +13,56 @@
color: var(--primary-main);
display: inline-block;
}
@media (max-width: 720px) {
margin-bottom: 2rem;
}
}

.about-latest-articles__inner {
display: grid;
gap: 0 5rem;
grid: 'Quote Latest-Articles' 1fr / calc(30% - 2rem) calc(70% - 2rem);
justify-content: flex-end;

@media (max-width: 720px) {
gap: 3rem 0;
grid: 'Quote Quote' min-content
'Latest-Articles Latest-Articles' 1fr / auto;
}
}

.about-latest-articles__quote__wrapper {
align-items: flex-end;
align-self: self-start;
display: flex;
flex-flow: column;
gap: 2rem 0;
gap: 1rem 0;
grid-area: Quote;
justify-content: flex-end;
position: relative;
text-align: end;
text-transform: uppercase;
}

.about-latest-articles__quote {
position: relative;

&::after {
background-color: var(--neutral-main);
content: '';
height: 50%;
height: 100%;
inset: 0 -2.5rem auto auto;
position: absolute;
transform: translateY(50%);
top: 0;
width: 1px;
}
@media (max-width: 720px) {
align-items: center;
justify-content: center;
text-align: center;

&::after {
height: 1px;
inset: auto 0 -1rem 0;
margin: 0 auto;
width: 4rem;
}
}
}
}
10 changes: 10 additions & 0 deletions src/ui/components/organisms/footer/footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@

.footer__wrapper {
padding: 2rem 0 1rem;
@media (max-width: 720px) {
padding: 0;
}
}

.footer__disclaimer {
Expand All @@ -17,13 +20,20 @@
.footer__logo {
svg {
fill: var(--white);
@media (max-width: 720px) {
width: 14rem;
}
}
}

.footer__social__networks__list {
margin: 4rem auto;
max-width: var(--grid-extra-small);
padding-inline-start: 0;

@media (max-width: 720px) {
margin: 2rem auto;
}
}

.footer__social__networks__item {
Expand Down
2 changes: 1 addition & 1 deletion src/ui/styles/base/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,6 @@
}

h4 {
font-size: clamp(2rem, 2rem, 2rem);
font-size: clamp(1.25rem, 3vw, 2rem);
}
}
86 changes: 43 additions & 43 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -671,18 +671,18 @@ __metadata:
languageName: node
linkType: hard

"@biomejs/biome@npm:1.7.2":
version: 1.7.2
resolution: "@biomejs/biome@npm:1.7.2"
dependencies:
"@biomejs/cli-darwin-arm64": "npm:1.7.2"
"@biomejs/cli-darwin-x64": "npm:1.7.2"
"@biomejs/cli-linux-arm64": "npm:1.7.2"
"@biomejs/cli-linux-arm64-musl": "npm:1.7.2"
"@biomejs/cli-linux-x64": "npm:1.7.2"
"@biomejs/cli-linux-x64-musl": "npm:1.7.2"
"@biomejs/cli-win32-arm64": "npm:1.7.2"
"@biomejs/cli-win32-x64": "npm:1.7.2"
"@biomejs/biome@npm:1.7.3":
version: 1.7.3
resolution: "@biomejs/biome@npm:1.7.3"
dependencies:
"@biomejs/cli-darwin-arm64": "npm:1.7.3"
"@biomejs/cli-darwin-x64": "npm:1.7.3"
"@biomejs/cli-linux-arm64": "npm:1.7.3"
"@biomejs/cli-linux-arm64-musl": "npm:1.7.3"
"@biomejs/cli-linux-x64": "npm:1.7.3"
"@biomejs/cli-linux-x64-musl": "npm:1.7.3"
"@biomejs/cli-win32-arm64": "npm:1.7.3"
"@biomejs/cli-win32-x64": "npm:1.7.3"
dependenciesMeta:
"@biomejs/cli-darwin-arm64":
optional: true
Expand All @@ -702,62 +702,62 @@ __metadata:
optional: true
bin:
biome: bin/biome
checksum: 10c0/c0fb7b653db6df2e2338f84c1105847713e60ec5c3737f3bbc7df2dd4b1b02e981af81290808806fe0342e9a530b2a83b1550adf9b96f4cab0d13c188070aaef
checksum: 10c0/05c95bb4b1fbf1b252cf2124f012f69a00ff5599ecac002b7e3004bfcd927e3d7b5f4935739096b5184653ec96b44ddcc36809d059682e5378bde20c836fb111
languageName: node
linkType: hard

"@biomejs/cli-darwin-arm64@npm:1.7.2":
version: 1.7.2
resolution: "@biomejs/cli-darwin-arm64@npm:1.7.2"
"@biomejs/cli-darwin-arm64@npm:1.7.3":
version: 1.7.3
resolution: "@biomejs/cli-darwin-arm64@npm:1.7.3"
conditions: os=darwin & cpu=arm64
languageName: node
linkType: hard

"@biomejs/cli-darwin-x64@npm:1.7.2":
version: 1.7.2
resolution: "@biomejs/cli-darwin-x64@npm:1.7.2"
"@biomejs/cli-darwin-x64@npm:1.7.3":
version: 1.7.3
resolution: "@biomejs/cli-darwin-x64@npm:1.7.3"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard

"@biomejs/cli-linux-arm64-musl@npm:1.7.2":
version: 1.7.2
resolution: "@biomejs/cli-linux-arm64-musl@npm:1.7.2"
"@biomejs/cli-linux-arm64-musl@npm:1.7.3":
version: 1.7.3
resolution: "@biomejs/cli-linux-arm64-musl@npm:1.7.3"
conditions: os=linux & cpu=arm64 & libc=musl
languageName: node
linkType: hard

"@biomejs/cli-linux-arm64@npm:1.7.2":
version: 1.7.2
resolution: "@biomejs/cli-linux-arm64@npm:1.7.2"
"@biomejs/cli-linux-arm64@npm:1.7.3":
version: 1.7.3
resolution: "@biomejs/cli-linux-arm64@npm:1.7.3"
conditions: os=linux & cpu=arm64 & libc=glibc
languageName: node
linkType: hard

"@biomejs/cli-linux-x64-musl@npm:1.7.2":
version: 1.7.2
resolution: "@biomejs/cli-linux-x64-musl@npm:1.7.2"
"@biomejs/cli-linux-x64-musl@npm:1.7.3":
version: 1.7.3
resolution: "@biomejs/cli-linux-x64-musl@npm:1.7.3"
conditions: os=linux & cpu=x64 & libc=musl
languageName: node
linkType: hard

"@biomejs/cli-linux-x64@npm:1.7.2":
version: 1.7.2
resolution: "@biomejs/cli-linux-x64@npm:1.7.2"
"@biomejs/cli-linux-x64@npm:1.7.3":
version: 1.7.3
resolution: "@biomejs/cli-linux-x64@npm:1.7.3"
conditions: os=linux & cpu=x64 & libc=glibc
languageName: node
linkType: hard

"@biomejs/cli-win32-arm64@npm:1.7.2":
version: 1.7.2
resolution: "@biomejs/cli-win32-arm64@npm:1.7.2"
"@biomejs/cli-win32-arm64@npm:1.7.3":
version: 1.7.3
resolution: "@biomejs/cli-win32-arm64@npm:1.7.3"
conditions: os=win32 & cpu=arm64
languageName: node
linkType: hard

"@biomejs/cli-win32-x64@npm:1.7.2":
version: 1.7.2
resolution: "@biomejs/cli-win32-x64@npm:1.7.2"
"@biomejs/cli-win32-x64@npm:1.7.3":
version: 1.7.3
resolution: "@biomejs/cli-win32-x64@npm:1.7.3"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard
Expand Down Expand Up @@ -3192,12 +3192,12 @@ __metadata:
languageName: node
linkType: hard

"@types/node@npm:^20.12.8":
version: 20.12.8
resolution: "@types/node@npm:20.12.8"
"@types/node@npm:^20.12.10":
version: 20.12.10
resolution: "@types/node@npm:20.12.10"
dependencies:
undici-types: "npm:~5.26.4"
checksum: 10c0/840002d20654e38a9af8cdffa215598fdb28ac4f96c5701ed672ec365ed6ccc66da299edddaa409baf13cd71bbf1128901f633b5e44e070fc236e26415805b78
checksum: 10c0/2cc3b6ea09894ed1a3cf39f6491ec539281580f4ff83216e7d26ce85c83237fe0543c0ca49e25b2515ccdb6c8814b488d17a64a05f536dcaea94f9d32a60c7d7
languageName: node
linkType: hard

Expand Down Expand Up @@ -3950,7 +3950,7 @@ __metadata:
"@astrojs/rss": "npm:^4.0.5"
"@astrojs/sitemap": "npm:^3.1.4"
"@astrojs/ts-plugin": "npm:^1.6.1"
"@biomejs/biome": "npm:1.7.2"
"@biomejs/biome": "npm:1.7.3"
"@commitlint/cli": "npm:^19.3.0"
"@commitlint/config-conventional": "npm:^19.2.2"
"@fontsource-variable/nunito-sans": "npm:^5.0.14"
Expand All @@ -3959,7 +3959,7 @@ __metadata:
"@testing-library/react": "npm:^15.0.6"
"@testing-library/react-hooks": "npm:^8.0.1"
"@types/markdown-it": "npm:^14.1.1"
"@types/node": "npm:^20.12.8"
"@types/node": "npm:^20.12.10"
"@types/react": "npm:^18.3.1"
"@types/react-dom": "npm:^18.3.0"
"@types/three": "npm:^0.164.0"
Expand Down

0 comments on commit c27652a

Please sign in to comment.