golfed.xyz/assets/style.css

236 lines
2.9 KiB
CSS
Raw Normal View History

2024-08-04 16:39:40 +02:00
body {
font-family: Verdana, sans-serif;
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: #1d1f27;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: #c9d1d9;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
color: #eee;
}
a {
color: #8cc2dd;
}
.title {
text-decoration: none;
border: 0;
}
.title h1 {
font-size: 24px;
margin: 19.92px 0 19.92px 0;
}
.title span {
font-weight: 400;
}
nav a {
margin-right: 10px;
}
textarea {
background-color: #252525;
color: #ddd;
width: 100%;
font-size: 16px;
}
input {
background-color: #252525;
color: #ddd;
font-size: 16px;
}
content {
line-height: 1.6;
}
table {
width: 100%;
}
table,
th,
td {
border: 1px solid;
border-collapse: collapse;
border-color: #c9d1d9;
padding: 5px;
}
img {
max-width: 100%;
}
code {
padding: 2px 5px;
color: #f8f8f2;
background-color: #282a36;
}
pre code {
display: block;
padding: 20px;
white-space: pre;
font-size: 14px;
overflow-x: auto;
}
blockquote {
border-left: 1px solid #999;
color: #ccc;
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px;
text-align: center;
}
.helptext {
color: #aaa;
font-size: small;
}
.errorlist {
color: #eba613;
font-size: small;
}
/* blog posts */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
margin-bottom: 10px;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: #8b6fcb;
}
a.blog-tags {
line-height: 2;
}
h3.blog-filter {
margin-bottom: 0;
}
.disabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.7;
}
p.byline {
font-style: italic;
}
/* "Skip to main content" link */
.skip-link {
position: absolute;
top: 5;
transform: translateY(-600%);
transition: transform 0.5s;
background-color: #1d1f27;
padding: 6px;
}
.skip-link:focus {
transform: translateY(0%);
}
figure {
margin-inline-start: 0em;
margin-inline-end: 0em;
}
figcaption > p {
margin-block-start: 0px;
text-align: center;
font-style: italic;
color: #ccc;
}
/* -- Custom CSS -- */
:root {
--html-bg: #121212;
--body-bg: #131313;
--accent: #ef5350;
--visited: #f58280;
}
html {
background: var(--html-bg);
}
body {
background-color: var(--body-bg);
border-radius: 20px;
}
a {
color: var(--accent);
}
ul.blog-posts li a:visited {
color: var(--visited);
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.title {
white-space: nowrap;
}
.social-container {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
margin-left: 15px;
}
.social-icon {
aspect-ratio: 1;
width: 25px;
text-decoration: none;
transition: all 0.6s ease;
display: flex;
margin: 6px;
}
.social-icon:hover {
opacity: 0.7;
}