mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-10-31 06:08:33 +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">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0"
|
||||
>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>{{ renderData.title or title or metadata.title }}</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="{{ renderData.description or description or metadata.description }}"
|
||||
>
|
||||
<meta name="description" content="{{ renderData.description or description or metadata.description }}">
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ '/assets/css/base.css' | url }}"
|
||||
>
|
||||
<link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
{% block content %}{% endblock content %}
|
||||
</body>
|
||||
</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';
|
||||
@import url('https://use.typekit.net/qlo3dpu.css');
|
||||
|
||||
@charset 'UTF-8';
|
||||
@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