WIP sticky toc and more elements themed
This commit is contained in:
parent
162453a632
commit
4211293c78
|
@ -1,8 +1,8 @@
|
||||||
.list {
|
.list {
|
||||||
.container {
|
.container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
|
||||||
gap: 1em;
|
gap: 3em;
|
||||||
}
|
}
|
||||||
.list-item {
|
.list-item {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
@ -17,14 +17,16 @@
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
}
|
}
|
||||||
&__summary {
|
&__summary {
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 0.5em;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
&__date {
|
&__date {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
&:hover {
|
&__readmore {
|
||||||
color: #0060ff;
|
margin-bottom: 1em;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -9,7 +9,7 @@
|
||||||
grid-template-columns: minmax(45ch,65ch) 1fr;
|
grid-template-columns: minmax(45ch,65ch) 1fr;
|
||||||
grid-template-rows: auto auto;
|
grid-template-rows: auto auto;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"header ."
|
"header header"
|
||||||
"content meta";
|
"content meta";
|
||||||
}
|
}
|
||||||
.section {
|
.section {
|
||||||
|
@ -59,7 +59,25 @@
|
||||||
}
|
}
|
||||||
ul {list-style: disc; margin: 1em 0;}
|
ul {list-style: disc; margin: 1em 0;}
|
||||||
li {margin-bottom: 1em; line-height: 1.4; margin-left: 1em;}
|
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 {
|
.tags {
|
||||||
|
@ -75,9 +93,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.meta .container {height: 100%}
|
||||||
|
|
||||||
#TableOfContents {
|
#TableOfContents {
|
||||||
list-style: none;
|
position: sticky;
|
||||||
|
top: 2rem;
|
||||||
|
max-width: max-content;
|
||||||
|
font-size: 0.75em;
|
||||||
margin: 2em 0;
|
margin: 2em 0;
|
||||||
li {margin-bottom: 0; margin-left: 1em;}
|
ul {list-style: none; margin: 0;}
|
||||||
a {color: inherit;}
|
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 {
|
.card p {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
|
line-height: 1.4;
|
||||||
}
|
}
|
|
@ -2,7 +2,11 @@
|
||||||
background: #333;
|
background: #333;
|
||||||
color: white;
|
color: white;
|
||||||
hr {display: none;}
|
hr {display: none;}
|
||||||
.container {padding: 2em 1em;}
|
.container {
|
||||||
|
padding: 2em 1em;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
}
|
||||||
dt {font-weight: 700;}
|
dt {font-weight: 700;}
|
||||||
dd {margin-bottom: 0.5em;}
|
dd {margin-bottom: 0.5em;}
|
||||||
a {color: inherit;}
|
a {color: inherit;}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
title: "Elements"
|
title: "Elements"
|
||||||
summary: "Testing styles"
|
summary: "Testing styles"
|
||||||
draft: true
|
draft: false
|
||||||
---
|
---
|
||||||
|
|
||||||
# h1
|
# h1
|
||||||
|
@ -41,3 +41,26 @@ Lorem ipsum
|
||||||
magna
|
magna
|
||||||
aliqua.
|
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."
|
summary: "Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it."
|
||||||
date: "2020-01-04"
|
date: "2020-01-04"
|
||||||
tags: ["mastodon", "documentation", "information architecture", "rest api"]
|
tags: ["mastodon", "documentation", "information architecture", "rest api"]
|
||||||
|
cover: "/images/mastodocs.jpg"
|
||||||
---
|
---
|
||||||
|
|
||||||
## Overview
|
## 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."
|
summary: "Turning a one-person project into an organized effort."
|
||||||
date: "2019-01-01"
|
date: "2019-01-01"
|
||||||
tags: ["pixelfed", "project management", "product management", "github issues", "documentation"]
|
tags: ["pixelfed", "project management", "product management", "github issues", "documentation"]
|
||||||
|
cover: "/images/pixelfed.jpg"
|
||||||
---
|
---
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|
|
@ -11,12 +11,15 @@
|
||||||
<section class="section list">
|
<section class="section list">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{{ range .Pages }}
|
{{ range .Pages }}
|
||||||
<a class="list-item" href="{{ .Permalink }}">
|
<article class="list-item">
|
||||||
<img class="list-item__image" src="{{.Permalink}}cover.jpg">
|
{{ with .Params.cover }}
|
||||||
|
<img class="list-item__image" src="{{.}}">
|
||||||
|
{{end}}
|
||||||
<h2 class="list-item__title">{{ .Title }}</h2>
|
<h2 class="list-item__title">{{ .Title }}</h2>
|
||||||
<p class="list-item__summary">{{.Summary}}</p>
|
<p class="list-item__summary">{{.Summary}}</p>
|
||||||
<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
|
<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
|
||||||
</a>
|
<a class="list-item__readmore" href="{{ .Permalink }}">Read more...</a>
|
||||||
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -8,13 +8,16 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="page-title">{{ .Title }}</h1>
|
<h1 class="page-title">{{ .Title }}</h1>
|
||||||
<p class="page-summary">{{.Summary}}</p>
|
<p class="page-summary">{{.Summary}}</p>
|
||||||
<img class="page-cover" src="cover.jpg">
|
{{ with .Params.cover }}
|
||||||
|
<img class="page-cover" src="{{.}}">
|
||||||
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<aside class="meta section">
|
<aside class="meta section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<datetime class="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </datetime>
|
<datetime class="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </datetime>
|
||||||
<p class="wordcount"> {{.WordCount}} words</p>
|
<p class="wordcount"> {{.WordCount}} words</p>
|
||||||
|
<!--
|
||||||
{{ with .Params.tags }}
|
{{ with .Params.tags }}
|
||||||
<p>Keywords:</p>
|
<p>Keywords:</p>
|
||||||
<ul class="tags">
|
<ul class="tags">
|
||||||
|
@ -23,6 +26,7 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
-->
|
||||||
{{ .TableOfContents }}
|
{{ .TableOfContents }}
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
|
@ -52,13 +52,13 @@
|
||||||
<img src="/images/mastodocs.jpg">
|
<img src="/images/mastodocs.jpg">
|
||||||
<h3>Mastodon<br>Documentation Revamp</h3>
|
<h3>Mastodon<br>Documentation Revamp</h3>
|
||||||
<p>Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it.</p>
|
<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>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<img src="/images/pixelfed.jpg">
|
<img src="/images/pixelfed.jpg">
|
||||||
<h3>Pixelfed<br>Project Management</h3>
|
<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>
|
<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>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<img src="/images/namecheap.jpg" alt="">
|
<img src="/images/namecheap.jpg" alt="">
|
||||||
|
@ -92,17 +92,17 @@
|
||||||
<div class="testimonials">
|
<div class="testimonials">
|
||||||
<div class="testimonial">
|
<div class="testimonial">
|
||||||
<img class="avatar" width=32 height=32 src="/images/khalil.jpg">
|
<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>
|
<blockquote class="bubble">it's scary how much you know.</blockquote>
|
||||||
</div>
|
</div>
|
||||||
<div class="testimonial">
|
<div class="testimonial">
|
||||||
<img class="avatar" width=32 height=32 src="/images/gargron.jpg">
|
<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>
|
<blockquote class="bubble">bless you for being here to work on the docs btw. it's a big relief.</blockquote>
|
||||||
</div>
|
</div>
|
||||||
<div class="testimonial">
|
<div class="testimonial">
|
||||||
<img class="avatar" width=32 height=32 src="/images/dansup.jpg">
|
<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>
|
<blockquote class="bubble">i don't trust anyone as much as you to shape the direction of the project.</blockquote>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<hr>
|
<hr>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<dl style="max-width: max-content; margin: 0 auto;">
|
<dl>
|
||||||
<dt>email</dt>
|
<dt>email</dt>
|
||||||
<dd>a@trwnh.com</dd>
|
<dd>a@trwnh.com</dd>
|
||||||
<dt>jabber</dt>
|
<dt>jabber</dt>
|
||||||
|
@ -9,5 +9,6 @@
|
||||||
<dt>fediverse</dt>
|
<dt>fediverse</dt>
|
||||||
<dd><a href="https://mastodon.social/@trwnh" rel="me">mastodon.social/@trwnh</a></dd>
|
<dd><a href="https://mastodon.social/@trwnh" rel="me">mastodon.social/@trwnh</a></dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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