mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-06-12 21:51:40 +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
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,68 +1,63 @@
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-size: 1.25rem;
font-weight: bold;
}
.sub-headline {
font-family: $ext-sans;
font-size: 1.25rem;
font-weight: $regular;
letter-spacing: 0.1;
margin: .75rem 0;
font-family: $ext-sans;
font-size: 1.25rem;
font-weight: $bold;
letter-spacing: 0.1;
margin: .75rem 0;
}
.small {
font-size: 0.75em;
font-size: 0.75em;
}

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

@ -1,91 +1,88 @@
.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;
}
.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;
}
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;
}
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;
}
}