customizable content width; added grid layout; article images fixed height and cropped in article preview; article list is now always a grid for a cleaner css

This commit is contained in:
Gabriele Musco 2021-04-12 23:49:04 +02:00
parent c3af040dc9
commit a103d30a57
No known key found for this signature in database
GPG Key ID: 8539FD3454380B83
3 changed files with 37 additions and 15 deletions

View File

@ -36,8 +36,10 @@ paginate = 5 # number of articles per page in the index
navtype = "standard" # changes the style of the pagination, available styles are: "standard", "circle" navtype = "standard" # changes the style of the pagination, available styles are: "standard", "circle"
fontFamily = "JetBrains Mono" # changes the font, default "JetBrains Mono" fontFamily = "JetBrains Mono" # changes the font, default "JetBrains Mono"
contentWidth = "1000px" # maximum width of the site content, css syntax
discreteCards = false # enable discrete card style; default false discreteCards = false # enable discrete card 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 highlightBgColor = "#34363b"; # card and circle navigation background color for discrete card mode
# enable comments support with commento using the script from your server # enable comments support with commento using the script from your server

View File

@ -5,6 +5,7 @@ $stroke_color: {{ .Site.Params.strokeColor | default "#4f4f4f" }};
$accent_color: {{ .Site.Params.accentColor | default "#db5793" }}; $accent_color: {{ .Site.Params.accentColor | default "#db5793" }};
$main_font: {{ .Site.Params.fontFamily | default "JetBrains Mono" }}; $main_font: {{ .Site.Params.fontFamily | default "JetBrains Mono" }};
$highlight_bg_color: {{ .Site.Params.highlightBgColor | default "#34363b" }}; $highlight_bg_color: {{ .Site.Params.highlightBgColor | default "#34363b" }};
$content_width: {{ .Site.Params.contentWidth | default "1000px" }}
::selection, ::-moz-selection { ::selection, ::-moz-selection {
background: $accent_color; background: $accent_color;
@ -37,7 +38,7 @@ a {
} }
#content { #content {
max-width: 1000px; max-width: $content_width;
padding: 15px; padding: 15px;
margin: auto; margin: auto;
} }
@ -110,7 +111,8 @@ article, .articlePreview {
img { img {
margin: auto; margin: auto;
display: block; display: block;
max-width: 80%; max-width: 100%;
// max-height: 400px;
} }
pre, code { pre, code {
@ -249,6 +251,20 @@ h1, h2, h3, h4, h5, h6 {
} }
} }
.postlist {
display: grid;
grid-gap: 25px;
margin-bottom: 25px;
grid-template-columns: 1fr;
&.gridView {
grid-template-columns: repeat(auto-fill, minmax(340px, 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 { .postlistitem.card.discrete {
@ -257,21 +273,24 @@ h1, h2, h3, h4, h5, h6 {
.postlistitem.card div { .postlistitem.card div {
img { img {
margin: 15px auto; // margin: 15px auto;
height: 250px;
min-width: 100%;
object-fit: cover;
} }
} }
@media only screen and (min-width: 500px) { //@media only screen and (min-width: 500px) {
.postlistitem.card > div { // .postlistitem.card > div {
img { // img {
max-width: 250px; // max-width: 250px;
float: left; // float: left;
margin-right: 15px; // margin-right: 15px;
margin-bottom: 15px; // margin-bottom: 15px;
} // }
overflow: auto; // clearfix // overflow: auto; // clearfix
} // }
} //}
ul { ul {
li { li {
@ -287,6 +306,7 @@ ul.list {
} }
#commento { #commento {
margin-top: 25px;
color: $fg_color; color: $fg_color;
font-family: $main_font, monospace; font-family: $main_font, monospace;
textarea, #commento-markdown-help-root { textarea, #commento-markdown-help-root {

View File

@ -5,7 +5,7 @@
{{ $postsList := where .Site.RegularPages "Section" "in" $postsDir }} {{ $postsList := where .Site.RegularPages "Section" "in" $postsDir }}
{{/* pagination */}} {{/* pagination */}}
<div class="postlist"> <div class="postlist {{ if .Site.Params.gridView }}gridView{{ end }}">
{{ range (.Paginate $postsList).Pages }} {{ range (.Paginate $postsList).Pages }}
<article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}"> <article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
<div> <div>