implemented theme switcher, copied over themes

This commit is contained in:
yequari 2024-04-30 20:08:57 -07:00
parent 522f7f5caa
commit c2bbb45785
19 changed files with 3234 additions and 2 deletions

View File

@ -15,6 +15,7 @@ Functionality to Reimplement
- [ ] Event Uploader? - [ ] Event Uploader?
Themes to Convert Themes to Convert
- [ ] Plant Cell
- [ ] Bit Bits - [ ] Bit Bits
- [ ] Frillsify - [ ] Frillsify
- [ ] Plain? - [ ] Plain?

9
data/themes.json Normal file
View File

@ -0,0 +1,9 @@
[
{
"name": "Plant Cell",
"file": "plantcell.css",
"author": "loren"
},
{
}
]

21
data/themes.yaml Normal file
View File

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

View File

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

View File

@ -1 +1 @@
<link rel="stylesheet" href="/css/themes/plantcell.css"> <link id="themeTarget" rel="stylesheet" href="/css/themes/plantcell.css">

View File

@ -0,0 +1,5 @@
/*
* Name:
* Author:
* Website:
*/

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,6 @@
/*
* Name: Plain
* Author: for reference
* Website: 32bit.cafe
*/

352
static/css/themes/sea.css Normal file
View File

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

219
static/css/themes/tweek.css Normal file
View File

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

View File

@ -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 */

128
static/js/main.js Normal file
View File

@ -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.

View File

@ -20,7 +20,7 @@
</main> </main>
</div> </div>
</div> </div>
<footer> <footer class="footer">
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
</footer> </footer>
</div> </div>