added discreteTags option; fixed hamburger

This commit is contained in:
Gabriele Musco 2021-04-19 11:14:05 +02:00
parent 45a2cae2d1
commit 9491d1f64d
No known key found for this signature in database
GPG Key ID: 8539FD3454380B83
4 changed files with 48 additions and 26 deletions

View File

@ -54,6 +54,7 @@ summaryLength = 70 # number of words for article summaries
contentWidth = "1000px" # maximum width of the site content, css syntax
discreteCards = false # enable discrete card style; default false
discreteTags = false # enable discrete tag style; default false
gridView = false # show post list as a grid. goes well with discreteCards
highlightBgColor = "#34363b" # card and circle navigation background color for discrete card mode

View File

@ -8,6 +8,7 @@ $mono_font: {{ .Site.Params.monospaceFontFamily | default "JetBrains Mono" }};
$highlight_bg_color: {{ .Site.Params.highlightBgColor | default "#34363b" }};
$content_width: {{ .Site.Params.contentWidth | default "1000px" }};
$border_radius: 10px;
$content_spacing: 25px;
::selection, ::-moz-selection {
background: $accent_color;
@ -51,7 +52,7 @@ footer {
color: $dim_fg_color;
}
hr {
margin-top: 50px;
margin-top: (2 * $content_spacing);
}
.footerColumns {
font-size: .9rem;
@ -59,7 +60,7 @@ footer {
flex-direction: row;
flex-wrap: wrap;
ul {
margin: 12px;
margin: ($content_spacing / 2);
list-style-type: none;
padding: 0;
li > strong {
@ -70,7 +71,7 @@ footer {
}
#links {
padding: 5px 0 40px 0;
padding: 5px 0;
}
article, .articlePreview {
@ -224,7 +225,7 @@ h1, h2, h3, h4, h5, h6 {
.postlist {
display: grid;
grid-gap: 25px;
margin-bottom: 25px;
margin-bottom: $content_spacing;
grid-template-columns: 1fr;
&.gridView {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
@ -374,12 +375,8 @@ ul.list {
}
}
.loadMoreButton {
text-align: center;
font-size: 1.2rem;
font-weight: bold;
&.buttonLike {
a {
@mixin buttonLikeLink {
display: inline-block;
border-radius: $border_radius;
background-color: $highlight_bg_color;
padding: 15px;
@ -387,11 +384,21 @@ ul.list {
&:hover, &:focus {
background-color: $accent_color;
}
}
.loadMoreButton {
text-align: center;
font-size: 1.2rem;
font-weight: bold;
&.buttonLike {
a {
@include buttonLikeLink;
}
}
}
.relatedArticlesContainer {
margin: $content_spacing 0;
#relatedArticles .postlistitem {
@extend .featuredCard;
}
@ -411,7 +418,7 @@ ul.list {
}
img {
margin-right: 10px;
margin-right: ($content_spacing / 2);
margin-top: 7px;
align-self: flex-start;
width: 50px;
@ -432,12 +439,13 @@ nav, #links {
}
header {
margin-bottom: $content_spacing;
.titleAndHamburger {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
align-self: flex-start
justify-content: space-between;
}
nav {
font-size: .9em;
@ -459,6 +467,14 @@ header {
}
}
.articleTagsContainer {
margin: $content_spacing 0;
}
a.discreteTag {
@include buttonLikeLink;
}
{{ if .Site.Params.mobileHamburgerNav | default false }}
header {
#hamburger-menu {
@ -478,8 +494,8 @@ header {
cursor: pointer;
text-align: center;
margin: 0;
padding: 12px;
width: 35px;
padding: ($content_spacing / 4);
align-self: center;
}
nav {
ul#main-nav {
@ -491,6 +507,7 @@ header {
text-align: right;
a {
padding-left: 0;
padding-right: ($content_spacing / 4);
}
}
}

View File

@ -10,17 +10,21 @@
<img src="{{ .Params.Image }}" alt="" />
{{ end }}
<div>{{ .Content }}</div>
</article>
{{ if .Params.tags }}
<hr />
<p>
{{ if not .Site.Params.discreteCards }}<hr />{{ end }}
<p class="articleTagsContainer">
<span></span>
<strong>Tags:</strong>
{{ range .Params.tags }}
<a href="/tags/{{ . | urlize }}">#{{ . }}</a>
<a
{{ if site.Params.discreteTags | default false }}
class="discreteTag"
{{ end }}
href="/tags/{{ . | urlize }}">#{{ . }}</a>
{{ end }}
</p>
{{ end }}
</article>
{{- partial "inject/content-after.html" . -}}
{{ if .Site.Params.commento }}
<script

View File

@ -3,7 +3,7 @@
<div class="titleAndSearchContainer">
<div id="titleContainer">
<img src='{{ .Site.Params.Logo | default "/logo.svg" }}' />
<div>
<div style="width: 100%">
<div class="titleAndHamburger">
<h1>{{ .Site.Title | default "Ficurinia" }}</h1>
{{ if .Site.Params.mobileHamburgerNav | default false }}