home page

quartz/components/HomeProfile.tsx

@@ -123,7 +123,6 @@ const HomeProfile: QuartzComponent = () => {
                 <span class="home-org-logo-badge">
                   <img class="home-org-logo" src={item.logo} alt={item.company} />
                 </span>
-                <div class="home-exp-header">
                 <div class="home-exp-text">
                   <span class="home-exp-role">{item.role}</span>
                   <span class="home-exp-company">{item.company}</span>
@@ -133,7 +132,6 @@ const HomeProfile: QuartzComponent = () => {
                   <span class="home-exp-location">{item.location}</span>
                 </div>
               </div>
-              </div>
               {item.description && (
                 <div class="home-exp-body">
                   <p class="home-exp-desc">{item.description}</p>

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 {

quartz/styles/base.scss

@@ -393,7 +393,7 @@ h1 {
   margin-bottom: 1rem;
 }
 
-@media (max-width: 800px) {
+@media all and ($mobile) {
   h1 {
     margin-top: 0;
   }

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;

quartz/styles/variables.scss

@@ -2,16 +2,16 @@
 
 /**
  * Layout breakpoints
- * $mobile: screen width below this value will use mobile styles
+ * $mobile: screen width below the desktop breakpoint will use mobile styles
- * $desktop: screen width above this value will use desktop 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)})";
+$mobile: "(max-width: #{map.get($breakpoints, desktop) - 1px})";
-$desktop: "(min-width: #{map.get($breakpoints, mobile) + 1px})";
+$desktop: "(min-width: #{map.get($breakpoints, desktop)})";
 
 $pageWidth: #{map.get($breakpoints, mobile)};
 $sidePanelWidth: 320px; //380px;