css vars: wordfire
This commit is contained in:
parent
6d6ef12c1b
commit
16b6420734
8 changed files with 171 additions and 102 deletions
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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 ------------------------------------------------------------------------------------------>
|
||||||
|
|
|
@ -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;">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue