fbievan
/
website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

consolidated inputs and cactus comments style; added option for enabling shadows

This commit is contained in:
Gabriele Musco 2021-12-25 15:05:50 +01:00
parent 5295e27c08
commit 97af741a8f
No known key found for this signature in database
GPG Key ID: 0587A5D65B5DC99E
2 changed files with 108 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -59,6 +59,8 @@ summaryLength = 70 # number of words for article summaries
articleSummary = true # show a summary in article preview; default true articleSummary = true # show a summary in article preview; default true
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
fontFamily = "JetBrains Mono" # changes the font, default "JetBrains Mono" fontFamily = "JetBrains Mono" # changes the font, default "JetBrains Mono"
titleFontFamily = "JetBrains Mono" # font used for titles and headings titleFontFamily = "JetBrains Mono" # font used for titles and headings
@ -249,6 +251,7 @@ Every post can have various parameters in the frontmatter, here are some that yo
- `comments`: boolean, if true it enables comments for the current post, if false it disables them (default is true) - `comments`: boolean, if true it enables comments for the current post, if false it disables them (default is true)
- `showDate`: boolean, true by default, if false hides the date. Useful for non-article pages where the date isn't important - `showDate`: boolean, true by default, if false hides the date. Useful for non-article pages where the date isn't important
- `norss`: boolean, if set to true the page will be skipped in the rss feed - `norss`: boolean, if set to true the page will be skipped in the rss feed
- `nosearch`: boolean, if set to true the page won't show up in searches
- `toc`: boolean, if set to true a table of contents will be shown for the article - `toc`: boolean, if set to true a table of contents will be shown for the article
## Table of contents settings ## Table of contents settings

135
assets/scss/style.scss
View File

@ -98,6 +98,12 @@ $title_font_mult: {{ .Site.Params.titleFontSizeMultiplier | default 1.0 }};
$main_font_mult: {{ .Site.Params.mainFontSizeMultiplier | default 1.0 }}; $main_font_mult: {{ .Site.Params.mainFontSizeMultiplier | default 1.0 }};
$mono_font_mult: {{ .Site.Params.monoFontSizeMultiplier | default 1.0 }}; $mono_font_mult: {{ .Site.Params.monoFontSizeMultiplier | default 1.0 }};
{{ if (.Site.Params.enableShadow | default false) }}
$shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
{{ else }}
$shadow: 0 0 0 0 transparent;
{{ end }}
::selection, ::-moz-selection { ::selection, ::-moz-selection {
background: var(--default_accent); background: var(--default_accent);
color: var(--default_fg); color: var(--default_fg);
@ -116,15 +122,21 @@ body {
min-height: 100vh; min-height: 100vh;
} }
a { @mixin linkLike {
color: var(--default_fg); color: var(--default_fg);
text-decoration: none; text-decoration: none;
background-color: transparent;
border-radius: 0;
border-bottom: 2px solid var(--default_fg); border-bottom: 2px solid var(--default_fg);
&:hover, &:focus { &:hover, &:focus {
border-color: var(--default_accent) !important; border-color: var(--default_accent) !important;
} }
} }
a {
@include linkLike;
}
@mixin limitWidth { @mixin limitWidth {
max-width: $content_width; max-width: $content_width;
margin-left: auto; margin-left: auto;
@ -250,8 +262,10 @@ table {
line-height: 40px; line-height: 40px;
padding: unset; padding: unset;
border-radius: 100%; border-radius: 100%;
transition: background-color .15s ease-in-out;
background-color: var(--default_hl_bg); background-color: var(--default_hl_bg);
color: var(--default_fg); color: var(--default_fg);
box-shadow: $shadow;
} }
span { span {
background-color: var(--default_accent); background-color: var(--default_accent);
@ -336,6 +350,7 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
&.discrete { &.discrete {
background-color: var(--default_hl_bg); background-color: var(--default_hl_bg);
border-radius: $border_radius; border-radius: $border_radius;
box-shadow: $shadow;
padding: 20px; padding: 20px;
padding-top: 1px; padding-top: 1px;
} }
@ -455,17 +470,8 @@ ul.list {
padding: 0 6px; // appropriately sized tap targets padding: 0 6px; // appropriately sized tap targets
} }
#searchbar { #searchbar {
@extend a;
width: 100%; width: 100%;
min-width: 150px; min-width: 150px;
display: inline-block;
background-color: transparent;
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
padding: 6px 0;
font-family: "Symbols Nerd Font", $main_font;
font-size: 1.3em; font-size: 1.3em;
outline: none; outline: none;
} }
@ -514,17 +520,19 @@ ul.list {
} }
} }
@mixin buttonLikeLink { @mixin roundButtonLike {
display: inline-block; display: inline-block;
border-radius: $border_radius; border-radius: $border_radius;
background-color: var(--default_hl_bg); background-color: var(--default_hl_bg);
color: var(--default_fg);
padding: ($content_spacing / 2); padding: ($content_spacing / 2);
margin: ($content_spacing / 6) 0; margin: ($content_spacing / 6) 0;
transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out !important;
border-bottom: none; border-bottom: none;
&:hover, &:focus { &:hover, &:focus {
background-color: var(--default_accent); background-color: var(--default_accent);
} }
box-shadow: $shadow;
} }
.loadMoreButton { .loadMoreButton {
@ -533,7 +541,7 @@ ul.list {
font-weight: bold; font-weight: bold;
&.buttonLike { &.buttonLike {
a { a {
@include buttonLikeLink; @include roundButtonLike;
} }
} }
} }
@ -618,44 +626,113 @@ header {
} }
a.discreteTag { a.discreteTag {
@include buttonLikeLink; @include roundButtonLike;
} }
.shareBtn { @mixin buttonLike {
{{ if eq (site.Params.navtype | default "standard") "circles" }} {{ if eq (site.Params.navtype | default "standard") "circles" }}
@include buttonLikeLink; @include roundButtonLike;
{{ else }}
@include linkLike;
{{ end }} {{ end }}
font-size: 1.2em; font-size: #{1.2 * $base_font_size};
}
.cactus-button, .cactus-login-buttons > button {
font-family: $main_font;
padding: 0;
margin: 12px !important;
@include buttonLike;
transition-property: border-color, background-color !important;
transition-duration: .15s;
transition-timing-function: ease-in-out;
opacity: 1 !important;
&[disabled] {
opacity: .5 !important;
border-color: transparent !important;
background-color: transparent !important;
box-shadow: none;
}
}
.shareBtn, button {
@include buttonLike;
cursor: pointer; cursor: pointer;
} }
input { input, textarea, textarea.cactus-editor-textarea {
{{ if or {{ if or
(site.Params.discreteCards | default false) (site.Params.discreteCards | default false)
(eq (site.Params.navtype | default "standard") "circles") (eq (site.Params.navtype | default "standard") "circles")
}} }}
@include buttonLikeLink; @include buttonLike;
&:hover, &:focus, &:active { {{ else }}
background-color: var(--default_hl_bg); border-radius: 0 !important;
}
{{ end }} {{ end }}
box-sizing: border-box;
max-width: 100%;
min-width: 10px;
font-family: "Symbols Nerd Font", $main_font; font-family: "Symbols Nerd Font", $main_font;
background-color: var(--default_hl_bg); background-color: var(--default_hl_bg) !important;
padding: 12px;
color: var(--default_fg); color: var(--default_fg);
border: 2px solid transparent; padding: 12px;
border: 2px solid transparent !important;
border-color: transparent;
transition: border-color .15s ease-in-out !important;
&:focus, &:active { &:focus, &:active {
border: 2px solid var(--default_accent); border-color: var(--default_accent) !important;
outline: none; outline: none;
} }
} }
.cactus-editor-name {
box-sizing: border-box;
max-width: 100%;
min-width: 10px;
}
.cactus-login-form {
{{ if (site.Params.discreteCards | default false) }}
border-radius: $border_radius;
{{ else }}
border-radius: 0;
{{ end }}
{{ if (.Site.Params.enableShadow | default false) }}
box-shadow: $shadow;
{{ else }}
box-shadow: none;
border: 2px solid var(--default_stroke);
{{ end }}
background-color: var(--default_bg) !important;
color: var(--default_fg) !important;
> a { // "Use a Matrix client" button
@include buttonLike;
> button {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
}
.cactus-login-buttons {
margin: 0;
}
}
#fediInstanceDialog { #fediInstanceDialog {
display: none; display: none;
position: fixed; position: fixed;
top: 0; bottom: 0; left: 0; right: 0; top: 0; bottom: 0; left: 0; right: 0;
.dialog { .dialog {
{{ if (.Site.Params.enableShadow | default false) }}
box-shadow: $shadow;
{{ else }}
box-shadow: none;
border: 2px solid var(--default_stroke);
{{ end }}
box-sizing: border-box;
position: absolute; position: absolute;
display: flex; flex-direction: column; display: flex; flex-direction: column;
top: 24px; top: 24px;
@ -787,9 +864,6 @@ header.jumbotronContainer {
color: var(--default_fg) !important; color: var(--default_fg) !important;
text-shadow: none; text-shadow: none;
} }
#searchbar {
border-color: white !important;
}
.arrow { .arrow {
border-color: white !important; border-color: white !important;
svg , svg * { svg , svg * {
@ -967,7 +1041,7 @@ header.jumbotronContainer {
font-size: 1.5em; font-size: 1.5em;
} }
{{ if eq .Site.Params.navtype "circles" }} {{ if eq .Site.Params.navtype "circles" }}
@include buttonLikeLink; @include roundButtonLike;
background-color: transparent; background-color: transparent;
border: 2px solid var(--default_accent); border: 2px solid var(--default_accent);
{{ end }} {{ end }}
@ -1027,6 +1101,7 @@ header.jumbotronContainer {
overflow: auto; overflow: auto;
margin-bottom: 0; margin-bottom: 0;
padding: 0 15px; padding: 0 15px;
box-shadow: $shadow;
> *:last-child, > *:first-child { > *:last-child, > *:first-child {
padding-bottom: 15px; padding-bottom: 15px;
padding-top: 15px; padding-top: 15px;