Commit a3886a5a authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Rework CSS to use 17 column grid. Shorten measure

parent 90a83782
......@@ -82,7 +82,7 @@ Watching the surveillance capitalists watching us.
[surveillance-watch.org](/surveillance-watch)
<ol class='emphasised-numbers'>
<li>This is test item one.</li>
<li><p>This is test item one. It needs to be in another element inside the li.</p></li>
<li>
<h3>I really envisioned these cool lists working with headers</h3>
<p>And then paragraphs underneath.</p>
......
......@@ -152,6 +152,17 @@ body {
}
}
/*
define CSS variables */
:root {
/* grid (19 cols) : margin 17 columns of same width margin */
--grid-columns-main: minmax(1.5rem, 1fr) repeat(17, minmax(auto, 3.264705882rem)) minmax(1.5rem, 1fr);
/* a subgrid based on the main grid but without margins */
--grid-columns-subgrid: repeat(17, minmax(auto, 3.264705882rem));
/* a subgrid list based on the main grid but without margins and minus far right col */
--grid-columns-subgrid-list: repeat(16, minmax(auto, 3.264705882rem));
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
......@@ -193,13 +204,7 @@ em {
ul, ol {
margin: 1em 0 0.75em 0;
padding: 0 1rem;
}
@media screen and (min-width: 36.26em) {
ul, ol {
padding: 0 1.5rem;
}
padding: 0;
}
li {
......@@ -213,6 +218,15 @@ blockquote {
margin: 0.5em 0;
}
header {
display: grid;
grid-template-columns: var(--grid-columns-main);
}
header * {
grid-column: 2 / 19; /* centred */
}
.skip-link {
position: absolute;
display: block;
......@@ -226,29 +240,13 @@ blockquote {
}
.site-title {
/* position the logo */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
grid-column: 2 / 3;
margin: 0;
}
.site-title a {
display: block;
margin: 1em 0 0 0.5rem;
}
@media screen and (min-width: 55.5rem) {
.site-title {
align-items: center;
}
.site-title a {
margin: 0;
}
margin: 1em 0 0 0;
}
......@@ -261,20 +259,13 @@ blockquote {
width: 1.5rem;
}
header {
display: grid;
grid-template-columns: 2rem 1fr;
margin: 0 auto;
max-width: 55.5rem;
}
nav {
grid-column: 3 / 19;
margin: 0.5em 0;
}
nav .navigation-menu {
margin: 0 auto;
max-width: 55.5rem;
}
nav ul {
......@@ -307,11 +298,11 @@ nav ul li a[href='/fund/'] {
main {
display: grid;
grid-template-columns: minmax(1.5rem, 1fr) minmax(auto, 55.5rem) minmax(1.5rem, 1fr);
grid-template-columns: var(--grid-columns-main);
}
main * {
grid-column: 2 / 3; /* centred */
grid-column: 3 / 18; /* centred on main */
}
.feature, .subtitle, .feature-text {
......@@ -321,7 +312,7 @@ main * {
.feature {
background: #D2D8ED;
grid-column: 1 / 4; /* full width */
grid-column: 1 / 20; /* full width */
padding: 4.33em 0;
}
......@@ -359,29 +350,16 @@ main * {
.subtitle {
background: #E9EEFB;
grid-column: 2 / 3; /* centred */
margin: -2em -1rem 1.5em -1rem;
padding: 1.5em 1rem;
}
@media screen and (min-width: 55.5rem) {
.subtitle {
margin-left: -1.5rem;
margin-right: -1.5rem;
padding: 1.5em 1.5rem;
}
}
@media screen and (min-width: 66.5rem) {
.subtitle {
margin-left: -3.5rem;
margin-right: -3.5rem;
padding: 1.5em 3.5rem;
}
grid-column: 2 / 19; /* centred */
display: grid;
grid-template-columns: var(--grid-columns-subgrid);
margin: -2em 0 1.5em 0;
padding: 1.5em 0;
}
.subtitle p {
color: #422D50;
grid-column: 2 / 17; /* centred on subgrid */
margin-bottom: 0;
}
......@@ -398,17 +376,26 @@ main * {
}
ol.emphasised-numbers {
grid-column: 2 / 19; /* centred */
counter-reset: emphasised-numbers-counter; /* custom numbering in :before "content" */
padding-left: 1rem;
display: grid;
grid-template-columns: var(--grid-columns-subgrid);
}
ol.emphasised-numbers li {
counter-increment: emphasised-numbers-counter; /* increment numbers on this list */
grid-column: 1 / 17; /* align left to left margin, align right to main text */
display: grid;
grid-template-columns: var(--grid-columns-subgrid-list);
list-style-type: none;
margin: 0 0 2em 4rem;
margin: 0 0 1em 0;
position: relative; /* enables us to position pseudo selectors on this element */
}
ol.emphasised-numbers li * {
grid-column: 3 / 17;
}
ol.emphasised-numbers li:before {
background: #E3F9A8;
border-radius: 50%;
......@@ -417,12 +404,10 @@ ol.emphasised-numbers li:before {
display: block;
font-size: 2.75em;
font-weight: bold;
grid-column: 1 / 3; /* on list subgrid */
height: 1.5em;
left: -6.5rem;
line-height: 1.5em;
position: absolute;
text-align: center;
top: -0.5em;
width: 1.5em;
}
......@@ -433,7 +418,9 @@ ol.emphasised-numbers li h3 {
aside.fund-us {
background: #AFE1E8;
color: #174C4F;
grid-column: 1 / 4; /* full width */
grid-column: 1 / 20; /* full width */
display: grid;
grid-template-columns: var(--grid-columns-main);
margin-top: 1.5rem;
padding: 2em 1.5rem 1.5em 1.5rem;
}
......@@ -443,11 +430,8 @@ aside.fund-us h2 {
font-size: 2em;
}
aside.fund-us h2, aside.fund-us p {
/* centre inside box */
margin-left: auto;
margin-right: auto;
max-width: 55.5rem;
aside.fund-us * {
grid-column: 3 / 18; /* centred on main */
}
aside.fund-us .link-highlighted {
......@@ -475,15 +459,13 @@ footer, small {
}
footer {
margin: 3.5em 1rem 1.5em 1rem;
max-width: 55.5rem;
display: grid;
grid-template-columns: var(--grid-columns-main);
margin: 3.5em 0 1.5em 0;
}
@media screen and (min-width: 55.5rem) {
footer {
margin-left: auto;
margin-right: auto;
}
footer * {
grid-column: 3 / 18; /* centred on main */
}
footer small {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment