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

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

3
.gitignore vendored
View File

@ -1,4 +1,5 @@
.DS_Store
node_modules
dist
config.codekit3
config.codekit3
.cache

6
11ty/index.njk
View File

@ -3,10 +3,8 @@ layout: layouts/index.njk
---
<section id="introduction" class="auto-grid">
<div id="title">
<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>
</div>
<h1 class="title__thicc" id="title">Self-Defined</h1>
<p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
<div>
<p class="summary">
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 {
font-size: 8vh;
// a sensible base font size
font-size: 3rem;
line-height: 0.75;
padding: 0;
margin: 0.5rem 0rem;
grid-column: span 2;
// transform: rotateZ(90deg);
// 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 {
margin: 1rem 0;
li {