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

grid fuckery

Browse Source
This commit is contained in:
tatianamac
2018-09-23 03:20:30 +03:00
parent d8da34921a
commit 6639da8208
3 changed files with 85 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
css/base.css
View File

@ -3,13 +3,12 @@
body { body {
font-family: Inconsolata, Helvetica, sans-serif; font-family: Inconsolata, Helvetica, sans-serif;
font-size: 20px; font-size: 20px;
padding: 3em;
background: #e5ffe5; } background: #e5ffe5; }
h1 { h1 {
font-family: "Noto Serif KR", Georgia, serif; font-family: "Noto Serif KR", Georgia, serif;
font-weight: 200; font-weight: 200;
border-bottom: 20px #ffffff solid; } border-bottom: 0.25em #ffffff solid; }
h2, h3 { h2, h3 {
font-family: "Noto Serif KR", Georgia, serif; font-family: "Noto Serif KR", Georgia, serif;
@ -23,26 +22,44 @@ li {
.grid { .grid {
display: grid; display: grid;
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-row-gap: 2em; grid-row-gap: 2em;
grid-column-gap: 1em; grid-column-gap: 1em; }
grid-gap: .5em; }
@media screen and (min-width: 200px) { @media screen and (min-width: 200px) {
.item { #title, #description, #summary {
grid-column: span 4; }
body {
padding: 1em; }
.list, .item {
grid-column: span 4; } grid-column: span 4; }
h1 { h1 {
font-size: 2em; } font-size: 3em; }
h2 { h2 {
font-size: 1em; } } font-size: 1.25em; } }
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
body {
padding: 3em; }
#title, #description, #summary {
grid-column: span 2; }
.item { .item {
grid-column: span 2; } grid-column: span 2; }
h1 { h1 {
font-size: 4em; } font-size: 4em; }
h2 { h2 {
font-size: 1.5em; } } font-size: 1.3em; } }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.item { #title {
grid-column: 1 / span 1;
grid-row: 1; }
#description {
grid-column: 2 / span 1;
grid-row: 1; }
#summary {
grid-column: 1 / span 2;
grid-row: 2; }
.list {
grid-row: span 3;
grid-column: span 1; } } grid-column: span 1; } }

23
index.html
View File

@ -9,18 +9,22 @@
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head> </head>
<body> <body>
<div class="grid"> <div class="grid">
<div class="item"> <div class="item" id="title">
<h1>Self-Defined</h1> <h1>Self-Defined</h1>
<p>A list of words to know to better understand one another.</p>
<p>For now, this stands as a list only; definitions and resources will be the next phase of the project.</p>
<h3>Submit a word/Volunteer to help</h3>
<p>Send unlisted words to or volunteer your time by messaging <a href="http://www.twitter.com/tatianatmac" target="_blank">@tatianatmac on Twitter</a>.</p>
</div> </div>
<div class="item">
<h2>A modern dictionary to reflect today's entire world</h2> <div class="item" id="description">
<h2>A modern dictionary about us, written by us</h2>
</div> </div>
<div class="item"> <div class="item" id="summary">
<p>For now, this stands as a list only, from which you can self-educate. Future phases will include definitions and resources.</p>
<h3>Participate</h3>
<p>Send unlisted words to or chat about volunteering to help: <a href="http://www.twitter.com/tatianatmac" target="_blank">@tatianatmac on Twitter</a>.</p>
</div>
<div class="list">
<ul> <ul>
<li>Ablelism</li> <li>Ablelism</li>
<li>Auto Immune Disorder (AIDS)</li> <li>Auto Immune Disorder (AIDS)</li>
@ -77,7 +81,7 @@
<li>invisible disabilities</li> <li>invisible disabilities</li>
</ul> </ul>
</div> </div>
<div class="item"> <div class="list">
<ul> <ul>
<li>Marginalized</li> <li>Marginalized</li>
<li>Minority</li> <li>Minority</li>
@ -133,6 +137,5 @@
<li>womanism</li> <li>womanism</li>
</ul> </ul>
</div> </div>
</body> </body>
</html> </html>

54
scss/base.scss
View File

@ -9,6 +9,7 @@
$black: #222222; $black: #222222;
$white: #ffffff; $white: #ffffff;
$pistachio: #e5ffe5; $pistachio: #e5ffe5;
$yellow: #ffff00;
$dark-grey: #4F4F4F; $dark-grey: #4F4F4F;
$mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y $mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y
@ -29,14 +30,13 @@
body { body {
font-family: $sans-serif; font-family: $sans-serif;
font-size: 20px; font-size: 20px;
padding: 3em;
background: #e5ffe5; background: #e5ffe5;
} }
h1 { h1 {
font-family: $serif; font-family: $serif;
font-weight: $thin; font-weight: $thin;
border-bottom: 20px $white solid; border-bottom: .25em $white solid;
} }
h2, h3 { h2, h3 {
@ -55,28 +55,49 @@ li {
.grid { .grid {
display: grid; display: grid;
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-row-gap: 2em; grid-row-gap: 2em;
grid-column-gap: 1em; grid-column-gap: 1em;
grid-gap: .5em; }
.item {
} }
// MEDIA //
@media screen and (min-width: 200px) { @media screen and (min-width: 200px) {
.item {
#title, #description, #summary {
grid-column: span 4;
}
body {
padding: 1em;
}
.list, .item {
grid-column: span 4; grid-column: span 4;
} }
h1 { h1 {
font-size: 2em; font-size: 3em;
} }
h2 { h2 {
font-size: 1em; font-size: 1.25em;
} }
} }
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
body {
padding: 3em;
}
#title, #description, #summary {
grid-column: span 2;
}
.item { .item {
grid-column: span 2; grid-column: span 2;
} }
@ -86,12 +107,29 @@ li {
} }
h2 { h2 {
font-size: 1.5em; font-size: 1.3em;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.item {
#title {
grid-column: 1 / span 1;
grid-row: 1
}
#description {
grid-column: 2 / span 1;
grid-row: 1
}
#summary {
grid-column: 1 / span 2;
grid-row: 2
}
.list {
grid-row: span 3;
grid-column: span 1; grid-column: span 1;
} }
} }