From 97af741a8f2792fd36255fbfdec69c232ea53e52 Mon Sep 17 00:00:00 2001 From: Gabriele Musco Date: Sat, 25 Dec 2021 15:05:50 +0100 Subject: [PATCH] consolidated inputs and cactus comments style; added option for enabling shadows --- README.md | 3 + assets/scss/style.scss | 135 ++++++++++++++++++++++++++++++++--------- 2 files changed, 108 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 588aca6..443f275 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,8 @@ summaryLength = 70 # number of words for article summaries articleSummary = true # show a summary in article preview; default true 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 @@ -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 diff --git a/assets/scss/style.scss b/assets/scss/style.scss index b4f1045..cb9d7df 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -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;