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

View File

@ -60,6 +60,8 @@ summaryLength = 70 # number of words for article summaries
navtype = "standard" # changes the style of the pagination, available styles are: "standard", "circles"
enableShadow = false
fontFamily = "JetBrains Mono" # changes the font, default "JetBrains Mono"
titleFontFamily = "JetBrains Mono" # font used for titles and headings
monospaceFontFamily = "JetBrains Mono" # changes the monospace font for code, default "JetBrains Mono"
@ -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)
- `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
- `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
## Table of contents settings

View File

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