mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-01-22 17:30:00 +00:00
Code Issues Projects Releases Wiki Activity

🐛 Fixes SCSS build errors

Browse Source
This commit is contained in:
tatianamac 2020-05-28 21:18:01 -07:00
parent 5acc7f9b0a
commit 11bbee568a
3 changed files with 102 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
11ty/definitions/mansplaining.md
View File

@ -11,11 +11,13 @@ reading:
--- ---
## Issues ## Issues
Mansplaining places men (usually without authority) in a position of default authority, and places women and gender minoritised people with authority in a position of default subordination, which reinforces the power differential in men's favour. Mansplaining places men (usually without authority) in a position of default authority, and places women and gender minoritised people with authority in a position of default subordination, which reinforces the power differential in men's favour.
Mansplaining occupies real time in meetings, leading to men gaining more air time and exposure, despite the stereotype that women speak more.[1](https://slate.com/human-interest/2013/02/do-women-talk-more-the-answer-is-no-but-the-belief-persists-despite-the-evidence.html)[2](https://slate.com/human-interest/2013/02/do-women-talk-more-the-answer-is-no-but-the-belief-persists-despite-the-evidence.html) Mansplaining occupies real time in meetings, leading to men gaining more air time and exposure, despite the stereotype that women speak more.[1](https://slate.com/human-interest/2013/02/do-women-talk-more-the-answer-is-no-but-the-belief-persists-despite-the-evidence.html)[2](https://slate.com/human-interest/2013/02/do-women-talk-more-the-answer-is-no-but-the-belief-persists-despite-the-evidence.html)
## Impact ## Impact
Mansplaining can reinforce toxic masculinity and rape culture, as it fundamentally is about disbelieving women and gender-minoritised individuals. Mansplaining can reinforce toxic masculinity and rape culture, as it fundamentally is about disbelieving women and gender-minoritised individuals.
Mansplaining contributes to the invalidation and disbelief of any women and gender-minoritised individuals and their credentials. The disbelief and intrinsic questioning of women and gender-minoritised individual especially reinforces systemic bias and injustice against them. Mansplaining contributes to the invalidation and disbelief of any women and gender-minoritised individuals and their credentials. The disbelief and intrinsic questioning of women and gender-minoritised individual especially reinforces systemic bias and injustice against them.
@ -26,10 +28,10 @@ Examples include but aren't limited to: a man explaining to a woman how to prono
## Note ## Note
A good way to check if you're mansplaining is to ask yourself whether: A good way to check if you're mansplaining is to ask yourself whether:
(1) the person explicitly asked for the explanation (1) the person explicitly asked for the explanation
(2) you are assuming incompetence because of the person's gender, race, ability, etc, and, (2) you are assuming incompetence because of the person's gender, race, ability, etc, and,
(3) how your systematic and individual bias, particularly gender bias in this context, affects your interpretation of (1) and (2) (3) how your systematic and individual bias, particularly gender bias in this context, affects your interpretation of (1) and (2)

73
assets/css/base/_typography.scss
View File

@ -1,68 +1,63 @@
h1 { h1 {
font-family: $ext-sans; font-family: $ext-sans;
font-weight: $bold; font-weight: $bold;
} }
h1, h1,
h2, h2,
h3, h3,
h4 { h4 {
margin-bottom: 0.5em; margin-bottom: 0.5em;
margin-top: 1em; margin-top: 1em;
word-break: break-word; word-break: break-word;
} }
p { p {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.25; line-height: 1.25;
margin: 0.75rem 0; margin: 0.75rem 0;
} }
.thicc-headline { .thicc-headline {
// a sensible base font size // a sensible base font size
font-size: 3rem; font-size: 3rem;
line-height: 0.75; line-height: 0.75;
margin: 0.5rem 0rem; margin: 0.5rem 0rem;
padding: 0; padding: 0;
} }
@media (min-width: 51rem) and (min-height: 400px) { @media (min-width: 51rem) and (min-height: 400px) {
// a dramatic font size // a dramatic font size
.thicc-headline { .thicc-headline {
font-size: 12vh; font-size: 12vh;
} }
} }
@media (min-width: 51rem) and (min-height: 850px) { @media (min-width: 51rem) and (min-height: 850px) {
// cap the maximum font size of the title // cap the maximum font size of the title
// at the same size that 12vh computes to // at the same size that 12vh computes to
// when the viewport is 850px high // when the viewport is 850px high
// One day we can use CSS clamp https://caniuse.com/#feat=mdn-css_types_clamp // One day we can use CSS clamp https://caniuse.com/#feat=mdn-css_types_clamp
.thicc-headline { .thicc-headline {
font-size: 6.75rem; font-size: 6.75rem;
} }
} }
.main-headline { .main-headline {
font-family: orpheuspro, Palatino, Times, serif; font-family: orpheuspro, Palatino, Times, serif;
font-size: 3.5rem; font-size: 3.5rem;
line-height: 1.2; line-height: 1.2;
margin: 0; margin: 0;
} }
.sub-headline { .sub-headline {
font-size: 1.25rem; font-family: $ext-sans;
font-weight: bold; font-size: 1.25rem;
} font-weight: $bold;
letter-spacing: 0.1;
.sub-headline { margin: .75rem 0;
font-family: $ext-sans;
font-size: 1.25rem;
font-weight: $regular;
letter-spacing: 0.1;
margin: .75rem 0;
} }
.small { .small {
font-size: 0.75em; font-size: 0.75em;
} }

131
assets/css/structures/_grid.scss
View File

@ -1,91 +1,88 @@
.grid { .grid {
display: grid; display: grid;
grid-column-gap: 4rem; grid-column-gap: 4rem;
grid-row-gap: 10rem; grid-row-gap: 10rem;
grid-template-columns: repeat(4, [col] 1fr [col]); grid-template-columns: repeat(4, [col] 1fr [col]);
grid-template-rows: fit-content, fit-content, auto; grid-template-rows: fit-content, fit-content, auto;
} }
.auto-grid { .auto-grid {
display: grid; display: grid;
grid-gap: var(--l-gap); grid-gap: var(--l-gap);
grid-template-columns: repeat( grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-size), 1fr));
auto-fit,
minmax(var(--auto-grid-min-size), 1fr)
);
} }
@media screen and (max-width: 880px) { @media screen and (max-width: 880px) {
.auto-grid { .auto-grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
.small-left-grid { .small-left-grid {
display: grid; display: grid;
grid-gap: 1rem; grid-gap: 1rem;
@media (min-width: #{pxToRem(800)}) { @media (min-width: #{pxToRem(800)}) {
grid-template-columns: 10rem 60ch; grid-template-columns: 10rem 60ch;
} }
} }
.block__dictionary { .block__dictionary {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 50rem; max-width: 50rem;
padding: 0 1rem; padding: 0 1rem;
} }
.block__word { .block__word {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
grid-column: span 2; grid-column: span 2;
margin: 1rem; margin: 1rem;
} }
.block__type { .block__type {
align-items: flex-start; align-items: flex-start;
display: grid; display: grid;
grid-template-columns: 1fr 4fr; grid-template-columns: 1fr 4fr;
}
.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;
}
} }
.list { .list {
margin: 1rem 0; margin: 1rem 0;
li { li {
margin: 0.75rem 0; margin: 0.75rem 0;
} }
a { a {
word-break: break-word; 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;
}
} }