feat: improve styling for lists, fix anchor offset
This commit is contained in:
parent
422b6cc25b
commit
d7a42a2fd7
@ -34,12 +34,12 @@ body {
|
|||||||
background-color: var(--light);
|
background-color: var(--light);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, ol, ul, thead {
|
h1, h2, h3, h4, h5, h6, thead {
|
||||||
font-family: var(--font-header);
|
font-family: var(--font-header);
|
||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
font-weight: revert;
|
font-weight: revert;
|
||||||
margin: 2rem 0 0;
|
margin: 2rem 0 0;
|
||||||
padding: revert;
|
padding: 2rem auto 1rem;
|
||||||
|
|
||||||
&:hover > .hanchor {
|
&:hover > .hanchor {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -48,13 +48,12 @@ h1, h2, h3, h4, h5, h6, ol, ul, thead {
|
|||||||
|
|
||||||
.hanchor {
|
.hanchor {
|
||||||
font-family: var(--font-header);
|
font-family: var(--font-header);
|
||||||
margin-left: -1em;
|
opacity: 0.2;
|
||||||
opacity: 0.3;
|
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
color: var(--secondary);
|
color: var(--secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
p, ul, text, a, tr, td, li {
|
p, ul, text, a, tr, td, li, ol, ul {
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
color: var(--gray);
|
color: var(--gray);
|
||||||
fill: var(--gray);
|
fill: var(--gray);
|
||||||
@ -176,16 +175,6 @@ blockquote {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
|
||||||
& h3 > a {
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
& p {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
article {
|
article {
|
||||||
& > h1 {
|
& > h1 {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
@ -223,6 +212,7 @@ article {
|
|||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
||||||
& .meta {
|
& .meta {
|
||||||
|
margin: 1.5em 0;
|
||||||
& > h1 {
|
& > h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@ -258,8 +248,11 @@ sup > a {
|
|||||||
padding: 0 0.1em 0 0.2em;
|
padding: 0 0.1em 0 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#page-title > a {
|
#page-title {
|
||||||
font-family: var(--font-header);
|
margin: 0;
|
||||||
|
& > a {
|
||||||
|
font-family: var(--font-header);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@ -357,10 +350,15 @@ hr {
|
|||||||
margin-top: 30vh;
|
margin-top: 30vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin: 1em 0 2em;
|
||||||
|
|
||||||
& > h1 {
|
& > h1 {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
@ -372,10 +370,6 @@ header {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .spacer {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#search-icon {
|
#search-icon {
|
||||||
background-color: var(--lightgray);
|
background-color: var(--lightgray);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
@ -385,7 +379,7 @@ header {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
& > p {
|
& > p {
|
||||||
display: inline;
|
display: inline;
|
||||||
padding: 0 0.5em 0 1em;
|
padding: 0 1.5em 0 2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -501,18 +495,32 @@ header {
|
|||||||
|
|
||||||
.section-ul {
|
.section-ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
margin-top: 2em;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
||||||
& > li {
|
& > li {
|
||||||
border: 1px solid var(--outlinegray);
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 0 1em;
|
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
|
|
||||||
|
& > .section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
& h3 > a {
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& p {
|
||||||
|
margin: 0;
|
||||||
|
padding-right: 1em;
|
||||||
|
flex-basis: 6em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
& h3 {
|
& h3 {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 0em;
|
margin: 0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .meta {
|
& .meta {
|
||||||
|
@ -12,11 +12,11 @@
|
|||||||
<div class="tags">
|
<div class="tags">
|
||||||
{{ range .Site.Taxonomies.tags.ByCount }}
|
{{ range .Site.Taxonomies.tags.ByCount }}
|
||||||
<div class="meta">
|
<div class="meta">
|
||||||
<h1><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a></h1>
|
<h1><a href="{{ .Page.Permalink }}">{{ .Page.Title | humanize }}</a></h1>
|
||||||
<p><b>{{ .Count }}</b> notes with this tag {{if gt .Count 2}}(showing first 2 results){{end}}</p>
|
<p><b>{{ .Count }}</b> notes with this tag {{if gt .Count 10}}(showing first 10 results){{end}}</p>
|
||||||
</div>
|
</div>
|
||||||
{{ with ($.Site.GetPage (printf "/tags/%s" .Page.Title)) }}
|
{{ with ($.Site.GetPage (printf "/tags/%s" .Page.Title)) }}
|
||||||
{{partial "page-list.html" (first 2 .Pages.ByLastmod.Reverse)}}
|
{{partial "page-list.html" (first 10 .Pages.ByLastmod.Reverse)}}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
<!-- Begin actual content -->
|
<!-- Begin actual content -->
|
||||||
{{partial "header.html" .}}
|
{{partial "header.html" .}}
|
||||||
<article>
|
<article>
|
||||||
<h1>Tag: {{.Title | humanize}}</h1>
|
<h1>Tag: {{ .Title }}</h1>
|
||||||
{{partial "page-list.html" .Paginator.Pages}}
|
{{partial "page-list.html" .Paginator.Pages}}
|
||||||
{{ template "_internal/pagination.html" . }}
|
{{ template "_internal/pagination.html" . }}
|
||||||
</article>
|
</article>
|
||||||
|
@ -2,19 +2,18 @@
|
|||||||
{{- range . -}}
|
{{- range . -}}
|
||||||
<li class="section-li">
|
<li class="section-li">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
<p class="meta">
|
||||||
|
{{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}
|
||||||
|
</p>
|
||||||
<div class="desc">
|
<div class="desc">
|
||||||
<h3><a href="{{ .Permalink }}">{{- .Title -}}</a></h3>
|
<h3><a href="{{ .Permalink }}">{{- .Title -}}</a></h3>
|
||||||
<ul class="tags">
|
|
||||||
{{ range (.GetTerms "tags") }}
|
|
||||||
<li><a href="{{ .Permalink }}">{{ .LinkTitle | title}}</a></li>
|
|
||||||
{{ end }}
|
|
||||||
</ul>
|
|
||||||
<p>{{- .Summary -}}{{if .Truncated}}...{{end}}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="meta">
|
<div class="spacer"></div>
|
||||||
{{ .ReadingTime }} minute read. Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}
|
<ul class="tags">
|
||||||
</p>
|
{{ range (.GetTerms "tags") }}
|
||||||
|
<li><a href="{{ .Permalink }}">{{ .LinkTitle | title}}</a></li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
Loading…
Reference in New Issue
Block a user