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

various fixes; added button style for main menu

This commit is contained in:
Gabriele Musco 2021-12-27 08:46:31 +01:00
parent ae8c44e50b
commit 56637b5d7f
No known key found for this signature in database
GPG Key ID: 0587A5D65B5DC99E
2 changed files with 72 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -58,10 +58,6 @@ summaryLength = 70 # number of words for article summaries
fitImageInArticlePreview = false # make article preview images fit the article preview instead of getting cropped
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
monospaceFontFamily = "JetBrains Mono" # changes the monospace font for code, default "JetBrains Mono"
@ -78,6 +74,9 @@ summaryLength = 70 # number of words for article summaries
tagsInArticlePreview = true # enable tags list in the article preview card
gridView = false # show post list as a grid. goes well with discreteCards
bigArticleTitle = false # makes the title in the single article view bigger
navtype = "standard" # changes the style of the pagination, available styles are: "standard", "circles"
enableShadow = false # shows a shadow around some elements
menuStyle = "standard" # changes the style of the main site navigation menu, available styles are: "standard", "buttons"
enableSearch = true # enable search page
searchbarEverywhere = true # if the searchbar should be shown in every page; requires enableSearch

111
assets/scss/style.scss
View File

@ -133,6 +133,30 @@ body {
}
}
@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 !important;
border-bottom: none;
&:hover, &:focus {
background-color: var(--default_accent);
}
box-shadow: $shadow;
}
@mixin buttonLike {
{{ if eq (site.Params.navtype | default "standard") "circles" }}
@include roundButtonLike;
{{ else }}
@include linkLike;
{{ end }}
font-size: #{1.2 * $base_font_size};
}
a {
@include linkLike;
}
@ -520,21 +544,6 @@ ul.list {
}
}
@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 !important;
border-bottom: none;
&:hover, &:focus {
background-color: var(--default_accent);
}
box-shadow: $shadow;
}
.loadMoreButton {
text-align: center;
font-size: 1.2em;
@ -605,17 +614,41 @@ header {
font-size: .9em;
ul {
li {
border-right: 1px solid var(--default_accent);
&:last-child {
border-right: none;
}
a {
padding: 2px 20px;
color: var(--default_accent);
&:hover {
text-decoration: underline;
{{ if eq .Site.Params.menuStyle "buttons" }}
margin: 5px 2px;
margin-right: 5px;
&:last-child {
margin-right: none;
}
}
a {
{{ if eq (site.Params.navtype | default "standard") "circles" }}
@include roundButtonLike;
{{ else }}
font-family: "Symbols Nerd Font", $main_font;
background-color: var(--default_hl_bg);
transition: background-color .15s ease-in-out;
&:hover, &:active {
background-color: var(--default_accent);
}
{{ end }}
box-sizing: border-box;
color: var(--default_fg);
margin: 0;
padding: 8px 15px;
}
{{ else }}
border-right: 1px solid var(--default_accent);
&:last-child {
border-right: none;
}
a {
padding: 2px 20px;
color: var(--default_accent);
&:hover {
text-decoration: underline;
}
}
{{ end }}
}
}
}
@ -629,15 +662,6 @@ a.discreteTag {
@include roundButtonLike;
}
@mixin buttonLike {
{{ if eq (site.Params.navtype | default "standard") "circles" }}
@include roundButtonLike;
{{ else }}
@include linkLike;
{{ end }}
font-size: #{1.2 * $base_font_size};
}
.cactus-button, .cactus-login-buttons > button {
font-family: $main_font;
padding: 0;
@ -670,11 +694,11 @@ input, textarea, textarea.cactus-editor-textarea {
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) !important;
color: var(--default_fg);
max-width: 100%;
min-width: 10px;
padding: 12px;
border: 2px solid transparent !important;
border-color: transparent;
@ -822,23 +846,27 @@ input, textarea, textarea.cactus-editor-textarea {
display: none;
position: absolute;
z-index: 99999;
right: 6px;
padding: 12px;
right: 15px;
padding: 2px 5px;
width: 120px;
{{ if eq .Site.Params.navtype "circles" }}
border-radius: $border_radius;
{{ end }}
border: 2px solid var(--default_accent);
border: 2px solid var(--default_stroke);
background-color: var(--default_hl_bg);
flex-direction: column;
li {
border-right: none !important;
display: block;
text-align: center;
margin: 0;
a {
box-shadow: none;
box-sizing: border-box;
display: block;
width: 100%;
padding: 0;
padding: 10px;
margin: 3px 0;
}
}
}
@ -1120,7 +1148,7 @@ header.jumbotronContainer {
margin-bottom: 0;
padding: 0 15px;
box-shadow: $shadow;
> *:last-child, > *:first-child {
> *:first-child {
padding-bottom: 15px;
padding-top: 15px;
}
@ -1138,7 +1166,6 @@ header.jumbotronContainer {
li {
border-right: none;
a {
padding: 6px;
display: block;
}
}