307 lines
5.8 KiB
CSS
307 lines
5.8 KiB
CSS
|
/*
|
||
|
|
* 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 */
|