chore: fix css and noprint class

src/components/NavMenu.vue

@@ -5,7 +5,7 @@
 	>
 		<button
 			type="button"
-			class="flex-none h-6 mt-1 lg:hidden px-2 text-gray-300 hover:text-white focus:outline-none focus:text-white"
+			class="flex-none h-6 mt-1 lg:hidden px-2 text-gray-900 dark:text-gray-300 hover:text-gray-500 focus:outline-none focus:text-gray-500"
 			:class="{ 'transition transform-180': isOpen }"
 			@click.prevent="isOpen = !isOpen"
 		>

src/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-<nav class="bg-white border-gray-200 px-2">
+<nav class="noprint bg-white border-gray-200 px-2">
   <div class="container mx-auto flex flex-wrap items-center justify-between">
   <a href="#" class="flex">
     <svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>

src/styles/main.css

@@ -9,7 +9,6 @@ body,
 html.dark {
   background: #27272a; /*bg-gray-800*/
 	color: #f0f0f0;
-	currentColor: #f0f0f0;
 }
 .right-item ul li {
 	margin-left: 1em;
@@ -21,7 +20,7 @@ html.dark {
 .dark .features li b {
 	color: #A5B4FC; /* indigo-400 */
 }
-li a, link,
+li a, .link,
 .task a,h3 a,.link a {
   color: #4F46E5; /*indigo-600*/
 	text-decoration: underline;
@@ -30,7 +29,18 @@ li a, link,
 .dark .task a,.dark h3 a,.dark .link a {
 	color: #A5B4FC; /* indigo-400 */
 }
-.project-purpose, .project-name {
+.project-name {
+  padding: 4px 11px;
+	margin-bottom: 8px;
+	border-radius: 20px;
+  background-color: #F3F4F6; /* gray-100 */
+	font-size: 1.05em;
+	font-weight: 600;
+}
+.dark .project-name {
+  background-color: #374151; /* gray-500 */
+}
+.project-purpose {
 	width: 100%;
   padding: 4px 11px;
 	border-radius: 20px;
@@ -41,11 +51,19 @@ li a, link,
 	font-size: 1.02em;
 	font-weight: 600;
 }
-.dark .project-purpose, .dark .project-name {
+.dark .project-purpose {
   background-color: #374151; /* gray-500 */
 	border: 1px solid #9CA3AF; /* gray-400 */
 	color: #A5B4FC; /* indigo-400 */
 }
+.btn-toggle {
+	border-radius: 20px;
+  padding: 4px 8px;
+	border: 1px solid #A5B4FC; /* indigo-400 */
+}
+.dark .btn-toggle {
+	border: 1px solid #9CA3AF; /* gray-400 */
+}
 .dark svg {
 	fill: #f0f0f0;
 }
@@ -54,7 +72,7 @@ li a, link,
 	border: 1px solid #374151; /* gray-500 */
 }
 .dark .openbox {
-	border: 1px solid #F3F4F66; /* gray-100 */
+	border: 1px solid #F3F4F6; /* gray-100 */
 }
 .msg-box {
 	border-radius: 40px !important;
@@ -146,60 +164,6 @@ progress::-webkit-progress-value {
   border-radius: 10px 0 0 10px;
   background-image: linear-gradient(36deg, #d1fae5, #818cf8);
 }
-#dinoeatlife-headline::before {
-  display: inline-block;
-  height: 30px;
-  width: 30px;
-  position: relative;
-  bottom: -8px;
-  content: "";
-  background-image: url("/images/assets/dinoeatlife-logo.png");
-  background-position: center;
-  background-size: contain;
-  background-repeat: no-repeat;
-  margin-right: 12px;
-}
-
-#chrisko-headline::before {
-  display: inline-block;
-  height: 30px;
-  width: 30px;
-  position: relative;
-  bottom: -8px;
-  content: "";
-  background-image: url("/images/assets/chrisko-icon.png");
-  background-position: center;
-  background-size: contain;
-  margin-right: 12px;
-  border-radius: 50%;
-}
-
-#mealio-headline::before {
-  display: inline-block;
-  height: 30px;
-  width: 30px;
-  position: relative;
-  bottom: -8px;
-  content: "";
-  background-image: url("/images/assets/mealio-icon.png");
-  background-position: center;
-  background-size: contain;
-  margin-right: 12px;
-}
-
-#headsup-headine::before {
-  display: inline-block;
-  height: 30px;
-  width: 30px;
-  position: relative;
-  bottom: -4px;
-  content: "";
-  background-image: url("/images/assets/headsup-logo.svg");
-  background-position: center;
-  background-size: contain;
-  background-repeat: no-repeat;
-  margin-right: 12px;
-}
 
 .m-ul {
   margin-top: 0 !important;
@@ -219,6 +183,14 @@ progress::-webkit-progress-value {
   /* margin-top: 2em; */
   text-transform: uppercase;
 }
+.prose h3 {
+  font-size: 1em;
+  font-weight: 500;
+  line-height: 1.3333333;
+	border-bottom: 1px dashed #9CA3AF; /* gray-400 */ 
+  /* color: #a5b4fc;
+  margin: 5px 5px 0 0; */
+}
 #cv-wrapper {
 	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; 
 	/* box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; */
@@ -236,11 +208,14 @@ img.project {
 	width: 10em;
 	max-height: 5em;
 }
+hr {
+  border-style: dotted;
+}
 @media print {
 	* {
 		line-height: 1em !important;
 	}
-	.main-container { max-width: fit-content !important;}
+	.main-container { max-width: fit-content !important; margin-top: 0 !important;}
   .noprint {
     visibility: hidden; 
 		display: none;