mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-10-31 14:18:32 +00:00
⚒️ Restructured Sass organisation (#83)
* 🌈 Organise colors with vars only * ➕ New file structure * File restructuring * ⚒️ Fix build issue * Rearranged files
This commit is contained in:
Tatiana Mac
@@ -2,24 +2,14 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1.0"
|
|
||||||
>
|
|
||||||
|
|
||||||
<title>{{ renderData.title or title or metadata.title }}</title>
|
<title>{{ renderData.title or title or metadata.title }}</title>
|
||||||
<meta
|
<meta name="description" content="{{ renderData.description or description or metadata.description }}">
|
||||||
name="description"
|
|
||||||
content="{{ renderData.description or description or metadata.description }}"
|
|
||||||
>
|
|
||||||
|
|
||||||
<link
|
<link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
|
||||||
rel="stylesheet"
|
|
||||||
href="{{ '/assets/css/base.css' | url }}"
|
|
||||||
>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% block content %}
|
{% block content %}{% endblock content %}
|
||||||
{% endblock content %}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
19
assets/css/abstracts/_mixins.scss
Normal file
19
assets/css/abstracts/_mixins.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
11
assets/css/abstracts/_universal-selector.scss
Normal file
11
assets/css/abstracts/_universal-selector.scss
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::before {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
14
assets/css/abstracts/_variables.scss
Normal file
14
assets/css/abstracts/_variables.scss
Normal file
@@ -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;
|
||||||
|
|
||||||
@@ -1,458 +1,45 @@
|
|||||||
@charset 'utf-8';
|
@charset 'UTF-8';
|
||||||
@import url('https://use.typekit.net/qlo3dpu.css');
|
|
||||||
|
|
||||||
@import '~prism-themes/themes/prism-a11y-dark';
|
@import '~prism-themes/themes/prism-a11y-dark';
|
||||||
@import '_sass/functions';
|
|
||||||
|
|
||||||
$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: #333333;
|
|
||||||
border: pxToRem(1) 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
$primary-color: #0e4bff; //cobalt blue is so pretty//
|
|
||||||
$secondary-color: #f3f315; //
|
|
||||||
|
|
||||||
$black: #222222;
|
|
||||||
$white: #ffffff;
|
|
||||||
$pistachio: #e5ffe5;
|
|
||||||
$yellow: #ffff00;
|
|
||||||
|
|
||||||
$dark-grey: #4f4f4f;
|
|
||||||
$mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y
|
|
||||||
$light-grey: #eeeeee; // for backgrounds only
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|||||||
72
assets/css/base/_base.scss
Normal file
72
assets/css/base/_base.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
4
assets/css/base/_custom-properties.scss
Normal file
4
assets/css/base/_custom-properties.scss
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
:root {
|
||||||
|
--auto-grid-min-size: 17rem;
|
||||||
|
--l-gap: 1rem;
|
||||||
|
}
|
||||||
12
assets/css/base/_fonts.scss
Normal file
12
assets/css/base/_fonts.scss
Normal file
@@ -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;
|
||||||
18
assets/css/base/_helpers.scss
Normal file
18
assets/css/base/_helpers.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
6
assets/css/base/_typography.scss
Normal file
6
assets/css/base/_typography.scss
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
.subtitle {
|
||||||
|
font-family: $ext-sans;
|
||||||
|
font-weight: $regular;
|
||||||
|
letter-spacing: 0.1;
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
21
assets/css/components/_definitions.scss
Normal file
21
assets/css/components/_definitions.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
14
assets/css/components/_flag.scss
Normal file
14
assets/css/components/_flag.scss
Normal file
@@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
37
assets/css/components/_lists.scss
Normal file
37
assets/css/components/_lists.scss
Normal file
@@ -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: '; ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
101
assets/css/components/_word.scss
Normal file
101
assets/css/components/_word.scss
Normal file
@@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
3
assets/css/structures/_footer.scss
Normal file
3
assets/css/structures/_footer.scss
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
.site-footer {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
72
assets/css/structures/_grid.scss
Normal file
72
assets/css/structures/_grid.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
44
assets/css/structures/_header.scss
Normal file
44
assets/css/structures/_header.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
0
assets/css/themes/default.scss
Normal file
0
assets/css/themes/default.scss
Normal file
7
assets/css/utilities/_spacing.scss
Normal file
7
assets/css/utilities/_spacing.scss
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
.u-no-padding-left {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-bottom-double {
|
||||||
|
margin-bottom: 2rem !important;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user