diff --git a/index.html b/index.html index f05fbb0..22a186b 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@

- +
@@ -44,7 +44,6 @@
-
Special
Issue 13
diff --git a/stylesheet.css b/stylesheet.css index 7fd4cd5..515ff64 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -35,9 +35,10 @@ div#wrapping{ /* SECTION: SPECIAL ISSUES */ section#issues{ - display: flex; - flex-direction: row; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(3, calc(33.3% - 42px)); + grid-template-rows: repeat(3, 1fr); + grid-auto-flow: column; font-size: 14px; line-height: 20px; } @@ -133,6 +134,12 @@ section#info.endpoint{ font-family: monospace; font-size: 14px; line-height: 1.9; +} +section#intro.endpoint{ + margin-bottom: 100px; +} +section#info.endpoint{ + margin-top: 100px; } section#intro h1, section#info h1{ @@ -173,32 +180,36 @@ section#info.endpoint{ /* GENERAL ELEMENTS */ section#issues .issue{ - flex: 3 3 auto; - display: inline-block; - width: calc(33.3% - 42px); - vertical-align: top; - margin: 0 0 80px; + margin: 0; padding: 2em 15px; color: rgb(40,40,40); } section#issues .issue[data-cycle='1']{ margin-top:0 !important; + grid-column: 1; } section#issues .issue[data-cycle='2']{ margin-top: 200px !important; + grid-column: 2; } section#issues .issue[data-cycle='3']{ margin-top: 400px !important; + grid-column: 3; } -section#issues .issue[data-cycle='4']{ +section#issues .issue[data-cycle='6']{ margin-top: 400px !important; + grid-column: 1; } section#issues .issue[data-cycle='5']{ margin-top: 200px !important; + grid-column: 2; } -section#issues .issue[data-cycle='6']{ +section#issues .issue[data-cycle='4']{ margin-top: 0 !important; + grid-column: 3; } + + section#issues .issue-title, section#issues .issue-nr{ font-size: 275%;