From bf5d18547f416cea1d5166bc111e64073c83b757 Mon Sep 17 00:00:00 2001 From: riceset Date: Wed, 18 Mar 2026 19:04:55 +0900 Subject: [PATCH] home page --- quartz/components/HomeProfile.tsx | 16 +++++++--------- quartz/components/styles/homeProfile.scss | 22 ++++------------------ quartz/static/logos/tufs.svg | 11 ++--------- quartz/styles/base.scss | 2 +- quartz/styles/custom.scss | 5 +++-- quartz/styles/variables.scss | 8 ++++---- 6 files changed, 21 insertions(+), 43 deletions(-) diff --git a/quartz/components/HomeProfile.tsx b/quartz/components/HomeProfile.tsx index c6d50ccfa..e2fc1ace8 100644 --- a/quartz/components/HomeProfile.tsx +++ b/quartz/components/HomeProfile.tsx @@ -123,15 +123,13 @@ const HomeProfile: QuartzComponent = () => { -
-
- {item.role} - {item.company} -
-
- {item.period} - {item.location} -
+
+ {item.role} + {item.company} +
+
+ {item.period} + {item.location}
{item.description && ( diff --git a/quartz/components/styles/homeProfile.scss b/quartz/components/styles/homeProfile.scss index 80a33a691..5bd75a6c9 100644 --- a/quartz/components/styles/homeProfile.scss +++ b/quartz/components/styles/homeProfile.scss @@ -97,36 +97,22 @@ } } -.home-exp-header { - flex: 1; - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 1rem; - min-width: 0; - - @media all and ($mobile) { - flex-direction: column; - gap: 0.15rem; - } -} - .home-exp-text { + flex: 1; display: flex; flex-direction: column; gap: 0.1rem; + min-width: 0; } .home-exp-right { display: flex; flex-direction: column; + margin-left: auto; align-items: flex-end; + text-align: right; gap: 0.1rem; flex-shrink: 0; - - @media all and ($mobile) { - align-items: flex-start; - } } .home-exp-role { diff --git a/quartz/static/logos/tufs.svg b/quartz/static/logos/tufs.svg index 54e3f4302..7ef9e51e6 100644 --- a/quartz/static/logos/tufs.svg +++ b/quartz/static/logos/tufs.svg @@ -1,10 +1,3 @@ - - - - - - - - - + + diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 61d0bf6f3..706ac13d6 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -393,7 +393,7 @@ h1 { margin-bottom: 1rem; } -@media (max-width: 800px) { +@media all and ($mobile) { h1 { margin-top: 0; } diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index f016f02fa..a38f30770 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -1,7 +1,8 @@ @use "./base.scss"; +@use "./variables.scss" as *; // Center the right sidebar content ONLY on mobile devices -@media (max-width: 800px) { +@media all and ($mobile) { .right.sidebar { text-align: center; @@ -22,7 +23,7 @@ } // Keep everything left-aligned on desktop -@media (min-width: 801px) { +@media all and ($desktop) { .right.sidebar { text-align: left; display: flex !important; diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss index 20282b10e..b596d3b03 100644 --- a/quartz/styles/variables.scss +++ b/quartz/styles/variables.scss @@ -2,16 +2,16 @@ /** * Layout breakpoints - * $mobile: screen width below this value will use mobile styles - * $desktop: screen width above this value will use desktop styles + * $mobile: screen width below the desktop breakpoint will use mobile styles + * $desktop: screen width at or above the desktop breakpoint will use desktop styles */ $breakpoints: ( mobile: 800px, desktop: 1200px, ); -$mobile: "(max-width: #{map.get($breakpoints, mobile)})"; -$desktop: "(min-width: #{map.get($breakpoints, mobile) + 1px})"; +$mobile: "(max-width: #{map.get($breakpoints, desktop) - 1px})"; +$desktop: "(min-width: #{map.get($breakpoints, desktop)})"; $pageWidth: #{map.get($breakpoints, mobile)}; $sidePanelWidth: 320px; //380px;