WIP sticky toc and more elements themed

This commit is contained in:
a 2020-10-18 18:01:57 -05:00
parent 162453a632
commit 4211293c78
15 changed files with 99 additions and 26 deletions

View file

@ -1,8 +1,8 @@
.list {
.container {
display: grid;
grid-template-columns: 1fr;
gap: 1em;
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
gap: 3em;
}
.list-item {
color: inherit;
@ -17,14 +17,16 @@
margin: 0.5em 0;
}
&__summary {
margin-bottom: 1.5em;
margin-bottom: 0.5em;
line-height: 1.4;
}
&__date {
display: block;
margin-bottom: 1em;
}
&:hover {
color: #0060ff;
&__readmore {
margin-bottom: 1em;
display: block;
}
}
}

View file

@ -9,7 +9,7 @@
grid-template-columns: minmax(45ch,65ch) 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"header ."
"header header"
"content meta";
}
.section {
@ -59,7 +59,25 @@
}
ul {list-style: disc; margin: 1em 0;}
li {margin-bottom: 1em; line-height: 1.4; margin-left: 1em;}
ol {list-style: number; margin: 1em 0;}
ol {list-style: decimal; margin: 1em 0;}
dl {margin: 1em 0; line-height: 1.4;}
dt {font-weight: 700;}
dd {margin-left: 1em;}
em {font-style: italic}
strong {font-weight: 700}
sup {
position: relative;
font-size: 0.8em;
a {position: relative; top: -0.5em;}
}
table {
text-align: center;
thead {
font-weight: 700;
}
th, td {border: 1px solid black; padding: 0.5em;}
}
}
.tags {
@ -75,9 +93,24 @@
}
}
.meta .container {height: 100%}
#TableOfContents {
list-style: none;
position: sticky;
top: 2rem;
max-width: max-content;
font-size: 0.75em;
margin: 2em 0;
li {margin-bottom: 0; margin-left: 1em;}
a {color: inherit;}
ul {list-style: none; margin: 0;}
li {margin-bottom: 0; margin-left: 0;}
li li {margin-left: 1em;}
a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease-in-out;
&:hover {
color: #0060ff;
text-decoration: underline;
}
}
}

View file

@ -19,4 +19,5 @@
}
.card p {
margin-bottom: 1em;
line-height: 1.4;
}

View file

@ -2,7 +2,11 @@
background: #333;
color: white;
hr {display: none;}
.container {padding: 2em 1em;}
.container {
padding: 2em 1em;
display: flex;
flex-flow: row wrap;
}
dt {font-weight: 700;}
dd {margin-bottom: 0.5em;}
a {color: inherit;}

View file

@ -1,7 +1,7 @@
---
title: "Elements"
summary: "Testing styles"
draft: true
draft: false
---
# h1
@ -40,4 +40,27 @@ Lorem ipsum
et dolore
magna
aliqua.
```
```
*emphasis*
**strong**
---
Here is a table[^1].
[^1]: Footnote
| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
term
: definition
~~strikethrough~~
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Binary file not shown.

Before

Width:  |  Height:  |  Size: 118 KiB

View file

@ -3,6 +3,7 @@ title: "Mastodon documentation revamp"
summary: "Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it."
date: "2020-01-04"
tags: ["mastodon", "documentation", "information architecture", "rest api"]
cover: "/images/mastodocs.jpg"
---
## Overview

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

View file

@ -3,6 +3,7 @@ title: "Pixelfed team member"
summary: "Turning a one-person project into an organized effort."
date: "2019-01-01"
tags: ["pixelfed", "project management", "product management", "github issues", "documentation"]
cover: "/images/pixelfed.jpg"
---
## Overview

View file

@ -11,12 +11,15 @@
<section class="section list">
<div class="container">
{{ range .Pages }}
<a class="list-item" href="{{ .Permalink }}">
<img class="list-item__image" src="{{.Permalink}}cover.jpg">
<article class="list-item">
{{ with .Params.cover }}
<img class="list-item__image" src="{{.}}">
{{end}}
<h2 class="list-item__title">{{ .Title }}</h2>
<p class="list-item__summary">{{.Summary}}</p>
<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
</a>
<a class="list-item__readmore" href="{{ .Permalink }}">Read more...</a>
</article>
{{ end }}
</div>
</section>

View file

@ -8,13 +8,16 @@
<div class="container">
<h1 class="page-title">{{ .Title }}</h1>
<p class="page-summary">{{.Summary}}</p>
<img class="page-cover" src="cover.jpg">
{{ with .Params.cover }}
<img class="page-cover" src="{{.}}">
{{end}}
</div>
</header>
<aside class="meta section">
<div class="container">
<datetime class="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </datetime>
<p class="wordcount"> {{.WordCount}} words</p>
<!--
{{ with .Params.tags }}
<p>Keywords:</p>
<ul class="tags">
@ -23,6 +26,7 @@
{{ end }}
</ul>
{{ end }}
-->
{{ .TableOfContents }}
</div>
</aside>

View file

@ -52,13 +52,13 @@
<img src="/images/mastodocs.jpg">
<h3>Mastodon<br>Documentation Revamp</h3>
<p>Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it.</p>
<a href="">Read more</a>
<a href="/work/mastodon">Read more</a>
</div>
<div class="card">
<img src="/images/pixelfed.jpg">
<h3>Pixelfed<br>Project Management</h3>
<p>After making a masterpost of bugs and issues, I turned Pixelfed from a one-person project into a team effort.</p>
<a href="">Read more</a>
<a href="/work/pixelfed">Read more</a>
</div>
<div class="card">
<img src="/images/namecheap.jpg" alt="">
@ -92,17 +92,17 @@
<div class="testimonials">
<div class="testimonial">
<img class="avatar" width=32 height=32 src="/images/khalil.jpg">
<p class="name">Khalil Saadiq</p>
<p class="name">Khalil Saadiq,<br>former classmate</p>
<blockquote class="bubble">it's scary how much you know.</blockquote>
</div>
<div class="testimonial">
<img class="avatar" width=32 height=32 src="/images/gargron.jpg">
<p class="name">Eugen Rochko</p>
<p class="name">Eugen Rochko,<br>Mastodon developer</p>
<blockquote class="bubble">bless you for being here to work on the docs btw. it's a big relief.</blockquote>
</div>
<div class="testimonial">
<img class="avatar" width=32 height=32 src="/images/dansup.jpg">
<p class="name">Daniel Supernault</p>
<p class="name">Daniel Supernault,<br>Pixelfed developer</p>
<blockquote class="bubble">i don't trust anyone as much as you to shape the direction of the project.</blockquote>
</div>
</div>

View file

@ -1,7 +1,7 @@
<footer class="site-footer">
<hr>
<div class="container">
<dl style="max-width: max-content; margin: 0 auto;">
<dl>
<dt>email</dt>
<dd>a@trwnh.com</dd>
<dt>jabber</dt>
@ -9,5 +9,6 @@
<dt>fediverse</dt>
<dd><a href="https://mastodon.social/@trwnh" rel="me">mastodon.social/@trwnh</a></dd>
</dl>
</div>
</footer>

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
{"Target":"scss/main.min.38ec2c33a877306d8370794aed7a2ff778484eed49da2c100f12c3180e387913.css","MediaType":"text/css","Data":{"Integrity":"sha256-OOwsM6h3MG2DcHlK7Xov93hITu1J2iwQDxLDGA44eRM="}}
{"Target":"scss/main.min.69d4711fe0e0bb357457852f01b5350f97d301b6069516d46c11edae2910bda0.css","MediaType":"text/css","Data":{"Integrity":"sha256-adRxH+DguzV0V4UvAbU1D5fTAbYGlRbUbBHtrikQvaA="}}