2018-03-21 18:19:20 +00:00
: root {
--light : # FFFFF0 ;
--dark : # 020202 ;
}
2020-08-08 10:55:20 +01:00
html {
font-size : 16px ;
color : black ;
}
@ media all and ( max-width : 800px ) {
html {
font-size : 14px ;
}
}
@ media all and ( max-width : 600px ) {
html {
font-size : 12px ;
}
}
@ media all and ( max-width : 400px ) {
html {
font-size : 10px ;
}
}
2018-03-21 18:19:20 +00:00
/** 1. Block Elements */
/* 1.1. Flexible Grid */
@ supports not ( display : grid ) {
* {
box-sizing : border-box ;
}
. row :: after {
content : "" ;
clear : both ;
display : block ;
}
[ class * = "col-" ] {
float : left ;
padding-right : 15px ;
padding-left : 15px ;
width : 100 % ;
background-color : transparent ;
}
@ media only screen and ( min-width : 768px ) {
. col-m-1 { width : 8.33 % ; }
. col-m-2 { width : 16.66 % ; }
. col-m-3 { width : 25 % ; }
. col-m-4 { width : 33.33 % ; }
. col-m-5 { width : 41.66 % ; }
. col-m-6 { width : 50 % ; }
. col-m-7 { width : 58.33 % ; }
. col-m-8 { width : 66.66 % ; }
. col-m-9 { width : 75 % ; }
. col-m-10 { width : 83.33 % ; }
. col-m-11 { width : 91.66 % ; }
. col-m-12 { width : 100 % ; }
}
@ media only screen and ( min-width : 1024px ) {
. col-1 { width : 8.33 % ; }
. col-2 { width : 16.66 % ; }
. col-3 { width : 25 % ; }
. col-4 { width : 33.33 % ; }
. col-5 { width : 41.66 % ; }
. col-6 { width : 50 % ; }
. col-7 { width : 58.33 % ; }
. col-8 { width : 66.66 % ; }
. col-9 { width : 75 % ; }
. col-10 { width : 83.33 % ; }
. col-11 { width : 91.66 % ; }
. col-12 { width : 100 % ; }
}
@ media only screen and ( min-width : 1444px ) {
. col-w-1 { width : 8.33 % ; }
. col-w-2 { width : 16.66 % ; }
. col-w-3 { width : 25 % ; }
. col-w-4 { width : 33.33 % ; }
. col-w-5 { width : 41.66 % ; }
. col-w-6 { width : 50 % ; }
. col-w-7 { width : 58.33 % ; }
. col-w-8 { width : 66.66 % ; }
. col-w-9 { width : 75 % ; }
. col-w-10 { width : 83.33 % ; }
. col-w-11 { width : 91.66 % ; }
. col-w-12 { width : 100 % ; }
}
}
@ supports ( display : grid ) {
body , header , nav , main , article , section , aside , footer , div {
display : grid ;
}
div # wpadminbar , div # wpadminbar div , div . nav-links {
display : block ;
}
# site-wrapper {
grid-gap : 10px ;
grid-template-columns : 1fr ;
grid-template-rows : auto 1fr 2 . 5 % ;
justify-items : center ;
align-items : center ;
min-height : 100vh ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
"header"
"page-container"
"footer" ;
2018-03-21 18:19:20 +00:00
}
@ media only screen and ( min-width : 1024px ) {
# site-wrapper {
2020-08-08 10:55:20 +01:00
grid-template-columns : 2 . 5 % 1fr 2 . 5 % ;
grid-template-rows : auto 1fr 2 . 5 % ;
min-height : calc ( 100vh - 4em ) ;
grid-template-areas :
"header header header"
". page-container ."
"footer footer footer" ;
2018-03-21 18:19:20 +00:00
border : 2px solid black ;
margin : 2em ;
}
}
# site-header {
grid-area : header ;
grid-gap : 0px ;
grid-template-columns : 1fr ;
grid-template-rows : 1fr ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
"header-nav" ;
2018-03-21 18:19:20 +00:00
}
# site-header > nav {
grid-area : header-nav ;
grid-template-columns : 1fr 1fr 1fr ;
2020-08-08 10:55:20 +01:00
grid-template-rows : 1fr 0 . 4fr 0 . 5fr auto ;
2018-03-21 18:19:20 +00:00
grid-template-areas :
2020-08-08 10:55:20 +01:00
"header-top header-top header-top"
"header-middle header-middle header-middle"
"header-bottom header-bottom header-bottom"
"header-left header-centre header-right" ;
2018-03-21 18:19:20 +00:00
}
# site-header > nav > div {
padding : 5px ;
}
# site-header > nav > div : nth-child ( 1 ) {
grid-area : header-top ;
}
# site-header > nav > div : nth-child ( 2 ) {
grid-area : header-middle ;
}
# site-header > nav > div : nth-child ( 3 ) {
2020-08-08 10:55:20 +01:00
grid-area : header-bottom ;
2018-03-21 18:19:20 +00:00
}
# site-header > nav > div : nth-child ( 4 ) {
2020-08-08 10:55:20 +01:00
grid-area : header-left ;
2018-03-21 18:19:20 +00:00
}
# site-header > nav > div : nth-child ( 5 ) {
2020-08-08 10:55:20 +01:00
grid-area : header-centre ;
}
# site-header > nav > div : nth-child ( 6 ) {
2018-03-21 18:19:20 +00:00
grid-area : header-right ;
}
body > main {
grid-area : page-container ;
}
# centred-page {
grid-template-columns : 1fr ;
grid-template-rows : 1fr ;
justify-items : center ;
align-items : center ;
}
# list-page {
grid-gap : 10px ;
grid-template-columns : 1fr ;
grid-template-rows : 150px auto 60px ;
justify-items : center ;
align-items : center ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
"list-page-header"
"list-page-grid"
"list-page-footer" ;
2018-03-21 18:19:20 +00:00
}
# list-page > header {
grid-area : list-page-header ;
text-align : center ;
}
# list-page > header . nav-links {
margin-top : 5px ;
}
# list-page > header h2 {
margin-top : 12px ;
}
# list-page > section # grid {
grid-gap : 10px ;
grid-area : list-page-grid ;
grid-template-columns : 1fr ;
grid-template-rows : repeat ( 8 , 1fr ) ;
justify-items : stretch ;
align-items : stretch ;
grid-template-areas :
"li1"
"li2"
"li3"
"li4"
"li5"
"li6"
"li7"
"li8" ;
}
@ media only screen and ( min-width : 620px ) {
# list-page > section # grid {
grid-template-columns : repeat ( 2 , 1fr ) ;
grid-template-rows : repeat ( 4 , 1fr ) ;
grid-template-areas :
"li1 li2"
"li3 li4"
"li5 li6"
"li7 li8" ;
}
}
@ media only screen and ( min-width : 1024px ) {
# list-page > section # grid {
grid-gap : 6px 5px ;
grid-template-columns : repeat ( 4 , 1fr ) ;
grid-template-rows : repeat ( 2 , 1fr ) ;
grid-template-areas :
"li1 li2 li3 li4"
"li5 li6 li7 li8" ;
}
}
article . tile {
min-height : 180px ;
grid-template-columns : 5 % auto 5 % ;
grid-template-rows : 2 . 5 % auto 2 . 5 % ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
". . ."
". tile-details ."
". . ." ;
2018-03-21 18:19:20 +00:00
}
# list-page > section # grid article . tile : nth-child ( 1 ) { grid-area : li1 ; }
# list-page > section # grid article . tile : nth-child ( 2 ) { grid-area : li2 ; }
# list-page > section # grid article . tile : nth-child ( 3 ) { grid-area : li3 ; }
# list-page > section # grid article . tile : nth-child ( 4 ) { grid-area : li4 ; }
# list-page > section # grid article . tile : nth-child ( 5 ) { grid-area : li5 ; }
# list-page > section # grid article . tile : nth-child ( 6 ) { grid-area : li6 ; }
# list-page > section # grid article . tile : nth-child ( 7 ) { grid-area : li7 ; }
# list-page > section # grid article . tile : nth-child ( 8 ) { grid-area : li8 ; }
article . tile > header {
grid-area : tile-details ;
grid-template-columns : 5px auto 5px ;
grid-template-rows : auto auto ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
". tile-title ."
". tile-subtitle ." ;
2018-03-21 18:19:20 +00:00
}
article . tile > header > h1 {
grid-area : tile-title ;
align-self : end ;
}
article . tile > header > h2 {
grid-area : tile-subtitle ;
align-self : start ;
}
# list-page > footer {
grid-area : list-page-footer ;
}
# split-page ,
# split-page > # wrapper {
width : 100vw ;
}
@ media only screen and ( min-width : 1024px ) {
# split-page ,
# split-page > # wrapper {
2020-08-08 10:55:20 +01:00
width : 100 % ;
2018-03-21 18:19:20 +00:00
}
}
# split-page {
grid-template-columns : 1fr ;
grid-template-rows : auto auto ;
justify-items : center ;
align-items : center ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
"post"
"comments" ;
2018-03-21 18:19:20 +00:00
}
# split-page > # wrapper {
grid-area : post ;
grid-template-columns : 1fr ;
grid-template-rows : 70vh auto ;
justify-items : center ;
align-items : center ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
"post-content-header"
"post-content" ;
2018-03-21 18:19:20 +00:00
}
@ media only screen and ( min-width : 1024px ) {
# split-page > # wrapper {
2020-08-08 10:55:20 +01:00
grid-template-columns : 1fr 1fr ;
grid-template-rows : 70vh auto auto ;
justify-items : center ;
align-items : center ;
grid-template-areas :
"post-content-header post-content"
2021-01-21 12:03:14 +00:00
" post-meta post-content"
2020-08-08 10:55:20 +01:00
" . post-content" ;
2018-03-21 18:19:20 +00:00
}
}
# split-page > # wrapper > header {
grid-area : post-content-header ;
background-position : center center ;
background-repeat : no-repeat ;
background-size : cover ;
2020-08-08 10:55:20 +01:00
min-height : 70vh ;
2018-03-21 18:19:20 +00:00
height : 100 % ;
width : 100vw ;
2020-08-08 10:55:20 +01:00
grid-template-columns : 1fr auto 1fr ;
grid-template-rows : 1fr auto 1fr ;
2018-03-21 18:19:20 +00:00
grid-template-areas :
2020-08-08 10:55:20 +01:00
". . ."
". post-header-details ."
". . ." ;
2018-03-21 18:19:20 +00:00
}
@ media only screen and ( min-width : 1024px ) {
# split-page > # wrapper > header {
2020-08-08 10:55:20 +01:00
grid-area : post-content-header ;
min-height : 180px ;
height : 100 % ;
width : 100 % ;
grid-template-columns : 15 % 1fr 15 % ;
grid-template-rows : 20 % 1fr 20 % ;
grid-template-areas :
". . ."
". post-header-details ."
". . ." ;
2018-03-21 18:19:20 +00:00
}
}
2020-08-08 10:55:20 +01:00
2018-03-21 18:19:20 +00:00
# split-page > # wrapper > header > div {
grid-area : post-header-details ;
grid-template-columns : 1fr ;
padding : 20px ;
2020-08-08 10:55:20 +01:00
grid-template-rows : 1fr auto auto 1fr ;
2018-03-21 18:19:20 +00:00
justify-items : center ;
align-items : center ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
"."
"post-title"
"post-subtitle"
"." ;
2018-03-21 18:19:20 +00:00
}
# split-page > # wrapper > header > div > h1 {
grid-area : post-title ;
}
# split-page > # wrapper > header > div > h2 {
grid-area : post-subtitle ;
}
# split-page > # wrapper > header > div > h3 {
grid-area : post-date ;
}
2021-01-09 10:35:19 +00:00
# split-page # post-meta {
grid-area : post-meta ;
2020-08-08 10:55:20 +01:00
width : 100 % ;
text-align : left ;
}
2021-01-09 10:35:19 +00:00
# split-page # post-meta > h1 {
2020-08-08 10:55:20 +01:00
border-bottom : 2px inset var ( --dark ) ;
margin-top : 0 . 5em ;
margin-bottom : 0 . 5em ;
line-height : 1 . 2em ;
2021-01-09 10:35:19 +00:00
text-align : left ;
2020-08-08 10:55:20 +01:00
}
2021-01-09 10:35:19 +00:00
# split-page # post-meta h2 {
2020-08-08 10:55:20 +01:00
margin-top : 0 . 5em ;
2021-01-09 10:35:19 +00:00
font-size : 1 . 4em ;
2020-08-08 10:55:20 +01:00
margin-bottom : 0 . 5em ;
2021-01-09 10:35:19 +00:00
line-height : 1 . 2em ;
text-align : left ;
}
# split-page # post-meta > # post-contents > ol > li {
margin-top : 0 . 5em ;
margin-bottom : 0 . 5em ;
}
# split-page # post-meta > # post-tags > a {
margin-top : 0 . 2em ;
margin-left : 1em ;
2020-08-08 10:55:20 +01:00
}
2018-03-21 18:19:20 +00:00
# split-page > # wrapper > . body {
grid-area : post-content ;
display : block ;
}
# split-page > # wrapper > # organisation-body {
grid-template-columns : 1fr ;
grid-template-rows : auto auto auto auto auto auto auto auto auto auto ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
"description"
"timeline"
"related"
"posts"
"websites"
"programs"
"writings"
"videos"
"others"
"quals-and-awards" ;
2018-03-21 18:19:20 +00:00
}
# organisation-body > # description {
grid-area : description ;
}
# organisation-body > # timeline {
grid-area : timeline ;
}
# organisation-body > # related {
grid-area : related ;
}
# organisation-body > # quals-and-awards {
grid-ares : quals-and-awards ;
}
# organisation-body > # related ,
# organisation-body > # quals-and-awards {
grid-template-columns : 1fr 1fr ;
grid-template-rows : auto ;
text-align : left ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
"left right" ;
2018-03-21 18:19:20 +00:00
}
# organisation-body > # related > # children {
grid-area : left ;
}
# organisation-body > # related > # parents {
grid-area : right ;
}
# organisation-body > # post {
grid-area : posts ;
}
# organisation-body > # website {
grid-area : websites ;
}
# organisation-body > # program {
grid-area : programs ;
}
# organisation-body > # writing {
grid-area : writings ;
}
# organisation-body > # video {
grid-area : videos ;
}
# organisation-body > # other {
grid-area : others ;
}
# organisation-body > # qualifcations {
grid-area : left ;
}
# organisation-body > # awards {
grid-area : right ;
}
# organisation-body > . org-items {
grid-template-columns : 1fr ;
grid-template-rows : auto auto ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
"title"
"items" ;
2018-03-21 18:19:20 +00:00
}
# organisation-body > . org-items h2 . subheading {
grid-area : title ;
}
# organisation-body > . org-items . index {
grid-gap : 6px 5px ;
grid-area : items ;
2020-08-08 10:55:20 +01:00
grid-template-columns : repeat ( 4 , 1fr ) ;
grid-template-rows : 1fr ;
2018-03-21 18:19:20 +00:00
justify-items : stretch ;
align-items : stretch ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
"item1 item2 item3 item4" ;
2018-03-21 18:19:20 +00:00
}
# organisation-body > . org-items . index . item : nth-child ( 1 ) {
grid-area : item1 ;
}
# organisation-body > . org-items . index . item : nth-child ( 2 ) {
grid-area : item2 ;
}
2020-08-08 10:55:20 +01:00
# organisation-body > . org-items . index . item : nth-child ( 3 ) {
grid-area : item3 ;
}
# organisation-body > . org-items . index . item : nth-child ( 4 ) {
grid-area : item4 ;
}
2021-01-23 16:32:48 +00:00
# organisation-body div . org_items {
align-items : self ;
}
2018-03-21 18:19:20 +00:00
# split-page > # comments {
grid-area : comments ;
width : 100 % ;
}
# split-page > # comments > . row {
grid-template-columns : 1fr ;
grid-template-rows : auto auto ;
grid-template-areas :
2020-08-08 10:55:20 +01:00
"comment-entry"
"comments" ;
2018-03-21 18:19:20 +00:00
}
@ media only screen and ( min-width : 1024px ) {
# split-page > # comments > . row {
2020-08-08 10:55:20 +01:00
grid-template-columns : 1fr 1fr ;
grid-template-rows : 1fr ;
grid-template-areas :
"comments comment-entry" ;
2018-03-21 18:19:20 +00:00
}
}
2020-08-08 10:55:20 +01:00
2018-03-21 18:19:20 +00:00
# split-page > # comments # comments-list {
grid-area : comments ;
justify-items : center ;
align-items : start ;
}
2020-08-08 10:55:20 +01:00
2018-03-21 18:19:20 +00:00
# split-page > # comments # comments-reply {
grid-area : comment-entry ;
justify-items : center ;
align-items : start ;
text-align : center ;
}
2020-08-08 10:55:20 +01:00
. comment-body {
grid-template-columns : 15 % 1fr ;
grid-template-rows : auto auto ;
grid-template-areas :
"comment-meta comment-content"
". comment-content"
". comment-reply" ;
}
. comment-body . comment-meta {
grid-area : comment-meta ;
justify-items : center ;
align-items : start ;
text-align : center ;
font-weight : bold ;
}
. comment-body . comment-meta . comment-author img {
display : none ;
}
. comment-body . comment-content {
grid-area : comment-content ;
justify-items : left ;
align-items : start ;
padding : 0 2em 0 2em ;
}
. comment-body . comment-content p {
padding-top : 0 . 5em ;
padding-bottom : 0 . 5em ;
font-size : 1em ;
}
. comment-body . comment-content p : first-of-type {
padding-top : 0em ;
}
. comment-body . comment-content p : last-of-type {
padding-bottom : 0em ;
}
2018-03-21 18:19:20 +00:00
2020-08-08 10:55:20 +01:00
. comment-body . comment-content . comment-source {
font-size : 0 . 75em ;
opacity : 0 . 75 ;
}
. comment-body . reply {
grid-area : comment-reply ;
justify-items : right ;
align-items : start ;
text-align : right ;
padding-left : 0 . 4em ;
2018-03-21 18:19:20 +00:00
}
body > footer {
grid-area : footer ;
2021-01-22 16:19:51 +00:00
margin-top : 1em ;
2021-01-23 13:26:25 +00:00
margin-bottom : 1em ;
2018-03-21 18:19:20 +00:00
}
}
/* 1.2. Appearance */
@ supports ( color : var ( --yin ) ) {
body {
color : var ( --dark ) ;
}
body ,
body > header {
background-color : var ( --light ) ;
}
article . tile > header {
background-color : var ( --dark ) ;
opacity : 0 . 8 ;
}
}
body : not ( . page-template-centred-page ) > main {
2020-08-08 10:55:20 +01:00
margin-top : 3 . 8em ;
2018-03-21 18:19:20 +00:00
}
body > header {
position : fixed ;
top : 0 ;
left : 0 ;
width : 100 % ;
text-align : center ;
border-bottom : 2px solid var ( --dark ) ;
z-index : 1 ;
}
body > header > h1 {
padding : 20px 50 % ;
}
body > header > nav > a {
padding : 20px 50 % ;
}
article . tile {
background-size : cover ;
background-repeat : no-repeat ;
background-position : center ;
}
article . tile > header {
text-align : center ;
}
article # details {
width : 85 % ;
margin : auto ;
display : block ;
background-color : # DDDDD0 ;
border : 1px solid gray ;
padding-right : 1em ;
margin-bottom : 1 . 6em ;
}
. sharedaddy , . jp-relatedposts {
text-align : center ;
}
. jp-relatedposts-items {
display : block ;
}
2020-08-08 10:55:20 +01:00
# split-page section div {
margin : 0 1em ;
}
# organisation-body {
width : 100 % ;
}
2018-03-21 18:19:20 +00:00
/** 2.Inline Elements */
/* 1.1. Appearance */
2020-08-08 10:55:20 +01:00
body {
font-family : Palatino , serif ;
}
2018-03-21 18:19:20 +00:00
2020-08-08 10:55:20 +01:00
h1 , h2 , h3 , h4 , h5 , h6 , th {
font-family : "Palatino Linotype" , serif ;
2018-03-21 18:19:20 +00:00
margin : 0 ;
}
a : hover {
opacity : 1 ;
}
ul {
list-style : circle ;
color : var ( --dark ) ;
padding-left : 1 . 8em ;
}
ol {
list-style : decimal ;
color : var ( --dark ) ;
padding-left : 1 . 8em ;
}
strong { font-weight : bold ; }
2020-08-08 10:55:20 +01:00
sup , sub {
2018-03-21 18:19:20 +00:00
font-size : xx-small ;
line-height : 1 . 2em ;
}
sup { vertical-align : top ; }
sub { vertical-align : bottom ; }
pre {
border : none ! important ;
border-left : 2px outset var ( --dark ) ! important ;
}
. latex {
display : inline ! important ;
}
blockquote ,
pre {
padding-left : 1em ;
border-left : 2px outset var ( --dark ) ;
display : inline-block ;
width : 85 % ;
}
pre {
overflow : hidden ;
}
@ media only screen and ( min-width : 1024px ) {
blockquote ,
pre {
margin : 1em 2em 1em 2em ;
}
}
blockquote footer {
text-align : right ;
margin-right : 10 % ;
font-style : normal ;
display : block ;
float : right ;
}
blockquote footer : before {
content : '—' ;
}
q , blockquote {
quotes : "‘ " "’ " "“" "”" ;
}
q . guillemets {
quotes : "«" "»" "«" "»" ;
}
2020-08-08 10:55:20 +01:00
q : before , blockquote : not ( . no-first-quote ) p : first-of-type :: before {
2018-03-21 18:19:20 +00:00
content : open-quote ;
}
2020-08-08 10:55:20 +01:00
q : after , blockquote : not ( . no-last-quote ) p : last-of-type :: after {
2018-03-21 18:19:20 +00:00
content : close-quote ;
}
2020-08-08 10:55:20 +01:00
i , em {
font-style : italic ;
}
cite ,
cite . book ,
cite . film ,
cite . tv-show ,
cite . book ,
cite . album ,
cite . report {
font-style : italic ;
}
cite . legislation ,
cite . smallcite ,
cite . article ,
cite . episode ,
cite . video ,
cite . chapter ,
cite . song ,
cite . speech ,
cite . presentation {
font-style : normal ;
}
cite . smallcite : before ,
cite . article : before ,
cite . episode : before ,
cite . video : before ,
cite . chapter : before ,
cite . song : before ,
cite . speech : before ,
cite . presentation : before {
content : '“' ;
}
cite . smallcite : after ,
cite . article : after ,
cite . episode : after ,
cite . video : after ,
cite . chapter : after ,
cite . song : after ,
cite . speech : after ,
cite . presentation : after {
content : '”' ;
}
2018-03-21 18:19:20 +00:00
code ,
samp ,
var ,
pre {
font-family : "Lucida Console" , Monaco , monospace ;
font-size : 0 . 8em ;
}
pre . nocode {
font-family : "Palatino Linotype" , "Book Antiqua" , Palatino , serif ;
font-size : 1em ;
padding : 1px 3px ;
border-radius : 6px ;
border : dashed 1px black ;
}
2020-08-08 10:55:20 +01:00
code ,
samp ,
var {
2018-03-21 18:19:20 +00:00
background-color : # d1d1d1 ;
border-radius : 5px ;
padding : 2px 2px ;
}
2020-08-08 10:55:20 +01:00
pre {
max-width : 50vw ;
overflow : scroll ;
}
h1 code , . post-title code , pre code ,
h1 samp , . post-title samp , pre samp ,
h1 var , . post-title var , pre var {
background-color : transparent ;
padding : 0 ;
}
2018-03-21 18:19:20 +00:00
. heading code ,
. subheading code {
background-color : transparent ;
}
2020-08-08 10:55:20 +01:00
pre . prettyprint ol {
padding-left : 3 . 5em ;
}
pre . prettyprint li {
background : none ! important ;
}
2018-03-21 18:19:20 +00:00
li . L0 , li . L1 , li . L2 , li . L3 ,
li . L5 , li . L6 , li . L7 , li . L8 {
list-style-type : decimal ! important ;
}
samp {
display : block ;
width : 80ch ;
margin : 1em 4em 1em 4em ;
border-left : 2px solid # ccc ;
color : # 333 ;
}
kbd {
padding : 0 . 1em 0 . 6em ;
border : 1px solid # ccc ;
font-size : 11px ;
font-family : Arial , Helvetica , sans-serif ;
background-color : # f7f7f7 ;
color : # 333 ;
box-shadow : 0 1px 0px rgba ( 0 , 0 , 0 , 0 . 2 ) , 0 0 0 2px white inset ;
border-radius : 3px ;
display : inline-block ;
margin : 0 0 . 1em ;
text-shadow : 0 1px 0 white ;
line-height : 1 . 4 ;
white-space : nowrap ;
}
2020-08-08 10:55:20 +01:00
. pre-nominals ,
2018-03-21 18:19:20 +00:00
. post-nominals {
font-size : 0 . 6em ;
2020-08-08 10:55:20 +01:00
font-variant : small-caps ;
}
. article__text--commentary {
display : inline ;
}
# toggleCommentary {
text-decoration : underline ;
2018-03-21 18:19:20 +00:00
}
# comments-list-title {
}
@ supports ( color : var ( --light ) ) {
h1 , h2 , h3 , h4 , h5 , h6 {
color : var ( --dark ) ;
}
a { color : var ( - - dark ) ; }
ul { color : var ( - - dark ) ; }
. nav-links > . page-numbers {
background-color : var ( --dark ) ;
color : var ( --light ) ;
}
. nav-links > . current {
background-color : var ( --light ) ;
color : var ( --dark ) ;
}
article . tile > header > h1 ,
article . tile > header > h2 {
color : var ( --light ) ;
}
main # split-page > # wrapper > header > div {
background-color : var ( --dark ) ;
}
main # split-page > # wrapper > header > div > h1 ,
main # split-page > # wrapper > header > div > h2 ,
main # split-page > # wrapper > header > div > h3 {
color : var ( --light ) ;
}
}
h1 {
font-size : 5em ;
}
body > header h1 {
font-size : 1 . 4em ;
}
@ media only screen and ( min-width : 1024px ) {
body > header h1 {
font-size : 2em ;
}
}
# split-page > # wrapper > header {
text-align : center ;
}
# split-page > # wrapper > header > div {
opacity : 0 . 8 ;
}
# split-page > # wrapper > header > div > h1 {
font-weight : bold ;
2020-08-08 10:55:20 +01:00
/*margin-top: 20%;*/
2018-03-21 18:19:20 +00:00
font-size : 2 . 5em ;
}
# split-page > # wrapper > header > div > h2 {
margin-top : 10px ;
font-size : 1 . 6em ;
}
# split-page > # wrapper > header > div > h3 {
margin-top : 20 % ;
font-size : 1em ;
}
2020-08-08 10:55:20 +01:00
# split-page > # wrapper > footer > h1 {
font-size : 2em ;
}
2018-03-21 18:19:20 +00:00
@ media only screen and ( min-width : 1024px ) {
# split-page > # wrapper > header > div > h1 {
font-size : 3 . 5em ;
}
# split-page > # wrapper > header > div > h2 {
font-size : 2 . 6em ;
}
}
2021-01-09 13:04:43 +00:00
# timeline h1 . timeline-entry-title {
font-size : 1 . 2em ;
}
2018-03-21 18:19:20 +00:00
# comments-list-title , # comments-reply-title {
font-size : 1 . 6em ;
2020-08-08 10:55:20 +01:00
margin-bottom : 0 . 5em ;
}
. logged-in-as , . comment-form-comment , . form-submit {
margin-bottom : 0 . 5em ;
}
. comment-form-comment label {
display : none ;
}
. comment-form-comment textarea ,
. form-submit input # submit {
border : 2px solid black ;
background-color : # fffff0 ;
}
. form-submit input # submit {
padding : 0 . 6em 1em ;
cursor : pointer ;
box-shadow : 3px 3px black ;
}
. form-submit input # submit : hover {
box-shadow : none ;
margin-left : 3px ;
}
. akismet_comment_form_privacy_notice {
font-size : 0 . 6em ;
}
. comment-list {
margin : auto ;
list-style : none ;
}
. comment . children {
list-style : none ;
}
. comment . children . comment . comment-body {
border-left : 2px solid black ;
padding-left : 1em ;
}
. comment-body {
border-top : 1px solid black ;
border-bottom : 1px solid black ;
padding-top : 1em ;
}
. comment-body : first-of-type {
border-top : 0px ;
}
. comment-body : last-of-type {
border-bottom : 0px ;
}
. comment-body . comment-meta img {
border-radius : 50 % ;
width : 100 % ;
height : auto ;
}
. comment-body . comment-meta . says {
display : none ;
}
. comment-body . comment-meta . comment-metadata > a {
margin-top : 0 . 4em ;
margin-bottom : 0 . 4em ;
font-size : 0 . 6em ;
}
. comment-body . comment-meta . comment-metadata . edit-link {
font-size : 0 . 8em ;
margin-top : 0 . 4em ;
}
. comment-body . comment-meta . comment-metadata . edit-link :: before {
content : '( ' ;
}
. comment-body . comment-meta . comment-metadata . edit-link :: after {
content : ' )' ;
2018-03-21 18:19:20 +00:00
}
main # split-page > # wrapper > . body {
2020-08-08 10:55:20 +01:00
text-align : left ;
2018-03-21 18:19:20 +00:00
padding : 0 2em 2em 2em ;
}
2020-08-08 10:55:20 +01:00
main # split-page > # wrapper > . body blockquote : first-of-type : not ( . no-first-blockquote ) {
2018-03-21 18:19:20 +00:00
font-size : 1 . 2em ;
text-align : center ;
margin : 0 ;
border-left : 0 ;
padding-left : 0 ;
width : 100 % ;
padding-top : 1em ;
padding-bottom : 1 . 2em ;
border-top : 2px outset var ( --dark ) ;
border-bottom : 2px inset var ( --dark ) ;
}
main # split-page > # wrapper > . body p ,
main # split-page > # wrapper > . body ul li ,
main # split-page > # wrapper > . body ol li {
font-size : 1em ;
margin-top : 0 . 5em ;
margin-bottom : 0 . 5em ;
2020-08-08 10:55:20 +01:00
line-height : 1 . 3em ;
2018-03-21 18:19:20 +00:00
}
main # split-page > # wrapper > . body h2 . subheading {
font-size : 1 . 6em ;
border-bottom : 2px inset var ( --dark ) ;
margin-top : 0 . 5em ;
margin-bottom : 0 . 5em ;
line-height : 1 . 2em ;
text-align : center ;
}
2020-08-08 10:55:20 +01:00
main # split-page > # wrapper > . body h3 . subsubheading {
font-size : 1em ;
border-bottom : 1px dashed var ( --dark ) ;
margin-top : 1em ;
margin-bottom : 1em ;
padding-bottom : 0 . 5em ;
line-height : 1em ;
text-align : left ;
font-weight : bold ;
}
2018-03-21 18:19:20 +00:00
main # split-page > # wrapper > # organisation-body h2 . subheading a {
font-size : 0 . 5em ;
}
article . tile > header > h1 {
font-size : 1 . 4em ;
}
article . tile > header > h2 {
font-size : 0 . 8em ;
}
2021-01-22 16:19:51 +00:00
a [ href * = "//" ] : not ( [ href * = "bengoldsworthy.net" ] ) : after {
content : url ( 'https://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png' ) ;
margin : 0 0 0 4px ;
filter : invert ( 0 % ) sepia ( 0 % ) saturate ( 15 % ) hue-rotate ( 246deg ) brightness ( 104 % ) contrast ( 98 % ) ;
}
a [ href * = "//" ] . item : not ( [ href * = "bengoldsworthy.net" ] ) : after {
position : relative ;
top : -1em ;
float : right ;
}
a [ href = "#" ] ,
a [ href = "" ] {
color : red ;
}
2018-03-21 18:19:20 +00:00
a {
opacity : 0 . 8 ;
2021-01-08 18:51:22 +00:00
text-decoration : underline ! important ;
}
. footnote_plugin_index a {
text-decoration : none ! important ;
2018-03-21 18:19:20 +00:00
}
a : hover , a : focus {
opacity : 1 ;
text-decoration : none ;
}
. nav-links > . next ,
. nav-links > . prev {
display : none ;
}
. nav-links > . page-numbers {
text-align : center ;
border-radius : 0 . 8em ;
width : 1 . 6em ;
display : inline-block ;
line-height : 1 . 6em ;
text-decoration : none ;
font-weight : normal ;
margin-left : 0 . 5em ;
margin-right : 0 . 5em ;
}
/* TEMP */
# experience-wrapper {
grid-area : page-container ;
2021-01-21 10:24:10 +00:00
width : 100 % ;
}
. entry-content . tile # settings {
width : 70 % ;
margin : auto ;
margin-top : 1em ;
border : 2px dashed # 020202 ;
padding : 1em ;
border-radius : 25px ;
margin-bottom : 1em ;
2018-03-21 18:19:20 +00:00
}
2020-08-08 10:55:20 +01:00
# organisations-grid {
border-spacing : 1em ;
margin-bottom : 1em ;
border-radius : 10px ;
}
# organisations-grid th {
font-weight : bold ;
text-align : left ;
padding : 1em ;
font-size : 1 . 4em ;
}
# organisations-grid tr : first-of-type {
background-color : # 808080 ;
color : # FFFFF0 ;
z-index : 1 ;
position : sticky ;
vertical-align : middle ;
top : 99px ;
max-height : 1 . 8em ;
}
# organisations-grid tr : nth-child ( even ) {
background-color : # DDDDD0 ;
}
. organisation td {
padding : 1em ;
vertical-align : middle ;
}
. organisation a {
display : block ;
}
. organisation-logo {
width : 160px ;
}
. organisation-logo img {
height : 60px ;
width : auto ;
max-width : 150px ;
display : block ;
object-fit : contain ;
margin : auto
}
. organisation-children {
width : 5 %
}
. organisation-items : not ( . organisation-children ) . organisation-item {
width : 10 % ;
float : left ;
}
. organisation-items . organisation-item {
text-align : center ;
}
. organisation-items . organisation-item span {
margin : auto ;
}
. organisation-items . organisation-item . none {
opacity : 0 . 4 ;
}
2018-03-21 18:19:20 +00:00
. company-info-container {
background-color : # ffffff ;
max-width : 60px ;
overflow : hidden ;
border-bottom : 1px solid # 000000 ;
}
. company-info-container . left {
border-radius : 0px 0px 15px 0px ;
float : left ;
border-right : 1px solid # 000000 ;
}
. company-info-container . right {
border-radius : 0px 0px 0px 15px ;
float : right ;
border-left : 1px solid # 000000 ;
}
# timeline {
display : block ;
margin : auto ;
2021-01-23 16:32:48 +00:00
min-height : 95px ;
2021-01-21 12:03:14 +00:00
max-width : 950 % ;
2018-03-21 18:19:20 +00:00
}
. loading {
margin : auto ;
display : block ;
margin-top : 84px ;
height : auto ;
}
# companies-grid-small {
height : 0 ;
}
# companies-grid : hover li : hover ,
# companies-grid-small : hover li : hover {
opacity : 1 ;
}
# companies-grid li ,
# companies-grid-small li {
display : block ;
float : left ;
width : 18 % ;
height : 10vh ;
overflow : hidden ;
background-color : # ffffff ;
background-size : contain ;
background-repeat : no-repeat ;
background-position : center ;
background-origin : content-box ;
background-clip : content-box ;
padding : 7 . 5px ;
}
# companies-grid li {
min-height : 25vh ;
}
# companies-grid-small li {
min-height : 140px ;
}
. company-name {
font-size : 1 . 5em ;
margin-top : 25 % ;
}
. company-info-container . right . company-info {
padding-left : 4px ;
font-size : 1em ;
line-height : 1 . 3em ;
color : # 000000 ;
opacity : 0 . 8 ;
padding : 2px ;
width : auto ;
}
. children {
background-size : cover ;
}
. taxonomy-background {
height : 100 % ;
width : 100 % ;
object-fit : contain ;
padding : 10vh 20vw ;
}
# split-page > # wrapper > . body {
grid-area : post-content ;
display : block ;
2021-01-21 15:51:11 +00:00
align-self : start ;
2018-03-21 18:19:20 +00:00
}
# split-page > # wrapper > . body > figure {
max-width : none ! important ;
2020-08-08 10:55:20 +01:00
width : 100 % ! important ;
2018-03-21 18:19:20 +00:00
text-align : center ;
}
# split-page > # wrapper > . body > figure > figcaption {
font-size : 0 . 8em ;
font-style : italic ;
}
# split-page > # wrapper > . body img ,
# split-page > # wrapper > . body > figure img {
max-height : 40vh ;
width : auto ;
max-width : 100 % ;
}
# split-page > # wrapper > . body img {
margin : auto ;
display : block ;
}
. latex {
vertical-align : middle ;
}
2020-08-08 10:55:20 +01:00
span . nobr {
white-space : nowrap ;
}
. footnote_tooltip {
z-index : 1 ;
}
. footnote-reference-container {
border-collapse : separate ;
border-spacing : 0 10px ;
}
table : not ( . footnote-reference-container ) th {
font-weight : bold ;
}
table : not ( . footnote-reference-container ) th ,
table : not ( . footnote-reference-container ) td {
border : 1px solid var ( --dark ) ;
padding : 0 . 5em 1em ;
text-align : left ;
}
2021-01-21 12:03:14 +00:00
details {
background-color : # eee ;
color : # 444 ;
cursor : pointer ;
padding : 18px ;
width : 50 % ;
text-align : left ;
border : none ;
outline : none ;
transition : 0 . 4s ;
margin-bottom : 0 . 5em ;
}
details [ open ] {
background-color : # ccc ;
}
/* Style the accordion panel. Note: hidden by default */
details p : first-child {
padding-top : 1em ;
}
details p {
line-height : 1em ;
}
summary {
font-size : 1 . 1em ;
font-weight : bold ;
}