commit
8020b188ee
GPG Key ID:
7A3F8997BFE894E0
|
|
@ -54,6 +54,14 @@
|
|||
Second candidate format for the homepage
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>
|
||||
<a href="waltuh">Waltuh</a>
|
||||
</h3>
|
||||
<p>
|
||||
wacky and zany purple theme, collaborative
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
css/*
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
watch_scss:
|
||||
sass -w scss/:css/
|
||||
|
||||
scss:
|
||||
sass scss/:css/
|
||||
|
||||
server:
|
||||
python3 -m http.server
|
||||
|
||||
dev:
|
||||
make -j 2 watch_scss server
|
||||
|
||||
clean:
|
||||
rm css/*
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>CSS Purgatory - Waltuh</title>
|
||||
<link rel="stylesheet" href="css/waltuh.css">
|
||||
<!-- Base v1.1 -->
|
||||
</head>
|
||||
<body class="vsc-initialized">
|
||||
<main>
|
||||
<header id="title" class="hr">
|
||||
<h1>Waltuh</h1>
|
||||
</header>
|
||||
<article class="">
|
||||
<section id="description" class="hr">
|
||||
<h2>Description</h2>
|
||||
<div class="container">
|
||||
<span class="waltuh-gradient">Waltuh</span>,
|
||||
put your theme away.
|
||||
It's collaborative!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section id="colors" class="hr">
|
||||
<h2>Colors</h2>
|
||||
<div class="container flex">
|
||||
<div>
|
||||
<div class="colors--block bg-dark text-white">#Color hex code</div>
|
||||
<p> HSL: Color hsl
|
||||
</p></div>
|
||||
<div>
|
||||
<div class="colors--block bg-light text-white">#Color hex code</div>
|
||||
<p> HSL: Color hsl
|
||||
</p></div>
|
||||
<div>
|
||||
<div class="colors--block bg-white text-dark">#Color hex code</div>
|
||||
<p> HSL: Color hsl
|
||||
</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section id="typography" class="hr">
|
||||
<h2>Typography</h2>
|
||||
<div class="container two-columns">
|
||||
<div>
|
||||
<p class="ff-serif fs-900">Heading 1</p>
|
||||
<p class="ff-sans-cond fs-200 text-light">Inconsolata wght:400</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="ff-serif fs-800">Heading 2</p>
|
||||
<p class="ff-sans-cond fs-200 text-light">Inconsolata wght:300</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="ff-serif fs-700">Heading 3</p>
|
||||
<p class="ff-sans-cond fs-200 text-light">Inconsolata wght:200</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="ff-sans fs-600">Heading 4</p>
|
||||
<p class="ff-sans-cond fs-200 text-light">unused size</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="ff-sans fs-500">Heading 5</p>
|
||||
<p class="ff-sans-cond fs-200 text-light">unused size</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="ff-sans fs-400">Heading 6</p>
|
||||
<p class="ff-sans-cond fs-200 text-light">unused size</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="ff-sans fs-300">Text</p>
|
||||
<p class="ff-sans-cond fs-200 text-light">Jost wght:400</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<p class="ff-sans-cond fs-200">Subtext</p>
|
||||
<p class="ff-sans-cond fs-200 text-light">Jost wght:400</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section id="samples" class="hr">
|
||||
<h2>Sample Pages</h2>
|
||||
<ul class="container two-columns">
|
||||
<li><a href="http://0.0.0.0:8000/samplepage">First Sample Page</a></li>
|
||||
<li><a href="http://0.0.0.0:8000/landingpage">Second Sample Page</a></li>
|
||||
<li><a>Third Sample Page</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<footer>
|
||||
<a href="../">Return to Purgatory</a>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Waltuh - Landing Page</title>
|
||||
<link rel="stylesheet" href="css/waltuh.css">
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<!-- Base v1.1 -->
|
||||
</head>
|
||||
<body class="vsc-initialized">
|
||||
<div id="overlay"></div>
|
||||
<main class="offset-grid--top fullsize">
|
||||
<div>
|
||||
<h1 class="text-dark ff-serif fs-800 gap-large-bottom">this is <span class="waltuh-gradient">Waltuh</span>.</h1>
|
||||
<p>You know how they say, "It's been a pleasure?"</p>
|
||||
<p>It hasn't.</p>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="lock-bottom">
|
||||
<a href="./">Return to Waltuh</a>
|
||||
</footer>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Waltuh - Sample Page</title>
|
||||
<link rel="stylesheet" href="css/waltuh.css">
|
||||
<!-- Base v1.1 -->
|
||||
</head>
|
||||
<body class="vsc-initialized">
|
||||
<main>
|
||||
<header id="title">
|
||||
<h1>
|
||||
Waltuh - Sample Page
|
||||
</h1>
|
||||
<div class="container">
|
||||
<p>Where one might put a page showcasing the features of a theme</p>
|
||||
</div>
|
||||
</header>
|
||||
<article>
|
||||
<section id="fakecontent" class="container">
|
||||
<h2>Fake content 1</h2>
|
||||
<p>Some content might go here on a real page.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
|
||||
sagittis congue turpis et laoreet. Integer finibus velit purus, id
|
||||
semper augue pulvinar eu. In sed diam bibendum, faucibus neque eget,
|
||||
malesuada nisi. Maecenas nulla ante, sagittis sed mollis malesuada,
|
||||
imperdiet et turpis. Curabitur eget vehicula justo. Etiam nec magna sed
|
||||
dui lacinia molestie quis vitae velit. Donec eu erat metus. Duis congue,
|
||||
risus vel gravida elementum, risus velit vestibulum felis, rhoncus
|
||||
varius purus turpis ut sapien. Etiam non libero ex. Interdum et
|
||||
malesuada fames ac ante ipsum primis in faucibus. Etiam facilisis, orci
|
||||
at aliquet congue, massa felis semper nisl, consectetur commodo eros
|
||||
odio vel nibh.</p>
|
||||
</section>
|
||||
<section id="fakecontent2" class="container">
|
||||
<h2>Fake content 2</h2>
|
||||
<p>Some other content might go here, but it would be separated from the first bit of content.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu
|
||||
enim, dictum eu tincidunt quis, ultrices in tortor. Vivamus pharetra
|
||||
elementum mauris sit amet elementum. Sed diam tortor, consequat nec ex
|
||||
et, mattis tincidunt nunc. Fusce id sem justo. Phasellus ac blandit
|
||||
libero. Donec eu orci ac libero blandit sollicitudin sit amet eu nunc.
|
||||
Aenean finibus fermentum ligula id fringilla. Maecenas sit amet tortor
|
||||
metus. </p>
|
||||
</section>
|
||||
</article>
|
||||
<footer>
|
||||
<a href="./">Return to Waltuh</a>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
//
|
||||
//
|
||||
// Do Not Change This File!
|
||||
//
|
||||
//
|
||||
@use "sass:math";
|
||||
/* ----------------- */
|
||||
/* Custom Properties */
|
||||
/* ----------------- */
|
||||
/*
|
||||
This values are to be overridden
|
||||
after being injected into
|
||||
the global scope.
|
||||
*/
|
||||
|
||||
/* colors */
|
||||
|
||||
$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) !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 !default;
|
||||
$ff-sans-cond: sans-serif !default;
|
||||
$ff-sans: sans-serif !default;
|
||||
|
||||
/* --------------- */
|
||||
/* Utility Classes */
|
||||
/* --------------- */
|
||||
|
||||
/* Layouts */
|
||||
|
||||
.container {
|
||||
padding-inline: clamp(0.5rem, 4rem, 5rem);
|
||||
margin-inline: auto;
|
||||
max-width: 80rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.column {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-content: baseline;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.two-columns {
|
||||
display: grid;
|
||||
/* Will shrink to one column, never exceed two!
|
||||
* The `max` in `minmax` asks that the columns
|
||||
* be no smaller */
|
||||
grid-template-columns: repeat(auto-fit, minmax(max(30rem, 40%), 1fr));
|
||||
column-gap: 1rem;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.lock-bottom {
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
}
|
||||
|
||||
/* Other */
|
||||
|
||||
.hr::after { /* Add fake hr after header */
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
display: block;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
height: 0.15rem;
|
||||
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* Color Classes */
|
||||
|
||||
.bg-dark { background-color: $color-dark; }
|
||||
.bg-light { background-color: $color-light; }
|
||||
.bg-white { background-color: $color-white; }
|
||||
|
||||
.text-dark { color: $color-dark; }
|
||||
.text-light { color: $color-light; }
|
||||
.text-white { color: $color-white; }
|
||||
|
||||
/* Font Classes */
|
||||
|
||||
.fs-900 { font-size: $fs-900; }
|
||||
.fs-800 { font-size: $fs-800; }
|
||||
.fs-700 { font-size: $fs-700; }
|
||||
.fs-600 { font-size: $fs-600; }
|
||||
.fs-500 { font-size: $fs-500; }
|
||||
.fs-400 { font-size: $fs-400; }
|
||||
.fs-300 { font-size: $fs-300; }
|
||||
.fs-200 { font-size: $fs-200; }
|
||||
|
||||
.ff-serif { font-family: $ff-serif; }
|
||||
.ff-sans-cond { font-family: $ff-sans-cond; }
|
||||
.ff-sans { font-family: $ff-sans; }
|
||||
|
||||
.uppercase { text-transform: uppercase; }
|
||||
.lowercase { text-transform: lowercase; }
|
||||
|
||||
/* Semantic Tags and Their Classes */
|
||||
|
||||
header {
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
|
||||
section:not(:last-of-type) {
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
/* ----- */
|
||||
/* Reset */
|
||||
/* ----- */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $ff-sans;
|
||||
font-size: $fs-400;
|
||||
color: $color-dark;
|
||||
background-color: $color-white;
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-left: 1vw;
|
||||
margin-top: 1vh;
|
||||
* {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
img, picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behaviour: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------- */
|
||||
/* Non-Reusable Classes */
|
||||
/* -------------------- */
|
||||
/* meant for these pages
|
||||
* only, not to be used
|
||||
* in practice */
|
||||
|
||||
.colors--block {
|
||||
padding: 3rem 1rem 1rem;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
|
@ -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); }
|
||||
}
|
||||
|
||||
span.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,18 @@
|
|||
@keyframes overlay-breathe {
|
||||
from {opacity: 0.04;}
|
||||
to {opacity: 0.10;}
|
||||
}
|
||||
#overlay {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
|
||||
opacity: 0.10;
|
||||
z-index: 1;
|
||||
background-image: url('https://ilia.moe/img/noise.gif');
|
||||
background-size: 20vmin;
|
||||
|
||||
animation: overlay-breathe 3s ease-in infinite alternate;
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
@use "sass:list";
|
||||
@use "../variables" as *;
|
||||
|
||||
%grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@mixin grid-3x3-offset($top: 1fr, $bottom: 1fr, $left: 1fr, $right: 1fr) {
|
||||
@debug "mixin top: #{$top}";
|
||||
@extend %grid;
|
||||
grid-template-rows: $top 1fr $bottom;
|
||||
grid-template-columns: $left 1fr $right;
|
||||
grid-template-areas:
|
||||
"nw n ne"
|
||||
"w center e"
|
||||
"sw s se";
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
%offset-grid {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
justify-self: center;
|
||||
grid-area: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
h1, h2, h3 {
|
||||
display: inline-block;
|
||||
width: min-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid Offset Hell
|
||||
$offset-amt: 0.33fr;
|
||||
@each $dir in [top, bottom, left, right] {
|
||||
$dir_adj: "";
|
||||
@if $dir {
|
||||
$dir_adj: "--#{$dir}";
|
||||
}
|
||||
|
||||
@each $size, $size_val in (null: 1fr, wide: 0.8fr, narrow: 1.2fr) {
|
||||
$size_adj: "";
|
||||
@if $size {
|
||||
$size_adj: "--#{$size}";
|
||||
}
|
||||
.offset-grid#{$dir_adj}#{$size_adj} {
|
||||
$-l: [1fr, 1fr, 1fr, 1fr];
|
||||
@if $dir == top {
|
||||
$-l: [$offset-amt, 1fr, $size_val, $size_val];
|
||||
} @else if $dir == bottom {
|
||||
$-l: [1fr, $offset-amt, $size_val, $size_val];
|
||||
} @else if $dir == left {
|
||||
$-l: [$size_val, $size_val, $offset-amt, 1fr];
|
||||
} @else if $dir == right {
|
||||
$-l: [$size_val, $size_val, 1fr, $offset-amt];
|
||||
}
|
||||
@debug "list: #{$-l}";
|
||||
@debug list.nth($-l, 1);
|
||||
@include grid-3x3-offset($top: list.nth($-l,1), $bottom: list.nth($-l,2),
|
||||
$left: list.nth($-l,3), $right: list.nth($-l,4));
|
||||
|
||||
@extend %offset-grid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@forward "grid";
|
||||
@forward "modifiers";
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.fullsize {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
}
|
||||
|
||||
$gap-sizes: ("small": 1vmin, "mid": 3vmin, "large": 5vmin);
|
||||
|
||||
@each $size, $dist in $gap-sizes {
|
||||
@each $dir in [top, bottom, left, right] {
|
||||
.gap-#{$size}-#{$dir} {
|
||||
margin-#{$dir}: $dist;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/* ------ */
|
||||
/* */
|
||||
/* Waltuh */
|
||||
/* */
|
||||
/* ------ */
|
||||
|
||||
// Global Variables
|
||||
@use "variables" as *;
|
||||
@use "components";
|
||||
@use "layouts";
|
||||
|
||||
.fs-900 { font-size: $fs-900; font-weight: 400;}
|
||||
.fs-800 { font-size: $fs-800; font-weight: 300;}
|
||||
.fs-700 { font-size: $fs-700; font-weight: 250;}
|
||||
.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;}
|
||||
Loading…
Reference in New Issue