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

scss -> css: wordfire.css

Browse source
This commit is contained in:
marleyrae 2023-06-09 14:14:26 -07:00
parent 0bda951b84
commit 6d6ef12c1b
19 changed files with 341 additions and 443 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
carolyns_creations/frames/style/style.scss
View file

@ -1,55 +1,56 @@
@use '../../../style/menu'; @use 'menu.css';
// GENERAL // GENERAL
html { html {
background-color: #fff7d7; background-color: #fff7d7;
font-family: 'Comic Sans MS'; font-family: 'Comic Sans MS';
} }
body { body {
font-size: 13px; font-size: 13px;
color: #810541; color: #810541;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
// MENU // MENU
.menu { .menu {
padding: 7px; padding: 7px;
margin: 0; margin: 0;
color: #660000; color: #660000;
font-size: 13px; font-size: 13px;
li { list-style: none; } li { list-style: none; }
} }
// LINKS // LINKS
a { a {
color: #f63; color: #f63;
&:visited { color: #8a2be2; } &:visited { color: #8a2be2; }
&:active { color: #0f0; }
&:active { color: #0f0; }
} }
.defunct { text-decoration: line-through; } .defunct { text-decoration: line-through; }
// TEXT // TEXT
p { padding: 5px 10px; } p { padding: 5px 10px; }
.green { color: #006400; } .green { color: #006400; }
.purple { color: #800080; } .purple { color: #800080; }
.brown { color: #660000; } .brown { color: #660000; }
.normal { font-size: 13px; } .normal { font-size: 13px; }
.big { font-size: 16px; } .big { font-size: 16px; }
.bigger { font-size: 18px; } .bigger { font-size: 18px; }
.courier { font-family: 'Courier New'; } .courier { font-family: 'Courier New'; }
.comic-sans { font-family: 'Comic Sans MS'; } .comic-sans { font-family: 'Comic Sans MS'; }
.times-new-roman { font-family: 'Times New Roman'; } .times-new-roman { font-family: 'Times New Roman'; }
.bold { font-weight: 700; } .bold { font-weight: 700; }
@ -57,8 +58,8 @@ p { padding: 5px 10px; }
// FORMATTING // FORMATTING
.center { .center {
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
} }
.float-left { float: left; } .float-left { float: left; }
@ -72,49 +73,49 @@ p { padding: 5px 10px; }
.side-padding { .side-padding {
width: 80%; width: 80%;
display: table; display: table;
margin: 0 auto; margin: 0 auto;
} }
.more-side-padding { .more-side-padding {
width: 60%; width: 60%;
display: table; display: table;
margin: 0 auto; margin: 0 auto;
} }
.less-side-padding { .less-side-padding {
width: 90%; width: 90%;
display: table; display: table;
margin: 0 auto; margin: 0 auto;
} }
table.img-size img { table.img-size img {
width: 320px; width: 320px;
height: 224px; height: 224px;
} }
table.center-table { table.center-table {
width: 50%; width: 50%;
margin: 0 auto; margin: 0 auto;
} }
table.wide-center-table { table.wide-center-table {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
} }
.border-outer { .border-outer {
width: max-content; width: max-content;
margin: 0 auto; margin: 0 auto;
border: 2px solid; border: 2px solid;
.border-inner { .border-inner {
width: 90vw; width: 90vw;
margin: 2px; margin: 2px;
padding: 30px; padding: 30px;
border: 1px solid; border: 1px solid;
} }
} }
.border-brown { border-color: #660000; } .border-brown { border-color: #660000; }
@ -124,37 +125,38 @@ table.wide-center-table {
// PAGE SPECIFIC // PAGE SPECIFIC
#sandz { #sandz {
background-color: #dafae8; background-color: #dafae8;
color: #00552b; color: #00552b;
a { a {
color: #800080; color: #800080;
&:visited { color: #808080; } &:visited { color: #808080; }
&:active { color: #f0f; }
} &:active { color: #f0f; }
}
} }
#catz1dex { #catz1dex {
background-color: #33cccc; background-color: #33cccc;
color: #000; color: #000;
font-family: Times; font-family: Times;
a { a {
color: #fff; color: #fff;
&:visited { color: #fff; } &:visited { color: #fff; }
} }
} }
#dogz1fooler { #dogz1fooler {
background-color: #8442ef; background-color: #8442ef;
color: #f7f5d7; color: #f7f5d7;
font-family: Times; font-family: Times;
a { a {
color: #00ff00; color: #00ff00;
&:visited { color: #fff; } &:visited { color: #fff; }
} }
} }

52
carolyns_creations/style/landing.scss
View file

@ -1,40 +1,40 @@
@use '../../style/menu'; @use 'menu.css';
html { html {
background-color: #202020; background-color: #202020;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-family: 'Comic Sans MS'; font-family: 'Comic Sans MS';
font-size: 1em; font-size: 1em;
} }
.content { .content {
margin-top: 55px; margin-top: 55px;
} }
p { p {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
a { a {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
&:visted { &:visted {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
&:active { &:active {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
&:hover { &:hover {
color: #ffff40; color: #ffff40;
text-decoration: line-through; text-decoration: line-through;
cursor: ne-resize; cursor: ne-resize;
} }
} }

4
menu.js
View file

@ -3,6 +3,10 @@
const siteRoot = '/' + location.pathname.split('/')[1] const siteRoot = '/' + location.pathname.split('/')[1]
const {wayback} = await import(`${siteRoot}/config.js`) const {wayback} = await import(`${siteRoot}/config.js`)
/* --------------------------------------------------------------------------------------------- import menu css ---- */
import '/style/menu.css'
/* -------------------------------------------------------------------------------------------------- build menu ---- */ /* -------------------------------------------------------------------------------------------------- build menu ---- */
let menu = document.createElement('div') let menu = document.createElement('div')
menu.id = 'archive-menu' menu.id = 'archive-menu'

28
petz5world/style/style.scss
View file

@ -1,19 +1,19 @@
@use '../../style/menu'; @use 'menu.css';
// general // general
body { body {
text-align: center; text-align: center;
font-family: 'Georgia', serif; font-family: 'Georgia', serif;
font-size: 16px; font-size: 16px;
} }
// index // index
#hit-counter { #hit-counter {
display: inline-block; display: inline-block;
border: 8px #bdbdbd solid; border: 8px #bdbdbd solid;
background-color: #bdbdbd; background-color: #bdbdbd;
} }
// text // text
@ -33,18 +33,18 @@ h2 { font-size: 24px; }
// misc formatting // misc formatting
.missing-asset { .missing-asset {
border: 1px solid; border: 1px solid;
padding: 5px; padding: 5px;
} }
.display-table { .display-table {
display: table; display: table;
margin: 10px auto; margin: 10px auto;
} }
.inline-block { .inline-block {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
} }
// hell // hell
@ -55,4 +55,4 @@ em.r { color: #f00; }
em.y { color: #ff0; } em.y { color: #ff0; }
em.g { color: #9f0; } em.g { color: #9f0; }
em.b { color: #3ff; } em.b { color: #3ff; }
em.p { color: #96f; } em.p { color: #96f; }

56
style/_menu.scss
View file

@ -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
View 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;
}

210
vpz_research/style/style.scss
View file

@ -1,54 +1,55 @@
@use '../../style/menu'; @use 'menu.css';
/* GLOBAL --------------------------------------------------------------------------------------- */ /* GLOBAL --------------------------------------------------------------------------------------- */
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 13px; font-size: 13px;
color: #fff; color: #fff;
background-color: #006; background-color: #006;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
a { a {
color: #fc3; color: #fc3;
&:active { color: #009d27; } &:active { color: #009d27; }
&:visited { color: #00f; }
&:visited { color: #00f; }
} }
nav { nav {
background-color: #fff; background-color: #fff;
background-image: url(../img/main-menu_0b725143.gif); background-image: url(../img/main-menu_0b725143.gif);
width: 180px; width: 180px;
height: 100vh; height: 100vh;
position: fixed; position: fixed;
padding: 20px 10px; padding: 20px 10px;
text-align: right; text-align: right;
a { a {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
} }
#images { text-align: center; } #images { text-align: center; }
#line { #line {
border-bottom: 1px solid rgba(171, 230, 246, 0.5); border-bottom: 1px solid rgba(171, 230, 246, 0.5);
} }
} }
main{ main {
margin-left: 200px; margin-left: 200px;
padding: 15px 10px; padding: 15px 10px;
min-height: 100vh; min-height: 100vh;
*:first-child { *:first-child {
padding-top: 0; padding-top: 0;
margin-top: 0; margin-top: 0;
} }
} }
/* text */ /* text */
@ -78,102 +79,103 @@ p { margin-bottom: 20px; }
#index h1 { font-size: 32px; } #index h1 { font-size: 32px; }
#index h2 { #index h2 {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0; margin-bottom: 0;
& + p { & + p {
padding-top: 0; padding-top: 0;
margin-top: 0; margin-top: 0;
} }
} }
#index main table { #index main table {
width: 585px; width: 585px;
margin: 20px auto; margin: 20px auto;
border-collapse: collapse; border-collapse: collapse;
font-weight: 700; font-weight: 700;
td { td {
border: #c0c0c0 solid 2px; border: #c0c0c0 solid 2px;
padding: 2px; padding: 2px;
} }
td.title { td.title {
background-color: #fc3; background-color: #fc3;
color: #006; color: #006;
} }
ul { ul {
list-style-position: outside; list-style-position: outside;
padding: 0; padding: 0;
margin: 0; margin: 0;
padding-left: 12px; padding-left: 12px;
li { padding-left: 15px; } li { padding-left: 15px; }
li:nth-child(even) { li:nth-child(even) {
color: #fc3; color: #fc3;
} }
} }
tr:nth-child(2) td { tr:nth-child(2) td {
padding-bottom: 15px; padding-bottom: 15px;
} }
} }
#index section#online-fun { #index section#online-fun {
text-align: center; text-align: center;
a:first-of-type { a:first-of-type {
text-decoration: none; text-decoration: none;
} }
} }
/* BREED PAGES ---------------------------------------------------------------------------------- */ /* BREED PAGES ---------------------------------------------------------------------------------- */
.breed-page { .breed-page {
h1 { h1 {
font-size: 24px; font-size: 24px;
display: inline; display: inline;
} }
#main-nav { margin: 10px 0 30px 0; } #main-nav { margin: 10px 0 30px 0; }
h2 { h2 {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
} }
nav a { nav a {
color: #fff; color: #fff;
&:visited { color: #fff; } &:visited { color: #fff; }
&:active { color: #004000; }
}
table { &:active { color: #004000; }
width: 553px; }
margin: 0 auto;
margin-bottom: 50px;
text-align: center;
td { table {
border-bottom: 1px solid #fff; width: 553px;
padding: 1px; margin: 0 auto;
padding-bottom: 7px; margin-bottom: 50px;
} text-align: center;
.title { td {
background-color: #009; border-bottom: 1px solid #fff;
font-weight: 700; padding: 1px;
font-size: 16px; padding-bottom: 7px;
padding-bottom: 1px; }
}
tr:last-child td { border-bottom: none; } .title {
background-color: #009;
font-weight: 700;
font-size: 16px;
padding-bottom: 1px;
}
p { text-align: left; } tr:last-child td { border-bottom: none; }
}
} p { text-align: left; }
}
}

2
wordfire/index.html
View file

@ -10,7 +10,7 @@
<!-- --> <!-- -->
<!-- style --> <!-- style -->
<link rel="stylesheet" href="style/style.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
a { color: #06c; } a { color: #06c; }
a:active { color: #909; } a:active { color: #909; }

2
wordfire/play1.html
View file

@ -9,7 +9,7 @@
<!-- --> <!-- -->
<!-- style --> <!-- style -->
<link rel="stylesheet" href="style/style.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
body { body {
width: 760px; width: 760px;

2
wordfire/play2.html
View file

@ -9,7 +9,7 @@
<!-- --> <!-- -->
<!-- style --> <!-- style -->
<link rel="stylesheet" href="style/style.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
/* page grid */ /* page grid */

2
wordfire/play3.html
View file

@ -9,7 +9,7 @@
<!-- --> <!-- -->
<!-- style --> <!-- style -->
<link rel="stylesheet" href="style/style.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
body { background-color: #6cf; } body { background-color: #6cf; }

2
wordfire/play4.html
View file

@ -11,7 +11,7 @@
<!-- --> <!-- -->
<!-- style --> <!-- style -->
<link rel="stylesheet" href="style/style.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
body { background-color: #fff; padding: 0; margin: 2px; } body { background-color: #fff; padding: 0; margin: 2px; }

2
wordfire/possums.html
View file

@ -9,7 +9,7 @@
<!-- --> <!-- -->
<!-- style --> <!-- style -->
<link rel="stylesheet" href="style/style.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
body { background-color: #900; color: #009; } body { background-color: #900; color: #009; }

2
wordfire/precious.html
View file

@ -9,7 +9,7 @@
<!-- --> <!-- -->
<!-- style --> <!-- style -->
<link rel="stylesheet" href="style/style.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
body { background-color: #ccf; background-image: url(img/preciousmkg_countrybreeze_1.gif); } body { background-color: #ccf; background-image: url(img/preciousmkg_countrybreeze_1.gif); }

2
wordfire/sound.html
View file

@ -9,7 +9,7 @@
<!-- --> <!-- -->
<!-- style --> <!-- style -->
<link rel="stylesheet" href="style/style.css"> <link rel="stylesheet" href="wordfire.css">
<style> <style>
body { body {
background-image: url(img/sound_clouds.jpg); background-image: url(img/sound_clouds.jpg);

113
wordfire/style/style.css
View file

@ -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
wordfire/style/style.css.map
View file

@ -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"}

52
wordfire/style/style.scss
View file

@ -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
View 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; }