mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-06-12 13:41:40 +00:00
🌓 Adds Dark Mode (#210)
* feat(dark mode): set up first set of colors * feat(dark mode): define state colours * 🧹 * feat(dark mode): variablify all teh wordz * feat(dark mode): set colors on body * feat(dark mode): replace hard coded color value * feat(dark mode): 🌑 * feat(a11y): update link focus styles - restores visible focus in windows high contrast mode - increases visibility in boxes with bg colour * feat(dark mode): enable postcss * 💅 * feat(dark mode): add user control * chore: use generic headline name * feat(dark mode): hide switch until script loads * feat(dark mode): increase link contrast * add content warning to footer nav partial * feat(dark mode): replace hard coded colour value in alertbox * feat(dark mode): tone down text colour * feat(dark mode): properly invert code elements * 🧹 move box styles into own partial * feat(dark mode): use darker colour as background for links
This commit is contained in:
Oscar
@ -1,11 +0,0 @@
|
||||
$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
|
||||
@ -1,11 +0,0 @@
|
||||
$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
|
||||
@ -1,20 +1,20 @@
|
||||
$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%);
|
||||
$dark-green: hsl(120, 100%, 15%);
|
||||
$yellow: hsl(50, 100%, 50%);
|
||||
$dark-yellow: hsl(50, 100%, 20%);
|
||||
$pale-yellow: hsl(50, 100%, 86%);
|
||||
$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
|
||||
$colors: (
|
||||
red: hsl(0, 100%, 50%),
|
||||
green: hsl(120, 100%, 25%),
|
||||
dark-red: hsl(0, 100%, 32.2%),
|
||||
pink: hsl(349.5, 100%, 87.6%),
|
||||
berry: hsl(350deg 54% 44%),
|
||||
dark-green: hsl(120s, 100%, 15%),
|
||||
pale-green: hsl(120, 73%, 80%),
|
||||
yellow: hsl(50, 100%, 50%),
|
||||
dark-yellow: hsl(50, 100%, 20%),
|
||||
pale-yellow: hsl(50, 100%, 86%),
|
||||
black: hsl(0, 0%, 13%),
|
||||
black-transparent: hsla(0, 0%, 13%, 85%),
|
||||
white-transparent: hsl(0, 0%, 100%, 85%),
|
||||
light-grey: hsl(0, 0%, 92%),
|
||||
dark-grey: hsl(0, 0%, 31%),
|
||||
mid-grey: hsl(0, 0%, 46.3%)
|
||||
);
|
||||
|
||||
$browser-context: 16;
|
||||
|
||||
$lt-background-color: $pink;
|
||||
$lt-background-color-warning: $pale-yellow;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
// 3. Base stuff
|
||||
@import 'base/custom-properties', 'base/fonts', 'base/base', 'base/selection',
|
||||
'base/typography', './base/a', 'base/helpers';
|
||||
'base/typography', './base/a', 'base/helpers', 'base/radio-buttons', 'base/code';
|
||||
|
||||
// 4. Layout-related sections
|
||||
@import 'structures/header', 'structures/footer', 'structures/grid',
|
||||
@ -18,7 +18,7 @@
|
||||
'./structures/definition-content', './structures/definition-navigation';
|
||||
|
||||
// 5. Components
|
||||
@import 'components/word', 'components/lists', 'components/definitions',
|
||||
@import 'components/word', './components/box', 'components/lists', 'components/definitions',
|
||||
'components/flag', 'components/alertbox';
|
||||
|
||||
// 6. Page-specific styles
|
||||
|
||||
@ -1,18 +1,28 @@
|
||||
a {
|
||||
color: $black;
|
||||
color: var(--clr-foreground);
|
||||
font-family: $ext-sans;
|
||||
margin: 1rem 0;
|
||||
text-decoration-color: $dark-grey;
|
||||
margin-left: -0.25rem;
|
||||
margin-right: -0.25rem;
|
||||
padding: 0.125rem 0.25rem;
|
||||
text-decoration-color: var(--clr-border-main);
|
||||
text-decoration-line: underline;
|
||||
text-decoration-thickness: 0.1em;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration-color: $primary-color;
|
||||
text-decoration-color: var(--clr-primary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: $lt-background-color;
|
||||
color: $black;
|
||||
outline: 0;
|
||||
background-color: var(--clr-accent);
|
||||
color: var(--clr-foreground);
|
||||
// makes focus visible in windows high contrast mode, do not delete
|
||||
outline: 2px solid transparent;
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root:not([data-user-theme='light']) & {
|
||||
color: var(--clr-background);
|
||||
}
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +1,15 @@
|
||||
body {
|
||||
border-top: 1rem solid $primary-color;
|
||||
background-color: var(--clr-background);
|
||||
border-top: 1rem solid var(--clr-primary);
|
||||
color: var(--clr-foreground);
|
||||
font-family: $sans-serif;
|
||||
font-size: pxToRem(20);
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: $dark-grey;
|
||||
border: pxToRem(1px) solid $black;
|
||||
border-radius: 0.25em;
|
||||
color: $white;
|
||||
font-size: 95%;
|
||||
padding: 0.15em;
|
||||
|
||||
pre & {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul[class] {
|
||||
|
||||
15
assets/css/base/_code.scss
Normal file
15
assets/css/base/_code.scss
Normal file
@ -0,0 +1,15 @@
|
||||
code {
|
||||
background-color: var(--clr-foreground);
|
||||
border: pxToRem(1px) solid var(--clr-foreground-transparent);
|
||||
border-radius: 0.25em;
|
||||
color: var(--clr-background);
|
||||
font-size: 95%;
|
||||
padding: 0.15em;
|
||||
|
||||
pre & {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,67 @@
|
||||
// create variables for all colours
|
||||
@mixin raw-color-names {
|
||||
@each $name, $value in $colors {
|
||||
--clr-#{$name}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
// map the raw colours to abstract names in standard color mode
|
||||
// we map the colour values here to prepare for dark mode
|
||||
// with these mapping we express the _design intention_ rather than the colour value
|
||||
@mixin color-scheme-light {
|
||||
--clr-primary: var(--clr-red);
|
||||
--clr-secondary: var(--clr-green);
|
||||
--clr-foreground: var(--clr-black);
|
||||
--clr-foreground-transparent: var(--clr-black-transparent);
|
||||
--clr-background: white;
|
||||
--clr-accent: var(--clr-pink);
|
||||
--clr-border-main: var(--clr-dark-grey);
|
||||
|
||||
--clr-positive: var(--clr-green);
|
||||
--clr-positive-text: var(--clr-dark-green);
|
||||
--clr-positive-background: var(--clr-pale-green);
|
||||
|
||||
--clr-warning: var(--clr-yellow);
|
||||
--clr-warning-background: var(--clr-pale-yellow);
|
||||
--clr-warning-text: var(--clr-dark-yellow);
|
||||
|
||||
--clr-avoid: var(--clr-red);
|
||||
--clr-avoid-background: var(--clr-pink);
|
||||
--clr-avoid-text: var(--clr-dark-red);
|
||||
}
|
||||
|
||||
// update colors which need to change in dark mode
|
||||
@mixin color-scheme-dark {
|
||||
--clr-foreground: var(--clr-light-grey);
|
||||
--clr-foreground-transparent: var(--clr-white-transparent);
|
||||
--clr-background: var(--clr-black);
|
||||
--clr-accent: var(--clr-berry);
|
||||
|
||||
--clr-positive-text: var(--clr-pale-green);
|
||||
--clr-positive-background: var(--clr-dark-green);
|
||||
|
||||
--clr-warning-background: var(--clr-dark-yellow);
|
||||
--clr-warning-text: var(--clr-pale-yellow);
|
||||
|
||||
--clr-avoid-background: var(--clr-dark-red);
|
||||
--clr-avoid-text: var(--clr-pink);
|
||||
}
|
||||
|
||||
:root {
|
||||
@include raw-color-names();
|
||||
|
||||
@include color-scheme-light();
|
||||
|
||||
--auto-grid-min-size: 17rem;
|
||||
--l-gap: 1rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-user-theme='light']) {
|
||||
@include color-scheme-dark();
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-user-theme='dark'] {
|
||||
@include color-scheme-dark();
|
||||
}
|
||||
|
||||
53
assets/css/base/_radio-buttons.scss
Normal file
53
assets/css/base/_radio-buttons.scss
Normal file
@ -0,0 +1,53 @@
|
||||
.radio-wrapper {
|
||||
& + & {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
[type='radio'] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
& label {
|
||||
--inner-size: 0.25rem;
|
||||
--outer-top: 0.33rem;
|
||||
line-height: 1;
|
||||
|
||||
padding-left: 1.55rem;
|
||||
position: relative;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border: var(--inner-size) solid var(--clr-foreground);
|
||||
left: var(--inner-size);
|
||||
opacity: 0;
|
||||
top: calc(var(--inner-size) + var(--outer-top));
|
||||
transition: opacity 0.12s ease-out;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: var(--clr-background);
|
||||
border: 0.125rem solid var(--clr-foreground);
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
top: var(--outer-top);
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
[type='radio']:focus + label::before {
|
||||
outline: 0.125rem solid var(--clr-foreground);
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
|
||||
[type='radio']:checked + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
::selection {
|
||||
background-color: #000000cc;
|
||||
color: white;
|
||||
background-color: var(--clr-foreground-transparent);
|
||||
color: var(--clr-background);
|
||||
}
|
||||
|
||||
@ -1,63 +1,71 @@
|
||||
h1 {
|
||||
font-family: $ext-sans;
|
||||
font-weight: $bold;
|
||||
font-family: $ext-sans;
|
||||
font-weight: $bold;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 1em;
|
||||
word-break: break-word;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 1em;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25;
|
||||
margin: 0.75rem 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.thicc-headline {
|
||||
// a sensible base font size
|
||||
font-size: 3rem;
|
||||
line-height: 0.75;
|
||||
margin: 0.5rem 0rem;
|
||||
padding: 0;
|
||||
// a sensible base font size
|
||||
font-size: 3rem;
|
||||
line-height: 0.75;
|
||||
margin: 0.5rem 0rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 51rem) and (min-height: 400px) {
|
||||
// a dramatic font size
|
||||
.thicc-headline {
|
||||
font-size: 12vh;
|
||||
}
|
||||
// a dramatic font size
|
||||
.thicc-headline {
|
||||
font-size: 12vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 51rem) and (min-height: 850px) {
|
||||
// cap the maximum font size of the title
|
||||
// at the same size that 12vh computes to
|
||||
// when the viewport is 850px high
|
||||
// One day we can use CSS clamp https://caniuse.com/#feat=mdn-css_types_clamp
|
||||
.thicc-headline {
|
||||
font-size: 6.75rem;
|
||||
}
|
||||
// cap the maximum font size of the title
|
||||
// at the same size that 12vh computes to
|
||||
// when the viewport is 850px high
|
||||
// One day we can use CSS clamp https://caniuse.com/#feat=mdn-css_types_clamp
|
||||
.thicc-headline {
|
||||
font-size: 6.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-headline {
|
||||
font-family: orpheuspro, Palatino, Times, serif;
|
||||
font-size: 3.5rem;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
font-family: orpheuspro, Palatino, Times, serif;
|
||||
font-size: 3.5rem;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sub-headline {
|
||||
font-family: $ext-sans;
|
||||
font-size: 1.25rem;
|
||||
font-weight: $bold;
|
||||
letter-spacing: 0.1;
|
||||
margin: .75rem 0;
|
||||
font-family: $ext-sans;
|
||||
font-size: 1.25rem;
|
||||
font-weight: $bold;
|
||||
letter-spacing: 0.1;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.smcp-headline {
|
||||
font-size: 1rem;
|
||||
font-variant-caps: all-small-caps;
|
||||
letter-spacing: 0.01em;
|
||||
margin-top: 0;
|
||||
word-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.75em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.alertbox {
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--clr-foreground);
|
||||
padding: 2.25rem;
|
||||
|
||||
&__title {
|
||||
|
||||
31
assets/css/components/_box.scss
Normal file
31
assets/css/components/_box.scss
Normal file
@ -0,0 +1,31 @@
|
||||
.box {
|
||||
background: var(--clr-foreground);
|
||||
color: var(--clr-background);
|
||||
grid-column: span 2;
|
||||
height: auto;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
|
||||
@media (min-width: #{pxToRem(768)}) {
|
||||
margin: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
&--divider {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--clr-background);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-user-theme='light']) &:focus {
|
||||
background-color: var(--clr-pink);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
*::selection {
|
||||
background: var(--clr-background);
|
||||
color: var(--clr-foreground);
|
||||
}
|
||||
}
|
||||
@ -1,32 +1,23 @@
|
||||
.word__type {
|
||||
font-family: $con-sans;
|
||||
font-size: 0.85rem;
|
||||
padding-right: 1rem;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.word__link {
|
||||
border-bottom: darkgrey solid 0.1em;
|
||||
color: black;
|
||||
font-family: $ext-sans;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.word__breakdown {
|
||||
border-left: 0.1rem solid lightgrey;
|
||||
font-family: $sans-serif;
|
||||
padding-left: 1rem;
|
||||
font-family: $con-sans;
|
||||
font-size: 0.85rem;
|
||||
padding-right: 1rem;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.content-flag {
|
||||
background-color: $lt-background-color-warning;
|
||||
background-color: var(--clr-warning-background);
|
||||
overflow: hidden;
|
||||
padding: 0 1rem 0 3rem;
|
||||
position: relative;
|
||||
|
||||
& a:focus {
|
||||
background-color: var(--clr-background);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "⚠️";
|
||||
content: '⚠️';
|
||||
left: 1rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -34,10 +25,10 @@
|
||||
}
|
||||
|
||||
&--avoid {
|
||||
background-color: $pink;
|
||||
background-color: var(--clr-avoid-background);
|
||||
|
||||
&:before {
|
||||
content: "🚨";
|
||||
content: '🚨';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,19 +6,22 @@
|
||||
margin: 0.5rem 0.75rem 0.25rem 0;
|
||||
padding: 0.45rem 0.65rem;
|
||||
text-transform: lowercase;
|
||||
|
||||
&--red {
|
||||
background-color:$lt-background-color;
|
||||
background-color: var(--clr-avoid-background);
|
||||
|
||||
&:before {
|
||||
@include icon__avoid();
|
||||
@include icon__embed();
|
||||
}
|
||||
}
|
||||
|
||||
&--yellow {
|
||||
background-color: $lt-background-color-warning;
|
||||
|
||||
background-color: var(--clr-warning-background);
|
||||
|
||||
&:before {
|
||||
@include icon__warning();
|
||||
@include icon__embed();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
text-transform: uppercase;
|
||||
|
||||
&--avoid {
|
||||
--word-signal-color: $dark-red;
|
||||
--word-signal-color: var(--clr-dark-red);
|
||||
|
||||
&:before {
|
||||
@include icon__avoid();
|
||||
@ -83,7 +83,7 @@
|
||||
}
|
||||
|
||||
&--better {
|
||||
--word-signal-color: $dark-green;
|
||||
--word-signal-color: var(--clr-positive-text);
|
||||
|
||||
&:before {
|
||||
@include icon__alt();
|
||||
@ -97,8 +97,10 @@
|
||||
@include icon__hanging();
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
--word-signal-color: $dark-yellow;
|
||||
--word-signal-color: var(--clr-warning-text);
|
||||
|
||||
&:before {
|
||||
@include icon__warning();
|
||||
@include icon__hanging();
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
text-transform: uppercase;
|
||||
|
||||
&--avoid {
|
||||
--word-signal-color: $dark-red;
|
||||
--word-signal-color: var(--clr-avoid-text);
|
||||
|
||||
&:before {
|
||||
@include icon__avoid();
|
||||
@ -90,7 +90,7 @@
|
||||
}
|
||||
|
||||
&--better {
|
||||
--word-signal-color: $dark-green;
|
||||
--word-signal-color: var(--clr-positive-text);
|
||||
|
||||
&:before {
|
||||
@include icon__alt();
|
||||
@ -106,7 +106,7 @@
|
||||
}
|
||||
|
||||
&--warning {
|
||||
--word-signal-color: $dark-yellow;
|
||||
--word-signal-color: var(--clr-warning-text);
|
||||
|
||||
&:before {
|
||||
@include icon__warning();
|
||||
|
||||
@ -15,15 +15,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
.site-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 3rem;
|
||||
|
||||
ul > li {
|
||||
display: inline-block;
|
||||
& > * {
|
||||
flex: 0 1 19rem;
|
||||
margin-bottom: 1em;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,88 +1,62 @@
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-column-gap: 4rem;
|
||||
grid-row-gap: 10rem;
|
||||
grid-template-columns: repeat(4, [col] 1fr [col]);
|
||||
grid-template-rows: fit-content, fit-content, auto;
|
||||
display: grid;
|
||||
grid-column-gap: 4rem;
|
||||
grid-row-gap: 10rem;
|
||||
grid-template-columns: repeat(4, [col] 1fr [col]);
|
||||
grid-template-rows: fit-content, fit-content, auto;
|
||||
}
|
||||
|
||||
.auto-grid {
|
||||
display: grid;
|
||||
grid-gap: var(--l-gap);
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-size), 1fr));
|
||||
display: grid;
|
||||
grid-gap: var(--l-gap);
|
||||
grid-template-columns: repeat(
|
||||
auto-fit,
|
||||
minmax(var(--auto-grid-min-size), 1fr)
|
||||
);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 880px) {
|
||||
.auto-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.auto-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.small-left-grid {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
|
||||
@media (min-width: #{pxToRem(800)}) {
|
||||
grid-template-columns: 10rem 60ch;
|
||||
}
|
||||
@media (min-width: #{pxToRem(800)}) {
|
||||
grid-template-columns: 10rem 60ch;
|
||||
}
|
||||
}
|
||||
|
||||
.block__dictionary {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 50rem;
|
||||
padding: 0 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 50rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.block__word {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: span 2;
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: span 2;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.block__type {
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 1rem 0;
|
||||
li {
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
a {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
background: black;
|
||||
color: white;
|
||||
grid-column: span 2;
|
||||
height: auto;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
@media (min-width: #{pxToRem(768)}) {
|
||||
margin: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
&--divider {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
|
||||
&:focus {
|
||||
background-color: $lt-background-color;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
*::selection {
|
||||
background: white; /* WebKit/Blink Browsers */
|
||||
color: black;
|
||||
}
|
||||
margin: 1rem 0;
|
||||
li {
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
a {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user