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

21
wordfire/play1.html
View file

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

30
wordfire/play2.html
View file

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

34
wordfire/play3.html
View file

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

58
wordfire/play4.html
View file

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

27
wordfire/possums.html
View file

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

15
wordfire/precious.html
View file

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

24
wordfire/sound.html
View file

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