body { font-family: "Source Sans Pro", "Fira Sans", Roboto, sans-serif; line-height: 1.2; background-color: #efe5e0; margin: 0; padding: 0; box-sizing: border-box; min-height: 100vh; } a { color: #1d125f; } a:visited { color: #48122d; } a:hover { text-decoration: none; } body { display: grid; grid-template-columns: auto; grid-template-rows: auto auto auto 1fr; grid-template-areas: "header" "main" "social" "footer"; align-items: start; } body > header { grid-area: header; padding: 2vmin; } main { grid-area: main; padding: 0 2vmin; margin-bottom: 2em; background: #fff5f0; } .blog main { justify-self: center; } body:not(.blog) main h2 { margin-top: 0.3em; margin-bottom: 0; } #social { grid-area: social; align-self: start; } footer { grid-area: footer; align-self: end; } @media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:600px)) { body { background-color: #fff5f0; grid-template-columns: 100px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header main" "social main" "footer footer"; gap: 1em 3em; padding: 2vmin 2vmin 0; } body > header { padding: 0; } main { padding: 0 1em; margin-bottom: 0; } } @media (min-width:900px) { body { grid-template-columns: 150px 1fr; padding: 2em 2em 0; } body:not(.blog) main { font-size: 150%; margin-left: 4em; } body:not(.blog) main h2 { margin-top: 0; } } @media (min-width:1500px) { body { padding: 4em 4em 0; grid-template-columns: 250px 1fr; gap: 1em 4em; } body:not(.blog) main { display: flex; margin-left: 6em; } body:not(.blog) main > * { margin-right: 4em; flex-grow: 1; } } .wordmark { /* Font size determines the size of the midgard word mark */ line-height: 1; font-family: "Roboto Slab", serif; font-weight: 300; color: black; text-decoration: none; text-align: left; display: inline-block; width: 3.37em; } .wordmark span { display: block; } .wordmark span:last-child { text-align: right; } .wordmark span:last-child:before { content: " "; display: block; width: 3em; height: 1px; border-bottom: 0.055em solid black; margin-top: 0.04em; margin-bottom: -0.17em; } a:hover .wordmark span:first-child, a.wordmark:hover span:first-child { color: #6f164e; } a:hover .wordmark span:last-child, a.wordmark:hover span:last-child { color: #8c4643; } a:hover .wordmark span:last-child:before, a.wordmark:hover span:last-child:before { border-bottom-color: #62435a; } body > header img { width: 25vmin; height: 25vmin; display: inline-block; } body > header a { text-decoration: none; } body > header a:hover img { filter: brightness(110%); } .sitename { margin: 0; margin-left: 0.3em; display: inline-block; font-size: 12vmin; } body > header img, .sitename { vertical-align: middle; } @media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:600px)) { body > header img { width: 100px; height: 100px; display: block; } .sitename { margin: 0.3em 0 0 0; display: block; font-size: 23pt; } } @media (min-width:900px) { body > header img { width: 150px; height: 150px; } .sitename { font-size: 34pt; } } @media (min-width:1500px) { body > header img { width: 250px; height: 250px; display: block; } .sitename { margin: 0.3em 0 0 0; display: block; font-size: 56.5pt; } } .links ul { padding: 0; margin: 0 0 1em; } .links li { list-style: none; margin: 0.5em 0; } .links li a { display: block; text-decoration: none; padding: 0.2em 0.3em; margin: 0 -0.3em; } .links li a:hover, li a:focus { background-color: #fffaf7; } .links a .summary { font-size: 75%; color: #333; margin-top: 0.3em; } .links a .title { text-decoration: underline; } @media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:600px)) { .links li { margin: 1.5em 0; } .links ul { margin-bottom: 2em; } } body.blog { background-color: #efe5e0; } .blog main { line-height: 1.5; max-width: 50em; } @media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:600px)) { .blog main { line-height: 1.8; } } main h1 { margin: 0.5em 0 0; } main header .metadata { color: #888; font-size: 90%; margin-top: -0.1em; font-weight: 200; } main header { border-bottom: 1px solid #aaa; padding-bottom: 0.8em; } .metadata .author, .metadata time { font-weight: 400; } .codehilite { background-color: #111; color: #eee; padding: 0.5em 2vmin; margin: 0 -2vmin; } @media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:600px)) { .codehilite { padding: 0.5em 1em; margin: 0 -1em; } } .codehilite pre { margin: 0; font-size: 100%; } kbd, code { padding: 0.3em 0.4em 0.3em; border-radius: 0.5em; font-family: "Source Code Pro", monospace; font-size: 90%; white-space: pre-wrap; white-space: break-spaces; } kbd { background-color: #fff; border-bottom: 2px solid #ddd; } code { background-color: #efe5e0; color: #222; } pre code { padding: 0; border-radius: 0; background-color: transparent; color: inherit; } #social { font-size: 75%; } #social a { display: inline-block; width: 4em; text-align: center; vertical-align: top; text-decoration: none; color: #000; opacity: 0.5; } #social a:hover { opacity: 1; } #social a:before { content: " "; width: 3em; height: 3em; display: inline-block; background-size: contain; } #social a:hover:before { background-color: #fff; } #rss-link:before { background-image: url(rss.svg); } #irc-link:before { background-image: url(irc.svg); } @media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:600px)) { #social { font-size: 60%; margin-top: 5em; } } @media (min-width:900px) { #social { font-size: 80%; } } @media (min-width:1500px) { #social { font-size: 100%; } } footer { text-align: center; background-color: #dbc7d7; padding: 0.3em; margin-top: 1em; }