Commit 770993e7 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Move all basic styles into basic.css. Delete all grid layouts from style.css.

parent cd35637d
@charset "UTF-8";
/* - - - - - - - - FONTS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@font-face {
font-family: Informat;
src:
url('/fonts/informative-medium-webfont.woff2') format('woff2'),
url('/fonts/informative-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: Informat;
src:
url('/fonts/informative-mediumit-webfont.woff2') format('woff2'),
url('/fonts/informative-mediumit-webfont.woff') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: Informat;
src:
url('/fonts/informative-semibold-webfont.woff2') format('woff2'),
url('/fonts/informative-semibold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: Informat;
src:
url('/fonts/informative-semiboldit-webfont.woff2') format('woff2'),
url('/fonts/informative-semiboldit-webfont.woff') format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "Informat Black";
src:
url('/fonts/informative-black-webfont.woff2') format('woff2'),
url('/fonts/informative-black-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Informat Black";
src:
url('/fonts/informative-blackit-webfont.woff2') format('woff2'),
url('/fonts/informative-blackit-webfont.woff') format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "Overpass";
src:
url('/fonts/op-sb-webfont.woff2') format('woff2'),
url('/fonts/op-sb-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Overpass";
src:
url('/fonts/op-b-webfont.woff2') format('woff2'),
url('/fonts/op-b-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
/* - - - - - - - - VARIABLES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
:root {
/* set a specific variable for left/right margin and padding units */
/* so it can be consistent throughout site regardless of font size */
--layout-unit: 1rem;
--font-family: "Informat", Verdana, sans-serif;
--font-family-black: "Informat Black", Verdana, sans-serif;
--font-family-code: "Overpass", monospace;
/* default colour theme variables that can be overridden on pages */
--primary-bg: 0,0%,91%; /* hsl(0,0%,91%) */
--secondary-bg: 0,0%,82%; /* hsl(0,0%,82%) */
--text: 0,4%,26%; /* hsl(0,4%,26%) */
--linktext: 0,0%,19%; /* hsl(0,0%,19%) */
--darklinktext: 0,0%,1%; /* hsl(0,0%,1%) */
--brilliant: 180,1%,50%; /* hsl(180,1%,50%) */
--tab-two: 0,0%,84%; /* hsl(0,0%,84%) */
--tab-three: 180,2%,78%; /* hsl(180,2%,78%) */
--tab-four: 180,2%,71%; /* hsl(180,2%,71%) */
--tab-five: 0,0%,64%; /* hsl(0,0%,64%) */
--tab-six: 180,1%,57%; /* hsl(180,1%,57%) */
}
/* - - - - - - - - NAKED ELEMENTS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
html {
font-size: 100%; /* all font sizes and rems scale from here */
line-height: 1.375;
}
@media screen and (min-width: 18em) {
html {
font-size: 101%; /* all font sizes and rems scale from here */
}
}
@media screen and (min-width: 30em) {
html {
font-size: 110%; /* all font sizes and rems scale from here */
}
}
@media screen and (min-width: 35em) {
html {
font-size: 125%; /* all font sizes and rems scale from here */
}
}
body {
/* make background colour before footer same as footer */
background-color: hsl(var(--primary-bg));
color: hsl(var(--text));
font-family: var(--font-family);
letter-spacing: -0.02em;
margin: 0;
}
h1, h2, h3 {
font-family: var(--font-family-black);
font-weight: bold;
letter-spacing: normal;
line-height: 1;
margin: 0 0 0.75em 0;
}
h1 {
font-size: 2.5em;
margin-top: 1em;
/* before grid kicks in */
padding: 0 var(--layout-unit);
}
@media screen and (min-width: 35em) {
h1 {
font-size: 4em;
}
}
/* when grid kicks in */
@media screen and (min-width: 37em) {
h1 {
padding: 0;
}
}
/* make h1s on Notes and Photos single posts smaller */
.notes article .page-title, .photos article .page-title {
font-size: 2em;
margin-top: 2em;
}
@media screen and (min-width: 35em) {
.notes article .page-title, .photos article .page-title {
font-size: 2.5em;
}
}
/* make bottom margins on h1s less on taxonomy pages */
body.kind-taxonomy h1 {
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-top: 1em;
}
@media screen and (min-width: 35em) {
h2 {
font-size: 2.5em;
}
}
/* make h2s on notes smaller */
.notes main h2 {
font-size: 1.75em;
}
@media screen and (min-width: 35em) {
.notes main h2 {
font-size: 2em;
}
}
@media screen and (max-width: 35em) {
h1, h1 a, h2, h2 a {
/* for really big text or long words on narrow viewports */
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
}
h3 {
font-size: 1.5em;
}
footer h2 {
font-size: 1.75em;
}
h3, h4, h5, h6 {
margin-top: 1em;
}
@media screen and (min-width: 35em) {
h3, footer h2 {
font-size: 2em;
}
}
h4, h5, h6 {
font-style: italic;
margin: 1em 0 0.5em 0;
}
h4 {
font-size: 1.25em;
}
@media screen and (min-width: 35em) {
h4 {
font-size: 1.5em;
}
}
h5 {
font-size: 1.15em;
}
@media screen and (min-width: 35em) {
h5 {
font-size: 1.25em;
}
}
h6 {
font-size: 1.1em;
}
@media screen and (min-width: 35em) {
h6 {
font-size: 1.05em;
}
}
p {
margin: 0 0 0.75em 0;
}
a {
color: hsl(var(--linktext));
text-decoration: underline;
text-decoration-color: hsl(var(--brilliant));
-webkit-text-decoration-color: hsl(var(--brilliant));
}
@media screen and (max-width: 35em) {
a {
/* for really long URLs on narrow viewports */
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
}
a:hover, a:active {
color: hsl(var(--brilliant));
text-decoration: underline;
text-decoration-color: hsl(var(--brilliant));
-webkit-text-decoration-color: hsl(var(--brilliant));
transition: 0.2s;
}
h1 a, h2 a, h3 a, figure a, figure a:hover {
color: hsl(var(--text));
}
abbr {
color: hsl(var(--linktext));
border-bottom: 0.08em dotted hsl(var(--brilliant));
display: inline-block;
line-height: 0.7em; /* bring underline closer to text */
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
code {
font-family: var(--font-family-code);
/* give Overpass monospace font same x-height as Informative */
font-size: 0.95em;
}
ul, ol {
margin: 1em 0;
padding-left: var(--layout-unit);
}
small {
font-size: 0.9em;
}
blockquote {
border-left: 0.5rem hsl(var(--secondary-bg)) solid;
color: hsla(var(--text),.9);
font-style: italic;
margin: 0em 0 0.75em -1.5rem;
padding-left: 1rem;
}
blockquote p:last-of-type {
margin-bottom: 0;
}
pre {
/* invert colours for code */
background: hsl(var(--text));
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
border: none;
/* make font slightly smaller for boxed code */
font-size: 0.9em;
margin: 1em 0;
overflow-y: visible;
padding: 2em var(--layout-unit) 3em var(--layout-unit);
}
/* invert colours for code */
pre code {
color: hsl(var(--primary-bg));
}
/* when the hr is in a summary, make it a bit more subtle/not full width */
hr {
border: hsl(var(--brilliant)) dashed 0.075em;
margin: 1em 0;
}
/* - - - - - - - - HEADER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.site-title {
font-style: italic;
text-transform: uppercase;
}
.site-header {
background: hsl(var(--primary-bg));
/* to clear contained margins */
padding: 0.5em 0 0 0;
}
.site-title {
line-height: 0.85em; /* so background is equal above and below text */
margin: 0 0 0.1em 0;
position: relative; /* allow absolute positioning inside */
z-index: 3;
}
.site-title a {
color: hsl(var(--text));
font-size: 0.8em;
padding: 0 var(--layout-unit);
text-decoration: none;
}
.header-wrap {
/* centre everything */
margin: 0 auto;
max-width: 51.8em;
}
/* - - - - - - - - NAVIGATION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.skip-link {
display: block;
padding: 0.25em 1em;
position: absolute;
right: 0;
top: -10em;
z-index: 3;
}
nav[aria-label="Site navigation"] {
background: hsla(var(--secondary-bg), 1);
z-index: 3;
/* so z-index works */
position: relative;
}
.navigation-menu ul {
background: hsla(var(--secondary-bg), 1);
list-style-type: none;
margin: 0;
padding: 0 0 0.5em 0.5rem;
}
.navigation-menu ul a {
border-radius: 0.75em;
display: block;
margin: 0.5em 0.5em 0 0;
padding: calc(var(--layout-unit)/3) calc(var(--layout-unit)/2);
text-align: center;
text-decoration: none;
}
@media screen and (min-width: 52em) {
.navigation-menu ul a {
border-radius: 0;
display: block;
margin: 0;
}
}
@media screen and (min-width: 65em) {
.navigation-menu ul a {
padding: calc(var(--layout-unit)/3) calc(var(--layout-unit)/1.5);
}
}
/* set active navigation link background colour */
div.navigation-menu ul li.active a,
body.blog .navigation-menu a[href="/posts/"],
body.latest .navigation-menu a[href="/latest/"],
body.lens .navigation-menu a[href="/lens/"],
body.kind-taxonomy .navigation-menu a[href="/posts/"] {
background: white;
color: hsl(var(--text));
}
.navigation-menu li a:hover, .navigation-menu li a:active {
text-decoration: underline;
text-decoration-color: currentcolor;
-webkit-text-decoration-color: currentcolor;
}
/* - - - - - - - - MAIN
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
main {
background-color: white;
}
#content {
/* top padding is instead top margin on h1 */
padding: 0 0 4.5em 0;
/* clear contained margins */
overflow: hidden;
}
.intro {
background-color: hsl(var(--primary-bg));
/* clear contained margins */
overflow: hidden;
padding-bottom: 3em;
}
h1 {
padding-left: 0;
padding-right: 0;
}
.entry-notes {
border-top: hsl(var(--brilliant)) dashed 0.15em;
margin-top: 2em;
padding-top: 1em;
}
.notes-list .entry-notes, .posts-list .entry-notes {
border-top: none;
margin-top: 0;
padding-top: 0;
}
/* - - - - - - - - FOOTER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.site-footer {
background: hsl(var(--primary-bg));
/* to clear contained margins */
padding: 0.5em 0;
}
@media screen and (max-width: 37em) {
.site-footer {
/* before grid kicks in */
padding: 0.5em var(--layout-unit);
}
}
.site-footer img {
border-radius: 50%;
display: block;
margin: 1em auto;
max-width: 7em;
}
.site-footer p, .site-footer small, .note {
font-size: 0.9em;
}
/* - - - - - - - - BLOG
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.posts-list, .resources-list, .notes-list {
margin-top: 2.5em;
}
.posts-list > li, .resources-list > li, .notes-list > li {
list-style-type: none;
margin-bottom: 3em;
}
.posts-list ul li, .resources-list ul li, .notes-list ul li {
list-style-type: disc;
}
.posts-list ol li, .resources-list ol li, .notes-list ol li {
list-style-type: decimal;
}
.posts-list h2, .resources-list h2, .notes-list h2 {
margin-bottom: 0.5em;
}
.posts-list h2 a, .resources-list h2 a, .notes-list h2 a,
.posts-list h3 a, .resources-list h3 a, .notes-list h3 a {
text-decoration: none;
}
.posts-list li .summary, .resources-list li .summary, .notes-list li .summary {
margin-top: 0.5em;
}
.posts-list .entry-meta, .resources-list .entry-meta, .notes-list .entry-meta {
font-family: var(--font-family-black);
font-weight: bold;
margin-top: 0.5em;
}
@media screen and (min-width: 37em) {
.posts-list, .resources-list, .notes-list {
padding-left: 0;
}
.posts-list h2, .resources-list h2, .notes-list h2 {
margin-bottom: 0.25em;
}
.posts-list li .summary, .resources-list li .summary, .notes-list li .summary {
margin-top: 0;
}
.posts-list .entry-meta, .resources-list .entry-meta, .notes-list .entry-meta {
margin-top: 0.25em;
}
.posts-list .entry-meta p, .resources-list .entry-meta p, .notes-list .entry-meta p {
margin-bottom: 0;
}
}
.entry-meta {
font-size: 1.25em;
}
.entry-notes {
font-size: 0.9em;
}
.note {
font-size: 0.9em;
}
main article .entry-meta {
font-family: var(--font-family-black);
font-weight: bold;
}
/* date bubble and date pulled into left col */
.entry-meta time .number {
background-color: hsl(var(--brilliant));
color: white;
display: block;
border-radius: 50%;