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

added font size multipliers to account for naturally smaller fonts

This commit is contained in:
Gabriele Musco 2021-12-13 10:55:11 +01:00
parent a74cf50275
commit 867330290e
No known key found for this signature in database
GPG Key ID: 0587A5D65B5DC99E
2 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -56,9 +56,16 @@ 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"
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
monospaceFontFamily = "JetBrains Mono" # changes the monospace font for code, default "JetBrains Mono" monospaceFontFamily = "JetBrains Mono" # changes the monospace font for code, default "JetBrains Mono"
# multipliers applied to font sizes, useful for custom fonts that may be too big or too small
titleFontSizeMultiplier = 1.0
mainFontSizeMultiplier = 1.0
monoFontSizeMultiplier = 1.0
contentWidth = "1000px" # maximum width of the site content, css syntax contentWidth = "1000px" # maximum width of the site content, css syntax
discreteCards = false # enable discrete card style; default false discreteCards = false # enable discrete card style; default false

43
assets/scss/style.scss
View File

@ -11,6 +11,11 @@ $content_width: {{ .Site.Params.contentWidth | default "1000px" }};
$border_radius: 10px; $border_radius: 10px;
$content_spacing: 25px; $content_spacing: 25px;
$base_font_size: 16px;
$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 }};
::selection, ::-moz-selection { ::selection, ::-moz-selection {
background: $accent_color; background: $accent_color;
color: $fg_color; color: $fg_color;
@ -22,6 +27,7 @@ a {
body, html { body, html {
font-family: "Symbols Nerd Font", $main_font, monospace; font-family: "Symbols Nerd Font", $main_font, monospace;
font-size: $base_font_size * $main_font_mult;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: $bg_color; background-color: $bg_color;
@ -61,7 +67,7 @@ footer {
margin-top: (2 * $content_spacing); margin-top: (2 * $content_spacing);
} }
.footerColumns { .footerColumns {
font-size: .9rem; font-size: .9 * $base_font_size * $main_font_mult;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -70,7 +76,7 @@ footer {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
li > strong { li > strong {
font-size: 1rem; font-size: 1rem * $main_font_mult;
} }
} }
} }
@ -99,7 +105,7 @@ article, .articlePreview {
code { code {
font-family: "Symbols Nerd Font", $mono_font, monospace; font-family: "Symbols Nerd Font", $mono_font, monospace;
font-size: .8em; font-size: $base_font_size * .8 * $mono_font_mult;
border: 1px solid $stroke_color; border: 1px solid $stroke_color;
border-radius: 3px border-radius: 3px
} }
@ -184,9 +190,16 @@ h1, h2, h3, h4, h5, h6 {
} }
} }
h1 {font-size: 2.0 * $base_font_size * $title_font_mult;}
h2 {font-size: 1.5 * $base_font_size * $title_font_mult;}
h3 {font-size: 1.3 * $base_font_size * $title_font_mult;}
h4 {font-size: 1.0 * $base_font_size * $title_font_mult;}
h5 {font-size: 0.8 * $base_font_size * $title_font_mult;}
h6 {font-size: 0.7 * $base_font_size * $title_font_mult;}
.nerd { .nerd {
font-family: "Symbols Nerd Font", $mono_font; font-family: "Symbols Nerd Font", $main_font;
font-size: 1.2em; font-size: 1.2 * $base_font_size;
margin: 5px; margin: 5px;
display: inline-block; display: inline-block;
} }
@ -250,17 +263,17 @@ h1, h2, h3, h4, h5, h6 {
&.single { &.single {
{{ if (.Site.Params.bigArticleTitle | default false) }} {{ if (.Site.Params.bigArticleTitle | default false) }}
h1 { h1 {
font-size: 2.2em; font-size: 2.2em * $base_font_size * $title_font_mult};
} }
{{ end }} {{ end }}
} }
} }
.postlist { .postlist {
display: grid; display: grid;
grid-gap: 25px; grid-gap: 25px;
margin-bottom: $content_spacing; margin-bottom: $content_spacing;
grid-template-columns: 1fr; grid-template-columns: 1fr;
&.gridView { &.gridView {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
.card { .card {
@ -433,7 +446,7 @@ ul.list {
.loadMoreButton { .loadMoreButton {
text-align: center; text-align: center;
font-size: 1.2rem; font-size: 1.2em;
font-weight: bold; font-weight: bold;
&.buttonLike { &.buttonLike {
a { a {
@ -458,7 +471,7 @@ ul.list {
h1 { h1 {
font-weight: normal; font-weight: normal;
font-size: 1.6em; font-size: 1.6 * $base_font_size * $title_font_mult;
margin: 0; margin: 0;
} }
@ -616,7 +629,7 @@ header {
} }
#hamburger-menu { #hamburger-menu {
display: block !important; display: block !important;
font-size: 1.2rem; font-size: 1.2em;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin: 0; margin: 0;
@ -838,7 +851,7 @@ header.jumbotronContainer {
h1 { h1 {
font-weight: 300; font-weight: 300;
&.huge { &.huge {
font-size: 4em; font-size: 4 * $base_font_size * $title_font_mult;
} }
} }
h1, h2 { h1, h2 {
@ -870,7 +883,7 @@ header.jumbotronContainer {
.jumbotron { .jumbotron {
flex-wrap: wrap; flex-wrap: wrap;
h1.huge { h1.huge {
font-size: 3em !important; font-size: 3 * $base_font_size * $title_font_mult !important;
} }
h1, h2 { h1, h2 {
margin: 6px; margin: 6px;