32bit.cafe/static/css/themes/twilight.css

307 lines
5.8 KiB
CSS
Raw Normal View History

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