diff --git a/src/cool-stuff/css-purgatory/theme3/Makefile b/src/cool-stuff/css-purgatory/theme3/Makefile new file mode 100644 index 0000000..df1a635 --- /dev/null +++ b/src/cool-stuff/css-purgatory/theme3/Makefile @@ -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/* diff --git a/src/cool-stuff/css-purgatory/theme3/css/fonts/Inconsolata.ttf b/src/cool-stuff/css-purgatory/theme3/css/fonts/Inconsolata.ttf new file mode 100644 index 0000000..34848ca Binary files /dev/null and b/src/cool-stuff/css-purgatory/theme3/css/fonts/Inconsolata.ttf differ diff --git a/src/cool-stuff/css-purgatory/theme3/css/fonts/Jost.ttf b/src/cool-stuff/css-purgatory/theme3/css/fonts/Jost.ttf new file mode 100644 index 0000000..e758df3 Binary files /dev/null and b/src/cool-stuff/css-purgatory/theme3/css/fonts/Jost.ttf differ diff --git a/src/cool-stuff/css-purgatory/theme3/css/theme3.css b/src/cool-stuff/css-purgatory/theme3/css/theme3.css new file mode 100644 index 0000000..ec2f7e1 --- /dev/null +++ b/src/cool-stuff/css-purgatory/theme3/css/theme3.css @@ -0,0 +1,288 @@ +/* ----------------- */ +/* Custom Properties */ +/* ----------------- */ +/* Many of the prop- + * erties here are + * where the substa- + * ntive changes + * will be made */ +/* colors */ +/* White */ +/* Black */ +/* 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 */ +/* ----- */ +/* 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: "Jost", sans-serif; + font-size: 1.5rem; + color: #543663; + background-color: hsl(280deg, 30%, 80%); + 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: 4rem; + 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: #543663; +} + +.bg-light { + background-color: hsl(190deg, 80%, 30%); +} + +.bg-white { + background-color: hsl(280deg, 30%, 80%); +} + +.text-dark { + color: #543663; +} + +.text-light { + color: hsl(190deg, 80%, 30%); +} + +.text-white { + color: hsl(280deg, 30%, 80%); +} + +/* Font Classes */ +.fs-900 { + font-size: 6.25rem; + font-weight: 400; +} + +.fs-800 { + font-size: 4.6875rem; + font-weight: 300; +} + +.fs-700 { + font-size: 3.5rem; + font-weight: 250; +} + +.fs-600 { + font-size: 2rem; + font-weight: 300; +} + +.fs-500 { + font-size: 1.75rem; + font-weight: 200; +} + +.fs-400 { + font-size: 1.5rem; + font-weight: 200; +} + +.fs-300 { + font-size: 1.125rem; +} + +.fs-200 { + font-size: 1rem; +} + +.ff-serif { + font-family: "Inconsolata", monospace; +} + +.ff-sans-cond { + font-family: sans-serif; +} + +.ff-sans { + font-family: "Jost", sans-serif; +} + +.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 theme3-gradient-anim { + from { + background-position: 6em 0em; + } + 10% { + background-position: 4.8541019662em 3.5267115138em; + } + 20% { + background-position: 1.8541019662em 5.7063390978em; + } + 30% { + background-position: -1.8541019662em 5.7063390978em; + } + 40% { + background-position: -4.8541019662em 3.5267115138em; + } + 50% { + background-position: -6em 0em; + } + 60% { + background-position: -4.8541019662em -3.5267115138em; + } + 70% { + background-position: -1.8541019662em -5.7063390978em; + } + 80% { + background-position: 1.8541019662em -5.7063390978em; + } + 90% { + background-position: 4.8541019662em -3.5267115138em; + } + to { + background-position: 6em 0em; + } +} +.theme3-gradient { + font-weight: 600; + color: transparent; + background: repeating-radial-gradient(#543663, #aa00ff, #dd99ff 80%, white); + background-size: 30vmin 30vmin; + background-clip: text; + animation: theme3-gradient-anim 12s linear infinite; +} + +/*# sourceMappingURL=theme3.css.map */ diff --git a/src/cool-stuff/css-purgatory/theme3/css/theme3.css.map b/src/cool-stuff/css-purgatory/theme3/css/theme3.css.map new file mode 100644 index 0000000..53a2f68 --- /dev/null +++ b/src/cool-stuff/css-purgatory/theme3/css/theme3.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/theme3.scss"],"names":[],"mappings":"AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAME;AAE6B;AAC6B;AAC5B;AAE9B;AAEF;EACE;EACA;EAEA;EACA;;AAEF;EACE;EACA;EAEA;;AAGA;AAcF;AACA;AACA;AAEA;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,aAzBQ;EA0BR,WAhCO;EAiCP,OA1DY;EA2DZ,kBA5DY;EA6DZ;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;AAKJ;AACA;AACA;AAEA;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;AACA;AAAA;AAAA;EAGA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EAEA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;AAEA;EAAY,kBAzJE;;;AA0Jd;EAAY,kBAzJE;;;AA0Jd;EAAY,kBA5JE;;;AA8Jd;EAAc,OA7JA;;;AA8Jd;EAAc,OA7JA;;;AA8Jd;EAAc,OAhKA;;;AAkKd;AAEA;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAiJT;EAAY,aA/ID;;;AAgJX;EAAgB,aA/ID;;;AAgJf;EAAW,aA/ID;;;AAiJV;EAAa;;;AACb;EAAa;;;AAEb;AAEA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;AACA;AACA;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;EAGE;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;EACE;EAEA;EAGA;EACA;EACA;EAEA","file":"theme3.css"} \ No newline at end of file diff --git a/src/cool-stuff/css-purgatory/theme3/index.html b/src/cool-stuff/css-purgatory/theme3/index.html new file mode 100644 index 0000000..31a9259 --- /dev/null +++ b/src/cool-stuff/css-purgatory/theme3/index.html @@ -0,0 +1,113 @@ + + + + + + CSS Purgatory - Theme3 + + + + +
+
+

Theme3

+
+
+
+

Description

+
+

Theme3 is nameless for now. 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 new file mode 100644 index 0000000..048f9c6 --- /dev/null +++ b/src/cool-stuff/css-purgatory/theme3/landingpage.html @@ -0,0 +1,29 @@ + + + + + + Theme3 - Landing Page + + + + + +
+
+
+

this is Theme3.

+

One might want a flashy landing page

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

+ Theme3 - 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/theme3.scss b/src/cool-stuff/css-purgatory/theme3/scss/theme3.scss new file mode 100644 index 0000000..bb9d961 --- /dev/null +++ b/src/cool-stuff/css-purgatory/theme3/scss/theme3.scss @@ -0,0 +1,269 @@ +@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 theme3-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; + } +} + +.theme3-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: theme3-gradient-anim 12s linear infinite; +}