diff --git a/src/cool-stuff/css-purgatory/theme3/.gitignore b/src/cool-stuff/css-purgatory/theme3/.gitignore deleted file mode 100644 index fecab76..0000000 --- a/src/cool-stuff/css-purgatory/theme3/.gitignore +++ /dev/null @@ -1 +0,0 @@ -css/* diff --git a/src/cool-stuff/css-purgatory/theme3/Makefile b/src/cool-stuff/css-purgatory/theme3/Makefile deleted file mode 100644 index df1a635..0000000 --- a/src/cool-stuff/css-purgatory/theme3/Makefile +++ /dev/null @@ -1,14 +0,0 @@ -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/* diff --git a/src/cool-stuff/css-purgatory/theme3/index.html b/src/cool-stuff/css-purgatory/theme3/index.html deleted file mode 100644 index c48db16..0000000 --- a/src/cool-stuff/css-purgatory/theme3/index.html +++ /dev/null @@ -1,115 +0,0 @@ - - - - - - CSS Purgatory - Waltuh - - - - -
-
-

Waltuh

-
-
-
-

Description

-
- Waltuh is a stupid name for a theme. - Put your theme away. - It's collaborative too!

-
-
- - - -
-

Colors

-
-
-
#Color hex code
-

HSL: Color hsl -

-
-
#Color hex code
-

HSL: Color hsl -

-
-
#Color hex code
-

HSL: Color hsl -

-
-
- - - -
-

Typography

-
-
-

Heading 1

-

font information

-
- -
-

Heading 2

-

font information

-
- -
-

Heading 3

-

font information

-
- -
-

Heading 4

-

unused size

-
- -
-

Heading 5

-

unused size

-
- -
-

Heading 6

-

unused size

-
- -
-

Text

-

font information

-
- - -
-

Subtext

-

font information

-
- -
-
- - - -
-

Sample Pages

- -
-
- - - - - -
- - - diff --git a/src/cool-stuff/css-purgatory/theme3/landingpage.html b/src/cool-stuff/css-purgatory/theme3/landingpage.html deleted file mode 100644 index a24a549..0000000 --- a/src/cool-stuff/css-purgatory/theme3/landingpage.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - Waltuh - Landing Page - - - - - -
-
-
-
-

this is Waltuh.

-

You know how they say, "It's been a pleasure?"

-

It hasn't.

-
-
-
- - - - diff --git a/src/cool-stuff/css-purgatory/theme3/samplepage.html b/src/cool-stuff/css-purgatory/theme3/samplepage.html deleted file mode 100644 index 8e28f1f..0000000 --- a/src/cool-stuff/css-purgatory/theme3/samplepage.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - Waltuh - Sample Page - - - - -
-
-

- Waltuh - Sample Page -

-
-

Where one might put a page showcasing the features of a theme

-
-
-
-
-

Fake content 1

-

Some content might go here on a real page.

-

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.

-
-
-

Fake content 2

-

Some other content might go here, but it would be separated from the first bit of content.

-

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.

-
-
- -
- - - diff --git a/src/cool-stuff/css-purgatory/theme3/scss/waltuh.scss b/src/cool-stuff/css-purgatory/theme3/scss/waltuh.scss deleted file mode 100644 index 6dd7f37..0000000 --- a/src/cool-stuff/css-purgatory/theme3/scss/waltuh.scss +++ /dev/null @@ -1,294 +0,0 @@ -@use "sass:color"; -@use "sass:math"; -/* ----------------- */ -/* Custom Properties */ -/* ----------------- */ -/* Many of the prop- - * erties here are - * where the substa- - * ntive changes - * will be made */ - - /* colors */ - -$color-white: hsl(280 30% 80%);/* White */ -$color-dark: color.adjust($color-white, $lightness: -50%); /* Black */ -$color-light: hsl(190 80% 30%); /* Gray */ - - /* font */ - -@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; -} - - /* Sizes divided by 16 so values given in px */ -$fs-900: calc(100rem / 16); -$fs-800: calc(75rem / 16); -$fs-700: calc(56rem / 16); -$fs-600: calc(32rem / 16); -$fs-500: calc(28rem / 16); -$fs-400: calc(24rem / 16); -$fs-300: calc(18rem / 16); -$fs-200: calc(16rem / 16); - -$ff-serif: "Inconsolata", monospace; -$ff-sans-cond: sans-serif; -$ff-sans: "Jost", sans-serif; - -/* ----- */ -/* 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; -} - -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; - } -} - - -/* --------------- */ -/* 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; 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;} -.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; -} - -/* -------------------- */ -/* Non-Reusable Classes */ -/* -------------------- */ -/* meant for these pages - * only, not to be used - * in practice */ - -.colors--block { - padding: 3rem 1rem 1rem; - border: 1px solid black; -} - -@keyframes waltuh-gradient-anim { - $r: 6em; - $pd: math.div(2*math.$pi,10); - from { - background-position: 6em 0em; - } - 10% { - background-position: $r*math.cos(1*$pd) $r*math.sin(1*$pd); - } - 20% { - background-position: $r*math.cos(2*$pd) $r*math.sin(2*$pd); - } - 30% { - background-position: $r*math.cos(3*$pd) $r*math.sin(3*$pd); - } - 40% { - background-position: $r*math.cos(4*$pd) $r*math.sin(4*$pd); - } - 50% { - background-position: $r*math.cos(5*$pd) $r*math.sin(5*$pd); - } - 60% { - background-position: $r*math.cos(6*$pd) $r*math.sin(6*$pd); - } - 70% { - background-position: $r*math.cos(7*$pd) $r*math.sin(7*$pd); - } - 80% { - background-position: $r*math.cos(8*$pd) $r*math.sin(8*$pd); - } - 90% { - background-position: $r*math.cos(9*$pd) $r*math.sin(9*$pd); - } - to { - background-position: 6em 0em; - } -} - -.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; -} - -@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; -} -main { - * { - z-index: 2; - } -} -footer { - z-index: 2; -}