diff --git a/README.md b/README.md index 0c9b99c..358dee4 100644 --- a/README.md +++ b/README.md @@ -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" 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 + gridView = false # show post list as a grid. goes well with discreteCards highlightBgColor = "#34363b"; # card and circle navigation background color for discrete card mode # enable comments support with commento using the script from your server diff --git a/assets/scss/style.scss b/assets/scss/style.scss index a5a27a5..3304c66 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -5,6 +5,7 @@ $stroke_color: {{ .Site.Params.strokeColor | default "#4f4f4f" }}; $accent_color: {{ .Site.Params.accentColor | default "#db5793" }}; $main_font: {{ .Site.Params.fontFamily | default "JetBrains Mono" }}; $highlight_bg_color: {{ .Site.Params.highlightBgColor | default "#34363b" }}; +$content_width: {{ .Site.Params.contentWidth | default "1000px" }} ::selection, ::-moz-selection { background: $accent_color; @@ -37,7 +38,7 @@ a { } #content { - max-width: 1000px; + max-width: $content_width; padding: 15px; margin: auto; } @@ -110,7 +111,8 @@ article, .articlePreview { img { margin: auto; display: block; - max-width: 80%; + max-width: 100%; + // max-height: 400px; } 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 // cards in list are divs, cards as in full-blown articles use the article tag .postlistitem.card.discrete { @@ -257,21 +273,24 @@ h1, h2, h3, h4, h5, h6 { .postlistitem.card div { img { - margin: 15px auto; + // margin: 15px auto; + height: 250px; + min-width: 100%; + object-fit: cover; } } -@media only screen and (min-width: 500px) { - .postlistitem.card > div { - img { - max-width: 250px; - float: left; - margin-right: 15px; - margin-bottom: 15px; - } - overflow: auto; // clearfix - } -} +//@media only screen and (min-width: 500px) { +// .postlistitem.card > div { +// img { +// max-width: 250px; +// float: left; +// margin-right: 15px; +// margin-bottom: 15px; +// } +// overflow: auto; // clearfix +// } +//} ul { li { @@ -287,6 +306,7 @@ ul.list { } #commento { + margin-top: 25px; color: $fg_color; font-family: $main_font, monospace; textarea, #commento-markdown-help-root { diff --git a/layouts/index.html b/layouts/index.html index 66a6185..a4bb3a0 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -5,7 +5,7 @@ {{ $postsList := where .Site.RegularPages "Section" "in" $postsDir }} {{/* pagination */}} -
+
{{ range (.Paginate $postsList).Pages }}