punkfairie/saudade
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css vars: wordfire

Browse source
This commit is contained in:
marleyrae 2023-06-09 14:40:20 -07:00
parent 6d6ef12c1b
commit 16b6420734
8 changed files with 171 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
wordfire/index.html
View file

@ -12,14 +12,30 @@
<!-- style --> <!-- style -->
<link rel="stylesheet" href="wordfire.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
a { color: #06c; } #index {
a:active { color: #909; } --light-blue: #06c;
a:visited { color: #06c; } --purple: #909;
--blue: #039;
--red: #c00;
--dark-blue: #336;
--muted-purple: #93c;
--bright-purple: #c0f;
--bright-dark-blue: #009;
--neutral-blue: #ccf;
--bright-dark-purple: #609;
--cream: #ffc;
--pink: #f69;
--very-dark-purple: #306;
}
.blue { color: #039 !important; } a { color: var(--light-blue); }
a:active { color: var(--purple); }
a:visited { color: var(--light-blue); }
.blue { color: var(--blue) !important; }
.center { text-align: center; } .center { text-align: center; }
.red { color: #c00 !important; } .red { color: var(--red) !important; }
.purple { color: #909 !important; } .purple { color: var(--purple) !important; }
/* fuck table layouts thanks!!! */ /* fuck table layouts thanks!!! */
@ -28,8 +44,8 @@
width: 149px; width: 149px;
height: 124px; height: 124px;
background-color: #336; background-color: var(--dark-blue);
border: 2px solid #93c; border: 2px solid var(--muted-purple);
} }
#header { #header {
@ -39,7 +55,7 @@
padding: 0; padding: 0;
background-image: url(img/index_clouds.jpg); background-image: url(img/index_clouds.jpg);
border: 2px solid #93c; border: 2px solid var(--muted-purple);
border-left: none; border-left: none;
text-align: center; text-align: center;
} }
@ -50,8 +66,8 @@
width: 149px; width: 149px;
height: 1361px; height: 1361px;
background-color: #336; background-color: var(--dark-blue);
border: 2px solid #93c; border: 2px solid var(--muted-purple);
border-top: none; border-top: none;
} }
@ -61,7 +77,7 @@
height: 1353px; height: 1353px;
padding: 4px; padding: 4px;
border: 2px solid #93c; border: 2px solid var(--muted-purple);
border-left: none; border-left: none;
border-top: none; border-top: none;
} }
@ -71,7 +87,7 @@
#header h1 { #header h1 {
font-size: 48px; font-size: 48px;
font-weight: 700; font-weight: 700;
color: #c0f; color: var(--bright-purple);
font-style: italic; font-style: italic;
text-decoration: underline; text-decoration: underline;
margin: 0; margin: 0;
@ -98,27 +114,27 @@
padding: 3px; padding: 3px;
text-decoration: none; text-decoration: none;
color: #fff; color: white;
font-weight: 700; font-weight: 700;
} }
.tall { height: 42px; } .tall { height: 42px; }
.nav-current { .nav-current {
background-color: #009; background-color: var(--bright-dark-blue);
} }
.nav-btn { .nav-btn {
background-color: #909; background-color: var(--purple);
} }
.nav-current:hover, .nav-btn:hover { .nav-current:hover, .nav-btn:hover {
background-color: #ccf; background-color: var(--neutral-blue);
text-decoration: underline; text-decoration: underline;
} }
.nav-current:visited, .nav-btn:visited { .nav-current:visited, .nav-btn:visited {
color: #fff; color: white;
} }
/* content style */ /* content style */
@ -140,20 +156,20 @@
/* has no one heard of the border attribute ????????????? */ /* has no one heard of the border attribute ????????????? */
#hellbox { #hellbox {
border: 2px solid #609; border: 2px solid var(--bright-dark-purple);
width: 580px; width: 580px;
height: 174px; height: 174px;
margin: 0 auto; margin: 0 auto;
background-color: #ffc; background-color: var(--cream);
} }
#hellbox2 { #hellbox2 {
border: 2px ridge #f69; border: 2px ridge var(--pink);
width: 567px; width: 567px;
height: 160px; height: 160px;
padding: 5px; padding: 5px;
color: #306; color: var(--very-dark-purple);
font-size: 24px; font-size: 24px;
font-weight: 900; font-weight: 900;
font-family: 'Times New Roman', Times, serif; font-family: 'Times New Roman', Times, serif;
@ -176,7 +192,7 @@
.purple-line { .purple-line {
height: 2px; height: 2px;
width: 285px; width: 285px;
background-color: #93c; background-color: var(--muted-purple);
float: left; float: left;
margin: 5px; margin: 5px;
} }
@ -187,7 +203,7 @@
<!-- archive menu --> <!-- archive menu -->
<script src="/menu.js" type="module"></script> <script src="/menu.js" type="module"></script>
</head> </head>
<body> <body id="index">
<div id="top-left"></div> <div id="top-left"></div>
<div id="header"> <div id="header">

21
wordfire/play1.html
View file

@ -11,34 +11,39 @@
<!-- style --> <!-- style -->
<link rel="stylesheet" href="wordfire.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
#play1 {
--green: #3f3;
--purple: #c0f;
}
body { body {
width: 760px; width: 760px;
margin: 16px 14px; margin: 16px 14px;
text-align: center; text-align: center;
} }
a { color: #3f3; } a { color: var(--green); }
a:active { color: #fff; } a:active { color: white; }
a:visited { color: #3f3; } a:visited { color: var(--green); }
h1#title { h1#title {
font-size: 48px; font-size: 48px;
font-weight: 700; font-weight: 700;
font-style: italic; font-style: italic;
color: #c0f; color: var(--purple);
text-decoration: underline; text-decoration: underline;
margin: 0; margin: 0;
} }
#nav { margin-top: 0; } #nav { margin-top: 0; }
#nav a { color: #000; } #nav a { color: black; }
#nav a:active { color: #000; } #nav a:active { color: black; }
#nav a:visited { color: #000; } #nav a:visited { color: black; }
#nav a.current { text-decoration: none; font-weight: 700; } #nav a.current { text-decoration: none; font-weight: 700; }
@ -57,7 +62,7 @@
<!-- archive menu --> <!-- archive menu -->
<script src="/menu.js" type="module"></script> <script src="/menu.js" type="module"></script>
</head> </head>
<body> <body id="play1">
<h1 id="title">petz** WORDFIRE'S**petz</h1> <h1 id="title">petz** WORDFIRE'S**petz</h1>
<p id="nav" class="arial"> <p id="nav" class="arial">

30
wordfire/play2.html
View file

@ -11,7 +11,14 @@
<!-- style --> <!-- style -->
<link rel="stylesheet" href="wordfire.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
/* page grid */ #play2 {
--purple: #c0f;
--red: #c00;
--purple-2: #909;
--green: #cf9;
}
/* ---- page grid ------------------------------------------------------------------------------------------- */
#page { #page {
display: grid; display: grid;
@ -21,7 +28,7 @@
row-gap: 5px; row-gap: 5px;
} }
/* top right image ---------------------------------------------------------------------- */ /* ---- top right image ------------------------------------------------------------------------------------- */
#top-right { #top-right {
grid-column: c1 / c2; grid-column: c1 / c2;
@ -30,7 +37,7 @@
justify-self: center; justify-self: center;
} }
/* header ------------------------------------------------------------------------------- */ /* ---- header ---------------------------------------------------------------------------------------------- */
#header { #header {
grid-column: c3 / c4; grid-column: c3 / c4;
@ -45,18 +52,18 @@
font-weight: 700; font-weight: 700;
text-decoration: underline; text-decoration: underline;
font-style: italic; font-style: italic;
color: #c0f; color: var(--purple);
padding: 0 0 5px 0; margin: 0; padding: 0 0 5px 0; margin: 0;
} }
#header > h2 { #header > h2 {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
color: #c00; color: var(--red);
padding: 0; margin: 0; padding: 0; margin: 0;
} }
/* nav ---------------------------------------------------------------------------------- */ /* ---- nav ------------------------------------------------------------------------------------------------- */
#nav { #nav {
grid-column: c1 / c2; grid-column: c1 / c2;
@ -70,7 +77,7 @@
text-align: center; text-align: center;
padding: 5px; padding: 5px;
display: block; display: block;
background-color: #909; background-color: var(--purple-2);
margin-bottom: 2px; margin-bottom: 2px;
} }
@ -80,15 +87,14 @@
#nav > a:first-child { margin-top: 40px; } #nav > a:first-child { margin-top: 40px; }
/* content ------------------------------------------------------------------------------ */ /* content -------------------------------------------------------------------------------------------------- */
#content { #content {
grid-column: c3 / c4; grid-column: c3 / c4;
grid-row: r2 / r3; grid-row: r2 / r3;
padding: 4px; padding: 4px 6px 4px 4px;
padding-right: 6px; background-color: var(--green);
background-color: #cf9;
display: grid; display: grid;
gap: 0; grid-gap: 0; gap: 0; grid-gap: 0;
@ -103,7 +109,7 @@
<!-- archive menu --> <!-- archive menu -->
<script src="/menu.js" type="module"></script> <script src="/menu.js" type="module"></script>
</head> </head>
<body> <body id="play2">
<div id="page"> <div id="page">
<!-- top right image ------------------------------------------------------------------------------------------> <!-- top right image ------------------------------------------------------------------------------------------>

34
wordfire/play3.html
View file

@ -11,13 +11,23 @@
<!-- style --> <!-- style -->
<link rel="stylesheet" href="wordfire.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
body { background-color: #6cf; } #play3 {
--blue: #6cf;
--light-blue: #9cf;
--dark-blue: #09c;
--darker-blue: #069;
--purple: #639;
a { color: #09c; } --background: var(--blue);
}
a:active { color: #9cf; } body { background-color: var(--background); }
a:visited { color: #069; } a { color: var(--dark-blue); }
a:active { color: var(--light-blue); }
a:visited { color: var(--darker-blue); }
#page { #page {
display: grid; display: grid;
@ -27,7 +37,7 @@
grid-template-rows: [r1] 168px [r2] 97px [r3] 903px [c4]; grid-template-rows: [r1] 168px [r2] 97px [r3] 903px [c4];
} }
/* header ------------------------------------------------------------------------------- */ /* header --------------------------------------------------------------------------------------------------- */
#header { #header {
grid-column: c2/c3; grid-column: c2/c3;
@ -40,14 +50,14 @@
h1 { padding: 0; margin: 0 0 5px 0; } h1 { padding: 0; margin: 0 0 5px 0; }
h2 { h2 {
color: #639; color: var(--purple);
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
font-style: italic; font-style: italic;
padding: 0; margin: 0; padding: 0; margin: 0;
} }
/* nav ---------------------------------------------------------------------------------- */ /* nav ------------------------------------------------------------------------------------------------------ */
#nav { #nav {
grid-column: c2/c3; grid-column: c2/c3;
@ -55,18 +65,18 @@
align-self: center; align-self: center;
} }
#nav > a { color: #000; } #nav > a { color: black; }
#nav > a:active { color: #000; } #nav > a:active { color: black; }
#nav > a:visited { color: #000; } #nav > a:visited { color: black; }
#nav > #current { #nav > #current {
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
} }
/* content ------------------------------------------------------------------------------ */ /* content -------------------------------------------------------------------------------------------------- */
#content { #content {
grid-column: c2/c3; grid-column: c2/c3;
@ -90,7 +100,7 @@
<!-- archive menu --> <!-- archive menu -->
<script src="/menu.js" type="module"></script> <script src="/menu.js" type="module"></script>
</head> </head>
<body> <body id="play3">
<div id="page"> <div id="page">
<div id="top-left" style="grid-column: c1/c2; grid-row: r1/r4; align-self: start; <div id="top-left" style="grid-column: c1/c2; grid-row: r1/r4; align-self: start;
justify-self: start;"> justify-self: start;">

58
wordfire/play4.html
View file

@ -13,19 +13,29 @@
<!-- style --> <!-- style -->
<link rel="stylesheet" href="wordfire.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
body { background-color: #fff; padding: 0; margin: 2px; } #play4 {
--red: #c00;
--neutral-blue: #aecfcb;
--teal: #066;
--dark-neutral-blue: #9cc;
--light-pink: #fcc;
a { color: #000; } --background: white;
}
a:active { color: #000; } body { background-color: var(--background); padding: 0; margin: 2px; }
a:visited { color: #000; } a { color: black; }
a:active { color: black; }
a:visited { color: black; }
#page { #page {
display: grid; display: grid;
gap: 0; grid-gap: 0; gap: 0; grid-gap: 0;
padding: 0; margin: 0; padding: 0; margin: 0;
border-top: 2px solid #c00; border-top: 2px solid var(--red);
width: 761px; width: 761px;
grid-template-columns: [c1] 151px [space] 2px [c2] 608px [c3]; grid-template-columns: [c1] 151px [space] 2px [c2] 608px [c3];
@ -38,10 +48,10 @@
align-self: stretch; align-self: stretch;
justify-self: stretch; justify-self: stretch;
padding-bottom: 149px; padding-bottom: 149px;
border-bottom: 2px solid #c00; border-bottom: 2px solid var(--red);
} }
/* header ------------------------------------------------------------------------------- */ /* header --------------------------------------------------------------------------------------------------- */
#header { #header {
grid-column: c2/c3; grid-column: c2/c3;
@ -50,10 +60,10 @@
justify-self: stretch; justify-self: stretch;
text-align: center; text-align: center;
border-left: 2px solid #c00; border-left: 2px solid var(--red);
border-right: 2px solid #c00; border-right: 2px solid var(--red);
border-top: 2px solid #c00; border-top: 2px solid var(--red);
background-color: #aecfcb; background-color: var(--neutral-blue);
padding-bottom: 5px; padding-bottom: 5px;
} }
@ -62,11 +72,11 @@
#header > h2 { #header > h2 {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
color: #066; color: var(--teal);
padding: 0; margin: 0; padding: 0; margin: 0;
} }
/* nav ---------------------------------------------------------------------------------- */ /* nav ------------------------------------------------------------------------------------------------------ */
#nav { #nav {
grid-column: c1/space; grid-column: c1/space;
@ -74,36 +84,36 @@
justify-self: center; justify-self: center;
text-align: center; text-align: center;
border-top: 2px solid #c00; border-top: 2px solid var(--red);
padding-top: 30px; padding-top: 30px;
} }
#nav > a { #nav > a {
display: block; display: block;
background-color: #9cc; background-color: var(--dark-neutral-blue);
color: #000; color: black;
font-weight: 700; font-weight: 700;
padding: 5px; padding: 5px;
margin-bottom: 2px; margin-bottom: 2px;
text-decoration: none; text-decoration: none;
} }
#nav > a#current { background-color: #fff; } #nav > a#current { background-color: white; }
#nav > a:hover, #nav > a#current:hover { #nav > a:hover, #nav > a#current:hover {
text-decoration: underline; text-decoration: underline;
background-color: #fcc; background-color: var(--light-pink);
} }
/* content ------------------------------------------------------------------------------ */ /* content -------------------------------------------------------------------------------------------------- */
#content { #content {
grid-column: c2/c3; grid-column: c2/c3;
grid-row: r2/r3; grid-row: r2/r3;
border-left: 2px solid #c00; border-left: 2px solid var(--red);
border-top: 2px solid #c00; border-top: 2px solid var(--red);
border-right: 2px solid #c00; border-right: 2px solid var(--red);
display: grid; display: grid;
gap: 0; grid-gap: 0; gap: 0; grid-gap: 0;
@ -118,13 +128,13 @@
justify-self: center; justify-self: center;
} }
.border-left { border-left: 2px solid #c00; } .border-left { border-left: 2px solid var(--red); }
</style> </style>
<!-- archive menu --> <!-- archive menu -->
<script src="/menu.js" type="module"></script> <script src="/menu.js" type="module"></script>
</head> </head>
<body> <body id="play4">
<div id="page"> <div id="page">
<div id="top-left"></div> <div id="top-left"></div>

27
wordfire/possums.html
View file

@ -11,13 +11,22 @@
<!-- style --> <!-- style -->
<link rel="stylesheet" href="wordfire.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
body { background-color: #900; color: #009; } #possums {
--red: #900;
--blue: #009;
--purple: #60f;
a { color: #009; } --background: var(--red);
--color: var(--blue);
}
a:active { color: #009; } body { background-color: var(--background); color: var(--color); }
a:visited { color: #009; } a { color: var(--blue); }
a:active { color: var(--blue); }
a:visited { color: var(--blue); }
#page { #page {
display: grid; display: grid;
@ -26,7 +35,7 @@
grid-template-rows: [r1] 156px [r2] 855px [r3]; grid-template-rows: [r1] 156px [r2] 855px [r3];
} }
/* header ------------------------------------------------------------------------------- */ /* header --------------------------------------------------------------------------------------------------- */
#header { #header {
grid-column: c2/c3; grid-column: c2/c3;
@ -39,7 +48,7 @@
#header > h1 { padding: 0; margin: 0 0 5px 0; } #header > h1 { padding: 0; margin: 0 0 5px 0; }
#header > h2 { #header > h2 {
color: #60f; color: var(--purple);
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 32px;
font-style: italic; font-style: italic;
@ -47,7 +56,7 @@
padding: 0; margin: 0; padding: 0; margin: 0;
} }
/* nav ---------------------------------------------------------------------------------- */ /* nav ------------------------------------------------------------------------------------------------------ */
#nav { #nav {
grid-column: c1/c2; grid-column: c1/c2;
@ -66,7 +75,7 @@
#nav > a:hover { text-decoration: underline; } #nav > a:hover { text-decoration: underline; }
/* content ------------------------------------------------------------------------------ */ /* content -------------------------------------------------------------------------------------------------- */
#content { #content {
grid-column: c2/c3; grid-column: c2/c3;
@ -88,7 +97,7 @@
<!-- archive menu --> <!-- archive menu -->
<script src="/menu.js" type="module"></script> <script src="/menu.js" type="module"></script>
</head> </head>
<body> <body id="possums">
<div id="page"> <div id="page">
<div id="header"> <div id="header">
<h1>petz**<br> <h1>petz**<br>

15
wordfire/precious.html
View file

@ -11,9 +11,16 @@
<!-- style --> <!-- style -->
<link rel="stylesheet" href="wordfire.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
body { background-color: #ccf; background-image: url(img/preciousmkg_countrybreeze_1.gif); } #precious {
--neutral-blue: #ccf;
--purple: #63f;
a, a:active, a:visited { color: #000; } --background: url(img/preciousmkg_countrybreeze_1.gif);
}
body { background-color: var(--neutral-blue); background-image: var(--background); }
a, a:active, a:visited { color: black; }
#page { #page {
display: grid; display: grid;
@ -39,7 +46,7 @@
} }
h2 { h2 {
color: #63f; color: var(--purple);
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 32px;
padding: 0; margin: 0; padding: 0; margin: 0;
@ -49,7 +56,7 @@
<!-- archive menu --> <!-- archive menu -->
<script src="/menu.js" type="module"></script> <script src="/menu.js" type="module"></script>
</head> </head>
<body> <body id="precious">
<div id="page"> <div id="page">
<!-- header --> <!-- header -->
<div class="js-center" style="grid-column: c2/c4; grid-row: r1/r2;"> <div class="js-center" style="grid-column: c2/c4; grid-row: r1/r2;">

24
wordfire/sound.html
View file

@ -11,12 +11,18 @@
<!-- style --> <!-- style -->
<link rel="stylesheet" href="wordfire.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
#sound {
--purple: #609;
--background: url(img/sound_clouds.jpg);
}
body { body {
background-image: url(img/sound_clouds.jpg); background-image: var(--background);
margin-left: 10px; margin-left: 10px;
} }
a, a:active, a:hover { color: #000; } a, a:active, a:hover { color: black; }
#page { #page {
display: grid; display: grid;
@ -30,14 +36,14 @@
grid-template-rows: [r1] 163px [r2] 532px [r3]; grid-template-rows: [r1] 163px [r2] 532px [r3];
} }
/* top-left ----------------------------------------------------------------------------- */ /* ---- top-left -------------------------------------------------------------------------------------------- */
#top-left { #top-left {
grid-column: c1/c2; grid-column: c1/c2;
grid-row: r1/r2; grid-row: r1/r2;
} }
/* header ------------------------------------------------------------------------------- */ /* ---- header ---------------------------------------------------------------------------------------------- */
#header { #header {
grid-column: c2/c3; grid-column: c2/c3;
@ -47,14 +53,14 @@
h1 { padding: 0; margin: 0 0 2px 0; } h1 { padding: 0; margin: 0 0 2px 0; }
h2 { h2 {
color: #609; color: var(--purple);
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
/* nav ---------------------------------------------------------------------------------- */ /* ---- nav ------------------------------------------------------------------------------------------------- */
#nav { #nav {
grid-column: c1/c2; grid-column: c1/c2;
@ -67,14 +73,14 @@
display: block; display: block;
padding: 5px; padding: 5px;
margin-bottom: 2px; margin-bottom: 2px;
color: #000; color: black;
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
} }
#nav > a:hover { text-decoration: underline; } #nav > a:hover { text-decoration: underline; }
/* content ------------------------------------------------------------------------------ */ /* ---- content --------------------------------------------------------------------------------------------- */
#content { #content {
grid-column: c2/c3; grid-column: c2/c3;
@ -98,7 +104,7 @@
<!-- archive menu --> <!-- archive menu -->
<script src="/menu.js" type="module"></script> <script src="/menu.js" type="module"></script>
</head> </head>
<body> <body id="sound">
<div id="page"> <div id="page">
<!-- #top-left ----------------------------------------------------------------------------------------------------> <!-- #top-left ---------------------------------------------------------------------------------------------------->
<div id="top-left"> <div id="top-left">