Commit 90a83782 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Basic list styling and fancy numbered list styling

parent 3e5a27fa
......@@ -81,4 +81,20 @@ Watching the surveillance capitalists watching us.
[surveillance-watch.org](/surveillance-watch)
<ol class='emphasised-numbers'>
<li>This is test item one.</li>
<li>
<h3>I really envisioned these cool lists working with headers</h3>
<p>And then paragraphs underneath.</p>
</li>
<li>
<h3>This is list item number three</h3>
<p>We can use these jazzy list to set the text apart from other text.</p>
</li>
<li>
<h3>Short header</h3>
<p>But this paragraph is much longer, becuse it has a lot more to say. It will go on to a second line, perhaps a third or fourth. We want any length of text to work in this area really.</p>
</li>
</ol>
{{< fund-us >}}
......@@ -191,6 +191,21 @@ em {
font-style: italic;
}
ul, ol {
margin: 1em 0 0.75em 0;
padding: 0 1rem;
}
@media screen and (min-width: 36.26em) {
ul, ol {
padding: 0 1.5rem;
}
}
li {
margin: 0 0 0.5em 0;
}
blockquote {
font-size: 1.02em; /* scale up to match size of non-italic text */
font-style: italic;
......@@ -382,6 +397,39 @@ main * {
text-decoration: none;
}
ol.emphasised-numbers {
counter-reset: emphasised-numbers-counter; /* custom numbering in :before "content" */
padding-left: 1rem;
}
ol.emphasised-numbers li {
counter-increment: emphasised-numbers-counter; /* increment numbers on this list */
list-style-type: none;
margin: 0 0 2em 4rem;
position: relative; /* enables us to position pseudo selectors on this element */
}
ol.emphasised-numbers li:before {
background: #E3F9A8;
border-radius: 50%;
color: #00625B;
content: counter(emphasised-numbers-counter); /* add custom list numbers */
display: block;
font-size: 2.75em;
font-weight: bold;
height: 1.5em;
left: -6.5rem;
line-height: 1.5em;
position: absolute;
text-align: center;
top: -0.5em;
width: 1.5em;
}
ol.emphasised-numbers li h3 {
margin-bottom: 0.5em; /* less margin than on other h3s so there’s less distance to the text below */
}
aside.fund-us {
background: #AFE1E8;
color: #174C4F;
......
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