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

consolidated margins

This commit is contained in:
Gabriele Musco 2021-12-28 11:26:11 +01:00
parent c896fcb147
commit 9658f0159a
No known key found for this signature in database
GPG Key ID: 0587A5D65B5DC99E
1 changed files with 36 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
assets/scss/style.scss
View File

@ -92,7 +92,7 @@ $mono_font: {{ .Site.Params.monospaceFontFamily | default "JetBrains Mono" }};
$symbols_font: "Symbols Nerd Font"; $symbols_font: "Symbols Nerd Font";
$content_width: {{ .Site.Params.contentWidth | default "1000px" }}; $content_width: {{ .Site.Params.contentWidth | default "1000px" }};
$border_radius: 10px; $border_radius: 10px;
$content_spacing: 25px; $margin: 15px;
$base_font_size: 16px; $base_font_size: 16px;
$title_font_mult: {{ .Site.Params.titleFontSizeMultiplier | default 1.0 }}; $title_font_mult: {{ .Site.Params.titleFontSizeMultiplier | default 1.0 }};
@ -139,8 +139,8 @@ body {
border-radius: $border_radius; border-radius: $border_radius;
background-color: var(--default_hl_bg); background-color: var(--default_hl_bg);
color: var(--default_fg); color: var(--default_fg);
padding: ($content_spacing / 2); padding: ($margin / 2);
margin: ($content_spacing / 6) 0; margin: ($margin / 6) 0;
transition: background-color .15s ease-in-out !important; transition: background-color .15s ease-in-out !important;
border-bottom: none; border-bottom: none;
&:hover, &:focus { &:hover, &:focus {
@ -170,7 +170,7 @@ a {
#content { #content {
@include limitWidth; @include limitWidth;
padding: 15px; padding: $margin;
} }
footer { footer {
@ -179,7 +179,7 @@ footer {
color: var(--default_dim_fg); color: var(--default_dim_fg);
} }
hr { hr {
margin-top: (2 * $content_spacing); margin-top: (2 * $margin);
} }
.footerColumns { .footerColumns {
font-size: .9 * $base_font_size * $main_font_mult; font-size: .9 * $base_font_size * $main_font_mult;
@ -187,7 +187,7 @@ footer {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
ul { ul {
margin: ($content_spacing / 2); margin: ($margin / 2);
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
li > strong { li > strong {
@ -212,7 +212,7 @@ article, .articlePreview {
overflow: auto; overflow: auto;
} }
pre { pre {
padding: 20px; padding: $margin;
border: 1px solid var(--default_stroke); border: 1px solid var(--default_stroke);
border-radius: 3px; border-radius: 3px;
} }
@ -370,13 +370,13 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
.card { .card {
display: block; display: block;
padding-bottom: 25px; padding-bottom: $margin;
{{ if (.Site.Params.paperCards | default false) }} {{ if (.Site.Params.paperCards | default false) }}
background-color: var(--default_hl_bg); background-color: var(--default_hl_bg);
border-radius: $border_radius; border-radius: $border_radius;
box-shadow: $shadow; box-shadow: $shadow;
padding: 20px; padding: $margin;
padding-top: 1px; padding-top: 1px;
{{ end }} {{ end }}
@ -391,11 +391,11 @@ h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
.postlist { .postlist {
display: grid; display: grid;
grid-gap: 25px; grid-gap: $margin;
margin-bottom: $content_spacing; margin-bottom: $margin;
grid-template-columns: 1fr; grid-template-columns: 1fr;
&.gridView { &.gridView {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
} }
} }
@ -438,7 +438,7 @@ ul.list {
} }
#commento { #commento {
margin-top: 25px; margin-top: $margin;
color: var(--default_fg); color: var(--default_fg);
font-family: $symbols_font, $main_font, monospace; font-family: $symbols_font, $main_font, monospace;
textarea, #commento-markdown-help-root { textarea, #commento-markdown-help-root {
@ -486,7 +486,7 @@ ul.list {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
margin: 12px 0; margin: $margin 0;
.nerdlink { .nerdlink {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@ -527,7 +527,7 @@ ul.list {
.contentArea { .contentArea {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
padding: 15px; padding: $margin;
&, h2, .date {color: white;} &, h2, .date {color: white;}
h2 { h2 {
margin: 0; margin: 0;
@ -555,7 +555,7 @@ ul.list {
} }
.relatedArticlesContainer { .relatedArticlesContainer {
margin: $content_spacing 0; margin: $margin 0;
#relatedArticles .postlistitem { #relatedArticles .postlistitem {
@extend .featuredCard; @extend .featuredCard;
} }
@ -575,7 +575,7 @@ ul.list {
} }
img { img {
margin-right: ($content_spacing / 2); margin-right: ($margin / 2);
margin-top: 7px; margin-top: 7px;
align-self: flex-start; align-self: flex-start;
width: 50px; width: 50px;
@ -597,8 +597,8 @@ nav:not(#TableOfContents), #links {
header { header {
@include limitWidth; @include limitWidth;
padding: 15px; padding: $margin;
margin-bottom: $content_spacing; margin-bottom: $margin;
.rightOfLogo { .rightOfLogo {
width: 100%; width: 100%;
.titleAndHamburger { .titleAndHamburger {
@ -633,7 +633,7 @@ header {
box-sizing: border-box; box-sizing: border-box;
color: var(--default_fg); color: var(--default_fg);
margin: 0; margin: 0;
padding: 8px 15px; padding: #{$margin/2} $margin;
} }
{{ else }} {{ else }}
border-right: 1px solid var(--default_accent); border-right: 1px solid var(--default_accent);
@ -641,7 +641,7 @@ header {
border-right: none; border-right: none;
} }
a { a {
padding: 2px 20px; padding: 2px $margin;
color: var(--default_accent); color: var(--default_accent);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -654,7 +654,7 @@ header {
} }
.articleTagsContainer { .articleTagsContainer {
margin: $content_spacing 0; margin: $margin 0;
} }
a.buttonTag { a.buttonTag {
@ -664,7 +664,7 @@ a.buttonTag {
.cactus-button, .cactus-login-buttons > button { .cactus-button, .cactus-login-buttons > button {
font-family: $main_font; font-family: $main_font;
padding: 0; padding: 0;
margin: 12px !important; margin: 5px 2px !important;
@include buttonLike; @include buttonLike;
transition-property: border-color, background-color !important; transition-property: border-color, background-color !important;
transition-duration: .15s; transition-duration: .15s;
@ -729,7 +729,7 @@ input, textarea, textarea.cactus-editor-textarea {
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
transform: none; transform: none;
top: 24px; top: #{$margin*2};
left: 0; right: 0; left: 0; right: 0;
background-color: var(--default_bg) !important; background-color: var(--default_bg) !important;
color: var(--default_fg) !important; color: var(--default_fg) !important;
@ -770,13 +770,13 @@ input, textarea, textarea.cactus-editor-textarea {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
display: flex; flex-direction: column; display: flex; flex-direction: column;
top: 24px; top: #{$margin*2};
left: 50%; transform: translateX(-50%); left: 50%; transform: translateX(-50%);
z-index: 9999; z-index: 9999;
background-color: var(--default_bg); background-color: var(--default_bg);
width: 450px; width: 450px;
max-width: 100%; max-width: 100%;
padding: 24px; padding: $margin;
{{ if (.Site.Params.paperCards | default false) }} {{ if (.Site.Params.paperCards | default false) }}
border-radius: $border_radius; border-radius: $border_radius;
{{ end }} {{ end }}
@ -790,12 +790,13 @@ input, textarea, textarea.cactus-editor-textarea {
display: block; display: block;
} }
.buttons { .buttons {
margin: 12px 0; margin: $margin 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: end; justify-content: end;
> * { > * {
margin-left: 24px; margin: 5px 2px;
display: block;
} }
} }
} }
@ -833,7 +834,7 @@ input, textarea, textarea.cactus-editor-textarea {
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin: 0; margin: 0;
padding: ($content_spacing / 4); padding: ($margin / 4);
align-self: center; align-self: center;
} }
nav:not(#TableOfContents) { nav:not(#TableOfContents) {
@ -842,7 +843,7 @@ input, textarea, textarea.cactus-editor-textarea {
display: none; display: none;
position: absolute; position: absolute;
z-index: 99999; z-index: 99999;
right: 15px; right: $margin;
padding: 2px 5px; padding: 2px 5px;
width: 120px; width: 120px;
{{ if eq .Site.Params.navtype "circles" }} {{ if eq .Site.Params.navtype "circles" }}
@ -925,7 +926,7 @@ header.jumbotronContainer {
} }
{{ end }} {{ end }}
> *:first-child { > *:first-child {
padding-top: 15px; padding-top: $margin;
} }
padding-bottom: 0; padding-bottom: 0;
padding-top: 0; padding-top: 0;
@ -1142,18 +1143,18 @@ header.jumbotronContainer {
display: block; display: block;
overflow: auto; overflow: auto;
margin-bottom: 0; margin-bottom: 0;
padding: 0 15px; padding: 0 $margin;
box-shadow: $shadow; box-shadow: $shadow;
> *:first-child { > *:first-child {
padding-bottom: 15px; padding-bottom: $margin;
padding-top: 15px; padding-top: $margin;
} }
.rightOfLogo { .rightOfLogo {
align-self: center; align-self: center;
} }
#sidebar_nav { #sidebar_nav {
display: block; display: block;
margin: 12px 0; margin: $margin 0;
width: 100%; width: 100%;
nav:not(#TableOfContents) { nav:not(#TableOfContents) {
font-size: 1.1em; font-size: 1.1em;