368 lines
7.2 KiB
CSS
368 lines
7.2 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;
|
|
|
|
--main-bg: var(--bg);
|
|
--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;
|
|
}
|
|
|
|
body {
|
|
background: fixed no-repeat url('/images/waves.svg') 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(--blue-gray);
|
|
}
|
|
|
|
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);
|
|
font-family: 'Noto Sans', sans-serif;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
padding: 0;
|
|
border-radius: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
nav ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav li {
|
|
display: inline;
|
|
}
|
|
|
|
nav li a {
|
|
display: inline-block;
|
|
padding: 20px;
|
|
/* font-size: 1.1rem; */
|
|
transition: box-shadow 0.3s;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
nav li a:link, nav li a:visited {
|
|
color: var(--nav-link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav li a:hover, nav li a:active {
|
|
animation: 0.2s ease-in 1 forwards gradient;
|
|
outline: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow: 0 0 10px white;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.00) 10%, rgba(255,255,255,0) 20%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.0) 41%);
|
|
}
|
|
20% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0) 30%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%);
|
|
}
|
|
40% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0) 35%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%);
|
|
}
|
|
60% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 45%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%);
|
|
}
|
|
80% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.20) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%);
|
|
}
|
|
100% {
|
|
background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
max-width: 400px;
|
|
margin: 8px auto;
|
|
text-align: center;
|
|
}
|
|
|
|
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 {
|
|
text-align: center;
|
|
color: var(--secondary-text);
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.metadata {
|
|
display: flex;
|
|
flex-flow: row;
|
|
justify-content: space-between;
|
|
margin-top: 1vh;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.lowercase {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
@media only screen and (max-width: 700px) {
|
|
article img {
|
|
max-width: 200px;
|
|
}
|
|
}
|