mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-06-09 12:30:51 +00:00
grid fuckery
This commit is contained in:
parent
d8da34921a
commit
6639da8208
35
css/base.css
35
css/base.css
@ -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
23
index.html
@ -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>
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user