From b30d013a761d06f5825e6a269ff71dcbe8272faa Mon Sep 17 00:00:00 2001 From: Chinwendu Enyidiegwu Date: Tue, 8 Oct 2024 20:40:44 +0100 Subject: [PATCH 1/8] fix/mobile-responsiveness-in-search-index.html --- .vscode/settings.json | 3 + specimen/contexts/search-index.html | 2 +- specimen/style.css | 1 + src/css/vocabulary.css | 2508 ++++++++++++++------------- 4 files changed, 1315 insertions(+), 1199 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..3f20db21 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/specimen/contexts/search-index.html b/specimen/contexts/search-index.html index 3b52fcb7..27e8eccf 100644 --- a/specimen/contexts/search-index.html +++ b/specimen/contexts/search-index.html @@ -91,7 +91,7 @@

Our Work Relies On You!

-

Search

+

Search

diff --git a/specimen/style.css b/specimen/style.css index 2231bd96..807732dc 100644 --- a/specimen/style.css +++ b/specimen/style.css @@ -1,2 +1,3 @@ @import '../src/css/vocabulary.css' layer(vocabulary); @import '../specimen/tests/grid-test.css' layer(vocabulary); + diff --git a/src/css/vocabulary.css b/src/css/vocabulary.css index 678fe3b6..6878ef4b 100644 --- a/src/css/vocabulary.css +++ b/src/css/vocabulary.css @@ -25,47 +25,46 @@ EX: */ -@import 'vendor/normalize.css'; -@import 'library-vars.css'; +@import "vendor/normalize.css"; +@import "library-vars.css"; /* utilities */ .skip-to-content { - position: absolute; - top: 0; - left: 0; - margin: -1000px; + position: absolute; + top: 0; + left: 0; + margin: -1000px; } .skip-to-content:focus { - margin: 0; + margin: 0; } /* typography */ body { - display: grid; - grid-template-columns: 5% 3% 6% 6% 15% 30% 15% 6% 6% 3% 5%; - overflow-x: hidden; + display: grid; + grid-template-columns: 5% 3% 6% 6% 15% 30% 15% 6% 6% 3% 5%; + overflow-x: hidden; - font-weight: 400; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; + font-weight: 400; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; } a.more { - padding: .4em .7em; - - background: black; - color: white; - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-size: 1.2em; - text-transform: none; - text-decoration: none; - text-shadow: none; -} + padding: 0.4em 0.7em; + background: black; + color: white; + font-family: "Roboto Condensed"; + font-style: normal; + font-weight: 700; + font-size: 1.2em; + text-transform: none; + text-decoration: none; + text-shadow: none; +} /* ************************* */ @@ -79,48 +78,48 @@ a.more { /* post component - singular */ .post header { - display: flex; - flex-wrap: wrap; - flex-direction: column; - align-items: baseline; - width: 100%; + display: flex; + flex-wrap: wrap; + flex-direction: column; + align-items: baseline; + width: 100%; } .post .categories { - order: -1; + order: -1; - font-family: 'Source Sans Pro'; + font-family: "Source Sans Pro"; } /* post component - plural */ .posts { - text-align: center; + text-align: center; } .posts > h2 { - margin-bottom: 2.1em; + margin-bottom: 2.1em; - font-family: 'Roboto Condensed'; - /* font-size: 2.1em; */ - font-style: normal; - font-weight: 700; - text-transform: none; - text-align: left; + font-family: "Roboto Condensed"; + /* font-size: 2.1em; */ + font-style: normal; + font-weight: 700; + text-transform: none; + text-align: left; } .posts .post { - display: flex; - flex-wrap: wrap; - grid-template-columns: 1fr 1fr; - grid-template-areas: - 'title title' - 'image teaser'; - gap: 2em; - margin-bottom: 8em; - position: relative; + display: flex; + flex-wrap: wrap; + grid-template-columns: 1fr 1fr; + grid-template-areas: + "title title" + "image teaser"; + gap: 2em; + margin-bottom: 8em; + position: relative; - text-align: left; + text-align: left; } /* .posts .post header { @@ -131,17 +130,18 @@ a.more { width: 100%; } */ -.posts .post h2, .posts .post h3 { - grid-area: title; - width: 100%; - margin-top: 0.83em; +.posts .post h2, +.posts .post h3 { + grid-area: title; + width: 100%; + margin-top: 0.83em; - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-size: 2.1em; - text-transform: none; - text-transform: initial; + font-family: "Roboto Condensed"; + font-style: normal; + font-weight: 700; + font-size: 2.1em; + text-transform: none; + text-transform: initial; } /* .posts .post .categories { @@ -151,51 +151,51 @@ a.more { } */ .posts .post .byline { - font-family: 'Source Sans Pro'; + font-family: "Source Sans Pro"; } .posts .post .type { - position: absolute; - top: 0; - right: 0; - padding: .5em .7em; + position: absolute; + top: 0; + right: 0; + padding: 0.5em 0.7em; - background: var(--vocabulary-brand-color-soft-turquoise); - border-radius: 4px; - font-family: 'Source Sans Pro'; + background: var(--vocabulary-brand-color-soft-turquoise); + border-radius: 4px; + font-family: "Source Sans Pro"; } .posts .post figure { - display: inline-block; - width: 50%; - grid-area: image; - margin: 0; - padding: 0; - flex: 1; + display: inline-block; + width: 50%; + grid-area: image; + margin: 0; + padding: 0; + flex: 1; } .posts .post img { - width: 100%; + width: 100%; } .posts .post p { - flex: 1; - display: inline-block; - grid-area: teaser; - margin-top: 0; + flex: 1; + display: inline-block; + grid-area: teaser; + margin-top: 0; } .posts a.more { - display: inline-block; - margin: 0 auto; - margin-bottom: 4em; + display: inline-block; + margin: 0 auto; + margin-bottom: 4em; } .posts .attribution { - display: inline-block; - margin-top: 1em; + display: inline-block; + margin-top: 1em; - font-family: 'Source Sans Pro'; + font-family: "Source Sans Pro"; } /* contexts - in ascending order of specificity */ @@ -203,573 +203,590 @@ a.more { /* .posts .related variant context */ .posts.related { - } /*
level context */ main { - - display: grid; - grid-template-columns: subgrid; - width: 100%; - margin: 0; - margin-bottom: 8em; - padding: 0; - grid-column: 1 / 12; + display: grid; + grid-template-columns: subgrid; + width: 100%; + margin: 0; + margin-bottom: 8em; + padding: 0; + grid-column: 1 / 12; } main > * { - grid-column: 5 / span 3; + grid-column: 5 / span 3; } main > header { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin-bottom: 4em; - padding-top: 2em; - padding-bottom: 1em; - position: relative; - grid-template-columns: subgrid; - grid-column: 5 / span 3; + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 4em; + padding-top: 2em; + padding-bottom: 1em; + position: relative; + grid-template-columns: subgrid; + grid-column: 5 / span 3; - text-align: center; - color: #333; /* for testing */ + text-align: center; + color: #333; /* for testing */ } main > header:before { - width: 100vw; - height: 100%; - position: absolute; - left: -33.333%; - top: 0; - z-index: -1; - content: ""; + width: 100vw; + height: 100%; + position: absolute; + left: -33.333%; + top: 0; + z-index: -1; + content: ""; - background: #F5F5F5; + background: #f5f5f5; } main > header h1 { - width: 100%; - margin-top: .39em; - margin-bottom: 0; - grid: 0 / auto; + width: 100%; + margin-top: 0.39em; + margin-bottom: 0; + grid: 0 / auto; - font-family: 'Roboto Condensed'; - font-size: 3.56em; - font-style: normal; - font-weight: 700; - /* text-transform: uppercase; */ + font-family: "Roboto Condensed"; + font-size: 3.56em; + font-style: normal; + font-weight: 700; + /* text-transform: uppercase; */ } main > header h2 { - margin: 0; - margin-top: .2em; + margin: 0; + margin-top: 0.2em; } main > header a { - color: var(--vocabulary-brand-color-dark-tomato); - --underline-background-color: var(--vocabulary-neutral-color-lighter-gray); + color: var(--vocabulary-brand-color-dark-tomato); + --underline-background-color: var(--vocabulary-neutral-color-lighter-gray); } main > header .categories { - order: -1; + order: -1; - font-family: 'Source Sans Pro'; - font-size: 1.2em; - font-style: normal; - font-weight: 400; + font-family: "Source Sans Pro"; + font-size: 1.2em; + font-style: normal; + font-weight: 400; } main > header .byline { - display: block; - width: 100%; - margin-top: 2em; - margin-bottom: 2em; + display: block; + width: 100%; + margin-top: 2em; + margin-bottom: 2em; - font-family: 'Source Sans Pro'; - font-size: 1.2em; - font-style: normal; - font-weight: 400; - font-style: italic; + font-family: "Source Sans Pro"; + font-size: 1.2em; + font-style: normal; + font-weight: 400; + font-style: italic; } /* if aside is present, split to two-col */ -main:has( > aside.sidebar) > div { /* was '> *' */ - grid-column: 2 / span 5; +main:has(> aside.sidebar) > div { + /* was '> *' */ + grid-column: 2 / span 5; } -main:has( > aside.sidebar) > article { - grid-column: 2 / span 5; +main:has(> aside.sidebar) > article { + grid-column: 2 / span 5; } -main:has( > aside.sidebar) > aside.sidebar { - grid-column: 7 / span 4; - grid-row-start: 2; - padding-left: 4.1em; +main:has(> aside.sidebar) > aside.sidebar { + grid-column: 7 / span 4; + grid-row-start: 2; + padding-left: 4.1em; } main > aside.sidebar h2 { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-size: 1.5em; + font-family: "Roboto Condensed"; + font-style: normal; + font-weight: 700; + font-size: 1.5em; } main > aside.sidebar nav { - margin-bottom: 3em; + margin-bottom: 3em; } main > aside.sidebar nav.filter-menu ul li { - margin-bottom: 0; - padding: 1em; + margin-bottom: 0; + padding: 1em; } main > aside.sidebar nav.filter-menu ul li.current { - background: var(--vocabulary-brand-color-soft-tomato); - /* padding: 1em; */ - font-weight: bold; + background: var(--vocabulary-brand-color-soft-tomato); + /* padding: 1em; */ + font-weight: bold; } main > aside.sidebar nav.filter-menu ul li.current a { - --underline-background-color: var(--vocabulary-brand-color-soft-tomato); + --underline-background-color: var(--vocabulary-brand-color-soft-tomato); } main > aside.sidebar nav ul { - margin: 0; - padding: 0; - text-indent: none; + margin: 0; + padding: 0; + text-indent: none; - list-style: none; - font-size: 1rem; - font-weight: 700; + list-style: none; + font-size: 1rem; + font-weight: 700; } main > aside.sidebar nav ul ul { - margin-top: .8em; - margin-left: 1em; + margin-top: 0.8em; + margin-left: 1em; } main > aside.sidebar nav ul li { - margin-bottom: 1em; + margin-bottom: 1em; - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - font-size: 1.1em; - line-height: 150%; + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + font-size: 1.1em; + line-height: 150%; } main > aside.sidebar nav ul ul li { - margin-bottom: .8em; + margin-bottom: 0.8em; } main > aside.sidebar nav ul ul { - margin-left: 1em; + margin-left: 1em; } main > aside.sidebar nav ul ul li { - margin-bottom: .8em; + margin-bottom: 0.8em; } main > aside.sidebar p { - font-size: 1em; + font-size: 1em; } main > aside.sidebar .attention { - margin-top: 5em; - padding: 1.5em; + margin-top: 5em; + padding: 1.5em; - background: var(--vocabulary-brand-color-soft-turquoise); + background: var(--vocabulary-brand-color-soft-turquoise); } main > aside.sidebar .attention a { - --underline-background-color: var(--vocabulary-brand-color-soft-turquoise); + --underline-background-color: var(--vocabulary-brand-color-soft-turquoise); } main h2 { - width: 100%; + width: 100%; - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-size: 2.1em; - text-transform: none; + font-family: "Roboto Condensed"; + font-style: normal; + font-weight: 700; + font-size: 2.1em; + text-transform: none; } main h3 { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-size: 1.75em; - text-transform: none; + font-family: "Roboto Condensed"; + font-style: normal; + font-weight: 700; + font-size: 1.75em; + text-transform: none; } main aside.opening { - display: inline-block; - box-sizing: border-box; - width: 25%; - margin-bottom: 2em; - padding: 2em; - width: 100%; + display: inline-block; + box-sizing: border-box; + width: 25%; + margin-bottom: 2em; + padding: 2em; + width: 100%; - background: #FEEDE9; + background: #feede9; } - main aside.opening a { - color: var(--vocabulary-brand-color-dark-tomato); - --underline-background-color: #FEEDE9; + color: var(--vocabulary-brand-color-dark-tomato); + --underline-background-color: #feede9; } main aside.opening p { - margin :0; + margin: 0; - font-family: 'Source Sans Pro'; - font-size: 1.2em; - font-style: normal; - font-weight: 400; - line-height: 150%; + font-family: "Source Sans Pro"; + font-size: 1.2em; + font-style: normal; + font-weight: 400; + line-height: 150%; } main a { - /* better hyperlink underline typesetting inspired by Tufte CSS */ - --underline-color: var(--vocabulary-brand-color-dark-tomato); - --underline-background-color: white; - color: var(--vocabulary-brand-color-dark-tomato); - text-decoration: none; - - /* adapted from Tufte.css -- Copyright (c) 2014 Dave Liepmann -- https://github.com/edwardtufte/tufte-css -- https://github.com/edwardtufte/tufte-css/blob/gh-pages/LICENSE */ - background: -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(currentColor, currentColor); - background: linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(currentColor, currentColor); - -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - background-repeat: no-repeat, no-repeat, repeat-x; - text-shadow: 0.03em 0 var(--underline-background-color), -0.03em 0 var(--underline-background-color), 0 0.03em var(--underline-background-color), 0 -0.03em var(--underline-background-color), 0.06em 0 var(--underline-background-color), -0.06em 0 var(--underline-background-color), 0.09em 0 var(--underline-background-color), -0.09em 0 var(--underline-background-color), 0.12em 0 var(--underline-background-color), -0.12em 0 var(--underline-background-color), 0.15em 0 var(--underline-background-color), -0.15em 0 var(--underline-background-color); - background-position: 0% 93%, 100% 93%, 0% 93%; - background-position-y: 90%, 90%, 90%; + /* better hyperlink underline typesetting inspired by Tufte CSS */ + --underline-color: var(--vocabulary-brand-color-dark-tomato); + --underline-background-color: white; + color: var(--vocabulary-brand-color-dark-tomato); + text-decoration: none; + + /* adapted from Tufte.css -- Copyright (c) 2014 Dave Liepmann -- https://github.com/edwardtufte/tufte-css -- https://github.com/edwardtufte/tufte-css/blob/gh-pages/LICENSE */ + background: -webkit-linear-gradient( + var(--underline-color), + var(--underline-color) + ), + -webkit-linear-gradient(var(--underline-color), var(--underline-color)), + -webkit-linear-gradient(currentColor, currentColor); + background: linear-gradient(var(--underline-color), var(--underline-color)), + linear-gradient(var(--underline-color), var(--underline-color)), + linear-gradient(currentColor, currentColor); + -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + background-repeat: no-repeat, no-repeat, repeat-x; + text-shadow: 0.03em 0 var(--underline-background-color), + -0.03em 0 var(--underline-background-color), + 0 0.03em var(--underline-background-color), + 0 -0.03em var(--underline-background-color), + 0.06em 0 var(--underline-background-color), + -0.06em 0 var(--underline-background-color), + 0.09em 0 var(--underline-background-color), + -0.09em 0 var(--underline-background-color), + 0.12em 0 var(--underline-background-color), + -0.12em 0 var(--underline-background-color), + 0.15em 0 var(--underline-background-color), + -0.15em 0 var(--underline-background-color); + background-position: 0% 93%, 100% 93%, 0% 93%; + background-position-y: 90%, 90%, 90%; } main p { - margin-bottom: 2em; + margin-bottom: 2em; - font-family: 'Source Sans Pro'; - font-size: 1.5em; - font-style: normal; - font-weight: 400; - line-height: 150%; + font-family: "Source Sans Pro"; + font-size: 1.5em; + font-style: normal; + font-weight: 400; + line-height: 150%; } -main ul, main ol { - margin: 0 0 2em 1em; - padding: 0; +main ul, +main ol { + margin: 0 0 2em 1em; + padding: 0; - font-family: 'Source Sans Pro'; - font-size: 1.5rem; - font-style: normal; - font-weight: 400; - /* line-height: 150%; */ + font-family: "Source Sans Pro"; + font-size: 1.5rem; + font-style: normal; + font-weight: 400; + /* line-height: 150%; */ } -main ul ul, main ol ol { - font-size: 1.2rem; +main ul ul, +main ol ol { + font-size: 1.2rem; } main blockquote { - margin: 0; - margin-bottom: 1.5em; - padding: 0; + margin: 0; + margin-bottom: 1.5em; + padding: 0; } /* manually include quote icon to avoid extraneous html classes */ main blockquote p:before { - --icon-sprite: var(--cc-quote); + --icon-sprite: var(--cc-quote); - display: block; - content: ''; - height: 1em; - width: 1em; + display: block; + content: ""; + height: 1em; + width: 1em; - font-size: var(--icon-sprite-size); - background-color: var(--icon-sprite-color); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-image: var(--icon-sprite); - mask-image: var(--icon-sprite); - -webkit-mask-size: contain; - mask-size: contain; + font-size: var(--icon-sprite-size); + background-color: var(--icon-sprite-color); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-image: var(--icon-sprite); + mask-image: var(--icon-sprite); + -webkit-mask-size: contain; + mask-size: contain; } main blockquote p { - font-family: 'Source Sans Pro'; - font-weight: bold; - font-size: 1.9em; - line-height: 105%; + font-family: "Source Sans Pro"; + font-weight: bold; + font-size: 1.9em; + line-height: 105%; } main figure { - margin: 0; - margin-bottom: 3em; - padding: 0; + margin: 0; + margin-bottom: 3em; + padding: 0; } -main > article figure img, main > figure img { - width: 100%; +main > article figure img, +main > figure img { + width: 100%; } main figure .attribution { - display: block; - margin-top: 1em; + display: block; + margin-top: 1em; - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - line-height: 150%; + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + line-height: 150%; } main figure:has(iframe) { - grid-column: 4 / span 5; - float: none; + grid-column: 4 / span 5; + float: none; } main aside.closing { - display: inline-block; - box-sizing: border-box; - width: 25%; - margin-bottom: 2em; - padding: 2em; - width: 100%; + display: inline-block; + box-sizing: border-box; + width: 25%; + margin-bottom: 2em; + padding: 2em; + width: 100%; - background: var(--vocabulary-brand-color-soft-turquoise); - } + background: var(--vocabulary-brand-color-soft-turquoise); +} main aside.closing a { - --underline-background-color: var(--vocabulary-brand-color-soft-turquoise); - color: var(--vocabulary-brand-color-dark-tomato); - } + --underline-background-color: var(--vocabulary-brand-color-soft-turquoise); + color: var(--vocabulary-brand-color-dark-tomato); +} main aside.closing p { - margin :0; + margin: 0; - font-family: 'Source Sans Pro'; - font-size: 1.2em; - font-style: normal; - font-weight: 400; - line-height: 150%; - } + font-family: "Source Sans Pro"; + font-size: 1.2em; + font-style: normal; + font-weight: 400; + line-height: 150%; +} main .pub-date { - display: inline-block; - margin-bottom: 4em; + display: inline-block; + margin-bottom: 4em; - font-family: 'Source Sans Pro'; - font-size: 1.5em; - font-style: normal; - font-weight: 400; - line-height: 150%; + font-family: "Source Sans Pro"; + font-size: 1.5em; + font-style: normal; + font-weight: 400; + line-height: 150%; } main article.tags { - margin-bottom: 8em; + margin-bottom: 8em; } main article.tags ul { - display: flex; - flex-wrap: wrap; - margin: 0; - left: 0; + display: flex; + flex-wrap: wrap; + margin: 0; + left: 0; - list-style: none; + list-style: none; } main article.tags ul li { - margin-right: .5em; + margin-right: 0.5em; } - main article.tags ul li:after { - content: ','; - margin-left: .1em; + content: ","; + margin-left: 0.1em; } main article.tags ul li:last-child:after { - content: ''; + content: ""; } main > footer { - grid-column: 3 / span 7; + grid-column: 3 / span 7; } main article.posts.related { - grid-column: 3 / span 7; - padding: 2em 4em; - box-sizing: border-box; + grid-column: 3 / span 7; + padding: 2em 4em; + box-sizing: border-box; - background: var(--vocabulary-neutral-color-lighter-gray); + background: var(--vocabulary-neutral-color-lighter-gray); } main article.posts.related > h2 { - margin-bottom: 0.83em; + margin-bottom: 0.83em; } main article.posts.related ul { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - margin: 0 auto; - margin-top: 0; - gap: 2em; - box-sizing: border-box; - list-style: none; - - font-size: initial; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + margin: 0 auto; + margin-top: 0; + gap: 2em; + box-sizing: border-box; + list-style: none; - + font-size: initial; } main article.posts.related ul li { - margin-bottom: 3em; + margin-bottom: 3em; } -main article.posts.related .post { - margin-bottom: 0; +main article.posts.related .post { + margin-bottom: 0; } main article.posts.related .post header { - flex-direction: column; - align-items: baseline; + flex-direction: column; + align-items: baseline; } main article.posts.related .post figure { - display: none; - order: -1; + display: none; + order: -1; } main article.posts.related .post a { - --underline-background-color: var(--vocabulary-neutral-color-lighter-gray); + --underline-background-color: var(--vocabulary-neutral-color-lighter-gray); } -main article.posts.related .post h2, main article.posts.related .post h3 { - font-size: 1.4em; +main article.posts.related .post h2, +main article.posts.related .post h3 { + font-size: 1.4em; } main article.posts.related .post p { - display: none; + display: none; } main nav.pagination { - margin: 0 auto; + margin: 0 auto; } main nav.pagination ol { - display: flex; - flex-wrap: wrap; - justify-content: center; - width: 100%; - margin: 0; - padding: 0; - text-indent: none; + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 100%; + margin: 0; + padding: 0; + text-indent: none; - font-size: 1em; - list-style: none; + font-size: 1em; + list-style: none; } main nav.pagination ol li { - margin: 0 .5em; + margin: 0 0.5em; - line-height: 250%; + line-height: 250%; } main nav.pagination ol li a { - padding: .4em .7em; - - background: #F5F5F5; - --underline-background-color: #F5F5F5; - color: black; - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-size: 1.2em; - text-transform: none; - text-decoration: none; + padding: 0.4em 0.7em; + + background: #f5f5f5; + --underline-background-color: #f5f5f5; + color: black; + font-family: "Roboto Condensed"; + font-style: normal; + font-weight: 700; + font-size: 1.2em; + text-transform: none; + text-decoration: none; } main nav.pagination ol li.current a { - background: black; - --underline-background-color: black; - color: white; + background: black; + --underline-background-color: black; + color: white; } main .attribution-list { - grid-column: 3 / span 7; - box-sizing: border-box; - position: relative; - padding: 4em; + grid-column: 3 / span 7; + box-sizing: border-box; + position: relative; + padding: 4em; - background: var(--vocabulary-neutral-color-lighter-gray); - text-align: left; + background: var(--vocabulary-neutral-color-lighter-gray); + text-align: left; } main .attribution-list h2 { - margin: 0; + margin: 0; } main .attribution-list button.expand-attribution { - position: absolute; - top: 4.5em; - right: 4em; + position: absolute; + top: 4.5em; + right: 4em; - cursor: pointer; - border: 1px solid black; - border-radius: 3px; - padding: .5em; - font-family: "Source Sans Pro"; + cursor: pointer; + border: 1px solid black; + border-radius: 3px; + padding: 0.5em; + font-family: "Source Sans Pro"; } main .attribution-list button.expand-attribution.selected { - background: black; - color: white; + background: black; + color: white; } main .attribution-list ul { - display: none; + display: none; } main .attribution-list ul.expand { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - margin: 0; - margin-top: 2em; - padding: 0; - gap: 2em; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + margin: 0; + margin-top: 2em; + padding: 0; + gap: 2em; - font-size: 1em; - list-style: none; + font-size: 1em; + list-style: none; } main .attribution-list article { - margin-bottom: 1em; + margin-bottom: 1em; } main .attribution-list article a { - --underline-background-color: var(--vocabulary-brand-color-grey); + --underline-background-color: var(--vocabulary-brand-color-grey); } main .attribution-list article figure { - display: flex; - gap: 1em; - margin-top: 1em; + display: flex; + gap: 1em; + margin-top: 1em; } main .attribution-list article img { - object-fit: cover; - width: 4em; - height: 4em; + object-fit: cover; + width: 4em; + height: 4em; } main .attribution-list article figure .attribution { - margin-top: 0; + margin-top: 0; } /* general page-level context */ @@ -778,61 +795,60 @@ main .attribution-list article figure .attribution { /* global header component */ body > header { - grid-column: 1 / 12; - display: flex; - flex-wrap: wrap; - position: relative; - margin-bottom: 2em; - /* padding: 0 var(--vocabulary-page-edges-space); */ + grid-column: 1 / 12; + display: flex; + flex-wrap: wrap; + position: relative; + margin-bottom: 2em; + /* padding: 0 var(--vocabulary-page-edges-space); */ } body > header .masthead { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - align-items: baseline; - position: relative; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: baseline; + position: relative; - width: 100%; - /* padding-top: 3%; */ - padding-top: 40px; - margin: 0 var(--vocabulary-page-edges-space); + width: 100%; + /* padding-top: 3%; */ + padding-top: 40px; + margin: 0 var(--vocabulary-page-edges-space); } body > header .masthead h1 { - margin: 0; + margin: 0; } /* allows the child identity-logo element to have a focus state */ body > header .identity-logo-wrapper { - height: 50px; - width: 191px; - display: block; - position: absolute; + height: 50px; + width: 191px; + display: block; + position: absolute; } body > header .masthead .identity-logo { - display: inline-block; - text-indent: -1000px; - vertical-align: bottom; - height: 50px; - width: 191px; + display: inline-block; + text-indent: -1000px; + vertical-align: bottom; + height: 50px; + width: 191px; + /* allows for color manipulation of svg */ + background-color: black; + -webkit-mask-image: url("./../svg/cc/logos/cc/logomark.svg"); + mask-image: url("./../svg/cc/logos/cc/logomark.svg"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + cursor: pointer; - /* allows for color manipulation of svg */ - background-color: black; - -webkit-mask-image: url('./../svg/cc/logos/cc/logomark.svg'); - mask-image: url('./../svg/cc/logos/cc/logomark.svg'); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - cursor: pointer; - - /* standard pattern for setting logo in lieu of background color manipulation */ - /* background: url('../../svg/cc/logos/cc/logomark.svg') left top no-repeat; */ + /* standard pattern for setting logo in lieu of background color manipulation */ + /* background: url('../../svg/cc/logos/cc/logomark.svg') left top no-repeat; */ } body > header .masthead .identity-logo:hover { - background-color: var(--vocabulary-neutral-color-dark-gray); + background-color: var(--vocabulary-neutral-color-dark-gray); } /* TODO: needs focus outline to be fixed */ @@ -857,39 +873,39 @@ body > header .masthead .identity-logo:hover { /* style product identity typesetting */ body > header .masthead .identity-logo.product { - width: initial; - position: relative; - text-indent: 42px; - padding-top: 7px; - box-sizing: border-box; - - text-decoration: none; - font-family: "CC Accidenz Commons"; - font-weight: normal; - text-transform: lowercase; - letter-spacing: -1px; - line-height: 1em; - -webkit-mask-image: none; - mask-image: none; - background: none; - color: black; + width: initial; + position: relative; + text-indent: 42px; + padding-top: 7px; + box-sizing: border-box; + + text-decoration: none; + font-family: "CC Accidenz Commons"; + font-weight: normal; + text-transform: lowercase; + letter-spacing: -1px; + line-height: 1em; + -webkit-mask-image: none; + mask-image: none; + background: none; + color: black; } /* style product identity mini-cc-logo */ body > header .masthead .identity-logo.product:before { - position: absolute; - width: 40px; - height: 40px; - content: ''; - left: 0; - top: .176em; + position: absolute; + width: 40px; + height: 40px; + content: ""; + left: 0; + top: 0.176em; - background-color: black; - -webkit-mask-image: url('./../svg/cc/logos/cc/lettermark.svg'); - mask-image: url('./../svg/cc/logos/cc/lettermark.svg'); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - cursor: pointer; + background-color: black; + -webkit-mask-image: url("./../svg/cc/logos/cc/lettermark.svg"); + mask-image: url("./../svg/cc/logos/cc/lettermark.svg"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + cursor: pointer; } /* .masthead .primary-menu { @@ -899,262 +915,257 @@ body > header .masthead .identity-logo.product:before { } */ body > header .masthead .primary-menu ul { - display: flex; - justify-content: space-around; - width: 100%; - margin: 0; - padding: 0; + display: flex; + justify-content: space-around; + width: 100%; + margin: 0; + padding: 0; - list-style: none; + list-style: none; } body > header .masthead .primary-menu ul li { - display: flex; - align-items: center; - margin-top: 5px; - margin-left: 20px; + display: flex; + align-items: center; + margin-top: 5px; + margin-left: 20px; } body > header .masthead .primary-menu ul li a { - text-decoration: none; - text-transform: uppercase; - font-family: var(--vocabulary-brand-typeset-nav-family); - font-weight: var(--vocabulary-brand-typeset-nav-weight); - font-size: 1.1em; - letter-spacing: 0.02em; - color: var(--vocabulary-brand-typeset-nav-color); + text-decoration: none; + text-transform: uppercase; + font-family: var(--vocabulary-brand-typeset-nav-family); + font-weight: var(--vocabulary-brand-typeset-nav-weight); + font-size: 1.1em; + letter-spacing: 0.02em; + color: var(--vocabulary-brand-typeset-nav-color); } body > header .masthead .primary-menu ul li a:hover { - color: black; + color: black; } body > header .masthead .primary-menu ul li a.attention { - display: inline-block; - padding: 0.5em; + display: inline-block; + padding: 0.5em; - background: var(--vocabulary-brand-color-turquoise); - color: white; - border-radius: 4px; + background: var(--vocabulary-brand-color-turquoise); + color: white; + border-radius: 4px; } body > header button.expand-menu { - display: none; + display: none; } body > header .ancilliary-menu { - position: absolute; - top: 0; - /* right: var(--vocabulary-page-edges-space); */ - right: 0; + position: absolute; + top: 0; + /* right: var(--vocabulary-page-edges-space); */ + right: 0; - font-family: "Source Sans Pro"; - font-style: normal; - font-weight: 600; - font-size: .8em; - /* font-size: 1em; */ + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 600; + font-size: 0.8em; + /* font-size: 1em; */ } body > header .ancilliary-menu ul { - display: flex; - margin: 0; - padding: 0; + display: flex; + margin: 0; + padding: 0; - list-style: none; + list-style: none; } body > header .ancilliary-menu ul li { - margin-left: 10px; + margin-left: 10px; } body > header .ancilliary-menu ul li a { - /* generalize this */ - display: inline-block; + /* generalize this */ + display: inline-block; } body > header .ancilliary-menu ul li a, .ancilliary-menu ul li button { - margin-top: 10px; + margin-top: 10px; } body > header .ancilliary-menu ul li button:hover { - cursor: pointer; + cursor: pointer; } body > header .ancilliary-menu button.locale { - display: inline-flex; - align-items: center; - padding: 6px 10px; - + display: inline-flex; + align-items: center; + padding: 6px 10px; - background: var(--vocabulary-neutral-color-lighter-gray); - border: none; - border-radius: 3px; + background: var(--vocabulary-neutral-color-lighter-gray); + border: none; + border-radius: 3px; } body > header .ancilliary-menu button.locale.icon-attach:before { - --icon-sprite: var(--fa-globe); - --icon-sprite-size: .8em; + --icon-sprite: var(--fa-globe); + --icon-sprite-size: 0.8em; - margin-right: .8em; + margin-right: 0.8em; - opacity: .3; + opacity: 0.3; } body > header .ancilliary-menu a.donate { - display: inline-flex; - align-items: center; - padding: 6px 10px; + display: inline-flex; + align-items: center; + padding: 6px 10px; - text-decoration: none; - background: var(--vocabulary-brand-color-soft-tomato); - color: var(--vocabulary-brand-color-dark-tomato); - border-radius: 3px; + text-decoration: none; + background: var(--vocabulary-brand-color-soft-tomato); + color: var(--vocabulary-brand-color-dark-tomato); + border-radius: 3px; } .ancilliary-menu a.donate.icon-attach:before { - --icon-sprite: var(--fa-heart); - --icon-sprite-color: var(--vocabulary-brand-color-dark-tomato); - --icon-sprite-size: .8em; + --icon-sprite: var(--fa-heart); + --icon-sprite-color: var(--vocabulary-brand-color-dark-tomato); + --icon-sprite-size: 0.8em; - margin-right: .8em; + margin-right: 0.8em; } body > header .ancilliary-menu a.search { - display: inline-flex; - align-items: center; - padding: 6px 10px; + display: inline-flex; + align-items: center; + padding: 6px 10px; - font-weight: normal; - text-decoration: none; - background: var(--vocabulary-neutral-color-lighter-gray); - color: #000; - border: none; - border-radius: 3px; + font-weight: normal; + text-decoration: none; + background: var(--vocabulary-neutral-color-lighter-gray); + color: #000; + border: none; + border-radius: 3px; } body > header .ancilliary-menu a.search.icon-attach:before { - --icon-sprite: var(--fa-search); - --icon-sprite-size: .8em; + --icon-sprite: var(--fa-search); + --icon-sprite-size: 0.8em; - margin-right: .8em; + margin-right: 0.8em; } body > header .ancilliary-menu button.explore { - margin-top: 0; - padding-top: 16px; - padding-bottom: 6px; - padding-left: 10px; - padding-right: 10px; + margin-top: 0; + padding-top: 16px; + padding-bottom: 6px; + padding-left: 10px; + padding-right: 10px; - background: black; - color: white; - border: none; - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px; + background: black; + color: white; + border: none; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; } body > header .explore-panel { - order: -1; - display: flex; - justify-content: space-between; - width: 100%; - padding: 40px var(--vocabulary-page-edges-space) 60px var(--vocabulary-page-edges-space); + order: -1; + display: flex; + justify-content: space-between; + width: 100%; + padding: 40px var(--vocabulary-page-edges-space) 60px + var(--vocabulary-page-edges-space); - background: black; - color: white; - display: none; + background: black; + color: white; + display: none; } .explore-panel.expand { - display: inherit; - transition: display 2s ease-in-out; + display: inherit; + transition: display 2s ease-in-out; } body > header .explore-panel aside { - margin-right: 20px; + margin-right: 20px; } body > header .explore-panel aside .identity-logo { - display: inline-block; - text-indent: -1000px; - vertical-align: bottom; - height: 50px; - width: 191px; - - - /* allows for color manipulation of svg */ - background-color: white; - -webkit-mask-image: url('./../svg/cc/logos/cc/logomark.svg'); - mask-image: url('./../svg/cc/logos/cc/logomark.svg'); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - cursor: pointer; + display: inline-block; + text-indent: -1000px; + vertical-align: bottom; + height: 50px; + width: 191px; - /* standard pattern for setting logo in lieu of background color manipulation */ - /* background: url('../../svg/cc/logos/cc/logomark.svg') left top no-repeat; */ + /* allows for color manipulation of svg */ + background-color: white; + -webkit-mask-image: url("./../svg/cc/logos/cc/logomark.svg"); + mask-image: url("./../svg/cc/logos/cc/logomark.svg"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + cursor: pointer; + /* standard pattern for setting logo in lieu of background color manipulation */ + /* background: url('../../svg/cc/logos/cc/logomark.svg') left top no-repeat; */ } body > header .explore-panel aside h2 { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - + font-family: "Roboto Condensed"; + font-style: normal; + font-weight: 700; } body > header .explore-panel aside p { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; } body > header .explore-panel .explore-menu { - width: 100%; - - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; + width: 100%; + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; } body > header .explore-panel .explore-menu ul { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 20px; - - margin: 0; - padding: 0; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 20px; - list-style: none; + margin: 0; + padding: 0; + list-style: none; } body > header .explore-panel nav ul li a { - display: block; + display: block; - color: var(--vocabulary-brand-color-turquoise); - text-decoration: none; - font-weight: 700; - /* margin-bottom: .8em; */ + color: var(--vocabulary-brand-color-turquoise); + text-decoration: none; + font-weight: 700; + /* margin-bottom: .8em; */ } body > header .explore-panel nav ul li p { - font-weight: inherit; - line-height: 1.5; + font-weight: inherit; + line-height: 1.5; } body > article.attention { - grid-column: 1 / span 11; - padding: 1em 5%; + grid-column: 1 / span 11; + padding: 1em 5%; - background: var(--vocabulary-brand-color-soft-green); - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - font-size: 1.2em; - line-height: 150%; - text-align: center; - border-bottom: 3px solid white; + background: var(--vocabulary-brand-color-soft-green); + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + font-size: 1.2em; + line-height: 150%; + text-align: center; + border-bottom: 3px solid white; } /* bottom page banner */ @@ -1163,898 +1174,999 @@ body > article.attention { } */ body > article.attention a { - color: var(--vocabulary-brand-color-dark-green); - --underline-background-color: var(--vocabulary-brand-color-soft-green); -} - -body > article.attention.low-importance a, body > article.attention.medium-importance a, body > article.attention.high-importance a { - display: inline-flex; - align-items: center; - padding: 0.5em .8em; - margin-left: .5em; - - text-transform: uppercase; - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - text-decoration: none; - vertical-align: middle; - background: var(--vocabulary-brand-color-turquoise); - color: white; - border-radius: 4px; -} - -body > article.attention.low-importance a:before, body > article.attention.medium-importance a:before, body > article.attention.high-importance a:before { - --icon-sprite: var(--cc-heart-filled); - --icon-sprite-color: white; - --icon-sprite-size: 1em; - - display: inline-block; - content: ''; - height: 1em; - width: 1em; - margin-right: .2em; - - font-size: var(--icon-sprite-size); - background-color: var(--icon-sprite-color); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-image: var(--icon-sprite); - mask-image: var(--icon-sprite); - -webkit-mask-size: contain; - mask-size: contain; + color: var(--vocabulary-brand-color-dark-green); + --underline-background-color: var(--vocabulary-brand-color-soft-green); +} + +body > article.attention.low-importance a, +body > article.attention.medium-importance a, +body > article.attention.high-importance a { + display: inline-flex; + align-items: center; + padding: 0.5em 0.8em; + margin-left: 0.5em; + + text-transform: uppercase; + font-family: "Roboto Condensed"; + font-style: normal; + font-weight: 700; + text-decoration: none; + vertical-align: middle; + background: var(--vocabulary-brand-color-turquoise); + color: white; + border-radius: 4px; +} + +body > article.attention.low-importance a:before, +body > article.attention.medium-importance a:before, +body > article.attention.high-importance a:before { + --icon-sprite: var(--cc-heart-filled); + --icon-sprite-color: white; + --icon-sprite-size: 1em; + + display: inline-block; + content: ""; + height: 1em; + width: 1em; + margin-right: 0.2em; + + font-size: var(--icon-sprite-size); + background-color: var(--icon-sprite-color); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-image: var(--icon-sprite); + mask-image: var(--icon-sprite); + -webkit-mask-size: contain; + mask-size: contain; } body > .attention.low-importance { - background: var(--vocabulary-brand-color-soft-green); - border-bottom: 8px solid var(--vocabulary-brand-color-green); + background: var(--vocabulary-brand-color-soft-green); + border-bottom: 8px solid var(--vocabulary-brand-color-green); } body > .attention.medium-importance { - background: var(--vocabulary-brand-color-soft-gold); - border-bottom: 8px solid var(--vocabulary-brand-color-gold); + background: var(--vocabulary-brand-color-soft-gold); + border-bottom: 8px solid var(--vocabulary-brand-color-gold); } body > .attention.high-importance { - background: var(--vocabulary-brand-color-soft-tomato); - border-bottom: 8px solid var(--vocabulary-brand-color-tomato); + background: var(--vocabulary-brand-color-soft-tomato); + border-bottom: 8px solid var(--vocabulary-brand-color-tomato); } /* global footer component */ body > footer { - grid-column: 1 / 12; - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-areas: - "logo nav nav nav" - "contact subscribe subscribe donate" - "contact license license donate"; - gap: 40px; - padding: 40px var(--vocabulary-page-edges-space); - - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - color: white; - background: black; + grid-column: 1 / 12; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-areas: + "logo nav nav nav" + "contact subscribe subscribe donate" + "contact license license donate"; + gap: 40px; + padding: 40px var(--vocabulary-page-edges-space); + + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + color: white; + background: black; } body > footer h2 { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-size: 1.25em; + font-family: "Roboto Condensed"; + font-style: normal; + font-weight: 700; + font-size: 1.25em; } body > footer a { - color: var(--vocabulary-brand-color-turquoise); - text-decoration: none; + color: var(--vocabulary-brand-color-turquoise); + text-decoration: none; } body > footer p { - line-height: 1.5; + line-height: 1.5; } /* needs to be moved to be broader in general specificity scope */ body > footer p a { - /* better hyperlink underline typesetting inspired by Tufte CSS */ - --underline-color: var(--vocabulary-brand-color-turquoise); - --underline-background-color: black; - color: var(--vocabulary-brand-color-turquoise); - /* text-decoration: none; */ - - /* adapted from Tufte.css -- Copyright (c) 2014 Dave Liepmann -- https://github.com/edwardtufte/tufte-css -- https://github.com/edwardtufte/tufte-css/blob/gh-pages/LICENSE */ - background: -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(currentColor, currentColor); - background: linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(currentColor, currentColor); - -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - background-repeat: no-repeat, no-repeat, repeat-x; - text-shadow: 0.03em 0 var(--underline-background-color), -0.03em 0 var(--underline-background-color), 0 0.03em var(--underline-background-color), 0 -0.03em var(--underline-background-color), 0.06em 0 var(--underline-background-color), -0.06em 0 var(--underline-background-color), 0.09em 0 var(--underline-background-color), -0.09em 0 var(--underline-background-color), 0.12em 0 var(--underline-background-color), -0.12em 0 var(--underline-background-color), 0.15em 0 var(--underline-background-color), -0.15em 0 var(--underline-background-color); - background-position: 0% 93%, 100% 93%, 0% 93%; - /* background-position-y: 87%, 87%, 87%; */ - + /* better hyperlink underline typesetting inspired by Tufte CSS */ + --underline-color: var(--vocabulary-brand-color-turquoise); + --underline-background-color: black; + color: var(--vocabulary-brand-color-turquoise); + /* text-decoration: none; */ + + /* adapted from Tufte.css -- Copyright (c) 2014 Dave Liepmann -- https://github.com/edwardtufte/tufte-css -- https://github.com/edwardtufte/tufte-css/blob/gh-pages/LICENSE */ + background: -webkit-linear-gradient( + var(--underline-color), + var(--underline-color) + ), + -webkit-linear-gradient(var(--underline-color), var(--underline-color)), + -webkit-linear-gradient(currentColor, currentColor); + background: linear-gradient(var(--underline-color), var(--underline-color)), + linear-gradient(var(--underline-color), var(--underline-color)), + linear-gradient(currentColor, currentColor); + -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + background-repeat: no-repeat, no-repeat, repeat-x; + text-shadow: 0.03em 0 var(--underline-background-color), + -0.03em 0 var(--underline-background-color), + 0 0.03em var(--underline-background-color), + 0 -0.03em var(--underline-background-color), + 0.06em 0 var(--underline-background-color), + -0.06em 0 var(--underline-background-color), + 0.09em 0 var(--underline-background-color), + -0.09em 0 var(--underline-background-color), + 0.12em 0 var(--underline-background-color), + -0.12em 0 var(--underline-background-color), + 0.15em 0 var(--underline-background-color), + -0.15em 0 var(--underline-background-color); + background-position: 0% 93%, 100% 93%, 0% 93%; + /* background-position-y: 87%, 87%, 87%; */ } body > footer .identity-logo { - grid-area: logo; - display: inline-block; - text-indent: -1000px; - vertical-align: bottom; - height: 50px; - width: 191px; - + grid-area: logo; + display: inline-block; + text-indent: -1000px; + vertical-align: bottom; + height: 50px; + width: 191px; - /* allows for color manipulation of svg */ - background-color: white; - -webkit-mask-image: url('./../svg/cc/logos/cc/logomark.svg'); - mask-image: url('./../svg/cc/logos/cc/logomark.svg'); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - cursor: pointer; + /* allows for color manipulation of svg */ + background-color: white; + -webkit-mask-image: url("./../svg/cc/logos/cc/logomark.svg"); + mask-image: url("./../svg/cc/logos/cc/logomark.svg"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + cursor: pointer; - /* standard pattern for setting logo in lieu of background color manipulation */ - /* background: url('../../svg/cc/logos/cc/logomark.svg') left top no-repeat; */ + /* standard pattern for setting logo in lieu of background color manipulation */ + /* background: url('../../svg/cc/logos/cc/logomark.svg') left top no-repeat; */ } body > footer .identity-logo:hover { - background-color: var(--vocabulary-brand-color-turquoise); + background-color: var(--vocabulary-brand-color-turquoise); } body > footer .footer-menu { - grid-area: nav; + grid-area: nav; - font-size: 1.3em; - font-weight: 700; + font-size: 1.3em; + font-weight: 700; } body > footer .footer-menu ul { - display: flex; - justify-content: space-between; - margin: 0; - padding: 0; + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; - list-style: none; + list-style: none; } body > footer .footer-menu ul li a { - text-decoration: none; - color: var(--vocabulary-brand-color-turquoise); - + text-decoration: none; + color: var(--vocabulary-brand-color-turquoise); } body > footer .contact { - grid-area: contact; + grid-area: contact; } body > footer .contact .social-menu ul { - display: flex; - margin: 0; - padding: 0; - margin-top: 3em; - - list-style: none; + display: flex; + margin: 0; + padding: 0; + margin-top: 3em; + list-style: none; } body > footer .contact .social-menu ul li { - margin-right: 1.5em; + margin-right: 1.5em; } body > footer .social-menu li a { - --icon-sprite-color: white; - --icon-sprite-size: 1.9em; + --icon-sprite-color: white; + --icon-sprite-size: 1.9em; } body > footer .subscribe { - grid-area: subscribe; + grid-area: subscribe; } body > footer .subscribe form { - display: flex; - justify-content: space-around; - width: 100%; + display: flex; + justify-content: space-around; + width: 100%; } body > footer .subscribe form input { - display: inline-flex; - position: relative; - justify-content: flex-start; - align-items: center; - vertical-align: top; - box-sizing: border-box; - - -webkit-appearance: none; - background-color: transparent; - color: rgb(118, 118, 118); - font-family: "Source Sans Pro", sans-serif; - font-size: 1em; - font-weight: 600; - line-height: 1.3; - border: 2px solid rgb(118, 118, 118);; - /* border-radius: 4px; */ - box-shadow: none; - + display: inline-flex; + position: relative; + justify-content: flex-start; + align-items: center; + vertical-align: top; + box-sizing: border-box; + + -webkit-appearance: none; + background-color: transparent; + color: rgb(118, 118, 118); + font-family: "Source Sans Pro", sans-serif; + font-size: 1em; + font-weight: 600; + line-height: 1.3; + border: 2px solid rgb(118, 118, 118); + /* border-radius: 4px; */ + box-shadow: none; } body > footer .subscribe form input.input { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - padding: .5em; - width: 100%; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + padding: 0.5em; + width: 100%; } body > footer .subscribe form input.input:focus { - color: white; + color: white; } body > footer .subscribe form input.button { - justify-content: center; - padding: 1.1em; - - cursor: pointer; - font-family: "Roboto Condensed", sans-serif; - font-size: 1.125rem; - text-align: center; - text-transform: uppercase; - font-weight: 600; - line-height: 0; - white-space: nowrap; - background-color: rgb(118, 118, 118); - border: none; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - color: rgb(255, 255, 255); + justify-content: center; + padding: 1.1em; + + cursor: pointer; + font-family: "Roboto Condensed", sans-serif; + font-size: 1.125rem; + text-align: center; + text-transform: uppercase; + font-weight: 600; + line-height: 0; + white-space: nowrap; + background-color: rgb(118, 118, 118); + border: none; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + color: rgb(255, 255, 255); } body > footer .donate { - grid-area: donate; + grid-area: donate; } body > footer .donate a.donate { - display: inline-flex; - align-items: center; - padding: 1rem 1.5rem; - - text-transform: uppercase; - font-family: 'Roboto Condensed'; - font-size: 1.5em; - line-height: 1em; - font-style: normal; - font-weight: 700; - border: none; - border-radius: 4px; - color: black; - background: var(--vocabulary-brand-color-gold); + display: inline-flex; + align-items: center; + padding: 1rem 1.5rem; + + text-transform: uppercase; + font-family: "Roboto Condensed"; + font-size: 1.5em; + line-height: 1em; + font-style: normal; + font-weight: 700; + border: none; + border-radius: 4px; + color: black; + background: var(--vocabulary-brand-color-gold); } body > footer .donate a.donate:hover { - cursor: pointer; + cursor: pointer; - background-color: rgb(248, 204, 44); + background-color: rgb(248, 204, 44); } /* set the icon settings */ body > footer .donate a.donate.icon-attach:before { - /* --icon-sprite: var(--cc-heart-filled); */ - --icon-sprite-color: black; - --icon-sprite-size: 1.2em; + /* --icon-sprite: var(--cc-heart-filled); */ + --icon-sprite-color: black; + --icon-sprite-size: 1.2em; - margin-right: .3em; + margin-right: 0.3em; } body > footer .license { - grid-area: license; + grid-area: license; } body > footer .license img path { - fill: white; - /* width: 1.2em; */ + fill: white; + /* width: 1.2em; */ } body > footer .license svg { - display: inline; - width: 1.9em; - height: 1.9em; - margin-right: .3em; + display: inline; + width: 1.9em; + height: 1.9em; + margin-right: 0.3em; } - /* archive-page context */ .archive-page main { - - } /* blog-index context */ .blog-index main > header { - margin-bottom: 0; + margin-bottom: 0; } .blog-index main .posts { - grid-column: 2 / span 9; + grid-column: 2 / span 9; } .blog-index main .posts h2 { - text-align: center; + text-align: center; } .blog-index main .posts ul { - display: grid; - grid-template-columns: repeat(12, 1fr); - margin-top: 8em; - /* padding: 0 4em; */ - gap: 2em; - box-sizing: border-box; - width:100%; - margin: 0 auto; - margin-top: 0; + display: grid; + grid-template-columns: repeat(12, 1fr); + margin-top: 8em; + /* padding: 0 4em; */ + gap: 2em; + box-sizing: border-box; + width: 100%; + margin: 0 auto; + margin-top: 0; - font-size: 1rem; - list-style: none; + font-size: 1rem; + list-style: none; } .blog-index main .posts ul li { - grid-column: span 4; - } + grid-column: span 4; +} - .blog-index main .posts ul li h3 { - font-size: 1.5em; +.blog-index main .posts ul li h3 { + font-size: 1.5em; } .blog-index main .posts .post figure { - order: -1; + order: -1; } - /* targets the featured posts section */ .blog-index main .posts.featured { - grid-column: 1 / span 11; - margin-bottom: 3em; + grid-column: 1 / span 11; + margin-bottom: 3em; - background: var(--vocabulary-neutral-color-lighter-gray); + background: var(--vocabulary-neutral-color-lighter-gray); } .blog-index main .posts.featured h2 { - visibility: hidden; - height: 0; - margin: 0; - padding: 0; + visibility: hidden; + height: 0; + margin: 0; + padding: 0; } .blog-index main .posts.featured .post h3 { - font-size: 1.4em; + font-size: 1.4em; } .blog-index main .posts.featured ul li:nth-child(1) h3 { - font-size: 2.1em; + font-size: 2.1em; } .blog-index main .posts.featured .post a { - --underline-background-color: var(--vocabulary-neutral-color-lighter-gray); + --underline-background-color: var(--vocabulary-neutral-color-lighter-gray); } .blog-index main .posts.featured li:nth-of-type(1) .post a { - --underline-background-color: white; + --underline-background-color: white; } .blog-index main .posts.featured li:nth-of-type(1) .post figure { - order: initial; + order: initial; } -.blog-index main .posts.featured ul { - padding: 0 5%; +.blog-index main .posts.featured ul { + padding: 0 5%; } .blog-index main .posts.featured ul li { - grid-column: span 3; + grid-column: span 3; } .blog-index main .posts.featured ul li:nth-of-type(1) { - grid-column: span 12; + grid-column: span 12; - background: white; + background: white; } .blog-index main .posts.featured ul li:nth-of-type(1) article.post { - margin-bottom: 1em; - padding: 4em; + margin-bottom: 1em; + padding: 4em; } - .blog-index main footer { - grid-column: 2 / span 9; + grid-column: 2 / span 9; } /* search-index context */ -.search-index main > header { /* generalize? */ - display: block; - padding: 3.7em 0; - /* text-align: left; */ +.search-index main > header { + /* generalize? */ + display: block; + padding: 3.7em 0; + /* text-align: left; */ } .search-index .search-form form { - display: flex; - width: 100%; - margin-top: 1em; - margin-bottom: 1em; - - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - font-size: 1em; + display: flex; + width: 100%; + margin-top: 1em; + margin-bottom: 1em; + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 700; + font-size: 1em; } .search-index .search-form form input { - flex: 1; - width: 100%; - height: 4em; - padding: .2em 1em; - - outline: none; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - border: 2px solid black; + flex: 1; + width: 100%; + height: 4em; + padding: 0.2em 1em; + outline: none; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + border: 2px solid black; } .search-index .search-form form button { - width: 10%; + width: 10%; - cursor: pointer; - background: black; - color: white; - border: none; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + cursor: pointer; + background: black; + color: white; + border: none; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; } /* team-index context */ .team-index main .persons { - grid-column: 2 / 11; - margin-bottom: 5em; + grid-column: 2 / 11; + margin-bottom: 5em; } .team-index main .persons h2 { - margin-top: 0; - margin-bottom: 1.5em; + margin-top: 0; + margin-bottom: 1.5em; - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-size: 2.1em; + font-family: "Roboto Condensed"; + font-style: normal; + font-weight: 700; + font-size: 2.1em; } .team-index main .persons ul { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - gap: 4em; - margin: 0; - padding: 0; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 4em; + margin: 0; + padding: 0; - list-style: none; + list-style: none; } .team-index main .persons .person { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; - font-family: 'Source Sans Pro'; + font-family: "Source Sans Pro"; } .team-index main .persons .person h3 { - width: 100%; - margin-top: .6em; - margin-bottom: .5em; + width: 100%; + margin-top: 0.6em; + margin-bottom: 0.5em; - font-style: normal; - font-weight: 700; - font-size: 1em; - /* line-height: 150%; */ + font-style: normal; + font-weight: 700; + font-size: 1em; + /* line-height: 150%; */ } .team-index main .persons .person .title { - margin-bottom: .4em; + margin-bottom: 0.4em; - font-style: normal; - font-weight: 600; - font-size: .7em; - line-height: 150%; + font-style: normal; + font-weight: 600; + font-size: 0.7em; + line-height: 150%; } .team-index main .persons .person figure { - order: -1; - margin: 0; - padding: 0; + order: -1; + margin: 0; + padding: 0; - font-size: .8em; + font-size: 0.8em; } .team-index main .persons .person img { - width: 100%; - zoom: 10; + width: 100%; + zoom: 10; } .team-index main .persons .person a { - /* better hyperlink underline typesetting inspired by Tufte CSS */ - --underline-color: var(--vocabulary-brand-color-dark-tomato); - --underline-background-color: white; - color: var(--vocabulary-brand-color-dark-tomato); - text-decoration: none; - - /* adapted from Tufte.css -- Copyright (c) 2014 Dave Liepmann -- https://github.com/edwardtufte/tufte-css -- https://github.com/edwardtufte/tufte-css/blob/gh-pages/LICENSE */ - background: -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(currentColor, currentColor); - background: linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(currentColor, currentColor); - -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - background-repeat: no-repeat, no-repeat, repeat-x; - text-shadow: 0.03em 0 var(--underline-background-color), -0.03em 0 var(--underline-background-color), 0 0.03em var(--underline-background-color), 0 -0.03em var(--underline-background-color), 0.06em 0 var(--underline-background-color), -0.06em 0 var(--underline-background-color), 0.09em 0 var(--underline-background-color), -0.09em 0 var(--underline-background-color), 0.12em 0 var(--underline-background-color), -0.12em 0 var(--underline-background-color), 0.15em 0 var(--underline-background-color), -0.15em 0 var(--underline-background-color); - background-position: 0% 93%, 100% 93%, 0% 93%; - /* background-position-y: 87%, 87%, 87%; */ + /* better hyperlink underline typesetting inspired by Tufte CSS */ + --underline-color: var(--vocabulary-brand-color-dark-tomato); + --underline-background-color: white; + color: var(--vocabulary-brand-color-dark-tomato); + text-decoration: none; + + /* adapted from Tufte.css -- Copyright (c) 2014 Dave Liepmann -- https://github.com/edwardtufte/tufte-css -- https://github.com/edwardtufte/tufte-css/blob/gh-pages/LICENSE */ + background: -webkit-linear-gradient( + var(--underline-color), + var(--underline-color) + ), + -webkit-linear-gradient(var(--underline-color), var(--underline-color)), + -webkit-linear-gradient(currentColor, currentColor); + background: linear-gradient(var(--underline-color), var(--underline-color)), + linear-gradient(var(--underline-color), var(--underline-color)), + linear-gradient(currentColor, currentColor); + -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + background-repeat: no-repeat, no-repeat, repeat-x; + text-shadow: 0.03em 0 var(--underline-background-color), + -0.03em 0 var(--underline-background-color), + 0 0.03em var(--underline-background-color), + 0 -0.03em var(--underline-background-color), + 0.06em 0 var(--underline-background-color), + -0.06em 0 var(--underline-background-color), + 0.09em 0 var(--underline-background-color), + -0.09em 0 var(--underline-background-color), + 0.12em 0 var(--underline-background-color), + -0.12em 0 var(--underline-background-color), + 0.15em 0 var(--underline-background-color), + -0.15em 0 var(--underline-background-color); + background-position: 0% 93%, 100% 93%, 0% 93%; + /* background-position-y: 87%, 87%, 87%; */ } .team-index main .persons .person p { - font-size: .75em; + font-size: 0.75em; } .team-index main aside.closing { - background: none; + background: none; } .team-index main aside.closing p { - font-style: italic; + font-style: italic; } /* person-page context */ .person-page main > header { - grid-column: 2 / span 9; - min-height: 410px; - position: relative; - box-sizing: border-box; - display: grid; - grid-template-columns: 3fr 7fr; - /* grid-template-areas: + grid-column: 2 / span 9; + min-height: 410px; + position: relative; + box-sizing: border-box; + display: grid; + grid-template-columns: 3fr 7fr; + /* grid-template-areas: 'picture info' 'picture info' 'picture info'; */ - gap: 0 5em; - padding: 3.7em 0; + gap: 0 5em; + padding: 3.7em 0; - text-align: left; + text-align: left; } - .person-page main > header:before { - left: -5.5%; + left: -5.5%; } .person-page main > header h1 { - grid-column-start: 2; - - margin-bottom: .1em; + grid-column-start: 2; + margin-bottom: 0.1em; } .person-page main > header .title { - grid-column-start: 2; - margin-bottom: 1em; + grid-column-start: 2; + margin-bottom: 1em; - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - font-size: 1.9em; + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 700; + font-size: 1.9em; } .person-page main > header .pronouns { - grid-column-start: 2; - margin-bottom: 1em; - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - font-size: 1.5em; + grid-column-start: 2; + margin-bottom: 1em; + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 700; + font-size: 1.5em; } .person-page main > header figure { - box-sizing: border-box; - position: absolute; - margin: 0; - padding:0; + box-sizing: border-box; + position: absolute; + margin: 0; + padding: 0; - top: 3.4em; - left: 0; - width: 30%; + top: 3.4em; + left: 0; + width: 30%; } .person-page main > header figure img { - box-sizing: border-box; + box-sizing: border-box; - width: 100%; + width: 100%; - border: 16px solid white; + border: 16px solid white; } .person-page main > header .bio { - grid-column-start: 2; - - font-size: .9em; + grid-column-start: 2; + font-size: 0.9em; } .person-page main > header p { - margin-bottom: .3em; + margin-bottom: 0.3em; } /* program-index context */ .program-index main > article.projects { - grid-column: 3 / 10; - margin-bottom: 8em; + grid-column: 3 / 10; + margin-bottom: 8em; } .program-index main > article.projects ul { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 2em; - margin: 0; - padding: 0; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 2em; + margin: 0; + padding: 0; - font-size: 1em; - list-style: none; + font-size: 1em; + list-style: none; } .program-index main > article.projects article { - padding: 2em; + padding: 2em; - background: var(--vocabulary-brand-color-soft-turquoise); - border-top: 3px solid black; + background: var(--vocabulary-brand-color-soft-turquoise); + border-top: 3px solid black; } .program-index main > article.projects article a { - --underline-background-color: var(--vocabulary-brand-color-soft-turquoise); + --underline-background-color: var(--vocabulary-brand-color-soft-turquoise); } /* program-page context */ - /* responsive contexts */ @media (min-width: 1500px) { - body { - width: 1500px; - margin: 0 auto; - } - - body > main { - overflow-x: hidden; - } + body { + width: 1500px; + margin: 0 auto; + } + body > main { + overflow-x: hidden; + } } @media (max-width: 1140px) { - .blog-index main footer .attribution-list ul.expand { - grid-template-columns: 1fr 1fr; - } + .blog-index main footer .attribution-list ul.expand { + grid-template-columns: 1fr 1fr; + } - .search-index main > header { - grid-column: 3 / 10; - } + .search-index main > header { + grid-column: 3 / 10; + } - .search-index main > header:before { - left: -9.3%; - } + .search-index main > header:before { + left: -9.3%; + } } @media (max-width: 900px) { - - .blog-index main .posts ul { - display: flex; - flex-wrap: wrap; - } + .blog-index main .posts ul { + display: flex; + flex-wrap: wrap; + } } @media (max-width: 705px) { - - body > header .masthead { - padding-top: 60px; - display: block; - } - - body > header button.expand-menu { - position: absolute; - top: 4.5em; - right: 0; - display: inline-block; - padding: .3em .5em; - border: none; - border-radius: 5px; - background: #F5F5F5; - text-transform: uppercase; - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-size: 1em; - padding: .5rem 1rem; - } - - body > header .primary-menu { - display: none; - - } - - body > header .primary-menu.expand { - display: initial; - } - - body > header .primary-menu.expand ul { - display: block; - width: 100%; - margin: 0; - padding: 0; - margin-top: 1.5em; - } - - body > header .primary-menu.expand ul li { - margin: 0; - padding: 1em 0; - border-top: 1px solid rgba(1,1,1,.1); - } - - main { - width: 80%; - } - - main article.posts.related { - width: 100%; - margin-left: 0; - } - - main article.posts.related { - display: block; - } - - .blog-index main article.posts.featured > ul li:nth-child(1) { - padding: 2em; - } - - .blog-index main .posts { - padding: 0 5%; - } - - .blog-index main footer .attribution-list ul.expand { - display: block; - } - - .search-index .search-form form button { - width: 20%; - } - + body > header .masthead { + padding-top: 60px; + display: block; + } + + body > header button.expand-menu { + position: absolute; + top: 4.5em; + right: 0; + display: inline-block; + padding: 0.3em 0.5em; + border: none; + border-radius: 5px; + background: #f5f5f5; + text-transform: uppercase; + font-family: "Roboto Condensed"; + font-style: normal; + font-weight: 700; + font-size: 1em; + padding: 0.5rem 1rem; + } + + body > header .primary-menu { + display: none; + } + + body > header .primary-menu.expand { + display: initial; + } + + body > header .primary-menu.expand ul { + display: block; + width: 100%; + margin: 0; + padding: 0; + margin-top: 1.5em; + } + + body > header .primary-menu.expand ul li { + margin: 0; + padding: 1em 0; + border-top: 1px solid rgba(1, 1, 1, 0.1); + } + + main { + width: 80%; + } + + main article.posts.related { + width: 100%; + margin-left: 0; + } + + main article.posts.related { + display: block; + } + + .blog-index main article.posts.featured > ul li:nth-child(1) { + padding: 2em; + } + + .blog-index main .posts { + padding: 0 5%; + } + + .blog-index main footer .attribution-list ul.expand { + display: block; + } + + .search-index .search-form form button { + width: 20%; + } } @media (max-width: 680px) { - - body > header .explore-panel { - flex-wrap: wrap; - } - - body > footer { - display: block; - } - - body > footer > nav { - margin-top: 1em; - margin-bottom: 3em; - } - - body > footer > nav ul li { - margin-bottom: 1em; - } - - body > footer > div { - margin-bottom: 4em; - } - - main { - display: block; - width: 100%; - } - - main > aside .attention { - margin-bottom: 5em; - } - - main > header:before { - left: 0; - } - - .posts article figure { - width: 100%; - flex: initial; - } - - .team-index main > header { - padding: 0 5%; - } - - .team-index main article.persons { - padding: 0 5%; - } - - .team-index main article.persons ul { - grid-template-columns: 1fr 1fr; - } - - .person-page main > header { - display: flex; - } - - .person-page main > header figure { - width: auto; - margin-bottom: 3em; - position: relative; - - order: -1; - } - - main nav.pagination { - width: 100%; - } - - main nav.pagination ol { - /* width: 100%; */ - flex-wrap: wrap; - } - - main nav.pagination ol li { - line-height: 250%; - } + body > header .explore-panel { + flex-wrap: wrap; + } + + body > footer { + display: block; + } + + body > footer > nav { + margin-top: 1em; + margin-bottom: 3em; + } + + body > footer > nav ul li { + margin-bottom: 1em; + } + + body > footer > div { + margin-bottom: 4em; + } + + main > aside .attention { + margin-bottom: 5em; + } + + main > header:before { + left: 0; + } + + .posts article figure { + width: 100%; + flex: initial; + } + + .team-index main > header { + padding: 0 5%; + } + + .team-index main article.persons { + padding: 0 5%; + } + + .team-index main article.persons ul { + grid-template-columns: 1fr 1fr; + } + + .person-page main > header { + display: flex; + } + + .person-page main > header figure { + width: auto; + margin-bottom: 3em; + position: relative; + + order: -1; + } + + main nav.pagination { + width: 100%; + } + + main nav.pagination ol { + /* width: 100%; */ + flex-wrap: wrap; + } + + main nav.pagination ol li { + line-height: 250%; + } + main nav.pagination ol li a { + font-size: 1.1em; + padding: 0.35em 0.65em; + } + .search-title { + font-size: 3em; + } + + .search-index .search-form form input { + height: 3.5em; + width: 2%; + font-size: 0.95em; + } + + .search-index .search-form form button { + width: 10%; + font-size: 0.95em; + } } @media (max-width: 580px) { - body > header .explore-panel .explore-menu ul { - grid-template-columns: 1fr 1fr; - } - - body > footer .footer-menu ul { - display: block; - } + body > header .explore-panel .explore-menu ul { + grid-template-columns: 1fr 1fr; + } + + body > footer .footer-menu ul { + display: block; + } + .search-title { + font-size: 2.5em; + } + .search-index .search-form form input { + height: 3.2em; + font-size: 0.9em; + padding: 0.2em 0.8em; + } + + .search-index .search-form form button { + width: 15%; + font-size: 0.9em; + } + + main nav.pagination ol li a { + font-size: 1em; + padding: 0.3em 0.6em; + } } @media (max-width: 425px) { - - .blog-index .attribution-list { - padding: 2em; - } - - .blog-index .attribution-list h2 { - width: 50%; - - hyphens: auto; - word-break: break-word; - } - - } - - @media (max-width:400px) { - - body > header .explore-panel .explore-menu ul { - display: flex; - flex-direction: column; - flex-wrap: wrap; - } - - .team-index main article.persons ul { - display: initial; - } -} - -@media (max-width:340px) { - body > header .ancilliary-menu button:before, body > header .ancilliary-menu a:before { - display: none; - } + .blog-index .attribution-list { + padding: 2em; + } + + .blog-index .attribution-list h2 { + width: 50%; + + hyphens: auto; + word-break: break-word; + } + .search-title { + font-size: 2.5em; + } + .search-index .search-form form input { + height: 3.2em; + font-size: 0.9em; + padding: 0.2em 0.8em; + } + + .search-index .search-form form button { + width: 15%; + font-size: 0.9em; + } + main nav.pagination ol li a { + font-size: 1em; + padding: 0.3em 0.6em; + } +} + +@media (max-width: 400px) { + body > header .explore-panel .explore-menu ul { + display: flex; + flex-direction: column; + flex-wrap: wrap; + } + + .team-index main article.persons ul { + display: initial; + } + + .search-title { + font-size: 2.5em; + } + .search-index .search-form form input { + height: 3.2em; + font-size: 0.8em; + padding: 0.2em 0.8em; + } + + .search-index .search-form form button { + width: 15%; + font-size: 0.8em; + } + + main nav.pagination ol li a { + font-size: 0.85em; + padding: 0.2em 0.5em; + } +} + +@media (max-width: 340px) { + body > header .ancilliary-menu button:before, + body > header .ancilliary-menu a:before { + display: none; + } + .search-title { + font-size: 2.5em; + } + .search-index .search-form form input { + height: 3.2em; + font-size: 0.8em; + padding: 0.2em 0.8em; + } + + .search-index .search-form form button { + width: 15%; + font-size: 0.5em; + } + main nav.pagination ol li a { + font-size: 0.8em; + padding: 0.15em 0.45em; + } } From 9e57bc25f412cac099cd62d68d2906aea7a4de88 Mon Sep 17 00:00:00 2001 From: Chinwendu Enyidiegwu Date: Thu, 17 Oct 2024 16:16:03 +0100 Subject: [PATCH 2/8] changes-in-vocabulary.css --- src/css/vocabulary.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/css/vocabulary.css b/src/css/vocabulary.css index 2de7a59e..c885c8cf 100644 --- a/src/css/vocabulary.css +++ b/src/css/vocabulary.css @@ -202,9 +202,6 @@ a.more { /* .posts .related variant context */ -.posts.related { -} - /*
level context */ main { From a838f3405ac86f7633777a0bd235eb5f5a4a46f2 Mon Sep 17 00:00:00 2001 From: Anne Date: Fri, 4 Oct 2024 04:53:09 +0100 Subject: [PATCH 3/8] replaced span with figcaption --- specimen/contexts/home-index.html | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/specimen/contexts/home-index.html b/specimen/contexts/home-index.html index e092e111..4a1857a6 100644 --- a/specimen/contexts/home-index.html +++ b/specimen/contexts/home-index.html @@ -124,14 +124,20 @@

The nonprofit behind the licenses and tools the world uses to share

  • - - “Novel Coronavirus SARS-CoV-2” by NIAID, here cropped, is licensed via CC BY 2.0 -
    + +
    + “Novel Coronavirus SARS-CoV-2” + by NIAID, here cropped, is licensed via + CC BY 2.0 +
    +
  • - + “Children kabuki theater in Nagahama (warrior Kumagai, 12 y.o.)” by lensonjapan, here cropped, is licensed via CC BY 2.0 + +
    • From 2f4e005e41fa2d62806930cdadb58ba2213a0033 Mon Sep 17 00:00:00 2001 From: Anne Date: Thu, 17 Oct 2024 20:18:45 +0100 Subject: [PATCH 4/8] Updated multiple figures within Vocabulary to place image attributions inside the
    tag for improved accessibility and adherence to HTML5 standard --- specimen/contexts/archive-page.html | 20 +++-- specimen/contexts/blog-index.html | 106 ++++++++++++++++++++--- specimen/contexts/blog-post.html | 37 +++++--- specimen/contexts/default-page.html | 4 +- specimen/contexts/home-index.html | 124 +++++++++++++++++++++------ specimen/contexts/person-page.html | 16 ++-- specimen/contexts/program-index.html | 7 +- specimen/contexts/program-page.html | 15 ++-- specimen/contexts/search-index.html | 11 ++- specimen/tests/kitchensink.html | 118 ++++++++++++++++++------- 10 files changed, 351 insertions(+), 107 deletions(-) diff --git a/specimen/contexts/archive-page.html b/specimen/contexts/archive-page.html index 801308ed..05665647 100644 --- a/specimen/contexts/archive-page.html +++ b/specimen/contexts/archive-page.html @@ -153,11 +153,16 @@

    Open Access in Practice: A Conversation with President Larry Kra

    -
    - +
    + +
    + "The More We Share, The More We Have (series 1/2)" + by Pietro Soldi + for Creative Commons & Fine Acts is licensed under + CC BY-SA 4.0 +
    +
    - "The More We Share, The More We Have (series 1/2)" by Pietro Soldi for Creative Commons & Fine Acts is licensed under CC BY-SA 4.0 -

    As part of our #20CC anniversary, last year we joined forces with Fine Acts to spark a global dialogue on what better sharing looks like in action. Our #BetterSharing collection of illustrations was the result — we gathered insights from 12 prominent open advocates around the world and tasked 12 renowned artists who embrace openness

    -