diff --git a/11ty/_includes/layouts/base.njk b/11ty/_includes/layouts/base.njk index d997945c..a90dab14 100644 --- a/11ty/_includes/layouts/base.njk +++ b/11ty/_includes/layouts/base.njk @@ -2,24 +2,14 @@ - + {{ renderData.title or title or metadata.title }} - + - + - {% block content %} - {% endblock content %} + {% block content %}{% endblock content %} - + \ No newline at end of file diff --git a/11ty/definitions/hysterical.md b/11ty/definitions/hysterical.md new file mode 100644 index 00000000..7a3a60d9 --- /dev/null +++ b/11ty/definitions/hysterical.md @@ -0,0 +1,8 @@ +--- +title: hysterical +slug: hysterical +defined: false +flag: + level: avoid + text: sexist slur +--- diff --git a/assets/css/_sass/_colours.scss b/assets/css/abstracts/_colours.scss similarity index 100% rename from assets/css/_sass/_colours.scss rename to assets/css/abstracts/_colours.scss diff --git a/assets/css/_sass/_functions.scss b/assets/css/abstracts/_functions.scss similarity index 100% rename from assets/css/_sass/_functions.scss rename to assets/css/abstracts/_functions.scss diff --git a/assets/css/abstracts/_mixins.scss b/assets/css/abstracts/_mixins.scss new file mode 100644 index 00000000..f51bdf5e --- /dev/null +++ b/assets/css/abstracts/_mixins.scss @@ -0,0 +1,19 @@ +@mixin icon__avoid() { + content: '🚨'; +} + +@mixin icon__alt() { + content: '👍'; +} + +@mixin icon__tool() { + content: '🧰'; +} + +@mixin icon__hanging() { + margin-left: -2.15rem; +} + +@mixin icon__embed() { + margin-right: 0.35rem; +} \ No newline at end of file diff --git a/assets/css/abstracts/_universal-selector.scss b/assets/css/abstracts/_universal-selector.scss new file mode 100644 index 00000000..d8209c8c --- /dev/null +++ b/assets/css/abstracts/_universal-selector.scss @@ -0,0 +1,11 @@ +* { + box-sizing: border-box; +} + +*::before { + box-sizing: border-box; +} + +*::after { + box-sizing: border-box; +} diff --git a/assets/css/abstracts/_variables.scss b/assets/css/abstracts/_variables.scss new file mode 100644 index 00000000..ee81624b --- /dev/null +++ b/assets/css/abstracts/_variables.scss @@ -0,0 +1,14 @@ +$primary-color: hsl(0, 100%, 50%); +$secondary-color: hsl(120, 100%, 25%); + +$dark-red: hsl(0, 100%, 32.2%); +$pink: hsl(349.5, 100%, 87.6%); +$black: hsl(0, 0%, 13%); +$white: hsl(0, 0%, 100%); + +$dark-grey: hsl(0, 0%, 31%); +$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y +$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only + +$browser-context: 16; + diff --git a/assets/css/base.scss b/assets/css/base.scss index 451f7e63..f33a6e30 100644 --- a/assets/css/base.scss +++ b/assets/css/base.scss @@ -1,447 +1,45 @@ -@charset 'utf-8'; -@import url('https://use.typekit.net/qlo3dpu.css'); - +@charset 'UTF-8'; @import '~prism-themes/themes/prism-a11y-dark'; -@import '_sass/functions'; -@import '_sass/colours' -$browser-context: 16; +// 1. Configuration and helpers +@import + 'abstracts/variables', + 'abstracts/functions', + 'abstracts/mixins', + 'abstracts/universal-selector'; + +// 2. Vendors +// @import + // 'vendors/normalize'; + +// 3. Base stuff +@import + 'base/custom-properties', + 'base/fonts', + 'base/base', + 'base/typography', + 'base/helpers'; + +// 4. Layout-related sections +@import + 'structures/header', + 'structures/footer', + 'structures/grid', + 'structures/multi-column', + 'structures/table-of-content'; + +// 5. Components +@import + 'components/word', + 'components/lists', + 'components/definitions', + 'components/flag'; + +// 6. Page-specific styles +// @import +// 'pages/home'; + +// 7. Themes +// @import +// 'themes/default'; -pre[class*='language-'] { - font-size: 1rem; -} - -code { - background-color: $dark-grey; - border: 1px solid $black; - color: $white; - padding: 0.15em; - border-radius: 0.25em; - font-size: 95%; - - pre & { - border: none; - padding: 0; - border-radius: 0; - font-size: inherit; - } -} - -// COLORS // - -:root { - --auto-grid-min-size: 17rem; - - --l-gap: 1rem; -} - -// TYPOGRAPHY // -$sans-serif: monotype-grotesque, 'Lucida Sans', sans-serif; -$serif: orpheuspro, Palatino, Times, serif; -$ext-sans: monotype-grotesque-extended, Arial Black, sans-serif; -$con-sans: monotype-grotesque-condensed, Arial Narrow, sans-serif; - -$thin: 200; -$light: 300; -$regular: 400; -$medium: 500; -$bold: 700; - -//MIXINS - -@mixin icon__avoid() { - content: '🚨'; -} - -@mixin icon__alt() { - content: '👍'; -} - -@mixin icon__tool() { - content: '🧰'; -} - -@mixin icon__hanging() { - margin-left: -2.15rem; -} - -@mixin icon__embed() { - margin-right: 0.35rem; -} - -body { - border-top: 1rem solid red; - font-family: $sans-serif; - font-size: pxToRem(20); - padding: 2rem; - margin: 0; -} - -h1 { - font-family: $ext-sans; - font-weight: $bold; -} - -h1, -h2, -h3, -h4 { - margin-top: 1em; - margin-bottom: 0.5em; -} - -p { - margin: 0.75rem 0; - font-size: 1.25rem; - line-height: 1.25; -} - -a { - text-decoration: none; - color: black; - border-bottom: darkgrey solid 0.1em; - font-family: $ext-sans; - margin: 1rem 0; - - &:hover { - border-bottom: red solid 0.1rem; - } - &:focus { - outline: pxToRem(3) solid $primary-color; - outline-offset: pxToRem(5); - } -} - -.subtitle { - font-family: $ext-sans; - font-weight: $regular; - letter-spacing: 0.1; - grid-column: span 2; -} - -ul[class] { - list-style: none; - margin: 0; - padding: 0; -} - -.summary { - grid-column: span 2; -} - -.small { - font-size: 0.75em; -} - -.title__thicc { - // a sensible base font size - font-size: 3rem; - line-height: 0.75; - padding: 0; - margin: 0.5rem 0rem; - // transform: rotateZ(90deg); - // margin: 13rem -7rem; -} - -@media (min-width: 51rem) and (min-height: #{pxToRem(400)}) { - // a dramatic font size - .title__thicc { - font-size: 12vh; - } -} - -@media (min-width: 51rem) and (min-height: #{pxToRem(850)}) { - // 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: #{pxToRem(800)}) { - .title__thicc { - grid-column: 1 / 3; - } - - .title__thicc + p { - grid-column: 1 / 2; - } -} - -.help { - margin: 1rem 0; - li { - margin: 0.75rem 0; - } -} - -th { - text-align: left; -} -// GRID // - -.grid { - display: grid; - grid-template-columns: repeat(4, [col] 1fr [col]); - grid-template-rows: fit-content, fit-content, auto; - grid-row-gap: 10rem; - grid-column-gap: 4rem; -} - -.auto-grid { - display: grid; - grid-template-columns: repeat( - auto-fill, - minmax(var(--auto-grid-min-size), 1fr) - ); - grid-gap: var(--l-gap); -} - -@import './structures/multi-column'; -@import './structures/table-of-content'; - -.small-left-grid { - display: grid; - grid-gap: 1rem; - - @media (min-width: #{pxToRem(800)}) { - grid-template-columns: 10rem 60ch; - } -} - -.page { - align-items: start; - display: grid; - grid-template-columns: 1fr; - - & > * { - grid-column: 1; - } -} - -.box { - background: black; - color: white; - padding: 1rem; - margin: 1rem 0.5rem; - height: auto; - - a { - color: white; - } -} - -.sub-headline { - font-weight: bold; - font-size: 1.25rem; -} - -.list { - ol { - padding: 0 0 0 1em; - margin: 0; - } - - 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); - } - } -} - -.style__italics { - font-style: italic; -} - -.word { - --word-signal-color: currentColor; - - &__title { - font-family: $serif; - font-weight: 900; - font-size: 2.5rem; - line-height: 1.25; - margin-bottom: 1rem; - margin-top: 0; - } - - &__content { - align-items: stretch; - - @supports (display: grid) { - // align-items: flex-start; - display: grid; - grid-template-columns: 1fr 4fr; - grid-gap: 1rem; - - & > * { - margin: 0; - } - } - - & > p { - grid-column: 1 / -1; - font-family: $sans-serif; - font-size: 1.5rem; - } - - & h4 { - grid-column: 1; - font-family: $con-sans; - font-size: 0.85rem; - font-weight: normal; - flex: 0 1 auto; - text-transform: uppercase; - transform: translateY(0.4em); - - @supports (display: grid) { - text-align: right; - } - } - - & h4, - & h4 + * { - margin-top: 1rem; - } - - & h4 ~ p, - & h4 ~ ul { - // border-left: 0.1rem solid lightgrey; - // padding-left: 1rem; - grid-column: 2; - font-size: inherit; - } - } - - &__speech { - font-size: 0.5em; - font-family: $sans-serif; - } - - &__signal { - border-top: pxToRem(1) solid var(--word-signal-color); - color: var(--word-signal-color); - display: inline-block; - font-family: $ext-sans; - text-transform: uppercase; - font-size: 0.75rem; - letter-spacing: 0.15rem; - padding: 0.5rem 0.75rem; - - &--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(); - } - } - } -} - -.block__dictionary { - max-width: 50rem; - margin-left: auto; - margin-right: auto; - padding: 0 1rem; -} - -.block__word { - grid-column: span 2; - display: flex; - flex-direction: column; - margin: 1rem; -} - -.block__type { - display: grid; - grid-template-columns: 1fr 4fr; - align-items: flex-start; -} - -.word__type { - text-align: right; - padding-right: 1rem; - font-family: $con-sans; - font-size: 0.85rem; - text-transform: uppercase; -} - -.word__link { - text-decoration: none; - color: black; - border-bottom: darkgrey solid 0.1em; - font-family: $ext-sans; -} - -.word__breakdown { - font-family: $sans-serif; - border-left: 0.1rem solid lightgrey; - padding-left: 1rem; -} - -.flag__red { - background-color: rgb(255, 192, 203); - font-size: 0.9rem; - font-weight: bold; - border-radius: 1rem; - padding: 0.45rem 0.65rem; - margin: 0.25rem 0.75rem; - text-transform: lowercase; - - &:before { - @include icon__avoid(); - @include icon__embed(); - } -} - -.list-semicolon { - margin: 0; - padding: 0; - list-style: none; - - & > li { - display: inline; - - &:not(:last-child)::after { - content: '; '; - } - } -} - -.site-footer { - margin-top: 3rem; -} - -.u-no-padding-left { - padding-left: 0 !important; -} diff --git a/assets/css/base/_base.scss b/assets/css/base/_base.scss new file mode 100644 index 00000000..3c6ddb61 --- /dev/null +++ b/assets/css/base/_base.scss @@ -0,0 +1,72 @@ +body { + border-top: 1rem solid $primary-color; + font-family: $sans-serif; + font-size: pxToRem(20); + padding: 2rem; + margin: 0; +} + +h1 { + font-family: $ext-sans; + font-weight: $bold; +} + +h1, +h2, +h3, +h4 { + margin-top: 1em; + margin-bottom: 0.5em; +} + +p { + margin: 0.75rem 0; + font-size: 1.25rem; + line-height: 1.25; +} + +a { + text-decoration: none; + color: $black; + border-bottom: $dark-grey solid 0.1em; + font-family: $ext-sans; + margin: 1rem 0; + + &: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; + color: $white; + padding: 0.15em; + border-radius: 0.25em; + font-size: 95%; + + pre & { + border: none; + padding: 0; + border-radius: 0; + font-size: inherit; + } +} + +ul[class] { + list-style: none; + margin: 0; + padding: 0; +} + +th { + text-align: left; +} + +pre[class*='language-'] { + font-size: 1rem; +} \ No newline at end of file diff --git a/assets/css/base/_custom-properties.scss b/assets/css/base/_custom-properties.scss new file mode 100644 index 00000000..d0486e6a --- /dev/null +++ b/assets/css/base/_custom-properties.scss @@ -0,0 +1,4 @@ +:root { + --auto-grid-min-size: 17rem; + --l-gap: 1rem; +} \ No newline at end of file diff --git a/assets/css/base/_fonts.scss b/assets/css/base/_fonts.scss new file mode 100644 index 00000000..ccf41e1d --- /dev/null +++ b/assets/css/base/_fonts.scss @@ -0,0 +1,12 @@ +@import url('https://use.typekit.net/qlo3dpu.css'); + +$sans-serif: monotype-grotesque, 'Lucida Sans', sans-serif; +$serif: orpheuspro, Palatino, Times, serif; +$ext-sans: monotype-grotesque-extended, Arial Black, sans-serif; +$con-sans: monotype-grotesque-condensed, Arial Narrow, sans-serif; + +$thin: 200; +$light: 300; +$regular: 400; +$medium: 500; +$bold: 700; \ No newline at end of file diff --git a/assets/css/base/_helpers.scss b/assets/css/base/_helpers.scss new file mode 100644 index 00000000..2ed8f78d --- /dev/null +++ b/assets/css/base/_helpers.scss @@ -0,0 +1,18 @@ +.u-no-padding-left { + padding-left: 0 !important; +} + +.style__italics { + font-style: italic; +} + +.small { + font-size: 0.75em; +} + +.help { + margin: 1rem 0; + li { + margin: 0.75rem 0; + } +} \ No newline at end of file diff --git a/assets/css/base/_typography.scss b/assets/css/base/_typography.scss new file mode 100644 index 00000000..b568374a --- /dev/null +++ b/assets/css/base/_typography.scss @@ -0,0 +1,6 @@ +.subtitle { + font-family: $ext-sans; + font-weight: $regular; + letter-spacing: 0.1; + grid-column: span 2; +} \ No newline at end of file diff --git a/assets/css/components/_definitions.scss b/assets/css/components/_definitions.scss new file mode 100644 index 00000000..1e874a66 --- /dev/null +++ b/assets/css/components/_definitions.scss @@ -0,0 +1,21 @@ +.word__type { + text-align: right; + padding-right: 1rem; + font-family: $con-sans; + font-size: 0.85rem; + text-transform: uppercase; + } + +.word__link { + text-decoration: none; + color: black; + border-bottom: darkgrey solid 0.1em; + font-family: $ext-sans; + } + +.word__breakdown { + font-family: $sans-serif; + border-left: 0.1rem solid lightgrey; + padding-left: 1rem; +} + \ No newline at end of file diff --git a/assets/css/components/_flag.scss b/assets/css/components/_flag.scss new file mode 100644 index 00000000..cc16c136 --- /dev/null +++ b/assets/css/components/_flag.scss @@ -0,0 +1,14 @@ +.flag__red { + background-color: rgb(255, 192, 203); + font-size: 0.9rem; + font-weight: bold; + border-radius: 1rem; + padding: 0.45rem 0.65rem; + margin: 0.25rem 0.75rem; + text-transform: lowercase; + + &:before { + @include icon__avoid(); + @include icon__embed(); + } +} \ No newline at end of file diff --git a/assets/css/components/_lists.scss b/assets/css/components/_lists.scss new file mode 100644 index 00000000..cb70438c --- /dev/null +++ b/assets/css/components/_lists.scss @@ -0,0 +1,37 @@ + ol { + padding: 0 0 0 1em; + margin: 0; + } + + 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); + } + } + +.list-semicolon { + margin: 0; + padding: 0; + list-style: none; + + & > li { + display: inline; + + &:not(:last-child)::after { + content: '; '; + } + } +} + diff --git a/assets/css/components/_word.scss b/assets/css/components/_word.scss new file mode 100644 index 00000000..7b836924 --- /dev/null +++ b/assets/css/components/_word.scss @@ -0,0 +1,101 @@ +.word { + --word-signal-color: currentColor; + + &__title { + font-family: $serif; + font-weight: 900; + font-size: 2.5rem; + line-height: 1.25; + margin-bottom: 1rem; + margin-top: 0; + } + + &__content { + align-items: stretch; + + @supports (display: grid) { + // align-items: flex-start; + display: grid; + grid-template-columns: 1fr 4fr; + grid-gap: 1rem; + + & > * { + margin: 0; + } + } + + & > p { + grid-column: 1 / -1; + font-family: $sans-serif; + font-size: 1.5rem; + } + + & h4 { + grid-column: 1; + font-family: $con-sans; + font-size: 0.85rem; + font-weight: normal; + flex: 0 1 auto; + text-transform: uppercase; + transform: translateY(0.4em); + + @supports (display: grid) { + text-align: right; + } + } + + & h4, + & h4 + * { + margin-top: 1rem; + } + + & h4 ~ p, + & h4 ~ ul { + // border-left: 0.1rem solid lightgrey; + // padding-left: 1rem; + grid-column: 2; + font-size: inherit; + } + } + + &__speech { + font-size: 0.5em; + font-family: $sans-serif; + } + + &__signal { + border-top: pxToRem(1) solid var(--word-signal-color); + color: var(--word-signal-color); + display: inline-block; + font-family: $ext-sans; + text-transform: uppercase; + font-size: 0.75rem; + letter-spacing: 0.15rem; + padding: 0.5rem 0.75rem; + + &--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(); + } + } + } +} diff --git a/assets/css/structures/_footer.scss b/assets/css/structures/_footer.scss new file mode 100644 index 00000000..1c33288d --- /dev/null +++ b/assets/css/structures/_footer.scss @@ -0,0 +1,3 @@ +.site-footer { + margin-top: 3rem; +} \ No newline at end of file diff --git a/assets/css/structures/_grid.scss b/assets/css/structures/_grid.scss new file mode 100644 index 00000000..88defdcd --- /dev/null +++ b/assets/css/structures/_grid.scss @@ -0,0 +1,72 @@ +:root { + --auto-grid-min-size: 17rem; + --l-gap: 1rem; +} + +.grid { + display: grid; + grid-template-columns: repeat(4, [col] 1fr [col]); + grid-template-rows: fit-content, fit-content, auto; + grid-row-gap: 10rem; + grid-column-gap: 4rem; +} + +.auto-grid { + display: grid; + grid-template-columns: repeat( + auto-fill, + minmax(var(--auto-grid-min-size), 1fr) + ); + grid-gap: var(--l-gap); +} + +.small-left-grid { + display: grid; + grid-gap: 1rem; + + @media (min-width: #{pxToRem(800)}) { + grid-template-columns: 10rem 60ch; + } +} + +.block__dictionary { + max-width: 50rem; + margin-left: auto; + margin-right: auto; + padding: 0 1rem; +} + +.block__word { + grid-column: span 2; + display: flex; + flex-direction: column; + margin: 1rem; +} + +.block__type { + display: grid; + grid-template-columns: 1fr 4fr; + align-items: flex-start; +} + +.page { + align-items: start; + display: grid; + grid-template-columns: 1fr; + + & > * { + grid-column: 1; + } +} + +.box { + background: black; + color: white; + padding: 1rem; + margin: 1rem 0.5rem; + height: auto; + + a { + color: white; + } +} \ No newline at end of file diff --git a/assets/css/structures/_header.scss b/assets/css/structures/_header.scss new file mode 100644 index 00000000..e6349671 --- /dev/null +++ b/assets/css/structures/_header.scss @@ -0,0 +1,44 @@ +.title__thicc { + // a sensible base font size + font-size: 3rem; + line-height: 0.75; + padding: 0; + margin: 0.5rem 0rem; + // transform: rotateZ(90deg); + // margin: 13rem -7rem; +} + +@media (min-width: 51rem) and (min-height: #{pxToRem(400)}) { + // a dramatic font size + .title__thicc { + font-size: 12vh; + } +} + +@media (min-width: 51rem) and (min-height: #{pxToRem(850)}) { + // 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: #{pxToRem(800)}) { + .title__thicc { + grid-column: 1 / 3; + } + + .title__thicc + p { + grid-column: 1 / 2; + } +} + +.sub-headline { + font-weight: bold; + font-size: 1.25rem; +} + +.summary { + grid-column: span 2; +} \ No newline at end of file diff --git a/assets/css/themes/default.scss b/assets/css/themes/default.scss new file mode 100644 index 00000000..e69de29b diff --git a/assets/css/utilities/_spacing.scss b/assets/css/utilities/_spacing.scss new file mode 100644 index 00000000..78248b5c --- /dev/null +++ b/assets/css/utilities/_spacing.scss @@ -0,0 +1,7 @@ +.u-no-padding-left { + padding-left: 0 !important; +} + +.u-margin-bottom-double { + margin-bottom: 2rem !important; +}