feat: Updated colors, emojis, and animations

dusktreader · dusktreader · commit cdfb931ac60f · 2025-04-30T15:58:31.000-07:00
* Updated menu emojis
* Improved print controls for Plain
* Added menu collapse/expand
* Improved button colors
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## v6.0.1 - 2025-04-30
+* Updated menu emojis
+* Improved print controls for Plain
+* Added menu collapse/expand
+* Improved button colors
+
+
 ## v6.0.0 - 2025-04-30
 * Completely rewrote building mechanism using JS rather than Python
 * Added plain style resume
diff --git a/cv.html b/cv.html
@@ -12,11 +12,16 @@
 
     <div id="switchers" class="no-print">
       <div id="switcher-menus">
-        <button id="render-menu" class="switcher-menu">💾</button>
-        <button id="role-menu" class="switcher-menu">🖥</button>
-        <button id="size-menu" class="switcher-menu">🔍</button>
-        <button id="color-menu" class="switcher-menu">🔅</button>
-        <button id="format-menu" class="switcher-menu">💫</button>
+        <div id="main-menu">
+          <button class="switcher-menu">⚙</button>
+        </div>
+        <div id="sub-menu">
+          <button id="render-menu" class="switcher-menu">💾</button>
+          <button id="role-menu" class="switcher-menu">🖥</button>
+          <button id="size-menu" class="switcher-menu">🔍</button>
+          <button id="color-menu" class="switcher-menu">🖌</button>
+          <button id="format-menu" class="switcher-menu">💫</button>
+        </div>
       </div>
 
       <div id="switcher-list">
@@ -35,21 +40,21 @@
 
           <button class="switcher-button role-button" role="manager">
             <div class="button-internals">
-              <span class="switcher-button-emoji" id="role-manager-switcher-button-emoji">💻</span>
+              <span class="switcher-button-emoji" id="role-manager-switcher-button-emoji">👔</span>
               <span class="switcher-button-text" id="role-manager-switcher-button-text">Software Engineering Manager</span>
             </div>
           </button>
 
           <button class="switcher-button role-button" role="staff">
             <div class="button-internals">
-              <span class="switcher-button-emoji" id="role-staff-switcher-button-emoji">💻</span>
+              <span class="switcher-button-emoji" id="role-staff-switcher-button-emoji">⚕</span>
               <span class="switcher-button-text" id="role-staff-switcher-button-text">Staff Software Engineer</span>
             </div>
           </button>
 
           <button class="switcher-button role-button" role="senior">
             <div class="button-internals">
-              <span class="switcher-button-emoji" id="role-senior-switcher-button-emoji">💻</span>
+              <span class="switcher-button-emoji" id="role-senior-switcher-button-emoji">🕶</span>
               <span class="switcher-button-text" id="role-senior-switcher-button-text">Senior Software Engineer</span>
             </div>
           </button>
@@ -60,21 +65,21 @@
 
           <button class="switcher-button size-button" size="small">
             <div class="button-internals">
-              <span class="switcher-button-emoji" id="size-small-switcher-button-emoji">🔎</span>
+              <span class="switcher-button-emoji" id="size-small-switcher-button-emoji">👓</span>
               <span class="switcher-button-text" id="size-small-switcher-button-text">Small</span>
             </div>
           </button>
 
           <button class="switcher-button size-button" size="medium">
             <div class="button-internals">
-              <span class="switcher-button-emoji" id="size-medium-switcher-button-emoji">🔎</span>
+              <span class="switcher-button-emoji" id="size-medium-switcher-button-emoji">👌</span>
               <span class="switcher-button-text" id="size-medium-switcher-button-text">Medium</span>
             </div>
           </button>
 
           <button class="switcher-button size-button" size="large">
             <div class="button-internals">
-              <span class="switcher-button-emoji" id="size-large-switcher-button-emoji">🔎</span>
+              <span class="switcher-button-emoji" id="size-large-switcher-button-emoji">👁</span>
               <span class="switcher-button-text" id="size-large-switcher-button-text">Large</span>
             </div>
           </button>
@@ -85,28 +90,28 @@
 
           <button class="switcher-button color-button" color="light">
             <div class="button-internals">
-              <span class="switcher-button-emoji" id="color-light-switcher-button-emoji">📺</span>
+              <span class="switcher-button-emoji" id="color-light-switcher-button-emoji">🔅</span>
               <span class="switcher-button-text" id="color-light-switcher-button-text">Light</span>
             </div>
           </button>
 
           <button class="switcher-button color-button" color="night">
             <div class="button-internals">
-              <span class="switcher-button-emoji" id="color-night-switcher-button-emoji">📺</span>
+              <span class="switcher-button-emoji" id="color-night-switcher-button-emoji">🌖</span>
               <span class="switcher-button-text" id="color-night-switcher-button-text">Night</span>
             </div>
           </button>
 
           <button class="switcher-button color-button" color="blue">
             <div class="button-internals">
-              <span class="switcher-button-emoji" id="color-blue-switcher-button-emoji">📺</span>
+              <span class="switcher-button-emoji" id="color-blue-switcher-button-emoji">🫐</span>
               <span class="switcher-button-text" id="color-blue-switcher-button-text">Blue</span>
             </div>
           </button>
 
           <button class="switcher-button color-button" color="bold">
             <div class="button-internals">
-              <span class="switcher-button-emoji" id="color-bold-switcher-button-emoji">📺</span>
+              <span class="switcher-button-emoji" id="color-bold-switcher-button-emoji">📢</span>
               <span class="switcher-button-text" id="color-bold-switcher-button-text">Bold</span>
             </div>
           </button>
diff --git a/pyproject.toml b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "cv"
-version = "6.0.0"
+version = "6.0.1"
 description = "Build my resume page"
 readme = "README.md"
 requires-python = ">=3.13"
diff --git a/static/css/colors/blue.css b/static/css/colors/blue.css
@@ -65,10 +65,10 @@
   --main-link-color: var(--light-red-4);
   --main-background-color: var(--light-gray-1);
 
-  --button-color: var(--light-red-6);
-  --button-hover-color: var(--light-red-5);
-  --button-clicked-color: var(--light-green-3);
-  --button-text-color: var(--light-gray-2);
+  --button-color: var(--light-gray-1);
+  --button-hover-color: var(--light-gray-2);
+  --button-clicked-color: var(--light-blue-1);
+  --button-text-color: var(--light-red-6);
 
   --body-foreground-color: none;
   --body-background-color: none;
diff --git a/static/css/colors/bold.css b/static/css/colors/bold.css
@@ -65,10 +65,10 @@
   --main-link-color: var(--bold-blue3-5);
   --main-background-color: var(--bold-blue3-2);
 
-  --button-color: var(--bold-pink-5);
-  --button-hover-color: var(--bold-pink-6);
-  --button-clicked-color: var(--bold-gray-4);
-  --button-text-color: var(--bold-gray-2);
+  --button-color: var(--bold-purple-6);
+  --button-hover-color: var(--bold-purple-4);
+  --button-clicked-color: var(--bold-gray-5);
+  --button-text-color: var(--bold-purple-1);
 
   --body-foreground-color: none;
   --body-background-color: none;
diff --git a/static/css/colors/night.css b/static/css/colors/night.css
@@ -73,10 +73,11 @@
   --main-link-color: var(--night-blue-3);
   --main-background-color: var(--night-gray-6);
 
-  --button-color: var(--night-red-3);
-  --button-hover-color: var(--night-red-5);
-  --button-clicked-color: var(--night-green-3);
-  --button-text-color: var(--night-blue-6);
+  --button-color: var(--night-yellow-1);
+  --button-hover-color: var(--night-yellow-3);
+  --button-clicked-color: var(--night-indigo-1);
+  --button-text-color: var(--night-blue-6)
+  ;
 
   --body-foreground-color: none;
   --body-background-color: none;
diff --git a/static/css/formats/fancy.css b/static/css/formats/fancy.css
@@ -258,3 +258,15 @@
 #main a {
   color: var(--main-link-color);
 }
+
+
+/* Print Controls */
+
+@media print {
+  @page {
+    padding: 2em;
+  }
+  #container {
+    border: 0.1em solid black;
+  }
+}
diff --git a/static/css/formats/plain.css b/static/css/formats/plain.css
@@ -218,3 +218,19 @@ h2 {
   list-style-type: "\2771\00a0";
   list-style-position: outside;
 }
+
+:root {
+  --button-color: white;
+  --button-hover-color: silver;
+  --button-clicked-color: gray;
+  --button-text-color: black;
+}
+
+/* Print Controls */
+
+@media print {
+  @page {
+    padding: 2em;
+
+  }
+}
diff --git a/static/css/main.css b/static/css/main.css
@@ -57,18 +57,12 @@ body {
 
 /* Print Controls */
 
-@page {
-  margin: 1em;
-}
-
 @media print {
   .no-print, .no-print * {
     display: none !important;
   }
 
-  #container {
-    width: 100%;
-    height: 100%;
-    border: 0.1em solid black;
+  @page {
+    margin: 0;
   }
 }
diff --git a/static/css/switchers.css b/static/css/switchers.css
@@ -11,6 +11,10 @@
   align-items: end;
 }
 
+#sub-menu {
+  display: none;
+}
+
 #switcher-menus {
   display: flex;
   flex-direction: row;
@@ -114,5 +118,5 @@
 }
 
 #color-bold-switcher-button-emoji {
-  color: #716FC9;
+  color: #B72FB1;
 }
diff --git a/static/js/switchers.js b/static/js/switchers.js
@@ -3,17 +3,40 @@ import { makeElement } from "./tools.js";
 
 const head = document.getElementsByTagName('head')[0];
 
-const showDiv = (id) => {
+const hideButtons = () => {
   Array.from(document.getElementsByClassName("switcher-buttons")).map(e => {
-    e.style.removeProperty('display');
+    e.style.display = "none";
   });
+};
+
 
+const showButtons = (id) => {
+  hideButtons()
   if (id !== undefined) {
     document.getElementById(id).style.display = "flex";
   }
 };
 
 
+// Main menu
+
+const mainMenu = document.getElementById('main-menu');
+const subMenu = document.getElementById("sub-menu")
+mainMenu.addEventListener('mouseover', () => {
+  mainMenu.style.display = "none";
+  subMenu.style.display = "flex";
+});
+
+const switcherDiv = document.getElementById('switchers');
+switcherDiv.addEventListener('mouseout', (event) => {
+  if (!switcherDiv.contains(event.relatedTarget)) {
+    hideButtons()
+    mainMenu.style.display = "flex";
+    subMenu.style.display = "none";
+  }
+});
+
+
 // Role Controls
 
 Array.from(document.getElementsByClassName("role-button")).map( e => {
@@ -25,7 +48,7 @@ export const changeRole = (key) => {
 }
 
 const roleMenu = document.getElementById('role-menu').addEventListener('mouseover', () => {
-  showDiv("role-buttons");
+  showButtons("role-buttons");
 });
 
 
@@ -47,7 +70,7 @@ export const changeColor = (key) => {
 }
 
 const colorMenu = document.getElementById('color-menu').addEventListener('mouseover', () => {
-  showDiv("color-buttons");
+  showButtons("color-buttons");
 });
 
 
@@ -69,7 +92,7 @@ export const changeSize = (key) => {
 }
 
 const sizeMenu = document.getElementById('size-menu').addEventListener('mouseover', () => {
-  showDiv("size-buttons");
+  showButtons("size-buttons");
 });
 
 
@@ -84,7 +107,7 @@ export const render = (format) => {
 }
 
 const renderMenu = document.getElementById('render-menu').addEventListener('mouseover', () => {
-  showDiv("render-buttons")
+  showButtons("render-buttons")
 });
 
 
@@ -95,15 +118,5 @@ Array.from(document.getElementsByClassName("format-button")).map( e => {
 });
 
 const formatMenu = document.getElementById('format-menu').addEventListener('mouseover', () => {
-  showDiv("format-buttons")
-});
-
-
-
-
-const switcherDiv = document.getElementById('switchers');
-switchers.addEventListener('mouseout', (event) => {
-  if (!switcherDiv.contains(event.relatedTarget)) {
-    showDiv()
-  }
+  showButtons("format-buttons")
 });

Original file line number	Diff line number	Diff line change
`@@ -57,18 +57,12 @@ body {`
`57`	`57`
`58`	`58`	`/* Print Controls */`
`59`	`59`
`60`		`-@page {`
`61`		`- margin: 1em;`
`62`		`-}`
`63`		`-`
`64`	`60`	`@media print {`
`65`	`61`	`.no-print, .no-print * {`
`66`	`62`	`display: none !important;`
`67`	`63`	`}`
`68`	`64`
`69`		`- #container {`
`70`		`- width: 100%;`
`71`		`- height: 100%;`
`72`		`- border: 0.1em solid black;`
	`65`	`+ @page {`
	`66`	`+ margin: 0;`
`73`	`67`	`}`
`74`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,10 @@`
`11`	`11`	`align-items: end;`
`12`	`12`	`}`
`13`	`13`
	`14`	`+#sub-menu {`
	`15`	`+ display: none;`
	`16`	`+}`
	`17`	`+`
`14`	`18`	`#switcher-menus {`
`15`	`19`	`display: flex;`
`16`	`20`	`flex-direction: row;`
`@@ -114,5 +118,5 @@`
`114`	`118`	`}`
`115`	`119`
`116`	`120`	`#color-bold-switcher-button-emoji {`
`117`		`- color: #716FC9;`
	`121`	`+ color: #B72FB1;`
`118`	`122`	`}`