388 lines
6.4 KiB
CSS
388 lines
6.4 KiB
CSS
/* Global variables. */
|
|
:root {
|
|
/* Set sans-serif & mono fonts */
|
|
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
|
|
"Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
|
|
"Helvetica Neue", sans-serif;
|
|
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
|
|
|
--bg: #6a826a;
|
|
--container: #fffbef;
|
|
--accent-bg: #b99b6c;
|
|
--text: #6a826a;
|
|
--header-text: #b99b6c;
|
|
/* --text-light: #585858; */
|
|
--border: #6a826a;
|
|
--accent: #aa5757;
|
|
--content-column-width: 750px;
|
|
/* this width was 200 but i stretched it out to fit the gif */
|
|
--sidebar-column-width: 287px;
|
|
--line-padding: 8px;
|
|
}
|
|
|
|
html {
|
|
/* Set the font globally */
|
|
font-family: var(--sans-font);
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Format headers */
|
|
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
color: var(--header-text);
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
margin-top: var(--line-padding);
|
|
margin-bottom: var(--line-padding);
|
|
color: var(--header-text);
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.2rem;
|
|
color: var(--header-text);
|
|
margin-top: var(--line-padding);
|
|
margin-bottom: var(--line-padding);
|
|
}
|
|
|
|
h4, h5 {
|
|
margin-top: var(--line-padding);
|
|
margin-bottom: var(--line-padding);
|
|
}
|
|
|
|
/* Format links */
|
|
a,
|
|
a:visited {
|
|
color: var(--accent);
|
|
display: inline-block;
|
|
transition: transform .07s ease-out;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
transform: translate(0px, -2px);
|
|
}
|
|
|
|
hr {
|
|
border-top: 2px solid var(--border);
|
|
}
|
|
|
|
body {
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
line-height: 1.3;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
background: var(--container);
|
|
width: var(--content-column-width);
|
|
padding: 15px;
|
|
min-height: max-content;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
aside {
|
|
position: sticky;
|
|
height: min-content;
|
|
top: 20px;
|
|
width: var(--sidebar-column-width);
|
|
margin-top: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* border: 2px solid var(--border); */
|
|
}
|
|
|
|
.profile-img {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 60px;
|
|
border: 5px solid var(--border);
|
|
background-color: var(--border);
|
|
/* top: -70px; */
|
|
z-index: 1;
|
|
position: relative;
|
|
color: var(--container)
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-contents {
|
|
padding: 65px 15px 15px 15px;
|
|
border-radius: 15px;
|
|
background: var(--container);
|
|
box-sizing: border-box;
|
|
height: min-content;
|
|
width: 100%;
|
|
top: -50px;
|
|
position: relative;
|
|
z-index: -1;
|
|
}
|
|
|
|
.link-tiles-grid,
|
|
.album-tiles-grid {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 15px;
|
|
margin-bottom: var(--line-padding);
|
|
}
|
|
|
|
.link-tiles-grid>a>img,
|
|
.album-tiles-grid>a>img {
|
|
background-color: var(--border);
|
|
width: 100%;
|
|
aspect-ratio: 1/1;
|
|
color: var(--container)
|
|
}
|
|
|
|
.album-tiles-grid iframe {
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
@media all and (max-width: 1100px) {
|
|
body {
|
|
flex-direction: column-reverse;
|
|
max-width: 100%;
|
|
justify-content: start;
|
|
/* this is a pretty bad solution */
|
|
margin: -20px 20px 20px;
|
|
gap: 0;
|
|
align-items: center;
|
|
}
|
|
|
|
main {
|
|
max-width: 100%;
|
|
flex-grow: 1;
|
|
margin-bottom: -20px;
|
|
}
|
|
|
|
aside {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: var(--content-column-width);
|
|
margin-top: 0;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.sidebar-contents {
|
|
border-radius: 0;
|
|
width: 100%;
|
|
z-index: 0;
|
|
}
|
|
|
|
.sidebar-contents>img {
|
|
display: none;
|
|
}
|
|
|
|
nav {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 0rem 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar-contents {
|
|
/* padding: 15px; */
|
|
margin: 0 0 -25px 0;
|
|
/* width: min-content; */
|
|
}
|
|
|
|
aside>a:hover {
|
|
transform: none;
|
|
}
|
|
|
|
/* switch to two columns when it gets really small */
|
|
@media all and (max-width: 545px) {
|
|
.link-tiles-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-content {
|
|
/* TODO fix this magic number */
|
|
min-height: calc(100vh - 95px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.date-tag {
|
|
font-size: smaller;
|
|
}
|
|
|
|
article>p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
details {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.blog-post img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.pages-article>p {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
article>iframe {
|
|
padding-top: var(--line-padding);
|
|
padding-bottom: var(--line-padding);
|
|
}
|
|
|
|
header>h1 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
|
|
.nav-buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.nav-buttons-bottom {
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
.bouncy {
|
|
animation: bounce 1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-5px);
|
|
}
|
|
75% {
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
animation-delay: 3s; /* add a 3 second delay before restarting the animation */
|
|
}
|
|
}
|
|
|
|
.updates-field {
|
|
border: 2px solid var(--bg);
|
|
padding: 5px;
|
|
margin-top: var(--line-padding);
|
|
margin-bottom: var(--line-padding);
|
|
}
|
|
|
|
.updates-field p {
|
|
margin: 0;
|
|
}
|
|
|
|
.gallery {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--line-padding);
|
|
margin-top: 15px
|
|
}
|
|
|
|
.gallery>a {
|
|
line-height: 0;
|
|
}
|
|
|
|
.gallery>a>img {
|
|
box-sizing:border-box;
|
|
background-color: var(--accent-bg);
|
|
border: 2px solid var(--border);
|
|
}
|
|
|
|
.two-columns {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--line-padding);
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.two-columns *{
|
|
width: 100%;
|
|
aspect-ratio: 1/1;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.infinite-nightmare img,
|
|
.infinite-nightmare video,
|
|
.half-width img,
|
|
.half-width video {
|
|
max-width: 360px;
|
|
}
|
|
|
|
/* simple lightbox pulled from https://codepen.io/nebo/pen/ONXejO */
|
|
|
|
.trans
|
|
{
|
|
transition: all 0.25s ease;
|
|
}
|
|
.lightbox
|
|
{
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0,0,0,0.75);
|
|
z-index: 999;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.lightbox img
|
|
{
|
|
max-width: 90%;
|
|
max-height: 80%;
|
|
position: relative;
|
|
top: -100%;
|
|
/* Transition */
|
|
transition: all 0.5 ease;
|
|
}
|
|
.lightbox:target
|
|
{
|
|
outline: none;
|
|
top: 0;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.lightbox:target img
|
|
{
|
|
top: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.paragraph-deparagrapher p {
|
|
margin: 0;
|
|
} |