update HTML core and CSS styles

Sup2point0 · May 3, 2024 · d8026c0 · d8026c0
1 parent 9c95260
commit d8026c0
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 37 deletions.
diff --git a/quarkdown/resources/core.html b/quarkdown/resources/core.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 
-<!-- Quarkdown Core v1.7.2 -->
+<!-- Quarkdown Core v1.7.3 -->
 <html>
 
 <head>
@@ -10,6 +10,7 @@
   <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/Sup2point0/Assort/origin/.assets/profiles/Purple Portal.png">
   <link rel="stylesheet" type="text/css" href="https://raw.githack.com/Sup2point0/supcode/sup/resources/Nova/Nova.css">
   <link rel="stylesheet" type="text/css" href="https://raw.githack.com/Sup2point0/Quarkdown/main/quarkdown/resources/styles/essence.css">
+  <link rel="stylesheet" type="text/css" href="https://raw.githack.com/Sup2point0/Quarkdown/main/quarkdown/resources/styles/assort.css">
   {styles}
 
   <!-- we use this endpoint for security -->
@@ -23,9 +24,9 @@
     <ul>
       <div class="left">
         <li id="github-icon">
-          <a href="https://github.com/Sup2point0/Assort">
+          <a href="https://github.com/Sup2point0/Assort"> <div class="nav-cell">
             <img height="42rem" src="https://raw.githubusercontent.com/Sup2point0/sup2point0.github.io/sup/.assets/icons/github-light.svg">
-          </a>
+          </div> </a>
         </li>
         <li id="assort">
           <a href="https://sup2point0.github.io/assort"> <div class="nav-cell"> Assort </div> </a>

diff --git a/quarkdown/resources/styles/default.css b/quarkdown/resources/styles/default.css
@@ -31,7 +31,7 @@ h2 {
   font-weight: 600;
   border-bottom: 3.5px solid var(--pink-elec);
 }
-h2[class="dark"] {
+.dark h2 {
   border-bottom: 3.5px solid var(--teal-elec);
 }
 h3 {
@@ -61,10 +61,24 @@ th {
 em {
   font-variation-settings: "slnt" -2;
 }
-h1 rem, h2 rem, h3 rem {
+h1, h2, h3 {
   font-variation-settings: "slnt" -4;
 }
 
 strong {
   font-weight: bolder;
 }
+
+/* specific */
+#footer {
+  width: 100%;
+  margin-top: 1rem;
+  padding: 2rem 0rem;
+  background-color: var(--grey-spirit);
+  text-align: center;
+  color: var(--grey-storm);
+  font-family: var(--font-flavour);
+}
+.dark #footer {
+  background-color: #00060e;
+}
diff --git a/quarkdown/resources/styles/essence.css b/quarkdown/resources/styles/essence.css
@@ -3,7 +3,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..700;1,300..700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
 
-/* root */
+/* ROOT */
 html {
   --font-title: 'Geologica', 'Segoe UI Semibold', system-ui, sans-serif;
   --font-head: 'Montserrat', 'Segoe UI Semibold', system-ui, sans-serif;
@@ -12,65 +12,92 @@ html {
   --font-flavour: 'Abel', 'Segoe UI', system-ui, sans-serif;
 }
 
-/* core */
+/* CORE */
 td {
   border: 1px solid var(--grey-nova);
 }
 
+/* LINKS */
 a {
   text-decoration: none;
 }
 p a {
   display: inline-block;
   position: relative;
-  color: var(--blue-cresc);
+  color: var(--blue-nova);
   transition: .2s;
 }
+.dark p a {
+  color: var(--blue-cresc)
+}
 p a:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 0.05rem;
-  background-color: var(--blue-nova);
+  background-color: var(--pink-elec);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform .2s ease-out;
 }
+.dark p a:after {
+  background-color: var(--blue-nova)
+}
 p a:hover {
-  color: var(--blue-nova);
+  color: var(--pink-elec);
+}
+.dark p a:hover {
+  color: var(--blue-nova)
 }
 p a:hover:after {
   transform: scaleX(1);
   transform-origin: left;
 }
 p a:visited {
+  color: var(--lilac-nova);
+}
+.dark p a:visited {
   color: var(--lilac-cresc);
 }
 p a:visited:after {
+  background-color: var(--pink-elec);
+}
+.dark p a:visited:after {
   background-color: var(--lilac-nova);
 }
 p a:visited:hover {
+  color: var(--pink-elec);
+}
+.dark p a:visited:hover {
   color: var(--lilac-nova);
 }
 
+/* NAV */
 nav {
-  --col-nav: rgb(0 0 0 / 69%);
-  /* width: 100%; */
+  /* use as backup in case gradients break */
+  --col-nav: var(--blue-nova);
+  --col-nav-upper: color-mix(in srgb, var(--blue-nova) 100%, transparent);
+  --col-nav-lower: color-mix(in srgb, var(--blue-nova) 96%, transparent);
+}
+.dark nav {
+  --col-nav: #000;
+  --col-nav-upper: rgb(0 0 0 / 69%);
+  --col-nav-lower: rgb(0 0 0 / 69%);
 }
 
 nav ul {
   position: fixed;
   z-index: 2;
   top: 0;
-  width: 100vw;
+  width: 93vw;
   max-width: 100%;
   margin: 0;
-  padding: 0.69rem 10rem 0.42rem 4rem;
-  overflow: hidden;
-  overflow-x: hidden;
+  padding: 0.69rem 4rem 0.2rem;
+  /* overflow: hidden; */
   background-color: var(--col-nav);
+  background: linear-gradient(to bottom, var(--col-nav-upper), var(--col-nav-lower));
   list-style-type: none;
 }
 nav ul li {
@@ -89,14 +116,18 @@ nav ul .right li {
   margin: 0 0.42rem;
   padding: 0.42rem 1rem;
   color: #fff;
-  border-radius: 1rem;
-  transition: 0.16s ease-out;
+  border-radius: 0.69rem;
+  transition: 0.16s;
 }
 .nav-cell:hover {
+  background-color: var(--blue-ocean);
+  background-color: color-mix(in srgb, var(--blue-ocean) 42%, transparent);
+}
+.dark .nav-cell:hover {
   background-color: var(--pink-elec);
 }
 
-/* specific */
+/* SPECIFIC */
 #header {
   padding-top: 4.2rem;
 }
@@ -107,13 +138,3 @@ nav ul .right li {
     margin: 0 20px;
   }
 }
-
-#footer {
-  width: 100%;
-  margin-top: 1rem;
-  padding: 2rem 0rem;
-  background-color: #00060e;
-  text-align: center;
-  color: var(--grey-nova);
-  font-family: var(--font-flavour);
-}
diff --git a/tests/test.html b/tests/test.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 
-<!-- Quarkdown Core v1.7.0 -->
+<!-- Quarkdown Core v1.7.3 -->
 <html>
 
 <head>
@@ -11,19 +11,20 @@
   <link rel="stylesheet" type="text/css" href="nova.css">
   <link rel="stylesheet" type="text/css" href="../quarkdown/resources/styles/essence.css">
   <link rel="stylesheet" type="text/css" href="../quarkdown/resources/styles/default.css">
+  <link rel="stylesheet" type="text/css" href="../quarkdown/resources/styles/assort.css">
 </head>
 
-<body class="dark">
+<body class="light">
 
   <nav>
     <ul>
       <div class="left">
-        <li id="github-icon">
-          <a href="https://github.com/Sup2point0/Assort">
-            <img height="42rem" src="https://raw.githubusercontent.com/Sup2point0/sup2point0.github.io/sup/.assets/icons/github-light.svg">
-          </a>
+        <li id="nav-github-icon">
+          <a href="https://github.com/Sup2point0/Assort"> <div class="nav-cell">
+            <img height="30rem" src="https://raw.githubusercontent.com/Sup2point0/sup2point0.github.io/sup/.assets/icons/github-light.svg">
+          </div> </a>
         </li>
-        <li id="assort">
+        <li id="nav-assort">
           <a href="https://sup2point0.github.io/assort"> <div class="nav-cell"> Assort </div> </a>
         </li>
       </div>
@@ -52,7 +53,7 @@ <h1>Testing the Tests</h1>
       <h2>What is a test?</h2>
       <p>The quick brown fox jumps over the lazy dog.</p>
       <h2>But really, what is a test?</h2>
-      <p>The quick brown fox jumps over the lazy dog!</p>
+      <p><a href=".">The quick brown fox jumps over the lazy dog!</a></p>
       <h3>Lorem Ipsum Ipsum Lorem</h3>
       <p>TESTING TESTING TESTING</p>
     </div>