mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-10-31 22:28:32 +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 {
font-family: Inconsolata, Helvetica, sans-serif;
font-size: 20px;
padding: 3em;
background: #e5ffe5; }
h1 {
font-family: "Noto Serif KR", Georgia, serif;
font-weight: 200;
border-bottom: 20px #ffffff solid; }
border-bottom: 0.25em #ffffff solid; }
h2, h3 {
font-family: "Noto Serif KR", Georgia, serif;
@@ -23,26 +22,44 @@ li {
.grid {
display: grid;
grid-template-columns: repeat(4, [col] 1fr [col]);
grid-template-rows: fit-content, fit-content, auto;
grid-row-gap: 2em;
grid-column-gap: 1em;
grid-gap: .5em; }
grid-column-gap: 1em; }
@media screen and (min-width: 200px) {
.item {
#title, #description, #summary {
grid-column: span 4; }
body {
padding: 1em; }
.list, .item {
grid-column: span 4; }
h1 {
font-size: 2em; }
font-size: 3em; }
h2 {
font-size: 1em; } }
font-size: 1.25em; } }
@media screen and (min-width: 600px) {
body {
padding: 3em; }
#title, #description, #summary {
grid-column: span 2; }
.item {
grid-column: span 2; }
h1 {
font-size: 4em; }
h2 {
font-size: 1.5em; } }
font-size: 1.3em; } }
@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; } }