scss -> css: wordfire.css
This commit is contained in:
parent
0bda951b84
commit
6d6ef12c1b
19 changed files with 341 additions and 443 deletions
|
@ -1,4 +1,4 @@
|
|||
@use '../../../style/menu';
|
||||
@use 'menu.css';
|
||||
|
||||
// GENERAL
|
||||
|
||||
|
@ -31,6 +31,7 @@ a {
|
|||
color: #f63;
|
||||
|
||||
&:visited { color: #8a2be2; }
|
||||
|
||||
&:active { color: #0f0; }
|
||||
}
|
||||
|
||||
|
@ -131,6 +132,7 @@ table.wide-center-table {
|
|||
color: #800080;
|
||||
|
||||
&:visited { color: #808080; }
|
||||
|
||||
&:active { color: #f0f; }
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../style/menu';
|
||||
@use 'menu.css';
|
||||
|
||||
html {
|
||||
background-color: #202020;
|
||||
|
|
4
menu.js
4
menu.js
|
@ -3,6 +3,10 @@
|
|||
const siteRoot = '/' + location.pathname.split('/')[1]
|
||||
const {wayback} = await import(`${siteRoot}/config.js`)
|
||||
|
||||
/* --------------------------------------------------------------------------------------------- import menu css ---- */
|
||||
|
||||
import '/style/menu.css'
|
||||
|
||||
/* -------------------------------------------------------------------------------------------------- build menu ---- */
|
||||
let menu = document.createElement('div')
|
||||
menu.id = 'archive-menu'
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../style/menu';
|
||||
@use 'menu.css';
|
||||
|
||||
// general
|
||||
|
||||
|
|
|
@ -1,56 +0,0 @@
|
|||
div#archive-menu {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
text-align: right;
|
||||
font-size: 16px !important;
|
||||
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
height: unset;
|
||||
width: unset;
|
||||
|
||||
max-width: 0;
|
||||
max-height: 0;
|
||||
transition: max-height 0.5s ease-out, max-width 0.5s ease-out;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
visibility: hidden;
|
||||
transition: visibility 0s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
|
||||
#hrt {
|
||||
font-family: sans-serif !important;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 5px;
|
||||
|
||||
opacity: 100%;
|
||||
transition: opacity 0.5s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
div#archive-menu:hover {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
transition: max-height 0.5s ease-in, max-width 0.5s ease-in;
|
||||
|
||||
a {
|
||||
visibility: visible;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
#hrt {
|
||||
opacity: 0%;
|
||||
transition: opacity 0.5s ease-in;
|
||||
}
|
||||
}
|
61
style/menu.css
Normal file
61
style/menu.css
Normal file
|
@ -0,0 +1,61 @@
|
|||
/*noinspection DuplicatedCode,CssUnresolvedCustomProperty*/
|
||||
div#archive-menu {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
text-align: right;
|
||||
font-size: 16px !important;
|
||||
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
height: unset;
|
||||
width: unset;
|
||||
|
||||
max-width: 0;
|
||||
max-height: 0;
|
||||
transition: max-height 0.5s ease-out, max-width 0.5s ease-out;
|
||||
|
||||
border: 1px solid var(--color, black);
|
||||
background: var(--background, white);
|
||||
color: var(--color, black);
|
||||
}
|
||||
|
||||
div#archive-menu a {
|
||||
display: block;
|
||||
|
||||
visibility: hidden;
|
||||
transition: visibility 0s;
|
||||
}
|
||||
|
||||
div#archive-menu a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
|
||||
div#archive-menu #hrt {
|
||||
font-family: sans-serif !important;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 5px;
|
||||
|
||||
opacity: 100%;
|
||||
transition: opacity 0.5s ease-out;
|
||||
}
|
||||
|
||||
div#archive-menu:hover {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
transition: max-height 0.5s ease-in, max-width 0.5s ease-in;
|
||||
}
|
||||
|
||||
div#archive-menu:hover a {
|
||||
visibility: visible;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
div#archive-menu:hover #hrt {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in;
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../style/menu';
|
||||
@use 'menu.css';
|
||||
|
||||
/* GLOBAL --------------------------------------------------------------------------------------- */
|
||||
|
||||
|
@ -15,6 +15,7 @@ a {
|
|||
color: #fc3;
|
||||
|
||||
&:active { color: #009d27; }
|
||||
|
||||
&:visited { color: #00f; }
|
||||
}
|
||||
|
||||
|
@ -40,7 +41,7 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
main{
|
||||
main {
|
||||
margin-left: 200px;
|
||||
padding: 15px 10px;
|
||||
min-height: 100vh;
|
||||
|
@ -150,6 +151,7 @@ p { margin-bottom: 20px; }
|
|||
color: #fff;
|
||||
|
||||
&:visited { color: #fff; }
|
||||
|
||||
&:active { color: #004000; }
|
||||
}
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<!-- -->
|
||||
|
||||
<!-- style -->
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
<link rel="stylesheet" href="wordfire.css">
|
||||
<style>
|
||||
a { color: #06c; }
|
||||
a:active { color: #909; }
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<!-- -->
|
||||
|
||||
<!-- style -->
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
<link rel="stylesheet" href="wordfire.css">
|
||||
<style>
|
||||
body {
|
||||
width: 760px;
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<!-- -->
|
||||
|
||||
<!-- style -->
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
<link rel="stylesheet" href="wordfire.css">
|
||||
<style>
|
||||
/* page grid */
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<!-- -->
|
||||
|
||||
<!-- style -->
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
<link rel="stylesheet" href="wordfire.css">
|
||||
<style>
|
||||
body { background-color: #6cf; }
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<!-- -->
|
||||
|
||||
<!-- style -->
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
<link rel="stylesheet" href="wordfire.css">
|
||||
<style>
|
||||
body { background-color: #fff; padding: 0; margin: 2px; }
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<!-- -->
|
||||
|
||||
<!-- style -->
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
<link rel="stylesheet" href="wordfire.css">
|
||||
<style>
|
||||
body { background-color: #900; color: #009; }
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<!-- -->
|
||||
|
||||
<!-- style -->
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
<link rel="stylesheet" href="wordfire.css">
|
||||
<style>
|
||||
body { background-color: #ccf; background-image: url(img/preciousmkg_countrybreeze_1.gif); }
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<!-- -->
|
||||
|
||||
<!-- style -->
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
<link rel="stylesheet" href="wordfire.css">
|
||||
<style>
|
||||
body {
|
||||
background-image: url(img/sound_clouds.jpg);
|
||||
|
|
|
@ -1,113 +0,0 @@
|
|||
nav#archive-menu {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
text-align: right;
|
||||
font-size: 16px !important;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
max-width: 0;
|
||||
max-height: 0;
|
||||
transition: max-height 0.5s ease-out, max-width 0.5s ease-out;
|
||||
}
|
||||
nav#archive-menu a {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
transition: visibility 0s;
|
||||
}
|
||||
nav#archive-menu a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
nav#archive-menu #hrt {
|
||||
font-family: sans-serif !important;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 5px;
|
||||
opacity: 100%;
|
||||
transition: opacity 0.5s ease-out;
|
||||
}
|
||||
|
||||
nav#archive-menu:hover {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
transition: max-height 0.5s ease-in, max-width 0.5s ease-in;
|
||||
}
|
||||
nav#archive-menu:hover a {
|
||||
visibility: visible;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
nav#archive-menu:hover #hrt {
|
||||
opacity: 0%;
|
||||
transition: opacity 0.5s ease-in;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
background-color: #ccf;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #c0f;
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.medium {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.arial {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.times {
|
||||
font-family: "Times New Roman", serif;
|
||||
}
|
||||
|
||||
.georgia {
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
.courier {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
.missing-asset {
|
||||
border: 1px solid;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.display-table {
|
||||
display: table;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#god {
|
||||
float: right;
|
||||
width: 130px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../style/_menu.scss","style.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;;AAEA;EACC;EAEA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;;AChDF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKD;EAAU;;;AAEV;EAAS;;;AAET;EAAU;;;AAEV;EAAO;;;AAEP;EAAS;;;AAET;EAAS;;;AAET;EAAW;;;AAEX;EAAW;;;AAIX;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAO;EAAc;EAAc","file":"style.css"}
|
|
@ -1,52 +0,0 @@
|
|||
@use '../../style/menu';
|
||||
|
||||
body {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
background-color: #ccf;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #c0f;
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// text
|
||||
|
||||
.center { text-align: center; }
|
||||
|
||||
.small { font-size: 10px; }
|
||||
|
||||
.medium { font-size: 16px; }
|
||||
|
||||
.big { font-size: 18px; }
|
||||
|
||||
.arial { font-family: Arial, Helvetica, sans-serif; }
|
||||
|
||||
.times { font-family: 'Times New Roman', serif; }
|
||||
|
||||
.georgia { font-family: Georgia, serif; }
|
||||
|
||||
.courier { font-family: "Courier New", Courier, monospace; }
|
||||
|
||||
// misc
|
||||
|
||||
.missing-asset {
|
||||
border: 1px solid;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.display-table {
|
||||
display: table;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#god { float: right; width: 130px; text-align: center; }
|
51
wordfire/wordfire.css
Normal file
51
wordfire/wordfire.css
Normal file
|
@ -0,0 +1,51 @@
|
|||
body {
|
||||
--background: #ccf;
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
background-color: var(--background);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #c0f;
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* text */
|
||||
|
||||
.center { text-align: center; }
|
||||
|
||||
.small { font-size: 10px; }
|
||||
|
||||
.medium { font-size: 16px; }
|
||||
|
||||
.big { font-size: 18px; }
|
||||
|
||||
.arial { font-family: Arial, Helvetica, sans-serif; }
|
||||
|
||||
.times { font-family: 'Times New Roman', serif; }
|
||||
|
||||
.georgia { font-family: Georgia, serif; }
|
||||
|
||||
.courier { font-family: "Courier New", Courier, monospace; }
|
||||
|
||||
/* misc */
|
||||
|
||||
.missing-asset {
|
||||
border: 1px solid;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.display-table {
|
||||
display: table;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#god { float: right; width: 130px; text-align: center; }
|
Loading…
Reference in a new issue