WIP sticky toc and more elements themed
This commit is contained in:
parent
162453a632
commit
4211293c78
15 changed files with 99 additions and 26 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -19,4 +19,5 @@
|
|||
}
|
||||
.card p {
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -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="}}
|
||||
Loading…
Reference in a new issue