Amolith
/
secluded
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve post list styling

This commit is contained in:
Amolith 2023-05-31 13:01:24 -04:00
parent 92a6b5886e
commit c11f29672e
Signed by: Amolith
GPG Key ID: 8AE30347CE28D101
6 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
themes/secluded/assets/scss/_header.scss
View File

@ -18,10 +18,10 @@
padding: 0px; padding: 0px;
} }
li { li {
display: inline; display: inline-block;
padding-left: 15px; padding-left: 15px;
} }
@media (max-width: 600px) { @media (max-width: $max-width) {
float: none; float: none;
ul { ul {
padding: 5px 0px 5px; padding: 5px 0px 5px;
@ -41,7 +41,7 @@
color: inherit; color: inherit;
} }
border-bottom: 2px solid; border-bottom: 2px solid;
@media (max-width: 600px) { @media (max-width: $max-width) {
text-align: center; text-align: center;
} }
} }

24
themes/secluded/assets/scss/_list.scss
View File

@ -17,23 +17,35 @@
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
ul { ul {
list-style-type: none; list-style-type: none;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
&-item {
margin: 40px -12px;
padding: 5px 10px;
border: 2px solid $dark;
border-radius: 7px;
}
&-title { &-title {
font-size: larger; font-size: larger;
font-weight: bold; font-weight: bold;
margin: 5px 0px;
} }
&-day { &-summary {
float: right; margin: 5px 0px;
}
&-item {
padding-bottom: 35px;
} }
&-list { &-meta {
margin: 5px 0px 13px 0px;
}
&-tags {
margin: 5px 0px 13px 0px;
} }
} }

6
themes/secluded/assets/scss/_main.scss
View File

@ -233,9 +233,3 @@ footer {
font-style: italic; font-style: italic;
} }
} }
@media (max-width: 55em) {
html {
max-width: 650px;
}
}

1
themes/secluded/assets/scss/_variables.scss
View File

@ -6,3 +6,4 @@ $dark-highlight: #ff6565;
$light-highlight: #c6359e; $light-highlight: #c6359e;
$gradient-left: #e96443; $gradient-left: #e96443;
$gradient-right: #904e95; $gradient-right: #904e95;
$max-width: 45em;

12
themes/secluded/layouts/_default/list.html
View File

@ -19,20 +19,16 @@
</p> </p>
</div> </div>
<hr/>
<div class="posts"> <div class="posts">
<ul class="posts-list"> <ul class="posts-list">
{{- range .Pages }} {{- range .Pages }}
{{- if .Params.rss_only }} {{- if .Params.rss_only }}
{{- else }} {{- else }}
<li class="posts-item"> <li class="posts-item">
<a href="{{.Permalink}}"> <p class="posts-title" style="view-transition-name: post-title-{{ .Title | urlize }}"><a href="{{.Permalink}}">{{.Title}}</a></p>
<span class="posts-title" style="view-transition-name: post-title-{{ .Title | urlize }}">{{.Title}}</span> <p class="posts-summary" style="view-transition-name: post-summary-{{ .Title | urlize }}">{{ .Summary | truncate 140 }}</p>
<span class="posts-day" style="view-transition-name: post-day-{{ .Title | urlize }}">{{ if .Site.Params.dateformShort }}{{ .Date.Format .Site.Params.dateformShort }}{{ else }}{{ .Date.Format "2006-01-02" }}{{ end }}</span> <p class="posts-meta"><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }}</p>
</a> <p class="posts-tags">
<p style="view-transition-name: post-summary-{{ .Title | urlize }}">{{ .Summary | truncate 140 }}</p>
<p>
{{ $title := .Title }} {{ $title := .Title }}
{{- range (.GetTerms "tags") }} {{- range (.GetTerms "tags") }}
<a class="button" href="{{.Permalink}}" style="view-transition-name: post-tags-{{ $title | urlize }}{{ .Title | urlize }}">{{.Title}}</a> <a class="button" href="{{.Permalink}}" style="view-transition-name: post-tags-{{ $title | urlize }}{{ .Title | urlize }}">{{.Title}}</a>

2
themes/secluded/layouts/generic/single.html
View File

@ -3,7 +3,7 @@
<article> <article>
<div class="frontmatter"> <div class="frontmatter">
<h1 class="post-title" style="view-transition-name: title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1> <h1 class="post-title" style="view-transition-name: title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
<p><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }} | <strong>Last Edited:</strong> {{ dateFormat "2006-01-02" .Lastmod }}</a></p> <p><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }} | <strong>Last Edited:</strong> {{ dateFormat "2006-01-02" .Lastmod }}></p>
</div> </div>
{{- if .Params.toc }} {{- if .Params.toc }}
<aside id="toc"> <aside id="toc">