mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-06-12 13:41:40 +00:00
📄 Add Detail Pages for Definitions (#75)
* fix: untrack definitions in dist * feat(detail pages): update item link * feat(detail pages): add layout * feat(detail pages): render whole definition content * feat(detail pages): remove definitons from homepage * 🧹 def list component * feat(layout): render site footer in all pages * feat(detail pages): rename definition root class && move css into partials * chore: abstract further css into own files * feat(detail pages): update headling level of definition content * feat(styles): set box sizing * feat(styles): add margin bottom utility * feat(styles): selection * feat(components): sub page header own component * feat(detail pages): add sections * feat(style): mian headline * feat(page layout): rename page content grid * feat(page layout): add wide content class * feat(detail pages): set document title * feat(detail pages): set uniform document title for docs and definitions * feat(page title): add comment * feat(detail pages): add meta description * feat(detail pages): wrap def header in article tag * chore: set up ava * feat(filters): move permalink function into file, add test * chore: rename _temp to _util, remove creation script * feat(detail pages): helper function to find additional definitions * chore: move helpers to single directory * feat(detail pages): create shortcode for further definition navigation * feat(detail pages): fix find defs function * feat(detail pages): shortcode for browse nav markup * chore: fix collection mock data * feat(detail pages): render browse nav * feat(detail pages): style browse nav, style improvements * feat(detail pages): test redirect * feat(detail pages): client side redirect * feat(homepage): set title * 💅 * feat(detail pages): incorporate design changes * feat(detail pages): hide browse headlines * feat(detail pages): label lists * feat(footer): add aria label * feat(detail pages): redice heading level in md * feat(detail pages): spacing in browse nav * feat(detail pages): reduce line height * feat(detail pages): set max width w/o breaking homepage * feat(detail pages): replace in-definition definition links * 🧹 * feat(detail pages): recover spacing utility * 🧹 * chore(packages): update ava * config: specify nvm version * 💅 * 💅
This commit is contained in:
Oscar
@ -1,45 +1,32 @@
|
||||
@charset 'UTF-8';
|
||||
@import '~prism-themes/themes/prism-a11y-dark';
|
||||
|
||||
// 1. Configuration and helpers
|
||||
@import
|
||||
'abstracts/variables',
|
||||
'abstracts/functions',
|
||||
'abstracts/mixins',
|
||||
@import 'abstracts/variables', 'abstracts/functions', 'abstracts/mixins',
|
||||
'abstracts/universal-selector';
|
||||
|
||||
// 2. Vendors
|
||||
// @import
|
||||
// 'vendors/normalize';
|
||||
// 'vendors/normalize';
|
||||
|
||||
// 3. Base stuff
|
||||
@import
|
||||
'base/custom-properties',
|
||||
'base/fonts',
|
||||
'base/base',
|
||||
'base/typography',
|
||||
'base/helpers';
|
||||
@import 'base/custom-properties', 'base/fonts', 'base/base', 'base/selection',
|
||||
'base/typography', './base/a', 'base/helpers';
|
||||
|
||||
// 4. Layout-related sections
|
||||
@import
|
||||
'structures/header',
|
||||
'structures/footer',
|
||||
'structures/grid',
|
||||
'structures/multi-column',
|
||||
'structures/table-of-content';
|
||||
@import 'structures/header', 'structures/footer', 'structures/grid',
|
||||
'structures/multi-column', 'structures/table-of-content',
|
||||
'./structures/definition-content', './structures/definition-navigation';
|
||||
|
||||
// 5. Components
|
||||
@import
|
||||
'components/word',
|
||||
'components/lists',
|
||||
'components/definitions',
|
||||
@import 'components/word', 'components/lists', 'components/definitions',
|
||||
'components/flag';
|
||||
|
||||
// 5.1 Code Highlighting
|
||||
@import '~prism-themes/themes/prism-a11y-dark';
|
||||
|
||||
// 6. Page-specific styles
|
||||
// @import
|
||||
// 'pages/home';
|
||||
@import './layouts/pages';
|
||||
|
||||
// 7. Themes
|
||||
// @import
|
||||
// 'themes/default';
|
||||
|
||||
|
||||
16
assets/css/base/_a.scss
Normal file
16
assets/css/base/_a.scss
Normal file
@ -0,0 +1,16 @@
|
||||
a {
|
||||
border-bottom: $dark-grey solid 0.1em;
|
||||
color: $black;
|
||||
font-family: $ext-sans;
|
||||
margin: 1rem 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-bottom: $primary-color solid 0.1rem;
|
||||
}
|
||||
&:focus {
|
||||
outline: pxToRem(3) solid $primary-color;
|
||||
outline-offset: pxToRem(5);
|
||||
}
|
||||
}
|
||||
@ -6,44 +6,9 @@ body {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: $ext-sans;
|
||||
font-weight: $bold;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: $dark-grey solid 0.1em;
|
||||
color: $black;
|
||||
font-family: $ext-sans;
|
||||
margin: 1rem 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
border-bottom: $primary-color solid 0.1rem;
|
||||
}
|
||||
&:focus {
|
||||
outline: pxToRem(3) solid $primary-color;
|
||||
outline-offset: pxToRem(5);
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: $dark-grey;
|
||||
border: 1px solid $black;
|
||||
border: pxToRem(1px) solid $black;
|
||||
border-radius: 0.25em;
|
||||
color: $white;
|
||||
font-size: 95%;
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.style__italics {
|
||||
font-style: italic;
|
||||
.u-margin-bottom-double {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.75em;
|
||||
.style__italics {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.help {
|
||||
@ -16,3 +16,13 @@
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(100%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
4
assets/css/base/_selection.scss
Normal file
4
assets/css/base/_selection.scss
Normal file
@ -0,0 +1,4 @@
|
||||
::selection {
|
||||
background-color: #000000cc;
|
||||
color: white;
|
||||
}
|
||||
@ -1,6 +1,72 @@
|
||||
h1 {
|
||||
font-family: $ext-sans;
|
||||
font-weight: $bold;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.title__thicc {
|
||||
// a sensible base font size
|
||||
font-size: 3rem;
|
||||
line-height: 0.75;
|
||||
margin: 0.5rem 0rem;
|
||||
padding: 0;
|
||||
// transform: rotateZ(90deg);
|
||||
// margin: 13rem -7rem;
|
||||
}
|
||||
|
||||
@media (min-width: 51rem) and (min-height: 400px) {
|
||||
// a dramatic font size
|
||||
.title__thicc {
|
||||
font-size: 12vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 51rem) and (min-height: 850px) {
|
||||
// cap the max-height of the title
|
||||
// at the same size that 12vh computes to
|
||||
// when the viewport is 850px high
|
||||
.title__thicc {
|
||||
font-size: 6.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.title__thicc {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.title__thicc + p {
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.main-headline {
|
||||
font-family: orpheuspro, Palatino, Times, serif;
|
||||
font-size: 3.5rem;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: $ext-sans;
|
||||
font-weight: $regular;
|
||||
grid-column: span 2;
|
||||
letter-spacing: 0.1;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
11
assets/css/base/_universal-selector.scss
Normal file
11
assets/css/base/_universal-selector.scss
Normal file
@ -0,0 +1,11 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -4,8 +4,8 @@
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
margin: 0.5rem 0.75rem 0.25rem 0;
|
||||
padding: 0.45rem 0.65rem;
|
||||
margin: 0.50rem 0.75rem 0.25rem 0;
|
||||
text-transform: lowercase;
|
||||
|
||||
&:before {
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0 0 0 1em;
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0 0 0 1em;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding-bottom: 0.5em;
|
||||
|
||||
&.subterm {
|
||||
padding-left: pxToRem(10);
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding-bottom: 0.5em;
|
||||
|
||||
&.subterm {
|
||||
padding-left: pxToRem(10);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.subterm:before {
|
||||
content: '\21B3';
|
||||
padding-right: pxToRem(5);
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.subterm:before {
|
||||
content: '\21B3';
|
||||
padding-right: pxToRem(5);
|
||||
}
|
||||
}
|
||||
|
||||
.list-semicolon {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -34,4 +34,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
38
assets/css/layouts/_pages.scss
Normal file
38
assets/css/layouts/_pages.scss
Normal file
@ -0,0 +1,38 @@
|
||||
.page {
|
||||
align-items: start;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
& > * {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.article-content {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
|
||||
@media (min-width: 800px) {
|
||||
grid-template-columns: 10rem 45rem;
|
||||
}
|
||||
}
|
||||
|
||||
.wide-content {
|
||||
@media (min-width: 800px) {
|
||||
display: grid;
|
||||
grid-gap: 5rem;
|
||||
grid-template-columns: 10rem 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.definition {
|
||||
max-width: 47rem;
|
||||
}
|
||||
|
||||
.definition__further-definitions_nav {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.definition__header {
|
||||
font-family: orpheuspro, Palatino, Times, serif;
|
||||
}
|
||||
129
assets/css/structures/_definition-content.scss
Normal file
129
assets/css/structures/_definition-content.scss
Normal file
@ -0,0 +1,129 @@
|
||||
.definition-content {
|
||||
--word-signal-color: currentColor;
|
||||
--marker-height: 0.25rem;
|
||||
|
||||
&__title {
|
||||
font-family: $serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
align-items: stretch;
|
||||
|
||||
& + & {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
// align-items: flex-start;
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
|
||||
& > * {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
& > p {
|
||||
font-family: $sans-serif;
|
||||
font-size: 1.5rem;
|
||||
grid-column: 1 / -1;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
& h2 {
|
||||
flex: 0 1 auto;
|
||||
font-family: $con-sans;
|
||||
font-size: 0.85rem;
|
||||
font-weight: normal;
|
||||
grid-column: 1;
|
||||
text-transform: uppercase;
|
||||
transform: translateY(0.4em);
|
||||
|
||||
@supports (display: grid) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
& h2,
|
||||
& h2 + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
& h2 ~ p,
|
||||
& h2 ~ ul {
|
||||
font-size: inherit;
|
||||
// border-left: 0.1rem solid lightgrey;
|
||||
// padding-left: 1rem;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__speech {
|
||||
// font-size: 0.5em;
|
||||
font-family: $sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__signal {
|
||||
border-top: 0.15rem solid var(--word-signal-color);
|
||||
color: var(--word-signal-color);
|
||||
display: block;
|
||||
font-family: $ext-sans;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
&--avoid {
|
||||
--word-signal-color: #a40000;
|
||||
|
||||
&:before {
|
||||
@include icon__avoid();
|
||||
@include icon__hanging();
|
||||
}
|
||||
}
|
||||
|
||||
&--better {
|
||||
--word-signal-color: green;
|
||||
|
||||
&:before {
|
||||
@include icon__alt();
|
||||
@include icon__hanging();
|
||||
}
|
||||
}
|
||||
|
||||
&--tool {
|
||||
&:before {
|
||||
@include icon__tool();
|
||||
@include icon__hanging();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.definition-content__type {
|
||||
font-family: $con-sans;
|
||||
font-size: 0.85rem;
|
||||
padding-right: 1rem;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.definition-content__link {
|
||||
border-bottom: darkgrey solid 0.1em;
|
||||
color: black;
|
||||
font-family: $ext-sans;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.definition-content__breakdown {
|
||||
border-left: 0.1rem solid lightgrey;
|
||||
font-family: $sans-serif;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
33
assets/css/structures/_definition-navigation.scss
Normal file
33
assets/css/structures/_definition-navigation.scss
Normal file
@ -0,0 +1,33 @@
|
||||
.definition-navigation {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
& > div {
|
||||
flex: 0 1 15rem;
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
display: grid;
|
||||
grid-gap: 1.5rem;
|
||||
grid-template-columns: repeat(auto-fill, 15rem);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.definition-navigation__sub-headline {
|
||||
color: #333;
|
||||
font-size: 1rem;
|
||||
font-variant-caps: all-small-caps;
|
||||
letter-spacing: 0.01em;
|
||||
margin-top: 0;
|
||||
word-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.definition-navigation__nav {
|
||||
flex: 0 0 max-content;
|
||||
|
||||
& li + li {
|
||||
// margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,3 @@
|
||||
:root {
|
||||
--auto-grid-min-size: 17rem;
|
||||
--l-gap: 1rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-column-gap: 4rem;
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
.u-no-padding-left {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.u-margin-bottom-double {
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
Reference in New Issue
Block a user