implemented theme switcher, copied over themes
This commit is contained in:
parent
522f7f5caa
commit
c2bbb45785
|
|
@ -15,6 +15,7 @@ Functionality to Reimplement
|
|||
- [ ] Event Uploader?
|
||||
|
||||
Themes to Convert
|
||||
- [ ] Plant Cell
|
||||
- [ ] Bit Bits
|
||||
- [ ] Frillsify
|
||||
- [ ] Plain?
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
[
|
||||
{
|
||||
"name": "Plant Cell",
|
||||
"file": "plantcell.css",
|
||||
"author": "loren"
|
||||
},
|
||||
{
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
- name: Plant Cell
|
||||
file: plantcell.css
|
||||
author: loren
|
||||
- name: Bit Bits
|
||||
file: bitbits.css
|
||||
author: xandra
|
||||
- name: Frillsify
|
||||
file: frillsify.css
|
||||
author: frills
|
||||
- name: Seafoam Deep
|
||||
file: sea.css
|
||||
author: leviathren
|
||||
- name: tweek
|
||||
file: tweek.css
|
||||
author: jess
|
||||
- name: twilight
|
||||
file: twilight.css
|
||||
author: solaria
|
||||
- name: plain
|
||||
file: plain.css
|
||||
author: for reference
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<form action="?" method="get">
|
||||
<span class="tp_title">Theme Picker: </span>
|
||||
<select id="themePicker" name="theme">
|
||||
{{ range .Site.Data.themes }}
|
||||
<option value="{{ .file }}">{{ .name }} ({{ .author }})</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
<span id="themeButton">
|
||||
<input type="submit" value="Apply" />
|
||||
</span>
|
||||
</form>
|
||||
<p>Copyright {{ now.Year }} <a href="https://32bit.cafe">32-Bit Cafe</a>. All rights reserved.</p>
|
||||
|
|
@ -1 +1 @@
|
|||
<link rel="stylesheet" href="/css/themes/plantcell.css">
|
||||
<link id="themeTarget" rel="stylesheet" href="/css/themes/plantcell.css">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
/*
|
||||
* Name:
|
||||
* Author:
|
||||
* Website:
|
||||
*/
|
||||
|
|
@ -0,0 +1,395 @@
|
|||
/*
|
||||
* Name: Bit Bits
|
||||
* Author: xandra
|
||||
* Website: https://xandra.cc
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'silkscreen';
|
||||
src: url('//32bit.cafe/~xandra/silkscreen.ttf') format('truetype');
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #E1CCDD;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0px !important;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header a {
|
||||
/* entire header width */
|
||||
font-family: 'silkscreen';
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
background-color: none;
|
||||
padding: 0px !important;
|
||||
text-shadow: -4px 4px #ef3550,
|
||||
-6px 6px #f48fb1,
|
||||
-8px 8px #7e57c2,
|
||||
-10px 10px #2196f3,
|
||||
-12px 12px #26c6da,
|
||||
-14px 14px #43a047;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
/* main nav width */
|
||||
font-family: 'silkscreen', cursive;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
/* individual navigation item */
|
||||
background-color: #FFF !important;
|
||||
border: 2px solid #000 !important;
|
||||
border-radius: 0 !important;
|
||||
font-size: 10pt !important;
|
||||
padding: 10px !important;
|
||||
color: #1A659E;
|
||||
box-shadow: 5px 8px #000;
|
||||
height: 5vh;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
/* individual navigation item on hover */
|
||||
background-color: #FFFAEB !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
/* secondary navigation */
|
||||
font-family: 'silkscreen', cursive;
|
||||
background-color: #FFF;
|
||||
color: #E69CAF;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar h3 {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
text-shadow: -4px 4px #ef3550,
|
||||
-6px 6px #f48fb1,
|
||||
-8px 8px #7e57c2,
|
||||
-10px 10px #2196f3,
|
||||
-12px 12px #26c6da,
|
||||
-14px 14px #43a047;
|
||||
margin-top: 10px !important;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
.sidebar a {
|
||||
color: #43AA8B;
|
||||
text-decoration: none;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-bottom: 2px dotted;
|
||||
padding: 2px !important;
|
||||
}
|
||||
.sidebar a:hover {
|
||||
color: #000;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.sidebar active {
|
||||
color: #000;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.main {
|
||||
font-family: Verdana, sans serif;
|
||||
font-size: 11pt;
|
||||
letter-spacing: 0.8px;
|
||||
background-color: #FFF;
|
||||
line-height: 18pt;
|
||||
}
|
||||
|
||||
.main a {
|
||||
font-family: 'silkscreen', cursive;
|
||||
font-weight: normal;
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: greyscale;
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
font-size: 10pt;
|
||||
background-color: #1A659E;
|
||||
padding: 1px 5px 3px 5px;
|
||||
}
|
||||
|
||||
.main a:hover {
|
||||
color: #000;
|
||||
background-color: #FFFAEB;
|
||||
}
|
||||
|
||||
table {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
.main h2 {
|
||||
font-family: 'silkscreen', cursive;
|
||||
color: #43AA8B;
|
||||
font-weight: normal;
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: greyscale;
|
||||
}
|
||||
|
||||
.main h3 {
|
||||
font-family: 'silkscreen', cursive;
|
||||
color: #1A659E;
|
||||
font-weight: normal;
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: greyscale;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: #FFF;
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
border: 2px solid #713E5A;
|
||||
box-shadow: 5px 5px #713E5A;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.column.gallery a {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-family: 'silkscreen', cursive;
|
||||
background-color: #FFF;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-weight: normal;
|
||||
color: #764A62;
|
||||
font-weight: normal;
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: greyscale;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #1A659E;
|
||||
text-decoration: none;
|
||||
border-right: 0px;
|
||||
border-left: 0px;
|
||||
border-top: 0px;
|
||||
border-bottom: 2px dotted;
|
||||
}
|
||||
|
||||
input, select {
|
||||
color: #000;
|
||||
font-family: 'silkscreen', cursive;
|
||||
font-size: 0.8rem;
|
||||
font-weight: normal;
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: greyscale;
|
||||
border: 0;
|
||||
padding: 5px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #764A62;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 8.5pt;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 699px) {
|
||||
/* mobile */
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
.column.sidebar, .column.main {
|
||||
width: 100%;
|
||||
}
|
||||
.header {
|
||||
width: 100vw !important;
|
||||
padding-bottom: 20px !important;
|
||||
}
|
||||
.header h1 {
|
||||
float: left;
|
||||
margin: 5px 10px 5px 10px;
|
||||
}
|
||||
.header button {
|
||||
background-color: #FFF;
|
||||
border: 2px solid black;
|
||||
color: #000;
|
||||
font-size: 16pt;
|
||||
float: right;
|
||||
}
|
||||
.topnav {
|
||||
width: 100vw;
|
||||
flex-direction: column;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
padding-bottom: 20px;
|
||||
text-align: center;
|
||||
line-height: 9pt;
|
||||
}
|
||||
.topnav a {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
margin: 6px;
|
||||
font-size: 12pt !important;
|
||||
}
|
||||
.main {
|
||||
width: 100vw;
|
||||
}
|
||||
.footer {
|
||||
width: 100vw;
|
||||
}
|
||||
.gallery {
|
||||
width: 100vw !important;
|
||||
margin: 2px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 700px) and (max-width: 950px) {
|
||||
/* tablets */
|
||||
.container {
|
||||
padding: 5px;
|
||||
}
|
||||
.column.sidebar, .column.main {
|
||||
width: 100vw;
|
||||
}
|
||||
.header, .topnav {
|
||||
width: 100vw;
|
||||
text-align: center;
|
||||
}
|
||||
.header {
|
||||
width: 100vw;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.header h1 {
|
||||
float: left;
|
||||
margin: 5px 10px 5px 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.header button {
|
||||
background-color: #FFF;
|
||||
border: 2px solid black;
|
||||
color: #000;
|
||||
font-size: 16pt;
|
||||
float: right;
|
||||
}
|
||||
.column.main {
|
||||
width: 100%;
|
||||
}
|
||||
.topnav {
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
}
|
||||
.topnav a {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16pt !important;
|
||||
}
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
.column.gallery {
|
||||
width: 100vw !important;
|
||||
margin: 2px !important;
|
||||
}
|
||||
.sidebar h3 {
|
||||
font-size: 16pt !important;
|
||||
}
|
||||
.sidebar li {
|
||||
font-size: 14pt !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 950px) {
|
||||
/* desktops */
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 70vw;
|
||||
}
|
||||
.column.sidebar {
|
||||
width: 20vw !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 0px !important;
|
||||
margin-left: 0px !important;
|
||||
margin-right: 0px !important;
|
||||
max-height: 65vh;
|
||||
}
|
||||
.column.main {
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 0px !important;
|
||||
margin-left: 0p !important;
|
||||
margin-right: 0px !important;
|
||||
width: 50vw !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 65vh;
|
||||
}
|
||||
.header {
|
||||
width: 13vw !important;
|
||||
height: 10vh;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
.column.gallery {
|
||||
width: 30% !important;
|
||||
}
|
||||
.topnav {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.topnav a {
|
||||
position: relative;
|
||||
top: 3vh;
|
||||
border: 2px solid #000;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
margin: 5px;
|
||||
background-color: #F1F1F1;
|
||||
font-size: 0.8vw !important;
|
||||
}
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
.footer {
|
||||
width: 79vw;
|
||||
border: 0px; !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
/*
|
||||
* Name: Macchiato
|
||||
* Author: kaylee
|
||||
* Website: https://kaylee.wtf
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500&display=swap');
|
||||
.container {
|
||||
/*
|
||||
background-image: url('/css/themes/macchiato_assets/background.gif');
|
||||
* */
|
||||
background-image: url('https://rivendell.neocities.org/backgrounds/stars3.gif');
|
||||
background-color: light-brown !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
transform: none;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.sidebar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-image: url('macchiato_assets/circuit_sidebar.png');
|
||||
background-size: 200%;
|
||||
z-index: -1;
|
||||
filter: invert();
|
||||
opacity: 0.1;
|
||||
|
||||
}
|
||||
.sidebar {
|
||||
color: white;
|
||||
background-color: black;
|
||||
border-top: 0px;
|
||||
border-right: 2px;
|
||||
border-left: 0px;
|
||||
border-bottom: 0px;
|
||||
border-style: inset;
|
||||
position: fixed;
|
||||
height: 100% !important;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 220px !important;
|
||||
padding-top:290px;
|
||||
}
|
||||
.sidebar h3 {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-weight:500;
|
||||
text-shadow: 2px 2px 1px #000000;
|
||||
box-shadow: inset 2px 2px 2px 0 rgba(255,255,255,0.5), inset -2px -2px 2px rgba(0,0,0,0.5);
|
||||
background-image: url('macchiato_assets/bgblueop.gif');
|
||||
background-color: #31525a;
|
||||
padding: 5px;
|
||||
padding-top: 13px;
|
||||
margin-bottom: 0px;
|
||||
text-align: right;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.sidebar ul a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
/*.sidebar ul li:nth-child(even) { background-color: rgba(0,0,0,0.1); }*/
|
||||
.sidebar ul li {
|
||||
box-shadow: inset 2px 2px 2px 0 rgba(255,255,255,0.5), inset -2px -2px 2px rgba(0,0,0,0.5);
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
/*background-image: url('macchiato_assets/bgpinksmoke.gif');*/
|
||||
background-image: url('macchiato_assets/bg_sunset.jpg');
|
||||
background-color: #c56d38;
|
||||
margin-top: 5px;
|
||||
text-shadow: 2px 2px 1px #000000;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
/*background-image: url('macchiato_assets/bgpinksmoke.gif');*/
|
||||
text-transform: lowercase;
|
||||
padding-top: 5px;
|
||||
box-shadow: inset 2px 2px 2px #000000;
|
||||
|
||||
}
|
||||
.main {
|
||||
background-color: white;
|
||||
top: 100px;
|
||||
left: 245px !important;
|
||||
width: calc(100vw - 280px) !important;
|
||||
max-width: 1024px;
|
||||
position: absolute;
|
||||
max-height: calc(100vh - 150px) !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-image: url("macchiato_assets/32bit_small.gif");
|
||||
will-change: transform;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
height: 280px;
|
||||
margin-left: 10px;
|
||||
margin-top: 5px;
|
||||
width: 226px;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
.topnav {
|
||||
left: 245px;
|
||||
|
||||
top: 30px;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
width: calc(100vw - 280px) !important;
|
||||
max-width: 1024px;
|
||||
}
|
||||
h1 {
|
||||
font-family: Trajan;
|
||||
}
|
||||
|
||||
.topnav span::before {
|
||||
background-color: yellow;
|
||||
width: 90px;
|
||||
top: 18px;
|
||||
margin-left: -5px;
|
||||
height: 15px;
|
||||
transform: rotate(25deg);
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-size: cover;
|
||||
background-clip: content-box;
|
||||
box-shadow: inset 2px 2px 2px 0 rgba(255,255,255,0.5), inset -2px -2px 2px rgba(0,0,0,0.5);
|
||||
outline: 1px solid transparent;
|
||||
|
||||
/*transform: rotate(10deg);*/
|
||||
}
|
||||
.topnav a:hover {
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
.topnav span:hover:before {
|
||||
transform: rotate(23deg);
|
||||
}
|
||||
.topnav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
will-change: transform;
|
||||
transform: rotate(-10deg);
|
||||
background-color: red;
|
||||
border-radius: 0px;
|
||||
border: 0px;
|
||||
top: 0px;
|
||||
margin-bottom: 8px;
|
||||
box-shadow: inset 2px 2px 2px 0 rgba(255,255,255,0.5), inset -2px -2px 2px rgba(0,0,0,0.5);
|
||||
outline: 1px solid transparent;
|
||||
padding: 7px;
|
||||
margin-right: 20px;
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-weight: 500;
|
||||
text-transform: lowercase;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.tp_title {
|
||||
font-size: 15px;
|
||||
font-variant: small-capslatinosmall-caps;
|
||||
}
|
||||
.footer {
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-family: monospace;
|
||||
position: absolute;
|
||||
bottom: 0px !important;
|
||||
width: 218px;
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
.header h1 {
|
||||
display: none;
|
||||
}
|
||||
.container {
|
||||
background-color:white;
|
||||
}
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
/*
|
||||
* Name: Plant Cell
|
||||
* Author: loren
|
||||
* Website: https://ribo.zone
|
||||
*/
|
||||
|
||||
* {
|
||||
font-family: 'courier';
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
body {
|
||||
background: url(https://ribo.zone/32bitcafe/plantcellbg.jpg), honeydew;
|
||||
/* background image downloaded from https://textures.neocities.org */
|
||||
color: midnightblue;
|
||||
}
|
||||
section {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
background-color: rgb(255,255,255,.9);
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
h1 a {
|
||||
font-family: 'arial black';
|
||||
letter-spacing: -3px;
|
||||
text-underline-offset: 3px;
|
||||
text-transform: uppercase;
|
||||
font-size: 60px;
|
||||
text-decoration-style: wavy;
|
||||
color: white;
|
||||
text-shadow: -1px 0 midnightblue, 0 1px midnightblue, 1px 0 midnightblue, 0 -1px midnightblue;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h2, h3 {
|
||||
font-family: 'arial black';
|
||||
letter-spacing: -1px;
|
||||
line-height: 0.8;
|
||||
color: white;
|
||||
text-shadow: -1px 0 midnightblue, 0 1px midnightblue, 1px 0 midnightblue, 0 -1px midnightblue;
|
||||
text-transform: uppercase;
|
||||
margin: 5px 0;
|
||||
}
|
||||
h4 {
|
||||
margin: 5px 0;
|
||||
}
|
||||
p {
|
||||
margin: 2px 0;
|
||||
}
|
||||
a {
|
||||
font-family: 'arial black';
|
||||
color: darkseagreen;
|
||||
font-size: 14px;
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
.header {
|
||||
padding: 0px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
.topnav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
border: 1px solid;
|
||||
padding: 0;
|
||||
background-color: rgb(255,255,255,.9);
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.topnav a {
|
||||
float: left;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
color: darkseagreen;
|
||||
font-family: 'arial black';
|
||||
letter-spacing: -1px;
|
||||
line-height: 0.8;
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.topnav a:hover {
|
||||
color: white;
|
||||
}
|
||||
.flip {
|
||||
text-shadow: -1px 0 midnightblue, 0 1px midnightblue, 1px 0 midnightblue, 0 -1px midnightblue;
|
||||
}
|
||||
.main {
|
||||
padding: 10px;
|
||||
}
|
||||
.main::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
.main::-webkit-scrollbar-track {
|
||||
background: rgb(255,255,255,.9);
|
||||
border-radius: 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.main::-webkit-scrollbar-thumb {
|
||||
background-color: darkseagreen;
|
||||
border-radius: 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.panel h3 {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.column {
|
||||
float: left;
|
||||
}
|
||||
.sidebar ul {
|
||||
list-style-type: none;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
background-color: rgb(255,255,255,.9);
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.sidebar li {
|
||||
display: block;
|
||||
padding: 2px;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
background-color: rgb(255,255,255,.9);
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.container {
|
||||
padding: 5px;
|
||||
}
|
||||
.column.sidebar, .column.main {
|
||||
width: 100%;
|
||||
}
|
||||
.topnav {
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
width: 65vw;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.topnav a {
|
||||
display: block;
|
||||
margin: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.header h1 {
|
||||
float: left;
|
||||
}
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
h1 a {
|
||||
font-size: 50px;
|
||||
}
|
||||
.mobile-only {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mobile-only h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 700px) and (max-width: 1100px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
.column.sidebar, .column.main {
|
||||
width: 100%;
|
||||
}
|
||||
.topnav {
|
||||
padding: 5px;
|
||||
}
|
||||
.topnav a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
.panel {
|
||||
width: 45vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1100px) {
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 75vw;
|
||||
}
|
||||
.column.sidebar {
|
||||
width: 15vw;
|
||||
}
|
||||
.column.main {
|
||||
width: 60vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 65vh;
|
||||
}
|
||||
.topnav {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.topnav a {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rev { unicode-bidi: bidi-override; direction: rtl; }
|
||||
.obem { position: absolute; display:inline-block; z-index: -1; width: 0px; height: 0px; overflow: hidden; }
|
||||
|
|
@ -0,0 +1,395 @@
|
|||
/*
|
||||
* Name: Bit Bits
|
||||
* Author: xandra
|
||||
* Website: https://xandra.cc
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'silkscreen';
|
||||
src: url('/~xandra/silkscreen.ttf') format('truetype');
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #E1CCDD;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0px !important;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header a {
|
||||
/* entire header width */
|
||||
font-family: 'silkscreen';
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
background-color: none;
|
||||
padding: 0px !important;
|
||||
text-shadow: -4px 4px #ef3550,
|
||||
-6px 6px #f48fb1,
|
||||
-8px 8px #7e57c2,
|
||||
-10px 10px #2196f3,
|
||||
-12px 12px #26c6da,
|
||||
-14px 14px #43a047;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
/* main nav width */
|
||||
font-family: 'silkscreen', cursive;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
/* individual navigation item */
|
||||
background-color: #FFF !important;
|
||||
border: 2px solid #000 !important;
|
||||
border-radius: 0 !important;
|
||||
font-size: 10pt !important;
|
||||
padding: 10px !important;
|
||||
color: #1A659E;
|
||||
box-shadow: 5px 8px #000;
|
||||
height: 5vh;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
/* individual navigation item on hover */
|
||||
background-color: #FFFAEB !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
/* secondary navigation */
|
||||
font-family: 'silkscreen', cursive;
|
||||
background-color: #FFF;
|
||||
color: #E69CAF;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar h3 {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
text-shadow: -4px 4px #ef3550,
|
||||
-6px 6px #f48fb1,
|
||||
-8px 8px #7e57c2,
|
||||
-10px 10px #2196f3,
|
||||
-12px 12px #26c6da,
|
||||
-14px 14px #43a047;
|
||||
margin-top: 10px !important;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
.sidebar a {
|
||||
color: #43AA8B;
|
||||
text-decoration: none;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-bottom: 2px dotted;
|
||||
padding: 2px !important;
|
||||
}
|
||||
.sidebar a:hover {
|
||||
color: #000;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.sidebar active {
|
||||
color: #000;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.main {
|
||||
font-family: Verdana, sans serif;
|
||||
font-size: 11pt;
|
||||
letter-spacing: 0.8px;
|
||||
background-color: #FFF;
|
||||
line-height: 18pt;
|
||||
}
|
||||
|
||||
.main a {
|
||||
font-family: 'silkscreen', cursive;
|
||||
font-weight: normal;
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: greyscale;
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
font-size: 10pt;
|
||||
background-color: #1A659E;
|
||||
padding: 1px 5px 3px 5px;
|
||||
}
|
||||
|
||||
.main a:hover {
|
||||
color: #000;
|
||||
background-color: #FFFAEB;
|
||||
}
|
||||
|
||||
table {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
.main h2 {
|
||||
font-family: 'silkscreen', cursive;
|
||||
color: #43AA8B;
|
||||
font-weight: normal;
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: greyscale;
|
||||
}
|
||||
|
||||
.main h3 {
|
||||
font-family: 'silkscreen', cursive;
|
||||
color: #1A659E;
|
||||
font-weight: normal;
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: greyscale;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: #FFF;
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
border: 2px solid #713E5A;
|
||||
box-shadow: 5px 5px #713E5A;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.column.gallery a {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-family: 'silkscreen', cursive;
|
||||
background-color: #FFF;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-weight: normal;
|
||||
color: #764A62;
|
||||
font-weight: normal;
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: greyscale;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #1A659E;
|
||||
text-decoration: none;
|
||||
border-right: 0px;
|
||||
border-left: 0px;
|
||||
border-top: 0px;
|
||||
border-bottom: 2px dotted;
|
||||
}
|
||||
|
||||
input, select {
|
||||
color: #000;
|
||||
font-family: 'silkscreen', cursive;
|
||||
font-size: 0.8rem;
|
||||
font-weight: normal;
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: greyscale;
|
||||
border: 0;
|
||||
padding: 5px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #764A62;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 8.5pt;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 699px) {
|
||||
/* mobile */
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
.column.sidebar, .column.main {
|
||||
width: 100%;
|
||||
}
|
||||
.header {
|
||||
width: 100vw !important;
|
||||
padding-bottom: 20px !important;
|
||||
}
|
||||
.header h1 {
|
||||
float: left;
|
||||
margin: 5px 10px 5px 10px;
|
||||
}
|
||||
.header button {
|
||||
background-color: #FFF;
|
||||
border: 2px solid black;
|
||||
color: #000;
|
||||
font-size: 16pt;
|
||||
float: right;
|
||||
}
|
||||
.topnav {
|
||||
width: 100vw;
|
||||
flex-direction: column;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
padding-bottom: 20px;
|
||||
text-align: center;
|
||||
line-height: 9pt;
|
||||
}
|
||||
.topnav a {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
margin: 6px;
|
||||
font-size: 12pt !important;
|
||||
}
|
||||
.main {
|
||||
width: 100vw;
|
||||
}
|
||||
.footer {
|
||||
width: 100vw;
|
||||
}
|
||||
.gallery {
|
||||
width: 100vw !important;
|
||||
margin: 2px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 700px) and (max-width: 950px) {
|
||||
/* tablets */
|
||||
.container {
|
||||
padding: 5px;
|
||||
}
|
||||
.column.sidebar, .column.main {
|
||||
width: 100vw;
|
||||
}
|
||||
.header, .topnav {
|
||||
width: 100vw;
|
||||
text-align: center;
|
||||
}
|
||||
.header {
|
||||
width: 100vw;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.header h1 {
|
||||
float: left;
|
||||
margin: 5px 10px 5px 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.header button {
|
||||
background-color: #FFF;
|
||||
border: 2px solid black;
|
||||
color: #000;
|
||||
font-size: 16pt;
|
||||
float: right;
|
||||
}
|
||||
.column.main {
|
||||
width: 100%;
|
||||
}
|
||||
.topnav {
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
}
|
||||
.topnav a {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16pt !important;
|
||||
}
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
.column.gallery {
|
||||
width: 100vw !important;
|
||||
margin: 2px !important;
|
||||
}
|
||||
.sidebar h3 {
|
||||
font-size: 16pt !important;
|
||||
}
|
||||
.sidebar li {
|
||||
font-size: 14pt !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 950px) {
|
||||
/* desktops */
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 70vw;
|
||||
}
|
||||
.column.sidebar {
|
||||
width: 20vw !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 0px !important;
|
||||
margin-left: 0px !important;
|
||||
margin-right: 0px !important;
|
||||
max-height: 65vh;
|
||||
}
|
||||
.column.main {
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 0px !important;
|
||||
margin-left: 0p !important;
|
||||
margin-right: 0px !important;
|
||||
width: 50vw !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 65vh;
|
||||
}
|
||||
.header {
|
||||
width: 13vw !important;
|
||||
height: 10vh;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
.column.gallery {
|
||||
width: 30% !important;
|
||||
}
|
||||
.topnav {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.topnav a {
|
||||
position: relative;
|
||||
top: 3vh;
|
||||
border: 2px solid #000;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
margin: 5px;
|
||||
background-color: #F1F1F1;
|
||||
font-size: 0.8vw !important;
|
||||
}
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
.footer {
|
||||
width: 79vw;
|
||||
border: 0px; !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,254 @@
|
|||
/*
|
||||
* Name: Plant Cell
|
||||
* Author: loren
|
||||
* Website: https://ribo.zone
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "heal";
|
||||
src: url("https://ribo.zone/32bitcafe/HealTheWebA-Regular.otf") format("opentype");
|
||||
}
|
||||
* {
|
||||
font-family: 'courier';
|
||||
box-sizing: border-box;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
body {
|
||||
background: url(https://ribo.zone/32bitcafe/plantcellbg.jpg), rgb(193, 196, 128);
|
||||
color: rgb(87,93,49);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1 a {
|
||||
font-family: 'heal', 'arial';
|
||||
font-size: 80px;
|
||||
color: rgb(87,93,49);
|
||||
padding: 0 !important;
|
||||
text-decoration: none;
|
||||
text-shadow: 5px 5px white;
|
||||
}
|
||||
h1 a:hover {
|
||||
color: #757a42;
|
||||
}
|
||||
h2, h3 {
|
||||
font-family: 'heal', 'arial';
|
||||
}
|
||||
a {
|
||||
font-family: 'heal', 'arial';
|
||||
color: #757a42;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration-style: wavy;
|
||||
color: rgb(87,93,49);
|
||||
}
|
||||
h2, h3, h4, h5, p {
|
||||
margin: 10px;
|
||||
}
|
||||
pre {
|
||||
background: rgb(87,93,49);
|
||||
color: white;
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
margin: 10px;
|
||||
}
|
||||
code {
|
||||
background: rgb(87,93,49);
|
||||
color: white;
|
||||
padding: 0 4px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
section {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 2px dotted rgb(193, 196, 128);
|
||||
}
|
||||
.header {
|
||||
padding: 0px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 10px 10px 0 10px;
|
||||
}
|
||||
.topnav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
border: 5px double;
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
}
|
||||
.topnav a {
|
||||
position: static !important;
|
||||
float: left;
|
||||
display: block;
|
||||
color: #757a42;
|
||||
line-height: 0.8;
|
||||
font-size: 25px;
|
||||
padding: 0 5px;
|
||||
margin: 0;
|
||||
border:none;
|
||||
text-decoration:none;
|
||||
background: none;
|
||||
}
|
||||
.topnav a:hover {
|
||||
text-shadow: 2px 2px rgb(193, 196, 128);
|
||||
color: rgb(87,93,49);
|
||||
background: none;
|
||||
}
|
||||
.column {
|
||||
float: left;
|
||||
}
|
||||
.main {
|
||||
margin: 10px;
|
||||
background-color: white;
|
||||
border: 5px double;
|
||||
border-radius: 5px;
|
||||
width: 50rem !important;
|
||||
}
|
||||
.sidebar {
|
||||
width: 17.5rem !important;
|
||||
height: fit-content;
|
||||
}
|
||||
.panel {
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel.visible {
|
||||
background-color: white;
|
||||
border: 5px double;
|
||||
border-radius: 5px;
|
||||
height: auto;
|
||||
}
|
||||
.sidebar ul {
|
||||
list-style-type: none;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
.sidebar li {
|
||||
display: block;
|
||||
padding: 2px;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 15px;
|
||||
width: fit-content;
|
||||
margin: 10px auto;
|
||||
background-color: white;
|
||||
border: 5px double;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@media screen and (max-width: 700px) {
|
||||
.container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.column.sidebar, .column.main {
|
||||
width: 100% !important;
|
||||
}
|
||||
.topnav {
|
||||
flex-direction: column !important;
|
||||
padding: 10px !important;
|
||||
width: 65vw !important;
|
||||
margin: 5px auto !important;
|
||||
}
|
||||
.topnav a {
|
||||
display: block !important;
|
||||
margin: 5px !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
section {
|
||||
margin: 5px !important;
|
||||
padding: 5px !important;
|
||||
}
|
||||
.sidebar {
|
||||
margin: 10px 0 !important;
|
||||
padding: 0;
|
||||
}
|
||||
.panel {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.header h1 {
|
||||
float: left;
|
||||
}
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
h1, .main {
|
||||
margin: 5px;
|
||||
}
|
||||
h1 a {
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 700px) and (max-width: 950px) {
|
||||
.container {
|
||||
padding: 10px !important;
|
||||
transform: translate(0) !important;
|
||||
}
|
||||
.column.sidebar, .column.main {
|
||||
width: 100% !important;
|
||||
}
|
||||
.topnav {
|
||||
padding: 5px !important;
|
||||
}
|
||||
.topnav a {
|
||||
display: block !important;
|
||||
padding: 10px !important;
|
||||
}
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 950px) and (max-width: 1200px) {
|
||||
.sidebar {
|
||||
width: 25.5% !important;
|
||||
}
|
||||
.main {
|
||||
width: 72% !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 950px) {
|
||||
.container {
|
||||
position: static !important;
|
||||
transform: translate(0) !important;
|
||||
width: 70rem !important;
|
||||
max-width: 100%;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.column.main {
|
||||
max-height: fit-content !important;
|
||||
}
|
||||
.header {
|
||||
height: auto !important;
|
||||
}
|
||||
.header h1 {
|
||||
top: 0;
|
||||
max-height: none;
|
||||
padding: 0;
|
||||
}
|
||||
.topnav a {
|
||||
position: static !important;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,700 @@
|
|||
/*
|
||||
* Name: Frillsify
|
||||
* Author: Frills
|
||||
* Website: https://frills.dev
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;1,400;1,700&family=Cherry+Bomb+One&display=swap');
|
||||
|
||||
@keyframes colour {
|
||||
0% {
|
||||
color: deeppink;
|
||||
}
|
||||
|
||||
10% {
|
||||
color: orangered;
|
||||
}
|
||||
|
||||
50% {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
60% {
|
||||
color: limegreen;
|
||||
}
|
||||
|
||||
80% {
|
||||
color: deepskyblue;
|
||||
}
|
||||
|
||||
100% {
|
||||
color: fuchsia;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes colour-stroke {
|
||||
0% {
|
||||
-webkit-text-stroke: 2px deeppink;
|
||||
}
|
||||
|
||||
10% {
|
||||
-webkit-text-stroke: 2px orangered;
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-text-stroke: 2px gold;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-text-stroke: 2px limegreen;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-text-stroke: 2px deepskyblue;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-text-stroke: 3px fuchsia;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
background-color: black;
|
||||
color: gainsboro;
|
||||
font-family: 'Atkisonson Hyperlegible', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
outline: 2px solid plum;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: deeppink;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
color: springgreen;
|
||||
text-decoration-thickness: 2px;
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
|
||||
.tp_title {
|
||||
transform: translateY(4px);
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#themeButton {
|
||||
transform: translateY(2px);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
width: 12%;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
float: left;
|
||||
display: block;
|
||||
will-change: transform;
|
||||
padding: 6px 12px;
|
||||
border-radius: 0;
|
||||
background-color: gold;
|
||||
color: black;
|
||||
border: 0;
|
||||
box-shadow: 4px 4px 0 0 DarkGoldenRod;
|
||||
cursor: pointer;
|
||||
transition: 0.3s ease transform, 0.3s ease background-color, 0.3s ease box-shadow;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: #ffe34a;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.topnav a.selected,
|
||||
.topnav a:focus,
|
||||
.topnav a:active {
|
||||
transform: translate(4px, 4px);
|
||||
box-shadow: 0 0 0 0 DarkGoldenRod;
|
||||
}
|
||||
|
||||
.topnav a.selected {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
.panel {
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel.visible {
|
||||
background-color: black;
|
||||
height: auto;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.3s forwards;
|
||||
padding: 0 15px 15px 15px;
|
||||
}
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sidebar h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
padding-left: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar li::before {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: left;
|
||||
border-top: 3px solid #282828;
|
||||
background-color: #000;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 30px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.footer p:first-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: springgreen
|
||||
}
|
||||
|
||||
|
||||
.footer a:hover,
|
||||
.footer a:focus,
|
||||
.footer a:active {
|
||||
color: deeppink;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: none;
|
||||
width: auto;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 22px;
|
||||
}
|
||||
|
||||
.column.sidebar {
|
||||
margin-top: 35px;
|
||||
width: 321px;
|
||||
background: repeating-linear-gradient(45deg, #282828 0, #282828 10%, transparent 0, transparent 50%);
|
||||
background-size: 3em 3em;
|
||||
background-color: #000000;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.column.sidebar a {
|
||||
color: orangered;
|
||||
}
|
||||
|
||||
.column.sidebar a:hover,
|
||||
.column.sidebar a:focus,
|
||||
.column.sidebar a:active {
|
||||
color: springgreen;
|
||||
}
|
||||
|
||||
.column.main {
|
||||
width: calc(100% - 321px);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.column.main>h2:first-of-type {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.column.main>h2:first-of-type::before,
|
||||
.column.main>h2:first-of-type::after {
|
||||
content: '✨';
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-family: 'Cherry Bomb One', Arial, Helvetica, sans-serif;
|
||||
font-size: 5rem;
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.header h1 a {
|
||||
text-decoration: none;
|
||||
animation: colour 10s infinite forwards;
|
||||
}
|
||||
|
||||
.header h1 a:hover,
|
||||
.header h1 a:active,
|
||||
.header h1 a:focus {
|
||||
color: transparent;
|
||||
-webkit-text-fill: transparent;
|
||||
animation: colour-stroke 10s linear infinite forwards alternate;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rev {
|
||||
unicode-bidi: bidi-override;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.obem {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
z-index: -1;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
line-height: 1.2
|
||||
}
|
||||
|
||||
*+h1,
|
||||
*+h2,
|
||||
*+h3,
|
||||
*+h4,
|
||||
*+h5,
|
||||
*+h6 {
|
||||
padding: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 1rem
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1rem
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: gold;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
position: relative;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
ul li:last-of-type,
|
||||
ol li:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul li::before {
|
||||
content: '⭐';
|
||||
font-size: 60%;
|
||||
top: 5px;
|
||||
position: absolute;
|
||||
left: -1.5rem;
|
||||
}
|
||||
|
||||
ol ul li::before,
|
||||
ul ul li::before {
|
||||
content: '🌟';
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
counter-reset: item;
|
||||
}
|
||||
|
||||
ol>li {
|
||||
counter-increment: item;
|
||||
}
|
||||
|
||||
ol>li::before {
|
||||
content: counters(item, ".") ". ";
|
||||
top: 0;
|
||||
position: absolute;
|
||||
right: calc(100% + 0.5rem);
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ol {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
ol>li:nth-child(5n+1)::before {
|
||||
color: deeppink
|
||||
}
|
||||
|
||||
ol>li:nth-child(5n+2)::before {
|
||||
color: orangered
|
||||
}
|
||||
|
||||
ol>li:nth-child(5n+3)::before {
|
||||
color: gold
|
||||
}
|
||||
|
||||
ol>li:nth-child(5n+4)::before {
|
||||
color: limegreen
|
||||
}
|
||||
|
||||
ol>li:nth-child(5n+5)::before {
|
||||
color: deepskyblue
|
||||
}
|
||||
|
||||
ol ol li::before,
|
||||
ul ol li::before {
|
||||
color: white !important;
|
||||
left: -3rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid gold;
|
||||
margin-left: 0;
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
pre {
|
||||
background: #282828;
|
||||
color: peachpuff;
|
||||
padding: .2em .8em;
|
||||
overflow: auto;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #282828;
|
||||
color: peachpuff;
|
||||
padding: 0.2rem 0.4rem;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
details {}
|
||||
|
||||
summary {
|
||||
text-decoration: underline;
|
||||
color: deeppink;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
summary:hover,
|
||||
summary:focus,
|
||||
summary:active {
|
||||
color: springgreen;
|
||||
text-decoration: underline wavy 2px;
|
||||
}
|
||||
|
||||
|
||||
table caption {
|
||||
text-align: left;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: unset;
|
||||
}
|
||||
|
||||
table,
|
||||
table th,
|
||||
table td {
|
||||
border: 1px solid gainsboro
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
padding: 5px 10px;
|
||||
border: 2px solid deeppink;
|
||||
color: black;
|
||||
border-radius: 0;
|
||||
accent-color: deeppink;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
color: white;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="submit"] {
|
||||
padding: 5px 10px;
|
||||
border: 2px solid springgreen;
|
||||
background: springgreen;
|
||||
color: black;
|
||||
border-radius: 0;
|
||||
accent-color: springgreen;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 699px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.column.sidebar,
|
||||
.column.main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header,
|
||||
.topnav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
float: left;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
padding: 3px 12px;
|
||||
}
|
||||
|
||||
.column.main>h2:first-of-type::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 700px) and (max-width: 950px) {
|
||||
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.column.sidebar,
|
||||
.column.main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.column.main {
|
||||
padding: 35px 0 35px 35px;
|
||||
}
|
||||
|
||||
.header,
|
||||
.topnav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
float: left;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 950px) {
|
||||
.column.main {
|
||||
width: calc(90% - 321px);
|
||||
max-width: 700px;
|
||||
padding: 35px 0 35px 35px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
top: auto;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
top: auto;
|
||||
border-radius: 0;
|
||||
margin: auto;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.column.main {
|
||||
overflow-y: visible;
|
||||
overflow-x: visible;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-left: 335px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/*
|
||||
* Name: Plain
|
||||
* Author: for reference
|
||||
* Website: 32bit.cafe
|
||||
*/
|
||||
|
||||
|
|
@ -0,0 +1,352 @@
|
|||
/*
|
||||
* Name: Seafoam Deep
|
||||
* Author: LEVIATHREN
|
||||
* Website: https://leviathren.neocities.org/
|
||||
*/
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::selection{
|
||||
background: #00a777;
|
||||
color: black;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #00a777;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #141414;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
html {
|
||||
background: black;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #00a777 #141414;
|
||||
}
|
||||
|
||||
body {
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
#202020 0px,
|
||||
black 1px,
|
||||
black 2px,
|
||||
black 3px
|
||||
);
|
||||
color: #dedede;
|
||||
font-family: monospace, "lucida console", serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 10px;
|
||||
width: 12%;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.panel {
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel.visible {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #0a0a0a;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00c990;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: #181818;
|
||||
color: #00efaa;
|
||||
}
|
||||
|
||||
button, select, input {
|
||||
background: #222222;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
button:hover, select:hover, input:hover {
|
||||
background: #4d4d4d;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 699px) {
|
||||
|
||||
.column.sidebar, .column.main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header, .topnav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 700px) and (max-width: 985px) {
|
||||
|
||||
.container {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.column.sidebar, .column.main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header, .topnav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.column.main {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 985px) {
|
||||
|
||||
.container {
|
||||
background: black;
|
||||
padding: 20px;
|
||||
margin: 20px auto;
|
||||
width: 75vw;
|
||||
height: auto;
|
||||
border: 1px solid grey;
|
||||
box-shadow: 10px 10px #00c990;
|
||||
}
|
||||
|
||||
.column.sidebar {
|
||||
background: #080808;
|
||||
border: 1px solid #333333;
|
||||
width: 15vw;
|
||||
margin: 0 5px 10px 0;
|
||||
}
|
||||
|
||||
.column.main {
|
||||
width: 56.5vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 65vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header h1 a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header h1 a::after {
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background: white;
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
.header h1 a:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header h1 a:not(:hover):after {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.header h1 a:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h2::before {
|
||||
content: '\2727 ';
|
||||
}
|
||||
|
||||
h2::after {
|
||||
content: ' \2727';
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
h3::before {
|
||||
content: '\201C ';
|
||||
}
|
||||
|
||||
h3::after {
|
||||
content: ' \201D';
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
position: relative;
|
||||
top: 3vh;
|
||||
color: #000;
|
||||
border: 2px solid #000;
|
||||
text-align: center;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
margin: 5px;
|
||||
background-color: #00c990;
|
||||
font-size: 1.1vw;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: #00efaa;
|
||||
box-shadow: 4px 4px #404040;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: /*71.5vw;*/100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rev { unicode-bidi: bidi-override; direction: rtl; }
|
||||
.obem { position: absolute; display:inline-block; z-index: -1; width: 0px; height: 0px; overflow: hidden; };
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
/*
|
||||
* Name: tweek
|
||||
* Author: jess
|
||||
* Website: https://tangotrail.neocities.org
|
||||
*/
|
||||
|
||||
{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* imgur img link is temporary placement. feel free to use the background image as a file on your site
|
||||
-----------
|
||||
this goes the same way for any other img urls from imgur within this whole code of the css file
|
||||
*/
|
||||
body {
|
||||
margin: 0;
|
||||
background-image: url('https://i.imgur.com/29yku5l.gif');
|
||||
color: #d1e3d1;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 10px;
|
||||
width: 12%;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.rev:hover {
|
||||
color: #419bff;
|
||||
transition: 15s;
|
||||
}
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
width: 80%;
|
||||
}
|
||||
p a {
|
||||
color: #216cc5;
|
||||
}
|
||||
.topnav a {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-image: url('https://i.imgur.com/DW1k6bL.gif');
|
||||
color: #f4e4e4;
|
||||
border-radius: 22%;
|
||||
}
|
||||
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar ul a {
|
||||
color: #9b6e6a;
|
||||
background: #6d5c5c2e;
|
||||
border: #f200002b 1px solid;
|
||||
}
|
||||
.sidebar ul a:hover {
|
||||
color: #8c6f5f;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-image: url('https://i.imgur.com/YjkqaoD.png');
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.footer-text {
|
||||
font-size: 8.5pt;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 699px) {
|
||||
.column.sidebar, .column.main {
|
||||
width: 100%;
|
||||
}
|
||||
.header, .topnav {
|
||||
width: 100%;
|
||||
}
|
||||
.topnav {
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
}
|
||||
.topnav a {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
.header h1 {
|
||||
float: left;
|
||||
}
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
.footer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 700px) and (max-width: 950px) {
|
||||
.container {
|
||||
padding: 5px;
|
||||
}
|
||||
.column.sidebar, .column.main {
|
||||
width: 100%;
|
||||
}
|
||||
.header, .topnav {
|
||||
width: 100%;
|
||||
}
|
||||
.column.main {
|
||||
width: 75%;
|
||||
}
|
||||
.topnav {
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
}
|
||||
.topnav a {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
.header h1 {
|
||||
float: left;
|
||||
}
|
||||
.header button {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 950px) {
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 75vw;
|
||||
}
|
||||
.column.sidebar {
|
||||
width: 15vw;
|
||||
}
|
||||
.column.main {
|
||||
width: 56.5vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 65vh;
|
||||
}
|
||||
.header {
|
||||
width: 15vw;
|
||||
height: 10vh;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 1.5vw;
|
||||
position: relative;
|
||||
top: 1.5vh;
|
||||
max-height: 10vh;
|
||||
}
|
||||
.header h1 a {
|
||||
color: #616d5c75;
|
||||
}
|
||||
.header h1 a:hover {
|
||||
color: #818570f5;
|
||||
}
|
||||
.topnav {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.topnav a {
|
||||
position: relative;
|
||||
top: 3vh;
|
||||
color: #c8f345;
|
||||
border: 2px solid #000;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
margin: 5px;
|
||||
background-image: url('https://i.imgur.com/B6MPUWI.png');
|
||||
font-size: 1.1vw;
|
||||
}
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
.footer {
|
||||
width: /*71.5vw;*/100%;
|
||||
}
|
||||
}
|
||||
.rev { unicode-bidi: bidi-override; direction: rtl; }
|
||||
.obem { position: absolute; display:inline-block; z-index: -1; width: 0px; height: 0px; overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
/*
|
||||
* Name: twilight
|
||||
* Author: Solaria
|
||||
* Website: https://solaria.neocities.org/
|
||||
* /
|
||||
|
||||
/* overall document stuff */
|
||||
|
||||
/* fonts */
|
||||
@import url('https://fonts.googleapis.com/css?family=Arima&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Livvic&display=swap');
|
||||
|
||||
/* color variables
|
||||
bg1 = dark background blue
|
||||
bg2 = lighter background blue
|
||||
acc = accent */
|
||||
:root {
|
||||
--bg1: midnightblue;
|
||||
--bg2: #214BCA;
|
||||
--text: lightyellow;
|
||||
--link: rgb(255,215,40);
|
||||
--acc: orange;}
|
||||
* {
|
||||
box-sizing: border-box;}
|
||||
|
||||
|
||||
/* html elements (and those inside of classes)*/
|
||||
|
||||
body {
|
||||
background: var(--bg2);
|
||||
background-image: linear-gradient(var(--bg1), var(--bg2));
|
||||
background-attachment: fixed;
|
||||
color: var(--text);
|
||||
font-family: 'Livvic', arial, sans-serif;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.4em;
|
||||
margin: 0% 2%;
|
||||
padding: 0% 1%;}
|
||||
|
||||
i, b, em, strong {
|
||||
color: var(--acc);}
|
||||
|
||||
/* lists */
|
||||
ul {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0px 15px;
|
||||
padding: 0px;}
|
||||
li {
|
||||
padding: 0.25rem 0.75rem 0.25rem 0.25rem;}
|
||||
li:before {
|
||||
content: "🟄";
|
||||
padding: 0rem 0.25rem 0rem 0.5rem;}
|
||||
li:nth-child(odd) {
|
||||
background: var(--bg1);
|
||||
border-radius: 1em;}
|
||||
.sidebar ul {
|
||||
margin: 0px;}
|
||||
.sidebar li {
|
||||
padding: 0rem 0.75rem 0rem 0.25rem;}
|
||||
|
||||
/* headings */
|
||||
h2, h3, h4, h5, h6 {
|
||||
margin: 0px;
|
||||
margin-top: 1em;
|
||||
font-family: arima;}
|
||||
|
||||
.main h3, .main h4, .main h5, .main h6 {
|
||||
margin-top: 2em;}
|
||||
|
||||
h1 {
|
||||
font-family: arima;
|
||||
margin: 0.6rem 0rem;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
display: block;
|
||||
position: static;
|
||||
height: inherit;}
|
||||
|
||||
.main h2 {
|
||||
border-bottom: 1.5px solid var(--link);}
|
||||
|
||||
.main h2, .main h3 {
|
||||
color: var(--link);}
|
||||
|
||||
.main h4, .main h5, .main h6 {
|
||||
color: var(--acc);}
|
||||
|
||||
/* table stuff */
|
||||
table {
|
||||
border: 1.5px dotted var(--link);
|
||||
border-collapse: collapse;
|
||||
border-radius: 15px;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow: auto;}
|
||||
|
||||
th, tr:nth-child(even) {
|
||||
background: var(--bg1);}
|
||||
td, th {
|
||||
padding: 0.1rem 1rem;}
|
||||
th {
|
||||
text-align: center;
|
||||
padding: 0.5rem;}
|
||||
|
||||
/* links */
|
||||
a {
|
||||
font-family: arima;
|
||||
display: inline-block;
|
||||
color: var(--link);
|
||||
text-decoration: underline dotted;
|
||||
text-shadow: 1px 1px 0px var(--bg1);
|
||||
border: 1.5px solid var(--link);
|
||||
outline-offset: -2px;
|
||||
padding: 0.1em 0.5em;
|
||||
border-radius: 1em;}
|
||||
|
||||
a:hover, a:focus, #navigation a:hover, #navigation a:focus {
|
||||
color: var(--text);
|
||||
text-decoration: underline solid;
|
||||
outline: 3px double var(--link);
|
||||
outline-offset: 0px;
|
||||
box-shadow: 0px 0px 0.5em var(--acc) inset;
|
||||
text-shadow: 0px 0px 0.5em var(--link);}
|
||||
|
||||
.sidebar a, .main a, .footer a {
|
||||
padding: 0em 0.5em;
|
||||
border: 1.5px solid transparent;}
|
||||
|
||||
#navigation a {
|
||||
background-color: var(--bg1);
|
||||
font-size: 1.1rem;
|
||||
color: var(--link);
|
||||
text-decoration: underline dotted;
|
||||
text-shadow: 1px 1px 0px var(--bg1);
|
||||
border: 1.5px solid var(--link);
|
||||
outline: 1px solid var(--bg1);
|
||||
outline-offset: -2px;
|
||||
padding: 0.1em 0.5em;
|
||||
border-radius: 1em;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
clear: both;
|
||||
margin: 0px 5px;}
|
||||
|
||||
h1 a {
|
||||
display: block;
|
||||
max-width: 25rem;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
padding: 0.5em;
|
||||
border-style: none;
|
||||
box-shadow: none;
|
||||
color: var(--text);
|
||||
text-shadow: 0px 0px 0.3rem var(--link);
|
||||
letter-spacing: 0.1rem;
|
||||
font-size: 2.5rem;
|
||||
position: static;}
|
||||
h1 a:before {
|
||||
content: "🟄 ";}
|
||||
h1 a:after {
|
||||
content: " 🟄";}
|
||||
|
||||
/* button styles */
|
||||
button, select, input {
|
||||
display: inline;
|
||||
color: var(--acc);
|
||||
background: #1c309a;
|
||||
font-family: 'Arima', garamond, serif;
|
||||
font-size: 1em;
|
||||
text-shadow: 1px 1px 0px var(--bg1);
|
||||
border: 1.5px solid var(--acc);
|
||||
outline: 1px solid var(--bg1);
|
||||
outline-offset: -2px;
|
||||
padding: 0em 0.5em;
|
||||
border-radius: 1em;}
|
||||
|
||||
button:hover, button:focus, select:hover, select:focus, input:hover, input:focus {
|
||||
color: var(--link);
|
||||
outline: 3px double var(--link);
|
||||
outline-offset: 0px;
|
||||
box-shadow: 0px 0px 0.5em var(--acc) inset;
|
||||
text-shadow: 0px 0px 0.5em var(--acc);}
|
||||
|
||||
/* classes and ids */
|
||||
.container {
|
||||
position: static;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
transform: none;
|
||||
width: 100%;}
|
||||
|
||||
.header {
|
||||
padding: 5px;
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: initial;
|
||||
white-space: normal;}
|
||||
#navigation {
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
overflow: visible;}
|
||||
|
||||
.main, .sidebar {
|
||||
text-align: left;
|
||||
background: rgba(25,25,112,0.5);
|
||||
box-shadow: 0px 0px 2rem var(--bg1) inset;
|
||||
border: 3px double var(--link);
|
||||
border-radius: 15px;}
|
||||
.footer {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin: 0% auto;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
max-width: 25rem;
|
||||
clear: both;
|
||||
background: transparent;}
|
||||
.footer-text {
|
||||
font-size: 1.1rem;}
|
||||
|
||||
.row {
|
||||
display: block;
|
||||
width: 100%;}
|
||||
|
||||
|
||||
/* title for extra narrow screens */
|
||||
@media screen and (max-width: 420px) {
|
||||
.header h1 a {
|
||||
letter-spacing: 0rem;
|
||||
font-size: 2.1rem;}
|
||||
}
|
||||
|
||||
/* phones and tablets, one column */
|
||||
@media screen and (max-width: 950px) {
|
||||
body {
|
||||
margin: 1% 2%;}
|
||||
.header h1 {
|
||||
text-align: center;
|
||||
float: none;}
|
||||
#navigation {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 0px;
|
||||
margin: 0px;}
|
||||
#navigation h2 {
|
||||
margin: 0px;
|
||||
padding: 0px;}
|
||||
#navigation a {
|
||||
display: inline-block;
|
||||
margin: 1px 2px;}
|
||||
.row {
|
||||
display: block;
|
||||
width: 100%;}
|
||||
.sidebar, .main {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 5px 20px;
|
||||
margin: 5px 0px;}
|
||||
}
|
||||
.column.main {
|
||||
width: 100%;}
|
||||
|
||||
/* computer screens and wider, two columns */
|
||||
@media screen and (min-width: 950px) {
|
||||
.main, .sidebar {
|
||||
float: left;
|
||||
margin: 1%;
|
||||
margin-bottom: 10px;
|
||||
overflow: auto;
|
||||
min-height: 75vh;
|
||||
max-height: 75vh;}
|
||||
.column.main {
|
||||
width: 74%;
|
||||
max-width: 900px;
|
||||
padding: 0.5rem 2rem;}
|
||||
.column.sidebar {
|
||||
width: 22%;
|
||||
padding: 0.5rem 1rem;}
|
||||
|
||||
.header h1 {
|
||||
position: static;
|
||||
margin: 0px;
|
||||
max-height: none;}
|
||||
#navigation {
|
||||
position: static;
|
||||
display: block;
|
||||
text-align: center;}
|
||||
#navigation a {
|
||||
position: static;
|
||||
text-align: center;
|
||||
display: inline-block;}
|
||||
.footer {
|
||||
display: block;
|
||||
clear: both;
|
||||
float: none;}
|
||||
.mobile-only {
|
||||
display: none;}
|
||||
}
|
||||
|
||||
/* space */
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
var addrOK = false;
|
||||
// functions to deal with cookies
|
||||
function getCookie(cname) {
|
||||
let name = cname + "=";
|
||||
let decodedCookie = decodeURIComponent(document.cookie);
|
||||
let ca = decodedCookie.split(';');
|
||||
for(let i = 0; i <ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) == ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) == 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
function setCookie(cname, cvalue, exdays=365) {
|
||||
const d = new Date();
|
||||
d.setTime(d.getTime() + (exdays*24*60*60*1000));
|
||||
let expires = "expires="+ d.toUTCString();
|
||||
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
|
||||
}
|
||||
|
||||
/* $(document).ready(function(){
|
||||
$(".flip").on("click", function(e) {
|
||||
var s = $(this).hasClass("selected");
|
||||
$(".flip").removeClass("selected");
|
||||
if(!s) $(this).addClass("selected");
|
||||
var target = $(this).attr("href");
|
||||
$(target).slideToggle("fast");
|
||||
$(".panel").not(target).hide();
|
||||
e.preventDefault();
|
||||
});
|
||||
$("#navigation a").each(function(number){$(this).attr("href","#panel"+(number+1))})
|
||||
$("#themeButton").css("display","none");
|
||||
var fixAddr = function(){
|
||||
if(addrOK) return;
|
||||
$(".rev").each(function(i){$(this).attr("href",$(this).attr("href")+$(this).attr("data-user"))});
|
||||
addrOK = true;
|
||||
}
|
||||
$("#themePicker").on("change", function(){
|
||||
console.log(document.cookie);
|
||||
$("#themeTarget").attr("href","/css/themes/"+$(this).val());
|
||||
});
|
||||
$(".rev").each(function(i){$(this).click(fixAddr)});
|
||||
$(".rev").each(function(i){$(this).contextmenu(fixAddr)});
|
||||
});*/
|
||||
|
||||
// BING wrote this
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Get all the elements with the class "flip"
|
||||
var flips = document.querySelectorAll(".flip");
|
||||
// Loop through each element and add a click event listener
|
||||
flips.forEach(function(flip) {
|
||||
flip.addEventListener("click", function(e) {
|
||||
// remove existing nojs-js
|
||||
var noJS = document.getElementById('nojs_css');
|
||||
if (typeof(noJS) != 'undefined' && noJS != null) {
|
||||
noJS.remove();
|
||||
|
||||
}
|
||||
|
||||
// Prevent the default action of the link
|
||||
e.preventDefault();
|
||||
// Check if the element has the class "selected"
|
||||
var s = flip.classList.contains("selected");
|
||||
// Remove the class "selected" from all the elements
|
||||
flips.forEach(function(f) {
|
||||
f.classList.remove("selected");
|
||||
});
|
||||
// If the element did not have the class "selected", add it
|
||||
if (!s) flip.classList.add("selected");
|
||||
// Get the target element from the href attribute
|
||||
var target = document.querySelector(flip.getAttribute("href"));
|
||||
// Toggle the visibility of the target element
|
||||
console.log("hi");
|
||||
if(target.classList.contains("visible")) {
|
||||
target.classList.remove("visible");
|
||||
} else {
|
||||
target.classList.add("visible");
|
||||
}
|
||||
// Hide all the other elements with the class "panel"
|
||||
var panels = document.querySelectorAll(".panel");
|
||||
panels.forEach(function(panel) {
|
||||
if (panel !== target) panel.classList.remove("visible");
|
||||
});
|
||||
});
|
||||
});
|
||||
// Get all the links in the navigation element
|
||||
var navLinks = document.querySelectorAll("#navigation a");
|
||||
// Loop through each link and set its href attribute to "#panel" + (number + 1)
|
||||
navLinks.forEach(function(link, number) {
|
||||
link.setAttribute("href", "#panel" + (number + 1));
|
||||
});
|
||||
// Hide the theme button element
|
||||
document.querySelector("#themeButton").style.display = "none";
|
||||
// Define a variable to store the address status
|
||||
var addrOK = false;
|
||||
// Define a function to fix the address
|
||||
var fixAddr = function() {
|
||||
// If the address is OK, return
|
||||
if (addrOK) return;
|
||||
// Get all the elements with the class "rev"
|
||||
var revs = document.querySelectorAll(".rev");
|
||||
// Loop through each element and set its href attribute to its href + its data-user attribute
|
||||
revs.forEach(function(rev) {
|
||||
rev.setAttribute("href", rev.getAttribute("href") + rev.getAttribute("data-user"));
|
||||
});
|
||||
// Set the address status to true
|
||||
addrOK = true;
|
||||
};
|
||||
// Get the theme picker element
|
||||
var themePicker = document.querySelector("#themePicker");
|
||||
// Add a change event listener to the theme picker element
|
||||
themePicker.addEventListener("change", function() {
|
||||
// Set a cookie with the name "theme" and the value of the selected option
|
||||
setCookie("theme",themePicker.value);
|
||||
console.log(document.cookie);
|
||||
// Set the href attribute of the theme target element to "/css/themes/" + the selected option
|
||||
document.querySelector("#themeTarget").setAttribute("href", "/css/themes/" + themePicker.value);
|
||||
});
|
||||
// Loop through each element with the class "rev" and add a click and a contextmenu event listener that calls fixAddr
|
||||
document.querySelectorAll(".rev").forEach(function(rev) {
|
||||
rev.addEventListener("click", fixAddr);
|
||||
rev.addEventListener("contextmenu", fixAddr);
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
|
@ -20,7 +20,7 @@
|
|||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<footer class="footer">
|
||||
{{ partial "footer.html" . }}
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue