emilia
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rename theme et al. 

Also includes static breathe, which is questionable
This commit is contained in:
Emilia Allison 2022-10-02 13:04:38 -04:00
parent 6250629545
commit f50f72d919
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
4 changed files with 45 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/cool-stuff/css-purgatory/theme3/index.html
View File

@ -3,20 +3,22 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Purgatory - Theme3</title> <title>CSS Purgatory - Waltuh</title>
<link rel="stylesheet" href="css/theme3.css"> <link rel="stylesheet" href="css/waltuh.css">
<!-- Base v1.1 --> <!-- Base v1.1 -->
</head> </head>
<body class="vsc-initialized"> <body class="vsc-initialized">
<main> <main>
<header id="title" class="hr"> <header id="title" class="hr">
<h1>Theme3</h1> <h1>Waltuh</h1>
</header> </header>
<article class=""> <article class="">
<section id="description" class="hr"> <section id="description" class="hr">
<h2>Description</h2> <h2>Description</h2>
<div class="container"> <div class="container">
<p><em>Theme3</em> is nameless for now. It's collaborative too!</p> <mark class="waltuh-gradient">Waltuh</mark> is a stupid name for a theme.
Put your theme away.
It's collaborative too!</p>
</div> </div>
</section> </section>

12
src/cool-stuff/css-purgatory/theme3/landingpage.html
View File

@ -3,8 +3,8 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Theme3 - Landing Page</title> <title>Waltuh - Landing Page</title>
<link rel="stylesheet" href="css/theme3.css"> <link rel="stylesheet" href="css/waltuh.css">
<style> <style>
body { body {
overflow: hidden; overflow: hidden;
@ -13,16 +13,18 @@
<!-- Base v1.1 --> <!-- Base v1.1 -->
</head> </head>
<body class="vsc-initialized"> <body class="vsc-initialized">
<div id="overlay"></div>
<main> <main>
<header> <header>
<div class="container flex column"> <div class="container flex column">
<h1 class="text-dark ff-serif fs-800">this is <mark class="theme3-gradient">Theme3</mark>.</h1> <h1 class="text-dark ff-serif fs-800">this is <mark class="waltuh-gradient">Waltuh</mark>.</h1>
<p>One might want a flashy landing page</p> <p>You know how they say, "It's been a pleasure?"</p>
<p>It hasn't.</p>
</div> </div>
</header> </header>
</main> </main>
<footer class="lock-bottom"> <footer class="lock-bottom">
<a href="./">Return to Theme3</a> <a href="./">Return to Waltuh</a>
</footer> </footer>

8
src/cool-stuff/css-purgatory/theme3/samplepage.html
View File

@ -3,15 +3,15 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Theme3 - Sample Page</title> <title>Waltuh - Sample Page</title>
<link rel="stylesheet" href="css/theme3.css"> <link rel="stylesheet" href="css/waltuh.css">
<!-- Base v1.1 --> <!-- Base v1.1 -->
</head> </head>
<body class="vsc-initialized"> <body class="vsc-initialized">
<main> <main>
<header id="title"> <header id="title">
<h1> <h1>
Theme3 - Sample Page Waltuh - Sample Page
</h1> </h1>
<div class="container"> <div class="container">
<p>Where one might put a page showcasing the features of a theme</p> <p>Where one might put a page showcasing the features of a theme</p>
@ -46,7 +46,7 @@ metus. </p>
</section> </section>
</article> </article>
<footer> <footer>
<a href="./">Return to Theme3</a> <a href="./">Return to Waltuh</a>
</footer> </footer>
</main> </main>

31
src/cool-stuff/css-purgatory/theme3/scss/theme3.scss → src/cool-stuff/css-purgatory/theme3/scss/waltuh.scss
View File

@ -217,7 +217,7 @@ footer {
border: 1px solid black; border: 1px solid black;
} }
@keyframes theme3-gradient-anim { @keyframes waltuh-gradient-anim {
$r: 6em; $r: 6em;
$pd: math.div(2*math.$pi,10); $pd: math.div(2*math.$pi,10);
from { from {
@ -255,7 +255,7 @@ footer {
} }
} }
.theme3-gradient { .waltuh-gradient {
font-weight: 600; font-weight: 600;
color: transparent; color: transparent;
@ -265,5 +265,30 @@ footer {
background-size: 30vmin 30vmin; background-size: 30vmin 30vmin;
background-clip: text; background-clip: text;
animation: theme3-gradient-anim 12s linear infinite; 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;
} }