481 lines
9.1 KiB
CSS
481 lines
9.1 KiB
CSS
@import url(https://fonts.bunny.net/css?family=ibm-plex-mono:400|noto-sans:400,500,600,700|m-plus-1:400,500,600,700|audiowide:400|koulen:400|catamaran:400,700);
|
|
/* CSS HEX */
|
|
:root {
|
|
--isabelline: #EEE5E5;
|
|
|
|
--bg: #0046de;
|
|
--brown: #896D2E;
|
|
--orange: #DE9B00;
|
|
--blue-gray: #2F3E5E;
|
|
--blue: #284D9E;
|
|
--black: #342F23;
|
|
|
|
--russian-violet: #1f0949;
|
|
--tea-rose: #f8c7cc;
|
|
--periwinkle: #BEB7DF;
|
|
--rose-quartz: #ABA9BF;
|
|
--eerie-black: #1D1E18;
|
|
--lavender: #E1E2EF;
|
|
--mardi-gras: #320F76;
|
|
|
|
--main-bg: linear-gradient(#0045df, #00d4ff);
|
|
--content-bg: var(--isabelline);
|
|
--primary-text: var(--black);
|
|
--secondary-text: var(--blue-gray);
|
|
--header: var(--orange);
|
|
--nav-link: var(--orange);
|
|
--primary-link: var(--brown);
|
|
--primary-link-hover: var(--blue);
|
|
--secondary-link: var(--blue);
|
|
--secondary-link-hover: var(--brown);
|
|
--ternary-link: var(--blue);
|
|
--ternary-link-hover: var(--brown);
|
|
--shadow: #2F3E5E55;
|
|
|
|
--heading-1: 2.75rem;
|
|
--heading-2: 2.25rem;
|
|
--heading-3: 1.75rem;
|
|
--heading-4: 1.25rem;
|
|
--heading-5: 0.75rem;
|
|
--heading-6: 0.25rem;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--main-bg: linear-gradient(#28164B, 70%, #825ECA );
|
|
--content-bg: #1A181B;
|
|
--primary-text: #DCCBFF;
|
|
--secondary-text: #B89AF5;
|
|
--header: #825ECA;
|
|
--nav-link: #B89AF5;
|
|
--primary-link: #B89AF5;
|
|
--primary-link-hover: #E3D5FF;
|
|
--secondary-link: #E3D5FF;
|
|
--secondary-link-hover: #B89AF5;
|
|
--ternary-link: var(--blue);
|
|
--ternary-link-hover: var(--brown);
|
|
--shadow: #00000088;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--main-bg: linear-gradient(#0045df, #00d4ff);
|
|
--content-bg: var(--isabelline);
|
|
--primary-text: var(--black);
|
|
--secondary-text: var(--blue-gray);
|
|
--header: var(--orange);
|
|
--nav-link: var(--orange);
|
|
--primary-link: var(--brown);
|
|
--primary-link-hover: var(--blue);
|
|
--secondary-link: var(--blue);
|
|
--secondary-link-hover: var(--brown);
|
|
--ternary-link: var(--blue);
|
|
--ternary-link-hover: var(--brown);
|
|
--shadow: #2F3E5E55;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: fixed no-repeat url('/images/waves-nobg.svg'), fixed no-repeat var(--main-bg);
|
|
background-size: cover;
|
|
color: var(--primary-text);
|
|
font-size: medium;
|
|
font-family: 'Catamaran', serif;
|
|
scrollbar-width: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6 {
|
|
color: var(--secondary-text);
|
|
font-family: 'Koulen', sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--heading-1);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--heading-2);
|
|
}
|
|
h3 {
|
|
font-size: var(--heading-3);
|
|
}
|
|
h5 {
|
|
font-size: var(--heading-5);
|
|
}
|
|
h6 {
|
|
font-size: var(--heading-6);
|
|
}
|
|
|
|
p {
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
p.subtitle {
|
|
color: var(--secondary-text);
|
|
font-style: italic;
|
|
}
|
|
|
|
p.about {
|
|
line-height: 0;
|
|
color: var(--fairy-tale);
|
|
}
|
|
|
|
p.context {
|
|
font-style: italic;
|
|
}
|
|
|
|
a:link, a:visited {
|
|
color: var(--primary-link);
|
|
}
|
|
|
|
a:hover, a:active {
|
|
color: var(--primary-link-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
article a.title:link, article a.title:visited {
|
|
color: var(--secondary-link);
|
|
}
|
|
|
|
article a.title:hover, article a.title:active {
|
|
color: var(--secondary-link-hover);
|
|
}
|
|
|
|
a.tag {
|
|
color: var(--primary-link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.tag:hover, a.tag:active {
|
|
color: var(--primary-link-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a.category {
|
|
color: var(--primary-link)
|
|
}
|
|
|
|
a.category:hover, a.category:active {
|
|
color: var(--primary-link-hover)
|
|
}
|
|
|
|
a.permalink {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
a.summary {
|
|
color: var(--primary-text);
|
|
}
|
|
|
|
header h1 {
|
|
font-family: 'Audiowide', display;
|
|
/* font-size: 1rem; */
|
|
color: var(--header);
|
|
display: inline;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
ul.social {
|
|
list-style-type: none;
|
|
padding: 0 0;
|
|
margin: 0;
|
|
}
|
|
|
|
li.social {
|
|
padding: 5px 0;
|
|
}
|
|
|
|
img.social {
|
|
width: 16px;
|
|
}
|
|
|
|
header {
|
|
font-family: 'Noto Sans', sans-serif;
|
|
}
|
|
|
|
header a.sitetitle {
|
|
text-decoration: none;
|
|
}
|
|
|
|
header .profile {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
margin: 10px;
|
|
text-shadow: 3px 3px 5px var(--shadow);
|
|
}
|
|
|
|
header .profile img {
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
|
|
.wrapper {
|
|
max-width: 1024px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
nav {
|
|
/* From https://css.glass */
|
|
background: rgba(255, 255, 255, 0.13);
|
|
border-radius: 16px;
|
|
box-shadow: 3px 3px 5px var(--shadow);
|
|
backdrop-filter: blur(5px);
|
|
-webkit-backdrop-filter: blur(5px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
text-align: center;
|
|
padding: 0;
|
|
border-radius: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
nav ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: radial-gradient(
|
|
circle at calc((var(--mouse-x, 50) * 75%)) calc(var(--mouse-y, 50) * 100%),
|
|
rgba(255, 255, 255, 0.1) 0%,
|
|
rgba(255, 255, 255, 0.05) 20%,
|
|
rgba(255, 255, 255, 0) 30%
|
|
);
|
|
border-radius: 15px;
|
|
}
|
|
|
|
nav li {
|
|
display: inline-block;
|
|
border-radius: 15px;
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
nav li:hover,
|
|
nav li:active {
|
|
animation: 0.2s ease-in 1 forwards spotlight;
|
|
outline: 1px solid rgba(255, 255, 255, 0.2);
|
|
background-clip: border-box;
|
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
nav li a {
|
|
display: inline-block;
|
|
padding: 20px;
|
|
font-size: 1.1rem;
|
|
|
|
text-transform: uppercase;
|
|
font-family: "Noto Sans", sans-serif;
|
|
font-weight: 500;
|
|
border-radius: 15px;
|
|
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
nav li a:link,
|
|
nav li a:visited {
|
|
color: var(--nav-link);
|
|
text-decoration: none;
|
|
border-left: 1px solid rgba(255, 255, 255, 0);
|
|
border-right: 1px solid rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
nav li a:hover,
|
|
nav li a:active {
|
|
background: radial-gradient(
|
|
ellipse 425% 100% at top,
|
|
rgba(255, 255, 255, 0.25) 0%,
|
|
rgba(255, 255, 255, 0.05) 30%,
|
|
rgba(255, 255, 255, 0) 32%
|
|
);
|
|
/* background: linear-gradient(
|
|
rgba(255, 255, 255, 0.13) 0%,
|
|
rgba(255, 255, 255, 0.1) 30%,
|
|
rgba(255, 255, 255, 0) 31%
|
|
); */
|
|
border-left: 1px solid rgba(255, 255, 255, 0.05);
|
|
border-right: 1px solid rgba(255, 255, 255, 0.05);
|
|
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
@keyframes spotlight {
|
|
0% {
|
|
background: radial-gradient(
|
|
circle at 50% 100%,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
rgba(255, 255, 255, 0) 10%,
|
|
rgba(255, 255, 255, 0) 20%
|
|
);
|
|
}
|
|
20% {
|
|
background: radial-gradient(
|
|
circle at 50% 100%,
|
|
rgba(255, 255, 255, 0.05) 0%,
|
|
rgba(255, 255, 255, 0.03) 20%,
|
|
rgba(255, 255, 255, 0) 30%
|
|
);
|
|
}
|
|
40% {
|
|
background: radial-gradient(
|
|
circle at 50% 100%,
|
|
rgba(255, 255, 255, 0.1) 0%,
|
|
rgba(255, 255, 255, 0.07) 25%,
|
|
rgba(255, 255, 255, 0) 45%
|
|
);
|
|
}
|
|
60% {
|
|
background: radial-gradient(
|
|
circle at 50% 100%,
|
|
rgba(255, 255, 255, 0.15) 0%,
|
|
rgba(255, 255, 255, 0.13) 25%,
|
|
rgba(255, 255, 255, 0) 50%
|
|
);
|
|
}
|
|
80% {
|
|
background: radial-gradient(
|
|
circle at 50% 100%,
|
|
rgba(255, 255, 255, 0.2) 0%,
|
|
rgba(255, 255, 255, 0.15) 25%,
|
|
rgba(255, 255, 255, 0) 50%
|
|
);
|
|
}
|
|
100% {
|
|
background: radial-gradient(
|
|
circle at 50% 100%,
|
|
rgba(255, 255, 255, 0.2) 0%,
|
|
rgba(255, 255, 255, 0.15) 25%,
|
|
rgba(255, 255, 255, 0) 50%
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
.main-sidebar {
|
|
background-color: var(--content-bg);
|
|
border-radius: 15px;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
box-shadow: 3px 3px 5px var(--shadow);
|
|
padding: 0;
|
|
margin-bottom: 10vh;
|
|
}
|
|
|
|
.sidebar {
|
|
flex: 0 1 20%;
|
|
border-right: 1px solid #c7c7c7;
|
|
padding: 30px 25px;
|
|
}
|
|
|
|
.sidebar h1 {
|
|
border-bottom: 1px inset grey;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.sidebar p.about-me {
|
|
text-align: center;
|
|
}
|
|
|
|
main {
|
|
flex: 1 3 70%;
|
|
padding: 2vh 4vw;
|
|
}
|
|
|
|
main li {
|
|
padding: 0.2em 0;
|
|
}
|
|
|
|
article p.context {
|
|
margin-top: 0;
|
|
padding-left: 1vw;
|
|
}
|
|
|
|
article p {
|
|
text-align: justify;
|
|
}
|
|
|
|
article img {
|
|
display: block;
|
|
width: 85%;
|
|
object-fit: scale-down;
|
|
margin: 8px auto;
|
|
}
|
|
|
|
article figcaption {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
section.posts ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
article time {
|
|
color: var(--secondary-text);
|
|
}
|
|
|
|
blockquote {
|
|
font: 14px/22px normal helvetica, sans-serif;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
margin-left: 50px;
|
|
padding-left: 15px;
|
|
border-left: 3px solid #ccc;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
padding: 1vh 2vw;
|
|
}
|
|
|
|
ul.pagination {
|
|
list-style: none;
|
|
text-align: center;
|
|
}
|
|
|
|
li.page-item {
|
|
display: inline;
|
|
padding: 0.3rem;
|
|
}
|
|
|
|
footer {
|
|
border-top: 1px dotted var(--secondary-text);
|
|
text-align: center;
|
|
color: var(--secondary-text);
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
footer p {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
#theme-toggle {
|
|
background: var(--content-bg);
|
|
color: var(--primary-text);
|
|
}
|
|
|
|
.metadata {
|
|
display: flex;
|
|
flex-flow: row;
|
|
justify-content: space-between;
|
|
margin-top: 1vh;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.lowercase {
|
|
text-transform: lowercase;
|
|
}
|