Remove theme button from print. rearrange work info

DarwinsBuddy · Sep 7, 2024 · 86a25cc · 86a25cc
1 parent 100f654
commit 86a25cc
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 41 deletions.
diff --git a/src/components/education/education.tsx b/src/components/education/education.tsx
@@ -30,7 +30,8 @@ function renderEducation(education: Education): JSX.Element {
         <div className="col">
           {renderLogo(
             education.institute.logo,
-            education.institute.link
+            education.institute.link,
+            "logo-sm"
           )}
         </div>
         <div className="col">

diff --git a/src/components/header/header.css b/src/components/header/header.css
@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: row;
   position: sticky;
+  max-height: var(--max-header-size);
   top: 0;
   box-shadow: var(--header-box-shadow);
   z-index: 2;
@@ -13,8 +14,8 @@
 .theme-button {
   display: flex;
   justify-content: center;
-  background-color: var(--header-bg-color);
-  color: var(--fg-color);
+  background-color: var(--theme-button-bg);
+  color: var(--theme-button-fg);
   align-items: center;
   max-height: 2rem;
   max-width: 2rem;
@@ -30,26 +31,26 @@
   display: flex;
   flex-direction: row;
   justify-content: start;
-  flex-grow: 5;
-  margin-top: 1rem;
+  flex: 4;
+  margin-top: 0.5rem;
   border-right: var(--fg-color) 1px solid;
 }
 
 .contact-container {
   justify-content: space-around;
   align-items: center;
-  flex-grow: 1;
+  flex: 1;
   flex-wrap: wrap;
 }
 
 .contact {
   width: 100%;
-  padding: 1rem;
+  padding: 0.25rem 0.5rem;
 }
 
 .address {
   width: 100%;
-  padding: 1rem;
+  padding: 0.25rem 0.5rem;
 }
 
 .title-container {

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -14,7 +14,6 @@ export function Header() {
   const [darkMode, setDarkMode] = useState(true);
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", darkMode ? "dark" : "light");
-    console.log("Switched theme", darkMode ? "dark" : "light");
   }, [darkMode]);
 
   return (

diff --git a/src/components/work/work.css b/src/components/work/work.css
@@ -35,12 +35,6 @@
   flex-wrap: wrap;
 }
 
-.achievements-container {
-  flex-basis: 15rem;
-  padding: 0 0.5rem 0.5rem 0;
-  flex: 1;
-}
-
 .achievements {
   display: flex;
   flex-direction: row;
@@ -60,7 +54,11 @@
 }
 
 .projects {
-  flex: 2;
+  flex: 1;
+}
+
+.job-description {
+  flex: 1;
   flex-basis: 15rem;
 }
 

diff --git a/src/components/work/work.tsx b/src/components/work/work.tsx
@@ -164,35 +164,34 @@ function renderWork(work: Work): JSX.Element {
         className="timeline-card timeline-card-primary col card pagebreak"
         key={work.id}
       >
-        <div className="timeline-head">
-          <div className="row">
-            <div className="col">
-              {renderLogo(work.company.logo, work.company.link)}
-            </div>
-            <div className="work-header">
-              <div className="col work-info">
-                <p className="title">
-                  <b>{work.company.name}</b>
-                </p>
-                <p className="location">{work.company.location}</p>
-                <p className="title">
-                  <b>{work.jobTitle}</b>
-                </p>
-                <p className="sub-title">{work.jobSubtitle}</p>
-                <div className="time">
-                  <div className="years">{work.years}</div>
-                  <div className="duration">{work.duration}</div>
-                </div>
+        <div className="timeline-head"></div>
+        <div className="timeline-body row">
+          <div className="job-description col">
+            <div className="row">
+              <div className="col">
+                {renderLogo(work.company.logo, work.company.link)}
               </div>
-              <div className="achievements-container">
-                {renderAchievements(work.achievements)}
+              <div className="work-header">
+                <div className="col work-info">
+                  <p className="title">
+                    <b>{work.company.name}</b>
+                  </p>
+                  <p className="location">{work.company.location}</p>
+                  <p className="title">
+                    <b>{work.jobTitle}</b>
+                  </p>
+                  <p className="sub-title">{work.jobSubtitle}</p>
+                  <div className="time">
+                    <div className="years">{work.years}</div>
+                    <div className="duration">{work.duration}</div>
+                  </div>
+                </div>
               </div>
             </div>
+            {renderProjects(work.projects)}
           </div>
-        </div>
-        <div className="timeline-body row flex-wrap">
-          {renderProjects(work.projects)}
-          <div className="additional-info">
+          <div className="additional-info col">
+            {renderAchievements(work.achievements)}
             {renderScope(work.scope)}
             {renderTech(work.tech)}
           </div>

diff --git a/src/index.css b/src/index.css
@@ -13,6 +13,8 @@
   --card-bg: var(--bg);
   --link-color: #d9d9d9;
   --link-color-hover: #aaaed9;
+  --theme-button-bg: var(--header-bg-color);
+  --theme-button-fg: var(--fg-color);
 
   color: var(--fg-color);
   background-color: var(--bg-color);
@@ -65,6 +67,7 @@
   --timeline-point-size: 1.5rem;
   --timeline-point-hadjust: -1rem;
   --timeline-point-border: 3px solid;
+  --max-header-size: 15rem;
 }
 
 
@@ -90,6 +93,9 @@
 
 @media print {
   :root {
+
+    --max-header-size: 8rem;
+
     --font-xx-large: 12pt;
     --font-x-large: 10pt;
     --font-large: 8pt;
@@ -102,6 +108,9 @@
     --timeline-point-size: 0.7rem;
     --timeline-point-hadjust: -0.54rem;
     --timeline-point-border: 2px solid;
+
+    --theme-button-bg: var(--header-bg-color);
+    --theme-button-fg: var(--header-bg-color);
   }
 }