feat: improve styling for lists, fix anchor offset

This commit is contained in:
Jacky Zhao 2022-07-14 10:30:07 -07:00
parent 422b6cc25b
commit d7a42a2fd7
4 changed files with 47 additions and 40 deletions

View file

@ -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 {

View file

@ -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>

View file

@ -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>

View file

@ -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 -}}