# Main styles
// You can specify colors below for your headers, links, and hover. // The colors selected below are accessible according to WCAG guidelines. // If you wish to change the colors but want to ensure their accessibility, // you can check out: colorsafe.co/ $main_title_color: #3e3e3e; $main_header_color: ff0000; $link_color: #3e3e3e; $link_background_color: ffe0e0; $link_hover_color: ff0000; $font_family: system-ui, Helvetica, Arial, sans-serif;
body {
font-family: $font-family;
}
a {
color: $link_color; background: linear-gradient(to bottom, transparent 0%, transparent 60%, $link_background_color 60%, $link_background_color 100%);; text-decoration: none;
}
a:hover, a:focus {
color: $link_hover_color; background: linear-gradient(to bottom, transparent 0%, transparent 0%, $link_background_color 0%, $link_background_color 100%);;
}
h1 {
color: $main_header_color; padding-top: 10px;
}
h2, h3, h4, h5, h6 {
color: $main_title_color; padding-top: 10px;
}
h1 {
size: 1.7rem;
}
h2 {
size: 1.3rem;
}
h3 {
size: 1.2rem;
}
img {
max-width: 100%;
}
figcaption {
margin-top: -3px; background: #dddddd; padding: 1rem; font-size: 1rem; line-height: 1.3rem; text-align: center;
}
p, li {
font-size: 1rem; line-height: 150%; color: #444; margin: 1.25rem 0;
}
.site-title , .post-title {
font-size: 2.5rem; color: $main_title_color; margin: 0;
}
.page {
display: flex; flex-direction: column; justify-content: center; margin: auto; width: 80%; max-width: 600px; // border: 1px solid;
}
main-content, nav-container {
// margin: 2%;
}
nav-container > h1 {
font-size: 2.5rem;
}
nav > ul {
display: flex; list-style: none; padding-inline-start: 0;
}
nav > ul li {
font-size: 1.2rem; padding-right: 3vw; font-weight: 300;
}
// hide skip link until it's in focus .skip-link {
background: #fff; position: absolute; top: -3em;
} .skip-focus {
top: 0;
}
th, td {
padding: 15px; text-align: left; border-bottom: 1px solid #ddd;
}
code {
font-size: 1.1rem;
}
pre {
white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ padding: 2%;
}