diff --git a/sass/_mixins.scss b/sass/_mixins.scss index f3edf97..77ad13f 100644 --- 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; } \ No newline at end of file diff --git a/sass/_vars.scss b/sass/_vars.scss index f05e8a7..d1e30f7 100644 --- 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 new file mode 100644 index 0000000..b0a1533 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/sass/components/_header.scss b/sass/components/_header.scss index 73fd75e..ff2c608 100644 --- 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 index 580a4fc..246ffd2 100644 --- 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; } } \ No newline at end of file diff --git a/sass/components/_logo.scss b/sass/components/_logo.scss index 531a401..61cc1cb 100644 --- a/sass/components/_logo.scss +++ b/sass/components/_logo.scss @@ -6,5 +6,5 @@ .logo { $bp-icon: '(min-width: 440px)'; - height: 48px; + height: 72px; } \ No newline at end of file diff --git a/sass/components/_main-menu.scss b/sass/components/_main-menu.scss index 326b1c2..d27a1b3 100644 --- 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,7 +30,7 @@ } &:hover { - color: $color-blue; + color: $color-highlight; } &--active { @@ -40,7 +38,7 @@ &, &:visited, &:active { - color: $color-blue; + color: $color-highlight; } } diff --git a/sass/fonts/_ubuntu.scss b/sass/fonts/_ubuntu.scss new file mode 100644 index 0000000..f07389c --- /dev/null +++ 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') \ No newline at end of file diff --git a/sass/site.scss b/sass/site.scss index 45fabf9..001a6a7 100644 --- 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 new file mode 100644 index 0000000..7c48df2 Binary files /dev/null and b/static/assets/favicon.ico differ diff --git a/static/assets/luminol_library_logo.png b/static/assets/luminol_library_logo.png new file mode 100644 index 0000000..688a7c7 Binary files /dev/null and b/static/assets/luminol_library_logo.png differ diff --git a/templates/base.html b/templates/base.html index 3d4bfad..60117f8 100644 --- a/templates/base.html +++ b/templates/base.html @@ -16,8 +16,13 @@ Luminol + + + + + {% block head_extensions %} {% endblock %} @@ -25,13 +30,14 @@
+
-
+
{% block content %}{% endblock %}
+
diff --git a/templates/index.html b/templates/index.html index e49daba..31ba4ba 100644 --- a/templates/index.html +++ b/templates/index.html @@ -11,5 +11,7 @@

Test zola thing dajbds + +

{% endblock content %} \ No newline at end of file