renamed discreteCards to paperCards, discreteTags to buttonTags; got rid of discrete class in favor of pure hugo conditional styling

This commit is contained in:
Gabriele Musco 2021-12-28 10:46:29 +01:00
parent 74132d5083
commit c896fcb147
No known key found for this signature in database
GPG Key ID: 0587A5D65B5DC99E
8 changed files with 25 additions and 30 deletions

View File

@ -69,10 +69,10 @@ summaryLength = 70 # number of words for article summaries
contentWidth = "1000px" # maximum width of the site content, css syntax contentWidth = "1000px" # maximum width of the site content, css syntax
discreteCards = false # enable discrete card style; default false paperCards = false # enable paper card style; default false
discreteTags = false # enable discrete tag style; default false buttonTags = false # enable button tag style; default false
tagsInArticlePreview = true # enable tags list in the article preview card tagsInArticlePreview = true # enable tags list in the article preview card
gridView = false # show post list as a grid. goes well with discreteCards gridView = false # show post list as a grid. goes well with paperCards
bigArticleTitle = false # makes the title in the single article view bigger bigArticleTitle = false # makes the title in the single article view bigger
navtype = "standard" # changes the style of the pagination, available styles are: "standard", "circles" navtype = "standard" # changes the style of the pagination, available styles are: "standard", "circles"
enableShadow = false # shows a shadow around some elements enableShadow = false # shows a shadow around some elements

View File

@ -372,13 +372,13 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
display: block; display: block;
padding-bottom: 25px; padding-bottom: 25px;
&.discrete { {{ if (.Site.Params.paperCards | default false) }}
background-color: var(--default_hl_bg); background-color: var(--default_hl_bg);
border-radius: $border_radius; border-radius: $border_radius;
box-shadow: $shadow; box-shadow: $shadow;
padding: 20px; padding: 20px;
padding-top: 1px; padding-top: 1px;
} {{ end }}
&.single { &.single {
{{ if (.Site.Params.bigArticleTitle | default false) }} {{ if (.Site.Params.bigArticleTitle | default false) }}
@ -396,18 +396,16 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
grid-template-columns: 1fr; grid-template-columns: 1fr;
&.gridView { &.gridView {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
.card {
&.discrete {
}
}
} }
} }
// only hide hr in cards if they are in the article list // only hide hr in cards if they are in the article list
// cards in list are divs, cards as in full-blown articles use the article tag // cards in list are divs, cards as in full-blown articles use the article tag
.postlistitem.card.discrete { {{ if (.Site.Params.paperCards | default false) }}
.postlistitem.card {
hr { display: none; } hr { display: none; }
} }
{{ end}}
.postlistitem.card div { .postlistitem.card div {
img { img {
@ -538,10 +536,10 @@ ul.list {
margin: 0; margin: 0;
} }
} }
&.discrete { {{ if (.Site.Params.paperCards | default false) }}
border-radius: $border_radius; border-radius: $border_radius;
padding: 0; padding: 0;
} {{ end }}
} }
} }
@ -659,7 +657,7 @@ header {
margin: $content_spacing 0; margin: $content_spacing 0;
} }
a.discreteTag { a.buttonTag {
@include roundButtonLike; @include roundButtonLike;
} }
@ -686,10 +684,7 @@ a.discreteTag {
} }
input, textarea, textarea.cactus-editor-textarea { input, textarea, textarea.cactus-editor-textarea {
{{ if or {{ if (site.Params.paperCards | default false) }}
(site.Params.discreteCards | default false)
(eq (site.Params.navtype | default "standard") "circles")
}}
@include buttonLike; @include buttonLike;
{{ else }} {{ else }}
border-radius: 0 !important; border-radius: 0 !important;
@ -717,7 +712,7 @@ input, textarea, textarea.cactus-editor-textarea {
} }
.cactus-login-form { .cactus-login-form {
{{ if (site.Params.discreteCards | default false) }} {{ if (.Site.Params.paperCards | default false) }}
border-radius: $border_radius; border-radius: $border_radius;
{{ else }} {{ else }}
border-radius: 0; border-radius: 0;
@ -782,7 +777,7 @@ input, textarea, textarea.cactus-editor-textarea {
width: 450px; width: 450px;
max-width: 100%; max-width: 100%;
padding: 24px; padding: 24px;
{{ if site.Params.discreteCards }} {{ if (.Site.Params.paperCards | default false) }}
border-radius: $border_radius; border-radius: $border_radius;
{{ end }} {{ end }}
h1, h2, h3, h4 { h1, h2, h3, h4 {

View File

@ -2,7 +2,7 @@ default: dark # light
auto_switch: false # set to true to respect the user preference auto_switch: false # set to true to respect the user preference
dark: dark:
bg: '#242629' # main site background bg: '#242629' # main site background
hl_bg: '#34363b' # card and circle navigation background color for discrete card mode hl_bg: '#34363b' # card and circle navigation background color for paper card mode
fg: 'white' # font color fg: 'white' # font color
dim_fg: '#bababa' # will be used for secondary information like dates and tags dim_fg: '#bababa' # will be used for secondary information like dates and tags
stroke: '#4f4f4f' # stroke/border color used mostly in the icon menu tooltip stroke: '#4f4f4f' # stroke/border color used mostly in the icon menu tooltip

View File

@ -1,6 +1,6 @@
{{ define "main" }} {{ define "main" }}
{{- partial "inject/content-before.html" . -}} {{- partial "inject/content-before.html" . -}}
<article class="card {{ if .Site.Params.discreteCards }}discrete{{ end }} single"> <article class="card single">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ if (.Params.showDate | default true) }} {{ if (.Params.showDate | default true) }}
<p class="date"> <p class="date">
@ -20,14 +20,14 @@
<div>{{ .Content }}</div> <div>{{ .Content }}</div>
</article> </article>
{{ if .Params.tags }} {{ if .Params.tags }}
{{ if not .Site.Params.discreteCards }}<hr />{{ end }} {{ if not .Site.Params.paperCards }}<hr />{{ end }}
<p class="articleTagsContainer"> <p class="articleTagsContainer">
<span></span> <span></span>
<strong>{{ i18n "tagsColumn" }}</strong> <strong>{{ i18n "tagsColumn" }}</strong>
{{ range sort .Params.tags }} {{ range sort .Params.tags }}
<a <a
{{ if site.Params.discreteTags | default false }} {{ if site.Params.buttonTags | default false }}
class="discreteTag" class="buttonTag"
{{ end }} {{ end }}
href="/tags/{{ . | urlize }}">#{{ . }}</a> href="/tags/{{ . | urlize }}">#{{ . }}</a>
{{ end }} {{ end }}

View File

@ -1,4 +1,4 @@
<article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}"> <article class="card postlistitem">
<div> <div>
<h2> <h2>
<a href="{{ .Permalink }}">{{ .Title }}</a> <a href="{{ .Permalink }}">{{ .Title }}</a>

View File

@ -1,7 +1,7 @@
<div class="featured postlist gridView"> <div class="featured postlist gridView">
{{ range . }} {{ range . }}
<a class="featuredCardLink" href="{{ .Permalink }}"> <a class="featuredCardLink" href="{{ .Permalink }}">
<article class="featuredCard {{ if .Site.Params.discreteCards }}discrete{{ end }}" <article class="featuredCard"
style=" style="
background-image: linear-gradient(to bottom, background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%,

View File

@ -14,7 +14,7 @@
} }
function renderSingleArticle(article) { function renderSingleArticle(article) {
return ` return `
<article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}"> <article class="card postlistitem">
<div> <div>
<h2> <h2>
<a href="${article.link}">${article.title}</a> <a href="${article.link}">${article.title}</a>

View File

@ -3,7 +3,7 @@
<div class="postlist gridView"> <div class="postlist gridView">
{{ range (sort $showcasePosts "File.LogicalName") }} {{ range (sort $showcasePosts "File.LogicalName") }}
{{ if in .File.Dir .Site.Params.showcaseDir }} {{ if in .File.Dir .Site.Params.showcaseDir }}
<article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}"> <article class="card postlistitem">
<div> <div>
<h2>{{ .Title }}</h2> <h2>{{ .Title }}</h2>
{{ if .Params.image }} {{ if .Params.image }}