Night owl blue update

ReduxFlakes · Feb 25, 2024 · ef6a4ec · ef6a4ec
1 parent e918a67
commit ef6a4ec
Show file tree

Hide file tree

Showing 11 changed files with 278 additions and 102 deletions.
diff --git a/src/_data/nav.json b/src/_data/nav.json
@@ -1,12 +1,24 @@
 {
   "navbar": [
+    {
+      "title": "home",
+      "url": "/"
+    },
     {
       "title": "blog",
       "url": "/blog"
     },
     {
-      "title": "bookmarks",
-      "url": "/bookmarks"
+      "title": "opinions",
+      "url": "/opinions"
+    },
+    {
+      "title": "links",
+      "url": "/links"
+    },
+    {
+      "title": "projects",
+      "url": "/projects"
     },
     {
       "title": "design",

diff --git a/src/_data/site.json b/src/_data/site.json
@@ -1,6 +1,6 @@
 {
   "title": "ReduxFlakes",
-  "description": "Open source, privacy, and security discussions, Android development and rooting, vintage hardware/software, anxiety and socialization, music collection and setup, and much more.",
+  "description": "Open source, privacy, and security discussions, Android development and rooting, vintage hardware/software, anxiety, music collection and setup, and much more.",
   "url": "https://reduxflakes.neocities.org",
   "lang": "en"
 }
diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk
@@ -1,4 +1,4 @@
 <footer class="site-footer status-bar pod">
 &copy; 2024 ReduxFlakes - v{{ pkg.version }} - <a href="/privacy">Privacy Statement</a>
-    <a href="/accessibility">Accessibility Statement</a>
+    {# <a href="/accessibility">Accessibility Statement</a> #}
 </footer>
diff --git a/src/_includes/header.njk b/src/_includes/header.njk
@@ -1,10 +1,9 @@
 <header class="site-header">
-    <a href="/">
-        <img src="/static/branding/header.png" alt="Banner saying 'ReduxFlakes' - 'Vintage tech, digital opsec, Android modding' with Linux mascot Xenia on the right side with a laptop. Art made by @rinidisc">
-    </a>
+    <h1>ReduxFlakes</h1>
+    <p class="enphase">android, opsec, open source, retro tech, music, design, piracy</p>
 </header>
 <nav class="site-navbar">
-    {# {% for navbar in nav.navbar %}
-        <a class="navbar__link" href="{{ navbar.url }}">{{ navbar.title }}</a>
-    {% endfor %} #}
+    {% for navbar in nav.navbar %}
+        <a class="navbar__link" {% if (navbar.url != "/" and page.url.startsWith(navbar.url)) or page.url == navbar.url %}aria-current="page"{% endif %} href="{{ navbar.url }}">{{ navbar.title }}</a>
+    {% endfor %}
 </nav>
diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
@@ -3,12 +3,11 @@
     {% include "head.njk" %}
     <body>
         {% include "header.njk" %}
-        <main class="main-content">
-            <article id="main">
-                {% block layout %}
-                    {{ content | safe }}
-                {% endblock %}
-            </article>
+        <main class="main-content {% if main_class %}{{main_class}}{% endif %}">
+
+            {% block layout %}
+                {{ content | safe }}
+            {% endblock %}
         </main>
         {% include "footer.njk" %}
         <script data-goatcounter="https://reduxflakes.goatcounter.com/count"

diff --git a/src/css/style.css b/src/css/style.css
@@ -1,104 +1,157 @@
 :root {
-  --clr-outset-bg: hsl(198, 10%, 10%);
-  --clr-inset-bg: hsl(198, 10%, 25%);
-  --clr-inset-color: rgb(246, 246, 246);
-  --clr-stroke: rgba(255, 255, 255, 0.25);
-
-  /* Typography - these are fluid type scales that were generated by utopia */
-  --step--1: clamp(0.8333rem, 0.7909rem + 0.1616vi, 0.9rem);
-  --step-0: clamp(1rem, 0.9205rem + 0.303vi, 1.125rem);
-  --step-1: clamp(1.2rem, 1.0688rem + 0.5vi, 1.4063rem);
-  --step-2: clamp(1.44rem, 1.2378rem + 0.7705vi, 1.7578rem);
-  --step-3: clamp(1.728rem, 1.4294rem + 1.1376vi, 2.1973rem);
-  --step-4: clamp(2.0736rem, 1.6453rem + 1.6315vi, 2.7466rem);
-  --step-5: clamp(2.4883rem, 1.887rem + 2.2907vi, 3.4332rem);
-
-  /* Spacing - these are fluid space scales that were generated by utopia */
-  --sp-3xs: clamp(0.25rem, 0.2102rem + 0.1515vi, 0.3125rem);
-  --sp-2xs: clamp(0.5rem, 0.4602rem + 0.1515vi, 0.5625rem);
-  --sp-xs: clamp(0.75rem, 0.6705rem + 0.303vi, 0.875rem);
-  --sp-s: clamp(1rem, 0.9205rem + 0.303vi, 1.125rem);
-  --sp-m: clamp(1.5rem, 1.3807rem + 0.4545vi, 1.6875rem);
-  --sp-l: clamp(2rem, 1.8409rem + 0.6061vi, 2.25rem);
-  /* One-up pairs */
-  --sp-3xs-2xs: clamp(0.25rem, 0.0511rem + 0.7576vi, 0.5625rem);
-  --sp-2xs-xs: clamp(0.5rem, 0.2614rem + 0.9091vi, 0.875rem);
-  --sp-xs-s: clamp(0.75rem, 0.5114rem + 0.9091vi, 1.125rem);
-  --sp-s-m: clamp(1rem, 0.5625rem + 1.6667vi, 1.6875rem);
-  --sp-m-l: clamp(1.5rem, 1.0227rem + 1.8182vi, 2.25rem);
+  --clr-outset-bg: hsl(250, 65%, 12%);
+  --clr-outset-stroke: hsl(250, 65%, 35%);
+  --clr-inset-bg: hsl(250, 67%, 8%);
+  --clr-inset-color: hsl(249, 64%, 98%);
+
+  --clr-primary: #ff69a5;
+  --sh-outset: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
+  --sp-breakpoint: 1080px;
 }
 
-body {
-  background: var(--clr-outset-bg);
-  color: var(--clr-inset-color);
-  font: var(--step-0) / 1.5 "Lato", system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-    sans-serif;
-  max-width: 920px;
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  margin: var(--sp-s) auto;
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+ul[class],
+ol[class] {
+  padding: 0;
+}
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
 }
 
-a {
-  color: var(--clr-accent-900);
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
 }
 
-a:hover {
-  text-decoration: underline dashed;
-  background: var(--clr-hover-action);
+body {
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+ul[class],
+ol[class] {
+  list-style: none;
+}
+a:not([class]) {
+  text-decoration-skip-ink: auto;
 }
 
-img {
-  display: block;
+img,
+picture {
   max-width: 100%;
+  display: block;
 }
-
-h1 {
-  font-size: var(--step-5);
-  margin-bottom: var(--sp-xs);
+article > * + * {
+  margin-top: 1em;
+  text-align: justify;
 }
-
-h2 {
-  font-size: var(--step-4);
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+img:not([alt]) {
+  filter: blur(10px);
+}
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 
-h3 {
-  font-size: var(--step-3);
+body {
+  display: grid;
+  gap: 0.75rem;
+  background: var(--clr-outset-bg);
+  color: var(--clr-inset-color);
+  font: 1rem "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  max-width: var(--sp-breakpoint);
+  margin: 0 auto;
 }
 
-h4 {
-  font-size: var(--step-2);
+a {
+  color: var(--clr-primary);
 }
 
-h5 {
-  font-size: var(--step-1);
+a:hover {
+  text-decoration: underline dashed;
 }
 
-h6 {
-  font-size: var(--step-0);
+img {
+  display: block;
+  max-width: 100%;
 }
 
 small {
   font-size: var(--step--1);
 }
 
+.site-header {
+  --_header-stroke: 2px;
+  padding: 1rem;
+  border-right: var(--_header-stroke) solid var(--clr-outset-stroke);
+  border-bottom: var(--_header-stroke) solid var(--clr-outset-stroke);
+  border-left: var(--_header-stroke) solid var(--clr-outset-stroke);
+  text-align: center;
+  border-radius: 0 0 12px 12px;
+  box-shadow: var(--sh-outset);
+  background: url("/static/branding/header_blue_sky.png");
+  background-size: cover;
+}
+
 .site-navbar {
   display: flex;
-  gap: 0.5rem;
-  padding: 0 0.5rem;
-  background: var(--clr-neutral-500);
-  border-bottom: 1px solid var(--clr-neutral-300);
+  max-width: fit-content;
+  margin: 0 auto;
+  gap: 0.25rem;
+  background: hsl(250, 50%, 25%);
+  border-radius: 50px;
+  padding: 0.25rem 0.25rem;
+  box-shadow: var(--sh-outset);
 }
 
-.navbar_link {
-  padding: 0.25rem;
-  text-transform: capitalize;
+.navbar__link {
+  padding: 0.25rem 0.5rem;
   text-decoration: none;
-  font-weight: bold;
+  font-weight: 500;
+  border-radius: 32px;
+  color: var(--clr-inset-color);
+  transition: all 125ms ease-in-out;
+}
+
+.navbar__link:hover:not([aria-current="page"]) {
+  opacity: 0.5;
+}
+
+.navbar__link[aria-current="page"] {
+  background: rgba(255, 255, 255, 0.25);
 }
 
 .main-content {
   background: var(--clr-inset-bg);
+  border: 2px solid var(--clr-outset-stroke);
+  border-radius: 12px;
+  padding: 1rem;
+  box-shadow: var(--sh-outset);
 }
 
 #main :first-child {
@@ -110,8 +163,27 @@ small {
 }
 
 .site-footer {
-  padding: 0.25rem 0.5rem;
   text-align: center;
-  border-top: 1px solid var(--clr-neutral-300);
-  background: var(--clr-neutral-500);
+  margin-bottom: 1rem;
+}
+
+.site-footer a {
+  color: inherit;
+}
+
+.enphase {
+  font-size: 1.15em;
+  font-weight: 300;
+  font-style: italic;
+}
+
+.sidebar > * + * {
+  margin-top: 0.5rem;
+}
+
+.cute-pod {
+  padding: 1rem;
+  border-radius: 6px;
+  border-bottom: 2px dashed var(--clr-primary);
+  background: rgba(255, 255, 255, 0.1);
 }
diff --git a/src/index.md b/src/index.md