Move rules into separate files
I suffered so much to make this work. In order to get global variables to work, they make you suffer. I absolutely loathe this solution.
This commit is contained in:
parent
c5ef691077
commit
4579c37b64
GPG Key ID:
7A3F8997BFE894E0
|
|
@ -0,0 +1,34 @@
|
|||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
|
||||
$-color-white: hsl(280 30% 80%);
|
||||
$-color-dark: color.adjust($-color-white, $lightness: -50%);
|
||||
$-color-light: hsl(190 80% 30%);
|
||||
$-ff-serif: ["Inconsolata", monospace];
|
||||
$-ff-sans: ["Jost", sans-serif];
|
||||
$-fs-900: math.div(100rem, 16);
|
||||
|
||||
@forward "base" with (
|
||||
$color-white: $-color-white,
|
||||
$color-dark: $-color-dark,
|
||||
$color-light: $-color-light,
|
||||
$ff-serif: $-ff-serif,
|
||||
$ff-sans: $-ff-sans,
|
||||
$fs-900: $-fs-900
|
||||
);
|
||||
|
||||
@font-face {
|
||||
font-family: "Inconsolata";
|
||||
src: url("fonts/Inconsolata.ttf");
|
||||
|
||||
font-display: swap;
|
||||
font-variation-settings: "wdth" 85;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("fonts/Jost.ttf");
|
||||
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
//
|
||||
//
|
||||
// Do Not Change This File!
|
||||
//
|
||||
//
|
||||
@use "sass:math";
|
||||
/* ----------------- */
|
||||
/* Custom Properties */
|
||||
|
|
@ -10,27 +15,26 @@
|
|||
|
||||
/* colors */
|
||||
|
||||
$color-dark: hsl(0 0% 0%); /* Black */
|
||||
$color-light: hsl(0 0% 50%); /* Gray */
|
||||
$color-white: hsl(0 0% 100%);/* White */
|
||||
$color-dark: hsl(0 0% 0%) !default; /* Black */
|
||||
$color-light: hsl(0 0% 50%) !default; /* Gray */
|
||||
$color-white: hsl(0 0% 100%) !default;/* White */
|
||||
|
||||
/* font */
|
||||
|
||||
/* Sizes divided by 16 so values given in px */
|
||||
$fs-900: math.div(125rem, 16);
|
||||
$fs-800: math.div(75rem, 16);
|
||||
$fs-700: math.div(56rem, 16);
|
||||
$fs-600: math.div(32rem, 16);
|
||||
$fs-500: math.div(28rem, 16);
|
||||
$fs-400: math.div(24rem, 16);
|
||||
$fs-300: math.div(18rem, 16);
|
||||
$fs-200: math.div(16rem, 16);
|
||||
$fs-900: math.div(125rem, 16) !default;
|
||||
$fs-800: math.div(75rem, 16) !default;
|
||||
$fs-700: math.div(56rem, 16) !default;
|
||||
$fs-600: math.div(32rem, 16) !default;
|
||||
$fs-500: math.div(28rem, 16) !default;
|
||||
$fs-400: math.div(24rem, 16) !default;
|
||||
$fs-300: math.div(18rem, 16) !default;
|
||||
$fs-200: math.div(16rem, 16) !default;
|
||||
|
||||
$ff-serif: serif;
|
||||
$ff-sans-cond: sans-serif;
|
||||
$ff-sans: sans-serif;
|
||||
$ff-serif: serif !default;
|
||||
$ff-sans-cond: sans-serif !default;
|
||||
$ff-sans: sans-serif !default;
|
||||
|
||||
@mixin utility{
|
||||
/* --------------- */
|
||||
/* Utility Classes */
|
||||
/* --------------- */
|
||||
|
|
@ -133,9 +137,7 @@ section:not(:last-of-type) {
|
|||
footer {
|
||||
margin-top: 3vh;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin reset {
|
||||
/* ----- */
|
||||
/* Reset */
|
||||
/* ----- */
|
||||
|
|
@ -159,6 +161,7 @@ h1, h2, h3 {
|
|||
}
|
||||
|
||||
body {
|
||||
@debug "In base.body, #{$color-dark}";
|
||||
font-family: $ff-sans;
|
||||
font-size: $fs-400;
|
||||
color: $color-dark;
|
||||
|
|
@ -199,8 +202,6 @@ input, button, textarea, select {
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* -------------------- */
|
||||
/* Non-Reusable Classes */
|
||||
/* -------------------- */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
@forward "header";
|
||||
@forward "overlay";
|
||||
@forward "marks";
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
@use "sass:math";
|
||||
@use "sass:color";
|
||||
@use "../variables" as *;
|
||||
|
||||
|
||||
@keyframes waltuh-gradient-anim {
|
||||
$r: 6em;
|
||||
$pd: math.div(2*math.$pi,10);
|
||||
from {
|
||||
background-position: 6em 0em;
|
||||
}
|
||||
@for $i from 1 through 9 {
|
||||
#{$i*10}% {
|
||||
background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd);
|
||||
}
|
||||
}
|
||||
to {
|
||||
background-position: 6em 0em;
|
||||
}
|
||||
}
|
||||
@keyframes wipeIn {
|
||||
from { clip-path: inset(0 100% 0 0); }
|
||||
to { clip-path: inset(0 0 0 0); }
|
||||
}
|
||||
|
||||
mark.waltuh-gradient {
|
||||
font-weight: 600;
|
||||
|
||||
color: transparent;
|
||||
$grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%);
|
||||
$grad2: color.adjust($grad1, $lightness: +30%);
|
||||
background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white);
|
||||
background-size: 30vmin 30vmin;
|
||||
background-clip: text;
|
||||
|
||||
animation: waltuh-gradient-anim 12s linear infinite,
|
||||
wipeIn 0.25s ease-in;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
@keyframes overlay-breathe {
|
||||
from {opacity: 0.04;}
|
||||
to {opacity: 0.12;}
|
||||
}
|
||||
#overlay {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
|
||||
opacity: 0.10;
|
||||
z-index: 1;
|
||||
background-image: url('https://ilia.moe/img/noise.gif');
|
||||
background-size: 25%;
|
||||
|
||||
animation: overlay-breathe 4s ease infinite alternate;
|
||||
}
|
||||
|
|
@ -1,38 +1,12 @@
|
|||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
@use "base" as *;
|
||||
|
||||
/* ------ */
|
||||
/* */
|
||||
/* Waltuh */
|
||||
/* */
|
||||
/* ------ */
|
||||
|
||||
/* Initial Variable Resets */
|
||||
|
||||
$color-white: hsl(280 30% 80%);
|
||||
$color-dark: color.adjust($color-white, $lightness: -50%);
|
||||
$color-light: hsl(190 80% 30%);
|
||||
|
||||
@font-face {
|
||||
font-family: "Inconsolata";
|
||||
src: url("fonts/Inconsolata.ttf");
|
||||
|
||||
font-display: swap;
|
||||
font-variation-settings: "wdth" 85;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("fonts/Jost.ttf");
|
||||
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
$ff-serif: "Inconsolata", monospace;
|
||||
$ff-sans: "Jost", sans-serif;
|
||||
$fs-900: math.div(100rem, 16);
|
||||
@debug "ff-serif is #{$ff-serif}";
|
||||
// Global Variables
|
||||
@use "variables" as *;
|
||||
@use "components";
|
||||
|
||||
.fs-900 { font-size: $fs-900; font-weight: 400;}
|
||||
.fs-800 { font-size: $fs-800; font-weight: 300;}
|
||||
|
|
@ -40,60 +14,3 @@ $fs-900: math.div(100rem, 16);
|
|||
.fs-600 { font-size: $fs-600; font-weight: 300;}
|
||||
.fs-500 { font-size: $fs-500; font-weight: 200;}
|
||||
.fs-400 { font-size: $fs-400; font-weight: 200;}
|
||||
|
||||
/* --- */
|
||||
|
||||
@include utility;
|
||||
@include reset;
|
||||
|
||||
@keyframes waltuh-gradient-anim {
|
||||
$r: 6em;
|
||||
$pd: math.div(2*math.$pi,10);
|
||||
from {
|
||||
background-position: 6em 0em;
|
||||
}
|
||||
@for $i from 1 through 9 {
|
||||
#{$i*10}% {
|
||||
background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd);
|
||||
}
|
||||
}
|
||||
to {
|
||||
background-position: 6em 0em;
|
||||
}
|
||||
}
|
||||
@keyframes wipeIn {
|
||||
from { clip-path: inset(0 100% 0 0); }
|
||||
to { clip-path: inset(0 0 0 0); }
|
||||
}
|
||||
|
||||
.waltuh-gradient {
|
||||
font-weight: 600;
|
||||
|
||||
color: transparent;
|
||||
$grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%);
|
||||
$grad2: color.adjust($grad1, $lightness: +30%);
|
||||
background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white);
|
||||
background-size: 30vmin 30vmin;
|
||||
background-clip: text;
|
||||
|
||||
animation: waltuh-gradient-anim 12s linear infinite,
|
||||
wipeIn 0.25s ease-in;
|
||||
|
||||
}
|
||||
|
||||
@keyframes overlay-breathe {
|
||||
from {opacity: 0.04;}
|
||||
to {opacity: 0.12;}
|
||||
}
|
||||
#overlay {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
|
||||
opacity: 0.10;
|
||||
z-index: 1;
|
||||
background-image: url('https://ilia.moe/img/noise.gif');
|
||||
background-size: 25%;
|
||||
|
||||
animation: overlay-breathe 4s ease infinite alternate;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue