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

Add basic styling for blobs lists

parent 8cab94d2
......@@ -60,26 +60,24 @@ Develop, test, and deploy your secure static or dynamic personal web site with z
<a href='/talks'>Watch more talks</a>, read our <a href='/articles'>articles</a>, and learn about upcoming <a href='/events'>events</a>.</div>
### Better Blocker
A tracker-blocking privacy tool for Safari on iPhone, iPad, and Mac. Available from the App Store and the Mac App Store.
[Better.fyi](https://better.fyi)
### Accessibility For Everyone by Laura Kalbag
A book about building inclusive and accessible websites. Available from A Book Apart in paperback or ebook, or in audiobook on Audible.
[a4e.link](https://a4e.link)
### Ethical Design Manifesto
How we can build technology that respects human rights, human effort, and human experience.
[ethical-design.org](/ethical-design-manifesto)
### Surveillance Watch
Watching the surveillance capitalists watching us.
[surveillance-watch.org](/surveillance-watch)
<ul class='blobs'>
<li class='better'>
<img src='image.jpg'>
<p><strong>Better Blocker</strong> A tracker-blocking privacy tool for Safari on iPhone, iPad, and Mac. Available from the App Store and the Mac App Store. <a href='https://better.fyi'>Better.fyi</a></p>
</li>
<li class='accessibility'>
<img src='image.jpg'>
<p><strong>Accessibility For Everyone by Laura Kalbag</strong> A book about building inclusive and accessible websites. Available from A Book Apart in paperback or ebook, or in audiobook on Audible. <a href='https://a4e.link'>a4e.link</a></p>
</li>
<li class='ethical-design'>
<img src='image.jpg'>
<p><strong>Ethical Design Manifesto</strong> How we can build technology that respects human rights, human effort, and human experience. <a href='/ethical-design-manifesto'>ethical-design.org</a></p>
</li>
<li class='lens'>
<img src='image.jpg'>
<p><strong>Surveillance Watch</strong> Watching the surveillance capitalists watching us. <a href='/surveillance-watch'>surveillance-watch.org</a></p>
</li>
</ul>
<ol class='emphasised-numbers'>
<li><p>This is test item one. It needs to be in another element inside the li.</p></li>
......
<svg height="148" viewBox="0 0 151 148" width="151" xmlns="http://www.w3.org/2000/svg"><path d="m85 148c41.697499 0 66-31.78297 66-73.4804688 0-41.6974986-43.302501-74.5195312-85-74.5195312-41.6974986 0-66 32.8220326-66 74.5195312 0 41.6974988 43.3025014 73.4804688 85 73.4804688z" fill="#c7d4cc" fill-rule="evenodd"/></svg>
\ No newline at end of file
......@@ -161,6 +161,8 @@ body {
--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));
/* subgrid for blobs */
--grid-columns-subgrid-blob: repeat(14, minmax(auto, 3.264705882rem));
}
h1, h2, h3, h4, h5, h6 {
......@@ -375,6 +377,57 @@ main * {
text-decoration: none;
}
ul.blobs {
grid-column: 2 / 19; /* centred */
display: grid;
grid-template-columns: var(--grid-columns-subgrid);
margin: 3em 0 2em 0;
}
ul.blobs li {
grid-column: 1 / 15;
list-style-type: none;
margin-bottom: 1em;
display: grid;
grid-template-columns: var(--grid-columns-subgrid-blob);
grid-template-rows: repeat(3, auto);
}
ul.blobs li:nth-of-type(2n) {
/* stagger */
grid-column: 3 / 17;
}
ul.blobs li.better, ul.blobs li.better a {
color: #005D62;
}
ul.blobs li.accessibility, ul.blobs li.accessibility a {
color: #00625B;
}
ul.blobs li.ethical-design, ul.blobs li.ethical-design a {
color: #97285A;
}
ul.blobs li.lens, ul.blobs li.lens a {
color: #804C00;
}
ul.blobs li img {
background: url('images/blob.svg') center left no-repeat;
background-size: 100%;
grid-column: 1 / 4;
grid-row: 1 / 4;
height: auto;
width: 100%;
}
ul.blobs li p {
grid-column: 5 / 15;
grid-row: 2 / 3; /* vertically centre */
}
ol.emphasised-numbers {
grid-column: 2 / 19; /* centred */
counter-reset: emphasised-numbers-counter; /* custom numbering in :before "content" */
......@@ -412,6 +465,8 @@ ol.emphasised-numbers li:before {
}
ol.emphasised-numbers li h3 {
font-family: 'Rutan Medium', sans-serif;
font-weight: normal;
margin-bottom: 0.5em; /* less margin than on other h3s so there’s less distance to the text below */
}
......
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