stuff and things

Astrabit-ST · Feb 13, 2024 · 31dd1db · 31dd1db
1 parent 33072c5
commit 31dd1db
Show file tree

Hide file tree

Showing 13 changed files with 103 additions and 39 deletions.
diff --git a/sass/_mixins.scss b/sass/_mixins.scss
@@ -7,4 +7,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+@mixin center() {
+  align-items: center;
+  justify-content: center;
 }
diff --git a/sass/_vars.scss b/sass/_vars.scss
@@ -3,9 +3,8 @@
 // This software is released under the MIT License.
 // https://opensource.org/licenses/MIT
 
-$bp-tablet-landscape: 992px; // Tablet-landscape (and larger)
-
-$bp-tablet-portrait-down: '(max-width: #{$bp-tablet-landscape - 1})';
+$color-highlight: #4287f5;
+$color-background: #01020e;
 
 $color-white: #ececec;
 $color-grey-800: #232326;
@@ -23,7 +22,7 @@ $duration: 250ms;
 $max-width: 1200px;
 $mobile-menu-width: 300px;
 $content-top-margin: 30px;
-$border-radius: 10px;
+$border-radius: 7.5px;
 
 :root {
   --header-height: 64px;

diff --git a/sass/components/_button.scss b/sass/components/_button.scss
@@ -0,0 +1,38 @@
+// Copyright (c) 2024 Lily Lyons
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  background-color: $color-highlight;
+  border: 2px solid #56adff;
+  padding: 6px 8px;
+  border-radius: $border-radius;
+  font-size: 1.2rem;
+  font-weight: 500;
+  transition: transform $duration-fast;
+
+  &:hover {
+    background-color: darken($color-highlight, 3%);
+  }
+
+  &:active {
+    transform: translateY(2px);
+  }
+
+  &,
+  &:hover,
+  &:visited {
+    color: $color-white;
+    text-decoration: none;
+  }
+
+  &__icon {
+    height: 1.1em;
+    vertical-align: middle;
+    margin-left: 0.2em;
+    font-size: 0.9em;
+  }
+}
diff --git a/sass/components/_header.scss b/sass/components/_header.scss
@@ -29,10 +29,10 @@
 
   &__message {
     display: none;
-    font-size: 1.28rem;
+    font-size: 1.3rem;
     font-weight: 500;
     color: #797979;
-    margin-left: 12px;
+    margin-left: 16px;
     white-space: nowrap;
 
     @media (min-width: 550px) {
@@ -47,37 +47,25 @@
   &__cta-container {
     display: flex;
     align-items: center;
-    margin-left: 16px;
+    margin-left: 32px;
   }
 
   &__cta {
     flex-shrink: 0;
 
     &:not(:last-child) {
-      margin-right: 8px;
-    }
-
-    &--github {
-      @include flex-center;
-
-      img {
-        height: 30px;
-      }
-
-      &:hover {
-        filter: brightness(80%)
-      }
+      margin-right: 16px;
     }
 
-    &--steam {
-      @include flex-center;
+    &--icon {
+      @include center;
 
       img {
         height: 30px;
       }
 
-      &:hover {
-        filter: brightness(80%)
+      &:not(:hover) {
+        filter: grayscale(100%) brightness(180%)
       }
     }
   }

diff --git a/sass/components/_layout.scss b/sass/components/_layout.scss
@@ -14,8 +14,8 @@
     top: 0px;
     width: 100%;
     height: var(--header-height);
-    background-color: $color-grey-900;
-    border-bottom: 2px solid #2c2c2d;
+    background-color: $color-background;
+    border-bottom: 2px solid $color-highlight;
     z-index: $z-layout-header;
   }
 
@@ -24,6 +24,6 @@
     padding-top: var(--header-height);
     padding-bottom: 64px;
     flex-grow: 1;
-    background-color: $color-grey-800;
+    background-color: $color-background;
   }
 }
diff --git a/sass/components/_logo.scss b/sass/components/_logo.scss
@@ -6,5 +6,5 @@
 .logo {
   $bp-icon: '(min-width: 440px)';
 
-  height: 48px;
+  height: 72px;
 }
diff --git a/sass/components/_main-menu.scss b/sass/components/_main-menu.scss
@@ -17,8 +17,6 @@
   &__link {
     @include flex-center;
 
-    $color-blue: #b1d9ff;
-
     position: relative;
     height: var(--header-height);
     font-size: 1.3rem;
@@ -32,15 +30,15 @@
     }
 
     &:hover {
-      color: $color-blue;
+      color: $color-highlight;
     }
 
     &--active {
 
       &,
       &:visited,
       &:active {
-        color: $color-blue;
+        color: $color-highlight;
       }
     }
 

diff --git a/sass/fonts/_ubuntu.scss b/sass/fonts/_ubuntu.scss
@@ -0,0 +1,6 @@
+// Copyright (c) 2024 Lily Lyons
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap')
diff --git a/sass/site.scss b/sass/site.scss
@@ -8,10 +8,28 @@
 @import "vars";
 @import "mixins";
 
+@import "fonts/ubuntu";
+
 @import "components/logo";
 @import "components/main-menu";
 @import "components/layout";
 @import "components/header";
+@import "components/button";
+
+html {
+  color-scheme: dark;
+  font-family: 'Ubuntu', sans-serif;
+  color: $color-white;
+  background-color: $color-background;
+
+  scroll-padding-top: var(--scroll-padding-top);
+
+  * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+  }
+}
 
 body {
   padding: 0;

diff --git a/static/assets/favicon.ico b/static/assets/favicon.ico
diff --git a/static/assets/luminol_library_logo.png b/static/assets/luminol_library_logo.png
diff --git a/templates/base.html b/templates/base.html
@@ -16,22 +16,28 @@
   <title>Luminol</title>
 
   <link rel="stylesheet" href="/site.css" />
+  <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
   <meta property="og:url" content="https://luminol.dev">
   <meta property="og:url" content="Luminol is a FOSS remake of RPG Maker!">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
   {% block head_extensions %} {% endblock %}
 </head>
 
 <body>
   <div class="layout">
     <header class="layout__header header">
       <div class="header__content">
+
         <div class="header__left-block">
           <a href="/" class="header__logo">
-            <img class="logo" src="/assets/luminol.svg" alt="A beaker filled with a glowing liquid">
+            <img class="logo" src="/assets/luminol_library_logo.png" alt="A spilled beaker with glowing liquid">
           </a>
         </div>
-        <nav class="header__menu main-menu" role="navigation" data-page-menu-switch-state-container>
 
+        <nav class="header__menu main-menu" role="navigation" data-page-menu-switch-state-container>
           <div class="main-menu__content">
             <ul class="main-menu__menu">
               {{header_macros::header_item(name="Web Build", current_path=current_path,
@@ -40,21 +46,25 @@
             </ul>
           </div>
         </nav>
-        <div class="header__cta-content">
-          <a class="header__cta header__cta--github" href="https://github.com/Astrabit-ST/Luminol">
-            <img src="https://cdn.simpleicons.org/github/white" alt="The GitHub logo">
+
+        <div class="header__cta-container">
+          <a class="header__cta header__cta--icon" href="https://github.com/Astrabit-ST/Luminol">
+            <img src="https://cdn.simpleicons.org/github/4287f5" alt="The GitHub logo">
           </a>
-          <a class="header__cta header__cta--steam" href="https://github.com/Astrabit-ST/Luminol">
-            <img src="https://cdn.simpleicons.org/steam/white" alt="The Steam logo">
+          <a class="header__cta header__cta--icon" href="https://store.steampowered.com/app/2501490/Luminol/">
+            <img src="https://cdn.simpleicons.org/steam/4287f5" alt="The Steam logo">
           </a>
         </div>
+
       </div>
     </header>
+
     <main class="layout__content">
       <div class="container">
         {% block content %}{% endblock %}
       </div>
     </main>
+
   </div>
 </body>
 

diff --git a/templates/index.html b/templates/index.html
@@ -11,5 +11,7 @@ <h1 class="title">
   Test zola thing
 
   <a href="/luminol-build/index.html">dajbds</a>
+
+  <button class="button">Click me</button>
 </h1>
 {% endblock content %}