diff --git a/specimen/contexts/narrative-index.html b/specimen/contexts/narrative-index.html new file mode 100644 index 00000000..4a53ef14 --- /dev/null +++ b/specimen/contexts/narrative-index.html @@ -0,0 +1,352 @@ + + + +Narrative Index + + + + + + + + + + + + + + + + + + + + + + +
+
+

+ + +
+ +
+ + + + + +
+ + + + + +
+

you make music.

+

they remix it.

+

We make it possible.

+

where our shared culture thrives

+ +
+

Creative Commons is an international nonprofit organization that empowers people to grow and sustain the thriving commons of shared knowledge and culture we need to address the world's most pressing challenges and create a brighter future for all.

+ Learn more about what we do → +
+ + +
+

Progams

+
+ +
+

Licenses

+
+ +
+

Blog

+
+ +
+

News

+
+ +
+

Events

+
+ +
+

Looking Ahead

+
+ + +
+

Support

+
+ +
+

Get Involved

+
+ + +
+

Impact Story

+
+ +
+

Newsletter

+
+ + + + + + + +
+ + + + + + + diff --git a/specimen/style-test.css b/specimen/style-test.css new file mode 100644 index 00000000..b7d470cc --- /dev/null +++ b/specimen/style-test.css @@ -0,0 +1,355 @@ +@import 'vocabulary/css/vocabulary.css' layer(vocabulary); + +/* + ol li:has(#require-attribution, #allow-commercial-use, #allow-derivatives, #share-alike, #waive-your-copyright, #confirmation) { + display: none; +} */ + +ol li:has(.disable) { + display: none; +} + +.chooser-mini { + width: 80%; + margin: 0 auto; + margin-top: 3em; + + font-size: .8em; +} + +.chooser-mini a { + color: #324c7f; +} + +.chooser-mini header h2 { + text-align: center; + color: #324c7f; + /* color: #414040; */ + font-family: "DM Serif Display", serif; + font-weight: 400; + font-style: normal; + font-size: 4em; +} + +.chooser-mini header p { + font-size: 1.9em; +} + +.chooser-mini label { + display: none; +} + +.chooser-mini select { + padding: .8em .5em; + padding-right: 1.4em; + + appearance: none; + background: transparent; + border: 2px solid #bfbdbd; + border-color: #324c7f; + color: #324c7f; + border-radius: 5px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + font-family: 'Source Sans Pro'; +} + +.chooser-mini .license-menu div { + position: relative; + background: transparent; +} + +.chooser-mini .license-menu div.icon-attach:before { + --icon-sprite-color: #324c7f; + + position: absolute; + top: 1em; + right: .4em; + z-index: -1; +} + +.chooser-mini .license-menu a.need-help-choosing { + font-style: italic; +} + +.chooser-mini .license-menu { + display: flex; + justify-content: space-between; + + font-size: 1.5em; +} + +.chooser-mini .license-menu a { + margin-top: .7em; + display: inline-block; + height: min-content; +} + +.chooser-mini .explainer { + margin-top: 2em; + padding: 2em; + position: relative; + + background: var(--vocabulary-neutral-color-lighter-gray); + background: #CBF3F0; + border-radius: 5px; + border-top-left-radius: 0; + border-top-right-radius: 0; + +} + +.chooser-mini .explainer:before { + content: ''; + width: 2em; + height: 2em; + position: absolute; + top: -13px; + left: 50px; + transform: rotateZ(45deg); + + background: var(--vocabulary-neutral-color-lighter-gray); + background: #CBF3F0; +} + +.chooser-mini .explainer h3 { + margin-top: 0; + + font-family: 'Source Sans Pro'; +} + +.chooser-mini .explainer a { + --underline-background-color: var(--vocabulary-neutral-color-lighter-gray); + --underline-background-color: #CBF3F0; + font-size: .8em; +} + +.chooser-mini .explainer .license-graphics { + display: flex; + justify-content: space-between; + opacity: .7; +} + + +.chooser-mini .explainer .license-icons svg { + font-size: 1.3em; + display: inline; + width: 1.9em; + height: 1.9em; + margin-right: .1em; +} + +.chooser-mini .explainer img.license-badge { + /* width: 120px; */ + /* height: 42px; */ + height: 2.7em; +} + +.chooser-mini .explainer p { + margin-top: 1.7em; + line-height: 1.6; +} + +.chooser-mini .explainer .license-info-nav ul { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + + list-style: none; +} + + + +body { + /* grid-template-columns: 2% 6% 6% 6% 15% 30% 15% 6% 6% 6% 2%; */ +} + + +body > header .masthead { + --vocabulary-page-edges-space: 2%; + padding-top: 20px; + +} + +body > header .masthead h1 { + font-size: 2em; +} + +body > header .masthead .identity-logo.product { + /* text-indent: 84px; */ + /* line-height: 72px; */ + line-height: 50px; + text-indent: 65px; + + font-family: 'Source Sans Pro'; + font-weight: 600; +} + +body > header .masthead .identity-logo.product .slash { + padding: 0 .2em; + + font-family: Times; + font-size: .7em; + line-height: 1em; + + +} + +body > header .masthead h1 a:before { + /* width: 80px; + height: 80px; */ + + width: 60px; + height: 60px; +} + + + +body > header .masthead .identity-logo.product { + color: #324c7f; + color: #414040; +} + +body > header .masthead .identity-logo.product:hover { + color: purple; + /* text-decoration: underline; */ +} + + +body > header .masthead .identity-logo.product:before { + background-color: #324c7f; + background-color: #414040; +} + + +body.mini-chooser > header, body.mini-chooser main > header { + /* display: none; */ +} + +body > header .masthead .primary-menu ul li { + margin-left: 3em; +} + +body > header .masthead .primary-menu ul li a { + font-family: 'Source Sans Pro'; + text-transform: capitalize; + text-transform: lowercase; + font-weight: 600; + color: black; + font-size: 1.4em; + + color: #324c7f; + color: #414040; + +} + +body > header .masthead .primary-menu ul li a:hover { + color: purple; + text-decoration: underline; +} + +body > header .masthead .primary-menu ul li a.donate { + padding: .5em .7em; + + color: #62327F; + color: #bb377e; + background: #E4CBF3; + background: #fee9f9; + border-radius: 5px; +} + +body > header .masthead .primary-menu ul li a.donate:hover { + color: white; + background: #bb377e; + text-decoration: none; + +} + +body > header .masthead .primary-menu ul li a.donate:before { + --icon-sprite-color: #62327F; + --icon-sprite-color: #bb377e; + --icon-sprite-size: .7em; + + margin-right: .3em; + + /* margin-top: 6px; */ +} + +body > header .masthead .primary-menu ul li a.donate:hover:before{ + --icon-sprite-color: white; +} + +body.mini-chooser main > header { + display: none; +} + +body.mini-chooser main > header h1 { + font-family: "DM Serif Display", serif; + font-weight: 400; + font-style: normal; + /* font-size: 4em; */ +} + + +body.mini-chooser > footer { + display: none; +} + +body.mini-chooser .test { + grid-column: 3 / span 7; + margin-top: 4em; + margin-top: 2em; + margin-bottom: 8em; + position: relative; + + /* background: black; */ +} + +body.mini-chooser .test p { + margin-bottom: .5em; + + font-family: "DM Serif Display", serif; + font-weight: 400; + font-style: normal; + font-size: 5em; + line-height: .3em; +} + +body.mini-chooser .test p.third { + margin-top: 2em; + font-size: 3em; +} + +body.mini-chooser .test a { + /* --underline-color: white; */ + background: none; + color: #2EC4B6; + font-style: italic; +} + +body.mini-chooser .test p.second a { + color: #8338be; +} + +body.mini-chooser .test p.fourth { + width: 40%; + margin-top: 2em; + font-size: 1.5em; + font-style: italic; + line-height: 1.2em; +} + + +body.mini-chooser .test .img { + position: absolute; + top: .2em; + right: -100px; + width: 400px; + height: 500px; + + background: black; +} + +body.mini-chooser { + grid-template-columns: 2% 6% 6% 6% 15% 30% 15% 6% 6% 6% 2%; +} \ No newline at end of file diff --git a/specimen/style.css b/specimen/style.css index 2231bd96..d29bf86d 100644 --- a/specimen/style.css +++ b/specimen/style.css @@ -1,2 +1,147 @@ @import '../src/css/vocabulary.css' layer(vocabulary); @import '../specimen/tests/grid-test.css' layer(vocabulary); + + +/* narrative-index context sandbow */ + + +body.narrative-index > header .masthead { + --vocabulary-page-edges-space: 2%; + padding-top: 20px; +} + +body.narrative-index > header .masthead .primary-menu ul li { + margin-left: 3em; +} + +body.narrative-index > header .masthead .primary-menu ul li a { + font-family: "DM Sans", sans-serif; + font-family: 'Source Sans Pro'; + font-size: 1.4em; + font-optical-sizing: auto; + font-style: normal; + text-transform: lowercase; + font-weight: 600; + color: #414040; +} + +body.narrative-index > header .masthead .primary-menu ul li a:hover { + color: var(--vocabulary-core-color-seafoam); + text-decoration: underline; +} + + +body.narrative-index > header .masthead .primary-menu ul li a.donate { + padding: .5em .7em; + + color: #62327F; + color: #bb377e; + background: #E4CBF3; + background: #fee9f9; + border-radius: 5px; + + /* color: var(--vocabulary-core-color-seafoam); + background: var(--vocaulary-core-color-soft-seafoam); */ +} + +body.narrative-index > header .masthead .primary-menu ul li a.donate:hover { + color: white; + background: #bb377e; + text-decoration: none; + + +} + +body.narrative-index > header .masthead .primary-menu ul li a.donate:before { + --icon-sprite-color: #62327F; + --icon-sprite-color: #bb377e; + --icon-sprite-size: .7em; + + margin-right: .3em; + + /* margin-top: 6px; */ +} + +body.narrative-index > header .masthead .primary-menu ul li a.donate:hover:before{ + --icon-sprite-color: white; +} + +body.narrative-index main h2 { + text-align: center; + /* color: #324c7f; */ + /* color: #414040; */ + font-family: "DM Serif Display", serif; + font-weight: 400; + font-style: normal; + font-size: 4em; +} + +body.narrative-index main a { + color: var(--vocabulary-core-color-seafoam); +} + +body.narrative-index .topic-summary.campaign { + grid-column: 4 / span 5; +} + +body.narrative-index .topic-summary.campaign p { + margin-bottom: .5em; + + font-family: "DM Serif Display", serif; + font-weight: 400; + font-style: normal; + font-size: 5em; + line-height: .3em; + text-transform: lowercase; + + background: white; +} + +body.narrative-index .topic-summary.campaign p.third { + margin-top: 2em; + font-size: 3em; +} + +body.narrative-index .topic-summary.campaign p.fourth { + display: none; + + width: 40%; + margin-top: 2em; + font-size: 1.5em; + font-style: italic; + line-height: 1.2em; +} + +body.narrative-index .topic-summary.campaign .medium { + color: var(--vocabulary-core-color-rich-purple); +} + +body.narrative-index .topic-summary.campaign .action { + color: var(--vocabulary-core-color-rich-purple); +} + +body.narrative-index .topic-summary.about { + margin-bottom: 8em; +} + + +body.narrative-index .topic-summary a.learn-more { + --underline-background-color: var(--vocaulary-core-color-soft-purple); + + padding: .5em .7em; + + font-family: 'Source Sans Pro'; + font-size: 1.5em; + font-weight: 600; + color: var(--vocabulary-core-color-rich-purple); + background: var(--vocaulary-core-color-soft-purple); + border-radius: 5px; + +} + +body.narrative-index .topic-summary a.learn-more:hover { + --underline-background-color: var(--vocaulary-core-color-rich-purple); + + color: white; + background: var(--vocabulary-core-color-rich-purple); +} diff --git a/src/css/library-vars.css b/src/css/library-vars.css index ff5e39b1..b5b834a7 100644 --- a/src/css/library-vars.css +++ b/src/css/library-vars.css @@ -81,6 +81,44 @@ --vocabulary-neutral-color-lighter-gray: #F5F5F5; --vocabulary-neutral-color-dark-gray: #767676; + + + /* new palette */ + + --vocabulary-core-color-seafoam: #2d827a; + --vocaulary-core-color-soft-seafoam: #D6EDE7; + --vocabulary-core-color-rich-seafoam: #2EC4B6; + + --vocabulary-core-color-desat-seafoam: #3CAEA3; + + + --vocabulary-core-color-blue: #324c7f; + --vocaulary-core-color-soft-blue: #CBF3F0; + --vocabulary-core-colore-rich-blue: #2C5DDC; + + --vocabulary-core-color-purple: #62327F; + --vocaulary-core-color-soft-purple: #E4CBF3; + --vocabulary-core-color-rich-purple: #7d36b6; + + --vocabulary-core-color-magenta: #bb377e; + --vocaulary-core-color-soft-magenta: #fee9f9; + --vocabulary-core-colore-rich-magenta: #E52A8F; + + --vocabulary-core-neutral-lighter-gray: #F5F5F5; + --vocabulary-core-neutral-dark-gray: #767676; + --vocabulary-core-neutral-darker-gray: #414040; + + --vocabulary-attention-color-red:#C1341B; + --vocabulary-attention-color-yellow: #EFB22D; + --vocabulary-attention-color-peach: #FEDBC2; + + --vocabulary-custom-color-green:#6B8369; + --vocabulary-custom-color-soft-green: #9FAB9E; + --vocabulary-custom-color-rich-green: #46B33D; + + + + /* brand typsetting */ --vocabulary-brand-typeset-nav-family: "Roboto Condensed"; --vocabulary-brand-typeset-nav-weight: bold; diff --git a/src/css/vocabulary.css b/src/css/vocabulary.css index 678fe3b6..07763fe8 100644 --- a/src/css/vocabulary.css +++ b/src/css/vocabulary.css @@ -206,6 +206,12 @@ a.more { } +/* topic-summary component - singular */ + +.topic-summary { + text-align: center; +} + /*
level context */ main { diff --git a/src/js/vocabulary.js b/src/js/vocabulary.js index fe2885e4..c1a213b1 100644 --- a/src/js/vocabulary.js +++ b/src/js/vocabulary.js @@ -1,12 +1,11 @@ -const exploreButton = document.querySelector('button.explore'); -const explorePanel = document.querySelector('.explore-panel'); +// const exploreButton = document.querySelector('button.explore'); +// const explorePanel = document.querySelector('.explore-panel'); // explorePanel.classList.add('hide'); -exploreButton.addEventListener('click', (event) => { - explorePanel.classList.toggle('expand'); - // explorePanel.classList.toggle('hide'); -}); +// exploreButton.addEventListener('click', (event) => { +// explorePanel.classList.toggle('expand'); +// }); const menuButton = document.querySelector('button.expand-menu');