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 charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Purgatory - Theme3</title>
<link rel="stylesheet" href="css/theme3.css">
<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>Theme3</h1>
<h1>Waltuh</h1>
</header>
<article class="">
<section id="description" class="hr">
<h2>Description</h2>
<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>
</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 charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Theme3 - Landing Page</title>
<link rel="stylesheet" href="css/theme3.css">
<title>Waltuh - Landing Page</title>
<link rel="stylesheet" href="css/waltuh.css">
<style>
body {
overflow: hidden;
@ -13,16 +13,18 @@
<!-- Base v1.1 -->
</head>
<body class="vsc-initialized">
<div id="overlay"></div>
<main>
<header>
<div class="container flex column">
<h1 class="text-dark ff-serif fs-800">this is <mark class="theme3-gradient">Theme3</mark>.</h1>
<p>One might want a flashy landing page</p>
<h1 class="text-dark ff-serif fs-800">this is <mark class="waltuh-gradient">Waltuh</mark>.</h1>
<p>You know how they say, "It's been a pleasure?"</p>
<p>It hasn't.</p>
</div>
</header>
</main>
<footer class="lock-bottom">
<a href="./">Return to Theme3</a>
<a href="./">Return to Waltuh</a>
</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 charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Theme3 - Sample Page</title>
<link rel="stylesheet" href="css/theme3.css">
<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>
Theme3 - Sample Page
Waltuh - Sample Page
</h1>
<div class="container">
<p>Where one might put a page showcasing the features of a theme</p>
@ -46,7 +46,7 @@ metus. </p>
</section>
</article>
<footer>
<a href="./">Return to Theme3</a>
<a href="./">Return to Waltuh</a>
</footer>
</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;
}
@keyframes theme3-gradient-anim {
@keyframes waltuh-gradient-anim {
$r: 6em;
$pd: math.div(2*math.$pi,10);
from {
@ -255,7 +255,7 @@ footer {
}
}
.theme3-gradient {
.waltuh-gradient {
font-weight: 600;
color: transparent;
@ -265,5 +265,30 @@ footer {
background-size: 30vmin 30vmin;
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;
}