feat: simplify css

Author: aorith

assets/css/01_reset.css

@@ -28,6 +28,9 @@ h6 {
 
 h1 {
   font-size: var(--fsize-xl);
+  color: var(--accent);
+  border-bottom: 2px solid var(--accent);
+  width: 100%;
 }
 
 h2 {
@@ -52,6 +55,7 @@ h6 {
 
 p {
   text-wrap: pretty;
+  margin: 0 0 var(--vertical-0);
 }
 
 ul,

assets/css/02_main.css

@@ -8,22 +8,6 @@ body {
   height: 100dvh;
 }
 
-h2 {
-  color: var(--warm);
-}
-h3 {
-  color: var(--cold);
-}
-h4 {
-  color: var(--mild);
-}
-h5 {
-  color: var(--calm);
-}
-h6 {
-  color: var(--fg-1);
-}
-
 p {
   margin: 0 0 var(--vertical-0);
 }
@@ -45,48 +29,6 @@ button:hover {
   background: var(--bg-0);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-wrap: balance;
-  margin-bottom: 1rem;
-  font-weight: 700;
-}
-
-h1 {
-  color: var(--accent);
-  border-bottom: 2px solid var(--accent);
-  width: 100%;
-}
-
-h2 {
-  color: var(--warm);
-}
-
-h3 {
-  color: var(--cold);
-}
-
-h4 {
-  color: var(--mild);
-}
-
-h5 {
-  color: var(--calm);
-}
-
-h6 {
-  color: var(--fg-1);
-}
-
-p {
-  text-wrap: pretty;
-  margin: 0 0 var(--vertical-0);
-}
-
 abbr {
   cursor: help;
 }

assets/css/03_layout.css

@@ -3,59 +3,53 @@ body {
 
   display: grid;
 
-  grid-template-areas: "nav content";
-  grid-template-rows: 1fr;
-  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    "nav"
+    "content";
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr;
 }
 
 #content {
   grid-area: content;
   display: grid;
 
   height: 100dvh;
-  overflow: auto;
+  margin: 0 auto;
 }
 
 nav {
   grid-area: nav;
   display: flex;
-  flex-direction: row-reverse;
-  align-content: right;
-  align-items: flex-start;
-}
-
-nav fieldset {
-  display: flex;
-  gap: 2px;
-  flex-direction: column;
+  gap: 8px;
+  flex-direction: row;
+  align-content: center; /* vertical align */
+  align-items: center;
   justify-content: center;
-  align-items: left;
-  padding: 0.5rem 0.8rem 0.8rem 0.8rem;
-  margin: 1rem 1.8rem 1rem 1.8rem;
-  background-color: var(--bg-0);
-  border: 2px solid var(--accent);
-  border-radius: 0px;
-  box-shadow: none;
+  justify-items: center;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  background-color: var(--bg-1);
+  border-bottom: 1px solid var(--border);
 }
 
-nav fieldset legend {
-  font-family: var(--font-text2);
-  font-size: var(--fsize-xs);
-  font-style: italic;
-  color: var(--fg-1);
-  padding: 0 0.3rem 0 0.3rem;
+nav div {
+  width: var(--view-width);
+  max-width: var(--view-width);
+  margin: 0 auto;
+  padding-left: 0.8rem;
 }
 
-nav fieldset label {
+nav label {
   color: var(--fg-0);
   font-size: var(--fsize-s);
   font-family: var(--font-text2);
+  font-weight: 500;
   cursor: pointer;
   padding: 2px;
 }
 
-nav fieldset label:hover {
-  color: var(--accent-hover) !important;
+nav label:hover {
+  color: var(--accent-hover);
   text-decoration: underline;
 }
 
@@ -77,14 +71,14 @@ input[type="radio"].nav {
   padding: 1rem;
 }
 
-#radio-parse:checked ~ nav fieldset label[for="radio-parse"],
-#radio-overview:checked ~ nav fieldset label[for="radio-overview"],
-#radio-timings:checked ~ nav fieldset label[for="radio-timings"],
-#radio-headers:checked ~ nav fieldset label[for="radio-headers"],
-#radio-vcllogtree:checked ~ nav fieldset label[for="radio-vcllogtree"],
-#radio-reqbuild:checked ~ nav fieldset label[for="radio-reqbuild"] {
+#radio-parse:checked ~ nav label[for="radio-parse"],
+#radio-overview:checked ~ nav label[for="radio-overview"],
+#radio-timings:checked ~ nav label[for="radio-timings"],
+#radio-headers:checked ~ nav label[for="radio-headers"],
+#radio-vcllogtree:checked ~ nav label[for="radio-vcllogtree"],
+#radio-reqbuild:checked ~ nav label[for="radio-reqbuild"] {
   color: var(--accent);
-  font-weight: bold;
+  text-decoration: underline;
 }
 
 #radio-parse:checked ~ #content #parse-view,
@@ -95,38 +89,3 @@ input[type="radio"].nav {
 #radio-reqbuild:checked ~ #content #reqbuild-view {
   display: block;
 }
-
-@media (max-width: 980px) {
-  body {
-    grid-template-areas:
-      "nav"
-      "content";
-    grid-template-rows: auto 1fr;
-    grid-template-columns: 1fr;
-  }
-
-  #content {
-    overflow: visible;
-  }
-
-  nav {
-    flex-direction: row;
-    align-content: center;
-    align-items: center;
-    padding: 0 0 2px 0;
-  }
-
-  nav fieldset {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 6px;
-    align-items: center;
-    margin: 0 0.4rem 0 0.4rem;
-    padding: 0.3rem 0.4rem 0.4rem 0.4rem;
-  }
-
-  .view-content {
-    max-width: 100vw;
-    padding: 0.6rem;
-  }
-}

assets/css/05_headers.css

@@ -109,11 +109,3 @@ div.hdr-table {
   background: var(--deleted) !important;
   text-decoration: line-through !important;
 }
-
-@media (max-width: 980px) {
-  div.hdr-table {
-    & abbr input {
-      padding: 2px;
-    }
-  }
-}

assets/css/08_timeline.css

@@ -1,15 +1,9 @@
 div.timeline {
   display: inline-block;
-  width: 83vw;
+  width: var(--view-width);
   max-width: var(--view-width);
 }
 
-@media (max-width: 980px) {
-  div.timeline {
-    width: 98vw;
-  }
-}
-
 /* Default classes from svg-timeline */
 .tl-bg {
   fill: #ffffff;

assets/css/09_sequence.css

@@ -1,11 +1,5 @@
 div.sequence {
   display: inline-block;
-  width: 83vw;
+  width: var(--view-width);
   max-width: var(--view-width);
 }
-
-@media (max-width: 980px) {
-  div.sequence {
-    width: 98vw;
-  }
-}

assets/templates/layout/main_layout.html

@@ -24,15 +24,14 @@
 		<input type="radio" class="nav" name="view" id="radio-timings">
 		<input type="radio" class="nav" name="view" id="radio-reqbuild">
 		<nav>
-			<fieldset>
-				<legend>Menu</legend>
+			<div>
 				<label for="radio-parse">PARSE</label>
 				<label for="radio-overview">Overview</label>
 				<label for="radio-vcllogtree">LogTree</label>
 				<label for="radio-headers">Headers</label>
 				<label for="radio-timings">Timings</label>
 				<label for="radio-reqbuild">ReqBuild</label>
-			</fieldset>
+			</div>
 		</nav>
 
 		<div id="content">