fbievan
/
Website-Redesign
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added discrete card style mode option

This commit is contained in:
Gabriele Musco 2021-01-05 09:38:10 +01:00
parent 6ad7b2ee75
commit a91a0af75a
No known key found for this signature in database
GPG Key ID: 8539FD3454380B83
6 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -34,6 +34,9 @@ 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"
discreteCards = false # enable discrete card style; default false
highlightBgColor = "#34363b"; # card and circle navigation background color for discrete card mode
# enable comments support with commento using the script from your server
commento = "https://example.com/js/commento.js"

20
assets/scss/style.scss
View File

@ -4,6 +4,7 @@ $dim_fg_color: {{ .Site.Params.dimForegroundColor | default "#bababa" }};
$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" }};
::selection, ::-moz-selection {
background: $accent_color;
@ -22,6 +23,10 @@ body, html {
color: $fg_color;
}
body {
min-height: 100vh;
}
a {
color: $fg_color;
text-decoration: none;
@ -167,7 +172,7 @@ pre code {
line-height: 40px;
padding: auto;
border-radius: 100%;
background-color: rgba($dim_fg_color, .4);
background-color: $highlight_bg_color;
color: $fg_color;
}
span {
@ -227,6 +232,19 @@ h1, h2, h3, h4, h5, h6 {
hr {
margin: 50px 0;
}
&.discrete {
background: $highlight_bg_color;
border-radius: 10px;
padding: 20px;
padding-top: 1px;
}
}
// 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
div.card.discrete {
hr { display: none; }
}
ul {

2
layouts/_default/single.html
View File

@ -1,6 +1,6 @@
{{ define "main" }}
{{- partial "inject/content-before.html" . -}}
<article>
<article class="card {{ if .Site.Params.discreteCards }}discrete{{ end }}">
<h1>{{ .Title }}</h1>
<p class="date">
<span title="Date"></span>

2
layouts/index.html
View File

@ -6,7 +6,7 @@
{{/* pagination */}}
{{ range (.Paginate $postsList).Pages }}
<div class="card">
<div class="card {{ if .Site.Params.discreteCards }}discrete{{ end }}">
<h2>
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h2>

2
resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.content
View File

@ -1,3 +1,3 @@
::selection,::-moz-selection{background:#db5793;color:#fff}a{transition:all .15s ease-in-out}body,html{font-family:"Symbols Nerd Font",JetBrains Mono,monospace;margin:0;padding:0;background-color:#242629;color:#fff}a{color:#fff;text-decoration:none;border-bottom:2px solid #fff}a:hover{border-color:#db5793 !important}#content{max-width:1000px;padding:15px;margin:auto}footer{color:#bababa}footer a{color:#bababa}footer hr{margin-top:50px}#titleContainer{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}#titleContainer h1{font-weight:normal;font-size:1.6em;margin:0}#titleContainer img{margin-right:10px;width:50px;max-height:50px;border-radius:5px}nav ul,#links ul{list-style-type:none;display:flex;flex-direction:row;flex-wrap:wrap;padding:0;margin:0}nav{font-size:.9em}nav ul li{border-right:1px solid #db5793}nav ul li:last-child{border-right:none}nav ul li a{padding:2px 20px;color:#db5793}nav ul li a:hover{text-decoration:underline}#links{padding:15px 0}article img,.articlePreview img{margin:auto;display:block;max-width:80%}article pre,article code,.articlePreview pre,.articlePreview code{overflow:auto}article pre,.articlePreview pre{padding:20px;border:1px solid #4f4f4f;border-radius:3px}code{font-family:JetBrains Mono,monospace;font-size:.8em;padding:2px;border:1px solid #4f4f4f;border-radius:3px}pre code{border:none;border-radius:none;padding:0}.date,.date a{color:#bababa;border-color:#bababa;font-size:.9em}#pageNavigation a,.nerdlink a,nav a{border-bottom:none}#pageNavigation a:hover,.nerdlink a:hover,nav a:hover{border-bottom:none}#pageNavigation{text-align:right}#pageNavigation a{color:#db5793}#pageNavigation.nav-circles{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center}#pageNavigation.nav-circles a,#pageNavigation.nav-circles span{margin:5px;text-align:center;display:inline-block;width:40px;height:40px;line-height:40px;padding:auto;border-radius:100%;background-color:rgba(186,186,186,0.4);color:#fff}#pageNavigation.nav-circles span{background-color:#db5793}#pageNavigation.nav-circles a:hover{background-color:#db5793}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#db5793;border-bottom:none}.nerd,.nerdlink{font-family:"Symbols Nerd Font",JetBrains Mono;font-size:1.2em;margin:5px;display:inline-block}.nerdlink{color:#fff;border-bottom:none;position:relative}.nerdlink span{position:absolute;top:1.5em;left:50%;transform:translateX(-50%);padding:2px;border:1px solid #4f4f4f;border-radius:3px;color:#fff;display:none}.nerdlink:hover{color:#db5793;text-decoration:none;border-bottom:none}.nerdlink:hover span{display:block}.card{margin:50px 0}.card:first-child{margin-top:0}.card hr{margin:50px 0}ul li{margin:5px 0}ul.list .date{display:inline-block;min-width:100px}#commento{color:#fff;font-family:JetBrains Mono,monospace}#commento textarea,#commento #commento-markdown-help-root{background:rgba(255,255,255,0.05);color:#fff;border-radius:0;border:none}#commento textarea td,#commento textarea td>*,#commento textarea td>*>*,#commento #commento-markdown-help-root td,#commento #commento-markdown-help-root td>*,#commento #commento-markdown-help-root td>*>*{color:#fff}#commento textarea td pre,#commento textarea td>* pre,#commento textarea td>*>* pre,#commento #commento-markdown-help-root td pre,#commento #commento-markdown-help-root td>* pre,#commento #commento-markdown-help-root td>*>* pre{font-family:JetBrains Mono,monospace;color:#bababa}#commento #commento-submit-button-root{background:#db5793;color:#fff}#commento .commento-name{color:#bababa}#commento .commento-sort-policy-buttons a{border-bottom:none}#commento .commento-sort-policy-buttons .commento-sort-policy-button-selected{color:#db5793}#commento .commento-card{border-top:none;margin:25px 0}#commento .commento-body>*,#commento .commento-body *>*,#commento .commento-body>*>*>*,#commento .commento-body>*>*>*>*,#commento .commento-body>*>*>*>*>*{color:#fff;font-family:JetBrains Mono,monospace}
::selection,::-moz-selection{background:#db5793;color:#fff}a{transition:all .15s ease-in-out}body,html{font-family:"Symbols Nerd Font",JetBrains Mono,monospace;margin:0;padding:0;background-color:#242629;color:#fff}body{min-height:100vh}a{color:#fff;text-decoration:none;border-bottom:2px solid #fff}a:hover{border-color:#db5793 !important}#content{max-width:1000px;padding:15px;margin:auto}footer{color:#bababa}footer a{color:#bababa}footer hr{margin-top:50px}#titleContainer{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}#titleContainer h1{font-weight:normal;font-size:1.6em;margin:0}#titleContainer img{margin-right:10px;width:50px;max-height:50px;border-radius:5px}nav ul,#links ul{list-style-type:none;display:flex;flex-direction:row;flex-wrap:wrap;padding:0;margin:0}nav{font-size:.9em}nav ul li{border-right:1px solid #db5793}nav ul li:last-child{border-right:none}nav ul li a{padding:2px 20px;color:#db5793}nav ul li a:hover{text-decoration:underline}#links{padding:15px 0}article img,.articlePreview img{margin:auto;display:block;max-width:80%}article pre,article code,.articlePreview pre,.articlePreview code{overflow:auto}article pre,.articlePreview pre{padding:20px;border:1px solid #4f4f4f;border-radius:3px}code{font-family:JetBrains Mono,monospace;font-size:.8em;padding:2px;border:1px solid #4f4f4f;border-radius:3px}pre code{border:none;border-radius:none;padding:0}.date,.date a{color:#bababa;border-color:#bababa;font-size:.9em}#pageNavigation a,.nerdlink a,nav a{border-bottom:none}#pageNavigation a:hover,.nerdlink a:hover,nav a:hover{border-bottom:none}#pageNavigation{text-align:right}#pageNavigation a{color:#db5793}#pageNavigation.nav-circles{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center}#pageNavigation.nav-circles a,#pageNavigation.nav-circles span{margin:5px;text-align:center;display:inline-block;width:40px;height:40px;line-height:40px;padding:auto;border-radius:100%;background-color:#34363b;color:#fff}#pageNavigation.nav-circles span{background-color:#db5793}#pageNavigation.nav-circles a:hover{background-color:#db5793}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#db5793;border-bottom:none}.nerd,.nerdlink{font-family:"Symbols Nerd Font",JetBrains Mono;font-size:1.2em;margin:5px;display:inline-block}.nerdlink{color:#fff;border-bottom:none;position:relative}.nerdlink span{position:absolute;top:1.5em;left:50%;transform:translateX(-50%);padding:2px;border:1px solid #4f4f4f;border-radius:3px;color:#fff;display:none}.nerdlink:hover{color:#db5793;text-decoration:none;border-bottom:none}.nerdlink:hover span{display:block}.card{margin:50px 0}.card:first-child{margin-top:0}.card hr{margin:50px 0}.card.discrete{background:#34363b;border-radius:10px;padding:20px;padding-top:1px}div.card.discrete hr{display:none}ul li{margin:5px 0}ul.list .date{display:inline-block;min-width:100px}#commento{color:#fff;font-family:JetBrains Mono,monospace}#commento textarea,#commento #commento-markdown-help-root{background:rgba(255,255,255,0.05);color:#fff;border-radius:0;border:none}#commento textarea td,#commento textarea td>*,#commento textarea td>*>*,#commento #commento-markdown-help-root td,#commento #commento-markdown-help-root td>*,#commento #commento-markdown-help-root td>*>*{color:#fff}#commento textarea td pre,#commento textarea td>* pre,#commento textarea td>*>* pre,#commento #commento-markdown-help-root td pre,#commento #commento-markdown-help-root td>* pre,#commento #commento-markdown-help-root td>*>* pre{font-family:JetBrains Mono,monospace;color:#bababa}#commento #commento-submit-button-root{background:#db5793;color:#fff}#commento .commento-name{color:#bababa}#commento .commento-sort-policy-buttons a{border-bottom:none}#commento .commento-sort-policy-buttons .commento-sort-policy-button-selected{color:#db5793}#commento .commento-card{border-top:none;margin:25px 0}#commento .commento-body>*,#commento .commento-body *>*,#commento .commento-body>*>*>*,#commento .commento-body>*>*>*>*,#commento .commento-body>*>*>*>*>*{color:#fff;font-family:JetBrains Mono,monospace}
/*# sourceMappingURL=styles.css.map */

2
resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.json
View File

@ -1 +1 @@
{"Target":"css/styles.ad48f9830ad5db99259ab27c2d0256546cd761f7655577088fef5c6430f1a46b2ee2db5ad6aa3950d7c2e9d07c00e7d9774c3f28d471cc178cc46ebaef10920e.css","MediaType":"text/css","Data":{"Integrity":"sha512-rUj5gwrV25klmrJ8LQJWVGzXYfdlVXcIj+9cZDDxpGsu4tta1qo5UNfC6dB8AOfZd0w/KNRxzBeMxG667xCSDg=="}}
{"Target":"css/styles.5f324aea64eae7dc8af7ed6f7cbd1dd17c9d9e4f5cc968c12d2e75f3cc6dd4420063244bcc88f08bbf08a758c90e609d154b3f363633ccde1a41f3a3a91c11d0.css","MediaType":"text/css","Data":{"Integrity":"sha512-XzJK6mTq59yK9+1vfL0d0Xydnk9cyWjBLS5188xt1EIAYyRLzIjwi78Ip1jJDmCdFUs/NjYzzN4aQfOjqRwR0A=="}}