yequari.com/themes/dreamcast/static/css/main.css

362 lines
7.1 KiB
CSS
Raw Normal View History

@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);
2024-02-23 04:35:34 +00:00
/* CSS HEX */
:root {
2024-02-24 17:39:17 +00:00
--isabelline: #EEE5E5;
--bg: #0046de;
--brown: #896D2E;
--orange: #DE9B00;
--blue-gray: #2F3E5E;
--blue: #284D9E;
--black: #342F23;
--main-bg: var(--bg);
2024-02-24 17:39:17 +00:00
--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;
2024-02-23 04:35:34 +00:00
}
body {
background: fixed no-repeat url('/images/waves.svg') var(--main-bg);
background-size: cover;
2024-02-23 04:35:34 +00:00
color: var(--primary-text);
2024-04-26 21:47:35 +00:00
font-size: medium;
font-family: 'Catamaran', serif;
2024-02-23 04:35:34 +00:00
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);
2024-02-23 04:35:34 +00:00
}
p {
font-size: 1.1rem;
2024-02-23 04:35:34 +00:00
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;
}
2024-02-23 04:35:34 +00:00
a:link, a:visited {
color: var(--primary-link);
}
a:hover, a:active {
2024-02-29 01:42:02 +00:00
color: var(--primary-link-hover);
2024-02-24 17:39:17 +00:00
text-decoration: underline;
2024-02-23 04:35:34 +00:00
}
article a.title:link, article a.title:visited {
2024-02-23 04:35:34 +00:00
color: var(--secondary-link);
}
article a.title:hover, article a.title:active {
color: var(--secondary-link-hover);
}
a.tag {
color: var(--primary-link);
2024-02-29 01:42:02 +00:00
text-decoration: none;
2024-02-23 04:35:34 +00:00
}
a.tag:hover, a.tag:active {
color: var(--primary-link-hover);
text-decoration: underline;
2024-02-23 04:35:34 +00:00
}
a.category {
color: var(--primary-link)
}
a.category:hover, a.category:active {
color: var(--primary-link-hover)
}
2024-02-23 04:35:34 +00:00
a.permalink {
padding: 0 5px;
}
a.summary {
color: var(--primary-text);
}
header h1 {
2024-02-29 01:42:02 +00:00
font-family: 'Audiowide', display;
2024-02-23 04:35:34 +00:00
/* font-size: 1rem; */
color: var(--header);
2024-02-27 05:33:04 +00:00
display: inline;
2024-02-29 01:42:02 +00:00
text-transform: uppercase;
2024-02-23 04:35:34 +00:00
}
ul.social {
list-style-type: none;
padding: 0 0;
margin: 0;
}
li.social {
2024-04-25 06:22:05 +00:00
padding: 5px 0;
2024-02-23 04:35:34 +00:00
}
2024-02-24 17:39:17 +00:00
img.social {
2024-02-29 01:42:02 +00:00
width: 16px;
2024-02-24 17:39:17 +00:00
}
header {
font-family: 'Noto Sans', sans-serif;
}
2024-02-23 04:35:34 +00:00
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);
2024-02-23 04:35:34 +00:00
}
header .profile img {
display: inline-block;
}
.wrapper {
2024-04-21 19:25:22 +00:00
max-width: 1024px;
2024-02-23 04:35:34 +00:00
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);
2024-02-23 04:35:34 +00:00
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;
2024-02-23 04:35:34 +00:00
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;
2024-02-29 01:42:02 +00:00
/* font-size: 1.1rem; */
2024-02-24 17:39:17 +00:00
transition: box-shadow 0.3s;
2024-02-29 01:42:02 +00:00
text-transform: uppercase;
2024-02-23 04:35:34 +00:00
}
nav li a:link, nav li a:visited {
color: var(--nav-link);
2024-02-24 17:39:17 +00:00
text-decoration: none;
2024-02-23 04:35:34 +00:00
}
nav li a:hover, nav li a:active {
2024-02-24 17:39:17 +00:00
animation: 0.2s ease-in 1 forwards gradient;
outline: 1px solid rgba(255, 255, 255, 0.3);
2024-02-27 05:33:04 +00:00
box-shadow: 0 0 10px white;
2024-02-24 17:39:17 +00:00
}
@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%);
}
2024-02-23 04:35:34 +00:00
}
.main-sidebar {
background-color: var(--content-bg);
border-radius: 15px;
z-index: 1;
display: flex;
2024-04-27 00:48:14 +00:00
flex-flow: row wrap;
box-shadow: 3px 3px 5px var(--shadow);
padding: 0;
margin-bottom: 10vh;
2024-02-23 04:35:34 +00:00
}
.sidebar {
flex: 0 1 20%;
border-right: 1px solid #c7c7c7;
padding: 30px 25px;
2024-02-23 04:35:34 +00:00
}
.sidebar h1 {
border-bottom: 1px inset grey;
padding-bottom: 5px;
}
2024-04-25 06:22:05 +00:00
.sidebar p.about-me {
text-align: center;
}
2024-02-23 04:35:34 +00:00
main {
flex: 1 3 70%;
padding: 2vh 4vw;
2024-02-23 04:35:34 +00:00
}
main li {
padding: 0.2em 0;
}
article p.context {
margin-top: 0;
padding-left: 1vw;
2024-02-23 04:35:34 +00:00
}
article p {
text-align: justify;
}
article img {
display: block;
2024-08-18 14:35:50 +00:00
width: 85%;
object-fit: scale-down;
2024-02-23 04:35:34 +00:00
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;
}
2024-02-29 01:42:02 +00:00
pre {
white-space: pre-wrap;
word-wrap: break-word;
padding: 1vh 2vw;
2024-02-23 04:35:34 +00:00
}
ul.pagination {
list-style: none;
text-align: center;
}
li.page-item {
display: inline;
padding: 0.3rem;
}
footer {
text-align: center;
color: var(--secondary-text);
2024-04-27 00:48:14 +00:00
flex: 1 1 100%;
2024-02-23 04:35:34 +00:00
}
.metadata {
display: flex;
flex-flow: row;
justify-content: space-between;
margin-top: 1vh;
}
2024-02-23 04:35:34 +00:00
.hidden {
display: none;
}
.center {
text-align: center;
}
2024-02-29 01:42:02 +00:00
.lowercase {
text-transform: lowercase;
}