From 1529db1e115f15df17e774bed8c903e421c7e3c3 Mon Sep 17 00:00:00 2001 From: Timid Robot Zehta Date: Fri, 18 Oct 2024 08:37:41 -0700 Subject: [PATCH] update vocabulary to https://github.com/creativecommons/vocabulary/tree/746a0de69dd10d04f7d270d1c861bc61cab3c513 --- .../static/vocabulary/css/library-vars.css | 58 ++++----- legal_db/static/vocabulary/css/vocabulary.css | 113 +++++++----------- legal_db/static/vocabulary/js/vocabulary.js | 21 ++-- 3 files changed, 85 insertions(+), 107 deletions(-) diff --git a/legal_db/static/vocabulary/css/library-vars.css b/legal_db/static/vocabulary/css/library-vars.css index ff5e39b..dc1c99f 100644 --- a/legal_db/static/vocabulary/css/library-vars.css +++ b/legal_db/static/vocabulary/css/library-vars.css @@ -26,9 +26,9 @@ font-style: normal; font-weight: 400; font-display: swap; - src: url(../fonts/SourceSansPro-Regular.woff2) format("woff2"), - url(../fonts/SourceSansPro-Regular.woff) format("woff"), - url(../fonts/SourceSansPro-Regular.otf) format("opentype"); + src: url('../fonts/SourceSansPro-Regular.woff2') format("woff2"), + url('../fonts/SourceSansPro-Regular.woff') format("woff"), + url('../fonts/SourceSansPro-Regular.otf') format("opentype"); } @font-face { @@ -36,9 +36,9 @@ font-style: normal; font-weight: 600; font-display: swap; - src: url(../fonts/SourceSansPro-SemiBold.woff2) format("woff2"), - url(../fonts/SourceSansPro-SemiBold.woff) format("woff"), - url(../fonts/SourceSansPro-SemiBold.otf) format("opentype"); + src: url('../fonts/SourceSansPro-SemiBold.woff2') format("woff2"), + url('../fonts/SourceSansPro-SemiBold.woff') format("woff"), + url('../fonts/SourceSansPro-SemiBold.otf') format("opentype"); } @font-face { @@ -46,9 +46,9 @@ font-style: normal; font-weight: 700; font-display: swap; - src: url(../fonts/SourceSansPro-Bold.woff2) format("woff2"), - url(../fonts/SourceSansPro-Bold.woff) format("woff"), - url(../fonts/SourceSansPro-Bold.otf) format("opentype"); + src: url('../fonts/SourceSansPro-Bold.woff2') format("woff2"), + url('../fonts/SourceSansPro-Bold.woff') format("woff"), + url('../fonts/SourceSansPro-Bold.otf') format("opentype"); } @font-face { @@ -56,7 +56,7 @@ font-style: normal; font-weight: 400; font-display: swap; - src: url(../fonts/CCAccidenzCommons-medium.otf) format("opentype"); + src: url('../fonts/CCAccidenzCommons-medium.otf') format("opentype"); } @@ -132,27 +132,27 @@ --icon-sprite-size: 1em; /* cc sprite names */ - --cc-logo: url('./../svg/cc/icons/cc-icons.svg#cc-logo'); - --cc-heart: url('./../svg/cc/icons/cc-icons.svg#cc-heart'); - --cc-heart-filled: url('./../svg/cc/icons/cc-icons.svg#cc-heart-filled'); - --cc-quote: url('./../svg/cc/icons/cc-icons.svg#cc-quote'); + --cc-logo: url('../svg/cc/icons/cc-icons.svg#cc-logo'); + --cc-heart: url('../svg/cc/icons/cc-icons.svg#cc-heart'); + --cc-heart-filled: url('../svg/cc/icons/cc-icons.svg#cc-heart-filled'); + --cc-quote: url('../svg/cc/icons/cc-icons.svg#cc-quote'); /* font awesome sprite names */ - --fa-angle-down: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-down'); - --fa-angle-left: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-left'); - --fa-angle-right: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-right'); - --fa-angle-up: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-up'); - --fa-globe: url('./../svg/font-awesome/icons/fa-icons.svg#fa-globe'); - --fa-heart: url('./../svg/font-awesome/icons/fa-icons.svg#fa-heart'); - --fa-info: url('./../svg/font-awesome/icons/fa-icons.svg#fa-info'); - --fa-right-angle: url('./../svg/font-awesome/icons/fa-icons.svg#fa-right-angle'); - --fa-search: url('./../svg/font-awesome/icons/fa-icons.svg#fa-search'); - - --fa-instagram: url('./../svg/font-awesome/icons/fa-icons.svg#fa-instagram'); - --fa-twitter: url('./../svg/font-awesome/icons/fa-icons.svg#fa-twitter'); - --fa-facebook: url('./../svg/font-awesome/icons/fa-icons.svg#fa-facebook'); - --fa-linkedin: url('./../svg/font-awesome/icons/fa-icons.svg#fa-linkedin'); - --fa-mastodon: url('./../svg/font-awesome/icons/fa-icons.svg#fa-mastodon'); + --fa-angle-down: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-down'); + --fa-angle-left: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-left'); + --fa-angle-right: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-right'); + --fa-angle-up: url('../svg/font-awesome/icons/fa-icons.svg#fa-angle-up'); + --fa-globe: url('../svg/font-awesome/icons/fa-icons.svg#fa-globe'); + --fa-heart: url('../svg/font-awesome/icons/fa-icons.svg#fa-heart'); + --fa-info: url('../svg/font-awesome/icons/fa-icons.svg#fa-info'); + --fa-right-angle: url('../svg/font-awesome/icons/fa-icons.svg#fa-right-angle'); + --fa-search: url('../svg/font-awesome/icons/fa-icons.svg#fa-search'); + + --fa-instagram: url('../svg/font-awesome/icons/fa-icons.svg#fa-instagram'); + --fa-twitter: url('../svg/font-awesome/icons/fa-icons.svg#fa-twitter'); + --fa-facebook: url('../svg/font-awesome/icons/fa-icons.svg#fa-facebook'); + --fa-linkedin: url('../svg/font-awesome/icons/fa-icons.svg#fa-linkedin'); + --fa-mastodon: url('../svg/font-awesome/icons/fa-icons.svg#fa-mastodon'); } diff --git a/legal_db/static/vocabulary/css/vocabulary.css b/legal_db/static/vocabulary/css/vocabulary.css index 9fcc32a..7b9f448 100644 --- a/legal_db/static/vocabulary/css/vocabulary.css +++ b/legal_db/static/vocabulary/css/vocabulary.css @@ -43,9 +43,9 @@ EX: /* typography */ body { - /* display: grid; + display: grid; grid-template-columns: 5% 3% 6% 6% 15% 30% 15% 6% 6% 3% 5%; - overflow-x: hidden; */ + overflow-x: hidden; font-weight: 400; -moz-osx-font-smoothing: grayscale; @@ -202,14 +202,9 @@ a.more { /* .posts .related variant context */ -.posts.related { - -} - /*
level context */ main { - display: grid; grid-template-columns: subgrid; width: 100%; @@ -339,8 +334,8 @@ main > aside.sidebar nav.filter-menu ul li.current a { main > aside.sidebar nav ul { margin: 0; padding: 0; + text-indent: none; - list-style: none; font-size: 1rem; font-weight: 700; @@ -543,12 +538,12 @@ main aside.closing { width: 100%; 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); - } +} main aside.closing p { margin :0; @@ -558,7 +553,7 @@ main aside.closing p { font-style: normal; font-weight: 400; line-height: 150%; - } +} main .pub-date { display: inline-block; @@ -590,8 +585,9 @@ main article.tags ul li { main article.tags ul li:after { - content: ','; margin-left: .1em; + + content: ','; } main article.tags ul li:last-child:after { @@ -624,8 +620,6 @@ main article.posts.related ul { list-style: none; font-size: initial; - - } main article.posts.related ul li { @@ -669,8 +663,8 @@ main nav.pagination ol { width: 100%; margin: 0; padding: 0; + text-indent: none; - font-size: 1em; list-style: none; } @@ -719,11 +713,11 @@ main .attribution-list button.expand-attribution { position: absolute; top: 4.5em; right: 4em; + padding: .5em; cursor: pointer; border: 1px solid black; border-radius: 3px; - padding: .5em; font-family: "Source Sans Pro"; } @@ -792,7 +786,6 @@ body > header .masthead { flex-wrap: wrap; align-items: baseline; position: relative; - width: 100%; /* padding-top: 3%; */ padding-top: 40px; @@ -821,14 +814,14 @@ body > header .masthead .identity-logo { /* 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-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; */ + /* background: url('../svg/cc/logos/cc/logomark.svg') left top no-repeat; */ } body > header .masthead .identity-logo:hover { @@ -859,11 +852,11 @@ body > header .masthead .identity-logo:hover { body > header .masthead .identity-logo.product { width: initial; position: relative; - text-indent: 42px; padding-top: 7px; box-sizing: border-box; text-decoration: none; + text-indent: 42px; font-family: "CC Accidenz Commons"; font-weight: normal; text-transform: lowercase; @@ -885,8 +878,8 @@ body > header .masthead .identity-logo.product:before { top: .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-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; @@ -942,7 +935,7 @@ body > header button.expand-menu { display: none; } -body > header .ancilliary-menu { +body > header .ancillary-menu { position: absolute; top: 0; /* right: var(--vocabulary-page-edges-space); */ @@ -955,7 +948,7 @@ body > header .ancilliary-menu { /* font-size: 1em; */ } -body > header .ancilliary-menu ul { +body > header .ancillary-menu ul { display: flex; margin: 0; padding: 0; @@ -963,35 +956,34 @@ body > header .ancilliary-menu ul { list-style: none; } -body > header .ancilliary-menu ul li { +body > header .ancillary-menu ul li { margin-left: 10px; } -body > header .ancilliary-menu ul li a { +body > header .ancillary-menu ul li a { /* generalize this */ display: inline-block; } -body > header .ancilliary-menu ul li a, -.ancilliary-menu ul li button { +body > header .ancillary-menu ul li a, +.ancillary-menu ul li button { margin-top: 10px; } -body > header .ancilliary-menu ul li button:hover { +body > header .ancillary-menu ul li button:hover { cursor: pointer; } -body > header .ancilliary-menu button.locale { +body > header .ancillary-menu button.locale { display: inline-flex; align-items: center; padding: 6px 10px; - background: var(--vocabulary-neutral-color-lighter-gray); border: none; border-radius: 3px; } -body > header .ancilliary-menu button.locale.icon-attach:before { +body > header .ancillary-menu button.locale.icon-attach:before { --icon-sprite: var(--fa-globe); --icon-sprite-size: .8em; @@ -1000,7 +992,7 @@ body > header .ancilliary-menu button.locale.icon-attach:before { opacity: .3; } -body > header .ancilliary-menu a.donate { +body > header .ancillary-menu a.donate { display: inline-flex; align-items: center; padding: 6px 10px; @@ -1011,7 +1003,7 @@ body > header .ancilliary-menu a.donate { border-radius: 3px; } -.ancilliary-menu a.donate.icon-attach:before { +.ancillary-menu a.donate.icon-attach:before { --icon-sprite: var(--fa-heart); --icon-sprite-color: var(--vocabulary-brand-color-dark-tomato); --icon-sprite-size: .8em; @@ -1019,7 +1011,7 @@ body > header .ancilliary-menu a.donate { margin-right: .8em; } -body > header .ancilliary-menu a.search { +body > header .ancillary-menu a.search { display: inline-flex; align-items: center; padding: 6px 10px; @@ -1032,14 +1024,14 @@ body > header .ancilliary-menu a.search { border-radius: 3px; } -body > header .ancilliary-menu a.search.icon-attach:before { +body > header .ancillary-menu a.search.icon-attach:before { --icon-sprite: var(--fa-search); --icon-sprite-size: .8em; margin-right: .8em; } -body > header .ancilliary-menu button.explore { +body > header .ancillary-menu button.explore { margin-top: 0; padding-top: 16px; padding-bottom: 6px; @@ -1067,6 +1059,7 @@ body > header .explore-panel { .explore-panel.expand { display: inherit; + transition: display 2s ease-in-out; } @@ -1076,7 +1069,6 @@ body > header .explore-panel aside { body > header .explore-panel aside .identity-logo { display: inline-block; - text-indent: -1000px; vertical-align: bottom; height: 50px; width: 191px; @@ -1084,22 +1076,21 @@ body > header .explore-panel aside .identity-logo { /* 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-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; + text-indent: -1000px; /* standard pattern for setting logo in lieu of background color manipulation */ - /* background: url('../../svg/cc/logos/cc/logomark.svg') left top no-repeat; */ - + /* 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; - } body > header .explore-panel aside p { @@ -1114,19 +1105,16 @@ body > header .explore-panel .explore-menu { 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; list-style: none; - } body > header .explore-panel nav ul li a { @@ -1287,14 +1275,14 @@ body > footer .identity-logo { /* 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-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; */ + /* background: url('../svg/cc/logos/cc/logomark.svg') left top no-repeat; */ } body > footer .identity-logo:hover { @@ -1320,7 +1308,6 @@ body > footer .footer-menu ul { body > footer .footer-menu ul li a { text-decoration: none; color: var(--vocabulary-brand-color-turquoise); - } body > footer .contact { @@ -1334,7 +1321,6 @@ body > footer .contact .social-menu ul { margin-top: 3em; list-style: none; - } body > footer .contact .social-menu ul li { @@ -1374,7 +1360,6 @@ body > footer .subscribe form input { border: 2px solid rgb(118, 118, 118);; /* border-radius: 4px; */ box-shadow: none; - } body > footer .subscribe form input.input { @@ -1430,7 +1415,6 @@ body > footer .donate a.donate { body > footer .donate a.donate:hover { cursor: pointer; - background-color: rgb(248, 204, 44); } @@ -1459,12 +1443,7 @@ body > footer .license svg { margin-right: .3em; } - /* archive-page context */ -.archive-page main { - - -} /* blog-index context */ @@ -1585,7 +1564,6 @@ body > footer .license svg { font-style: normal; font-weight: 700; font-size: 1em; - } .search-index .search-form form input { @@ -1598,7 +1576,6 @@ body > footer .license svg { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border: 2px solid black; - } .search-index .search-form form button { @@ -1736,9 +1713,7 @@ body > footer .license svg { .person-page main > header h1 { grid-column-start: 2; - margin-bottom: .1em; - } .person-page main > header .title { @@ -1754,6 +1729,7 @@ body > footer .license svg { .person-page main > header .pronouns { grid-column-start: 2; margin-bottom: 1em; + font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; @@ -1765,7 +1741,6 @@ body > footer .license svg { position: absolute; margin: 0; padding:0; - top: 3.4em; left: 0; width: 30%; @@ -1773,8 +1748,8 @@ body > footer .license svg { .person-page main > header figure img { box-sizing: border-box; - width: 100%; + max-height: 21.8rem; border: 16px solid white; } @@ -1783,7 +1758,6 @@ body > footer .license svg { grid-column-start: 2; font-size: .9em; - } .person-page main > header p { @@ -1870,7 +1844,7 @@ body > footer .license svg { top: 4.5em; right: 0; display: inline-block; - padding: .3em .5em; + padding: .5rem 1rem; border: none; border-radius: 5px; background: #F5F5F5; @@ -1879,7 +1853,6 @@ body > footer .license svg { font-style: normal; font-weight: 700; font-size: 1em; - padding: .5rem 1rem; } body > header .primary-menu { @@ -1902,6 +1875,7 @@ body > footer .license svg { body > header .primary-menu.expand ul li { margin: 0; padding: 1em 0; + border-top: 1px solid rgba(1,1,1,.1); } @@ -2054,8 +2028,7 @@ body > footer .license svg { } @media (max-width:340px) { - body > header .ancilliary-menu button:before, body > header .ancilliary-menu a:before { + body > header .ancillary-menu button:before, body > header .ancillary-menu a:before { display: none; } } - diff --git a/legal_db/static/vocabulary/js/vocabulary.js b/legal_db/static/vocabulary/js/vocabulary.js index fe2885e..2f32af6 100644 --- a/legal_db/static/vocabulary/js/vocabulary.js +++ b/legal_db/static/vocabulary/js/vocabulary.js @@ -2,20 +2,25 @@ const exploreButton = document.querySelector('button.explore'); const explorePanel = document.querySelector('.explore-panel'); // explorePanel.classList.add('hide'); +if(exploreButton!==null && explorePanel!==null) { + exploreButton.addEventListener('click', (event) => { + explorePanel.classList.toggle('expand'); + // explorePanel.classList.toggle('hide'); + }); +} -exploreButton.addEventListener('click', (event) => { - explorePanel.classList.toggle('expand'); - // explorePanel.classList.toggle('hide'); -}); const menuButton = document.querySelector('button.expand-menu'); const menuPanel = document.querySelector('.primary-menu'); -menuButton.addEventListener('click', (event) => { - menuPanel.classList.toggle('expand'); - // explorePanel.classList.toggle('hide'); -}); +if(menuButton !== null && menuPanel !== null) { + menuButton.addEventListener('click', (event) => { + menuPanel.classList.toggle('expand'); + // explorePanel.classList.toggle('hide'); + }); +} + const attributionButton = document.querySelector('button.expand-attribution');