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

🔡 Typographic changes

Browse Source
This commit is contained in:
tatianamac
2019-10-21 15:17:24 -04:00
parent f95f04adaa
commit fe09f8e8c3
5 changed files with 129 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
_site/scss/base.scss
View File

@ -35,7 +35,7 @@ body {
border-top: 1rem solid red;
font-family: $sans-serif;
font-size: 20px;
padding: 0; margin:0;
padding: 2rem; margin:0;
}
h1 {
@ -54,6 +54,27 @@ h1 {
grid-column: span 2;
}
.small {
font-size: .75em;
}
.title__thicc {
font-size: 10vh;
line-height: .75;
padding: 0;
margin: 0.5rem 0rem;
grid-column: span 2;
// transform: rotateZ(90deg);
// margin: 13rem -7rem;
}
.help {
margin: 1rem 0;
li {
margin: .75rem 0;
}
}
// GRID //
.grid {
@ -71,11 +92,11 @@ h1 {
}
.box {
grid-column: span 2;
background: black;
color: white;
padding: 1rem;
margin: 2rem;
height: auto;
a {
color: white;
@ -107,103 +128,6 @@ h1 {
}
}
// MEDIA //
@media screen and (min-width: 200px) {
#title, #description, #summary {
grid-column: span 4;
}
body {
padding: 1em;
}
.list, .item {
grid-column: span 4;
}
.list {
padding: 0 auto;
margin: 0;
}
.title__thicc {
font-size: 9vw;
line-height: .75;
padding: 0;
margin: 0.5rem 0rem;
}
h2 {
font-size: 1.25em;
}
}
@media screen and (min-width: 600px) {
body {
padding: 2em;
}
.grid {
grid-row-gap: 1em;
}
#title {
grid-column: 1 / span 2;
grid-row: 1;
}
#summary {
grid-column: 3 / span 2;
grid-row: 1;
}
#description {
grid-column: span 4;
grid-row: 2;
}
.item {
grid-column: span 2;
}
h1 {
font-size: 3.5em;
}
h2 {
font-size: 1.3em;
}
}
.small {
font-size: .75em;
}
@media screen and (min-width: 1024px) {
#title {
grid-column: 1 / span 1;
grid-row: 1
}
#description {
grid-column: 2 / span 1;
grid-row: 1
}
#summary {
grid-column: 1 / span 1;
grid-row: 2
}
.list {
grid-row: span 3;
grid-column: span 1;
}
}
.block__dictionary {
max-width: 50rem;
margin-left: auto;
@ -315,6 +239,7 @@ margin: 1rem;
p {
margin: .75rem 0;
font-size: 1.25rem;
line-height: 1.25;
}
.style__italics {