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

Merge pull request #40 from laurakalbag/LK-2020-01

Browse Source 
🔨 Fix overflowing heading
This commit is contained in:
Tatiana Mac 2020-01-18 15:23:18 -08:00 committed by GitHub
commit f3ba9a175b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,3 +2,4 @@
node_modules node_modules
dist dist
config.codekit3 config.codekit3
.cache

4
11ty/index.njk
View File

@ -3,10 +3,8 @@ layout: layouts/index.njk
--- ---
<section id="introduction" class="auto-grid"> <section id="introduction" class="auto-grid">
<div id="title"> <h1 class="title__thicc" id="title">Self-Defined</h1>
<h1 class="title__thicc">Self-Defined</h1>
<p>A modern dictionary about us.<br>We define our words, but they don't define us.</p> <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
</div>
<div> <div>
<p class="summary"> <p class="summary">
Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the diverse perspectives of the modern world. Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the diverse perspectives of the modern world.

30
assets/css/base.scss
View File

@ -138,15 +138,41 @@ ul[class] {
} }
.title__thicc { .title__thicc {
font-size: 8vh; // a sensible base font size
font-size: 3rem;
line-height: 0.75; line-height: 0.75;
padding: 0; padding: 0;
margin: 0.5rem 0rem; margin: 0.5rem 0rem;
grid-column: span 2;
// transform: rotateZ(90deg); // transform: rotateZ(90deg);
// margin: 13rem -7rem; // margin: 13rem -7rem;
} }
@media (min-width: 51rem) and (min-height: 400px) {
// a dramatic font size
.title__thicc {
font-size: 12vh;
}
}
@media (min-width: 51rem) and (min-height: 850px) {
// 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: 800px) {
.title__thicc {
grid-column: 1 / 3;
}
.title__thicc + p {
grid-column: 1 / 2;
}
}
.help { .help {
margin: 1rem 0; margin: 1rem 0;
li { li {