major redesign

ReduxFlakes · Oct 28, 2024 · ec12232 · ec12232
1 parent c13a61f
commit ec12232
Show file tree

Hide file tree

Showing 34 changed files with 411 additions and 81 deletions.
diff --git a/src/_data/nav.js b/src/_data/nav.js
@@ -1,12 +1,25 @@
 export default {
   headernav: [
     {
-      title: "Blog",
+      title: "Projects",
+      url: "/project/",
+    },
+    {
+      title: "Design",
+      url: "/design/",
+    },
+
+    {
+      title: "Uses",
+      url: "/uses/",
+    },
+    {
+      title: "Archive",
       url: "/posts/",
     },
     {
-      title: "Slashes",
-      url: "/slashes/",
+      title: "About",
+      url: "/about/",
     },
   ],
 };
diff --git a/src/_data/site.js b/src/_data/site.js
@@ -1,6 +1,6 @@
 export default {
   title: "ReduxFlakes",
-  description: "Fireplace in the mall",
+  description: "Full stack developer from Portugal and advocate for privacy.",
   url: "https://reduxflakes.neocities.org",
   lang: "en",
   neolink_image: "/static/images/neolink.png",

diff --git a/src/_data/stack.js b/src/_data/stack.js
@@ -0,0 +1,64 @@
+export default {
+  stack: [
+    {
+      icon: "windows",
+      title: "Windows",
+    },
+    {
+      icon: "android",
+      title: "Android",
+    },
+    {
+      icon: "html5",
+      title: "HTML",
+    },
+    {
+      icon: "css3",
+      title: "CSS",
+    },
+    {
+      icon: "firefox",
+      title: "Firefox",
+    },
+    {
+      icon: "figma",
+      title: "Figma",
+    },
+    {
+      icon: "eleventy",
+      title: "Eleventy",
+    },
+    {
+      icon: "kotlin",
+      title: "Kotlin",
+    },
+    {
+      icon: "vs-code",
+      title: "VS Code",
+    },
+    {
+      icon: "git",
+      title: "Git",
+    },
+    {
+      icon: "java",
+      title: "Java",
+    },
+    {
+      icon: "archlinux",
+      title: "Arch Linux",
+    },
+    {
+      icon: "c-language",
+      title: "C",
+    },
+    {
+      icon: "unity",
+      title: "Unity",
+    },
+    {
+      icon: "npm",
+      title: "NPM",
+    },
+  ],
+};
diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
@@ -0,0 +1,8 @@
+<header class="app-header">
+    <a href="/" class="app-header__pilot">{{site.title}}</a>
+    <nav class="app-navigation">
+        {% for item in nav.headernav %}
+            <a class="app-navigation__link" href="{{item.url}}">{{item.title}}</a>
+        {% endfor %}
+    </nav>
+</header>
diff --git a/src/_includes/partials/nav.njk b/src/_includes/partials/nav.njk
diff --git a/src/_includes/partials/topnav.njk b/src/_includes/partials/topnav.njk
diff --git a/src/_includes/styles/base.css b/src/_includes/styles/base.css
@@ -54,7 +54,7 @@ button {
 body {
   background-color: var(--background);
   color: var(--on-background);
-  font: var(--base-font-size) / 1.5 var(--base-font-family);
+  font: var(--base-font-size) / 1.5 var(--font-family);
   padding: var(--space-m);
   max-width: var(--size-breakpoint);
   margin: 0 auto;
@@ -66,12 +66,10 @@ h3,
 h4,
 h5,
 h6 {
+  letter-spacing: -0.03em;
+  color: var(--on-background-strong);
   font-family: var(--heading-font-family);
-}
-
-h5,
-h6 {
-  font-weight: normal;
+  font-weight: 700;
 }
 
 strong,
@@ -93,6 +91,35 @@ a:hover {
   text-decoration: none;
 }
 
+.app-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.app-header__pilot {
+  font-size: 1.25em;
+  font-weight: 500;
+  color: var(--on-background-strong);
+  text-decoration: none;
+}
+
+.app-navigation {
+  display: flex;
+}
+
+.app-navigation__link {
+  padding: 0.3em 0.7em;
+  text-decoration: none;
+  color: var(--on-background);
+  border-radius: 32px;
+  transition: 150ms all ease-in-out;
+}
+
+.app-navigation__link:hover {
+  box-shadow: inset 0px 2px 4px 0px rgba(255, 255, 255, 0.25);
+  background: #1f1f1f;
+}
+
 .flow > * + * {
   --_flow-space: var(--flow-space, 1em);
   margin-top: var(--_flow-space);
@@ -104,11 +131,45 @@ a:hover {
   flex-wrap: wrap;
 }
 
-nav h2#navigation:target {
-  outline-offset: 1px;
-  outline: 2px solid var(--primary);
+details {
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 0.5rem;
+  background: #241822;
+  transition: 125ms ease-in-out all;
+}
+
+details > summary::before {
+  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxLjVyZW0iIGhlaWdodD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PGcgZmlsbD0iI0NDQ0NDQyI+PHBhdGggZD0iTTIyNCAxMjhhOTYgOTYgMCAxIDEtOTYtOTZhOTYgOTYgMCAwIDEgOTYgOTYiIG9wYWNpdHk9IjAuMiIvPjxwYXRoIGQ9Ik0xMjggMjRhMTA0IDEwNCAwIDEgMCAxMDQgMTA0QTEwNC4xMSAxMDQuMTEgMCAwIDAgMTI4IDI0bTAgMTkyYTg4IDg4IDAgMSAxIDg4LTg4YTg4LjEgODguMSAwIDAgMS04OCA4OG00NS42Ni05My42NmE4IDggMCAwIDEgMCAxMS4zMmwtMzIgMzJhOCA4IDAgMCAxLTExLjMyLTExLjMyTDE0OC42OSAxMzZIODhhOCA4IDAgMCAxIDAtMTZoNjAuNjlsLTE4LjM1LTE4LjM0YTggOCAwIDAgMSAxMS4zMi0xMS4zMloiLz48L2c+PC9zdmc+");
+  display: inline-block;
+  vertical-align: -0.3em;
+  margin-right: 0.5rem;
+}
+
+details[open] > summary::before {
+  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxLjVyZW0iIGhlaWdodD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PGcgZmlsbD0iI0NDQ0NDQyI+PHBhdGggZD0iTTIyNCAxMjhhOTYgOTYgMCAxIDEtOTYtOTZhOTYgOTYgMCAwIDEgOTYgOTYiIG9wYWNpdHk9IjAuMiIvPjxwYXRoIGQ9Ik0xMjggMjRhMTA0IDEwNCAwIDEgMCAxMDQgMTA0QTEwNC4xMSAxMDQuMTEgMCAwIDAgMTI4IDI0bTAgMTkyYTg4IDg4IDAgMSAxIDg4LTg4YTg4LjEgODguMSAwIDAgMS04OCA4OG0zNy42Ni04NS42NmE4IDggMCAwIDEgMCAxMS4zMmwtMzIgMzJhOCA4IDAgMCAxLTExLjMyIDBsLTMyLTMyYTggOCAwIDAgMSAxMS4zMi0xMS4zMkwxMjAgMTQ4LjY5Vjg4YTggOCAwIDAgMSAxNiAwdjYwLjY5bDE4LjM0LTE4LjM1YTggOCAwIDAgMSAxMS4zMiAwIi8+PC9nPjwvc3ZnPg==");
+  display: inline-block;
+  vertical-align: -0.3em;
+  margin-right: 0.5rem;
+}
+
+details:hover,
+details[open],
+details[open]:hover {
+  background: #32212f;
 }
 
 summary {
   cursor: pointer;
+  font-weight: 500;
+  padding: 0.5rem 1rem 0.2rem 1rem;
+  list-style: none;
+  color: var(--on-background);
+}
+
+details[open] {
+  padding-bottom: 1rem;
+}
+
+.details-content {
+  padding: 0 1rem;
 }
diff --git a/src/_includes/styles/properties.css b/src/_includes/styles/properties.css
@@ -1,6 +1,14 @@
+@font-face {
+  font-family: "Geist";
+  src: url("/static/fonts/geist.woff2") format("woff2-variations");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
   /* spacing units */
-  --size-breakpoint: 43rem;
+  --size-breakpoint: 48rem;
   --space-xxs: 0.25rem;
   --space-xs: 0.5rem;
   --space-s: 0.75rem;
@@ -9,30 +17,11 @@
   --space-xl: 1.5rem;
   --space-xxl: 1.75rem;
   /* typography */
-  --base-font-family: system-ui, "Segoe UI", "Roboto", "Ubuntu", "Cantarell",
-    "Noto Sans", "San Francisco", sans-serif;
-  --heading-font-family: "Bitstream Charter", "Sitka Text", Cambria,
-    Times New Roman, serif;
+  --font-family: "Geist";
   --base-font-size: 1.1rem;
   /* color scheme */
-  --background: #fffae9;
-  --on-background: hsl(37, 55%, 21%);
-  --primary: hsl(313, 82%, 37%);
-  --danger: hsl(352, 72%, 42%);
-  --info: rgb(19, 49, 184);
-  --warning: #c88404;
-  --success: rgb(12, 164, 12);
-  color-scheme: dark;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #292310;
-    --on-background: hsl(37, 100%, 87%);
-    --primary: hsl(318, 100%, 74%);
-    --danger: hsl(352, 100%, 73%);
-    --info: rgb(83, 111, 235);
-    --warning: #fec358;
-    --success: rgb(111, 236, 111);
-  }
+  --background: hsl(312, 56%, 5%);
+  --on-background: hsl(0, 0%, 80%);
+  --on-background-strong: hsl(0, 0%, 95%);
+  --primary: hsl(310, 100%, 74%);
 }
diff --git a/src/_includes/styles/utils.css b/src/_includes/styles/utils.css
@@ -6,3 +6,80 @@
   );
   gap: var(--gap-space, var(--space-m));
 }
+
+.display {
+  font-size: 2.25rem;
+}
+
+.hero {
+  background-image: url("/static/images/rf_cross_logo.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: right;
+}
+
+.btn {
+  display: block;
+  width: fit-content;
+  border-radius: 32px;
+  padding: 0.4em 1em;
+  text-decoration: none;
+  transition: 150ms ease-in-out all;
+  color: var(--on-background-strong);
+  background: #241822;
+  box-shadow: inset 0px 4px 4px 0px rgba(255, 255, 255, 0.3);
+}
+
+.btn:hover {
+}
+
+.btn--icon {
+  line-height: 1;
+  padding: 0.5em;
+}
+
+.btn--icon img {
+  width: 1.25em;
+  height: 1.25em;
+  filter: grayscale(0.6);
+  transition: all 150ms ease-in-out;
+}
+
+.btn--icon:hover {
+  background: hsl(310, 20%, 17%);
+  box-shadow: inset 0px 4px 4px 0px rgba(255, 255, 255, 0.5),
+    0px 0px 8px 2px rgba(188, 143, 186, 0.25);
+}
+
+.btn--icon:hover img {
+  filter: grayscale(0);
+}
+
+.btn--fancy {
+  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0px 4px 4px 0px rgba(255, 255, 255, 0.75),
+    0px 0px 8px 2px rgba(188, 143, 186, 0.4);
+  background: linear-gradient(to bottom, #ff5df4, #bc5dff, #5d78ff);
+}
+
+.social-links {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.stack-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.15em;
+}
+
+.stack-item img {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.stack-item small {
+  opacity: 0.75;
+}
diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
@@ -2,13 +2,12 @@
 <html lang="{{site.lang}}">
   {% include "head.njk" %}
   <body class="flow">
-    {% include "partials/topnav.njk" %}
+    {% include "partials/header.njk" %}
     <main id="main-content" class="flow">
       {% block base %}
         {{ content | safe }}
       {% endblock %}
     </main>
-    {% include "partials/nav.njk" %}
     {% include "partials/footer.njk" %}
   </body>
 </html>