From 678fa41f700f30621a5fdf063fdf9fecf830a317 Mon Sep 17 00:00:00 2001 From: DJ Chase Date: Wed, 9 Mar 2022 03:34:04 +0000 Subject: [PATCH] fix monospace issues everything is now the same line height, and forms and etc are now horizontally-aligned with the character grid. additionally, paragraphs now have a full blank line between them. --- css/less/_theme.less | 38 +++++++++++++++++++++++++++++++++ css/less/dracula_variables.less | 29 +++++++++++++------------ css/less/hacker_variables.less | 29 +++++++++++++------------ 3 files changed, 68 insertions(+), 28 deletions(-) diff --git a/css/less/_theme.less b/css/less/_theme.less index cbb91fd..98ab9c7 100644 --- a/css/less/_theme.less +++ b/css/less/_theme.less @@ -1,6 +1,7 @@ /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. + * Copyright 2022 DJ Chase * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Forked by mio for tilde.team */ @@ -214,3 +215,40 @@ ul.table-of-contents { padding-bottom: 22px; border-bottom: 1px solid @hacker-box-border; } + +// Headings +h1 { + font-weight: bold; + text-decoration: underline; + margin-top: @line-height-with-unit * 2; + margin-bottom: @line-height-with-unit; +} +h2 { + font-weight: bold; + margin-top: @line-height-with-unit * 2; + margin-bottom: @line-height-with-unit; +} +h3 { + font-style: italic; + margin-top: @line-height-with-unit * 2; + margin-bottom: @line-height-with-unit; +} +h4 { + margin-top: @line-height-with-unit * 2; + margin-bottom: @line-height-with-unit; +} +h5 { + margin-top: @line-height-with-unit * 2; + margin-bottom: @line-height-with-unit; +} +h6 { + margin-top: @line-height-with-unit * 2; + margin-bottom: @line-height-with-unit; +} + +// Space between paragraphs +p { + &:not(:last-child) { + margin-bottom: @line-height-with-unit; + } +} diff --git a/css/less/dracula_variables.less b/css/less/dracula_variables.less index 840318c..e15d5cd 100644 --- a/css/less/dracula_variables.less +++ b/css/less/dracula_variables.less @@ -41,16 +41,18 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @link-color: #BD93F9; @link-hover-color: lighten(@link-color, 10%); @padding-base-vertical: 6px; -@padding-base-horizontal: 12px; +@padding-base-horizontal: 2ch; @padding-large-vertical: 10px; -@padding-large-horizontal: 16px; +@padding-large-horizontal: 3ch; @padding-small-vertical: 5px; -@padding-small-horizontal: 10px; +@padding-small-horizontal: 1ch; @border-radius-base: 2; @border-radius-large: 4; @border-radius-small: 1; -@line-height-large: 1.33; -@line-height-small: 1.5; +@line-height-base: 1.428571429; +@line-height-with-unit: 1.428571429em; +@line-height-large: @line-height-base * 2; +@line-height-small: @line-height-base; @component-active-color: @hacker-bg; @component-active-bg: @hacker-primary-lighter; @@ -61,19 +63,18 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @font-family-serif: @font-family-monospace; @font-family-base: @font-family-monospace; @font-size-base: 16px; -@font-size-large: ceil(@font-size-base * 1.25); -@font-size-small: ceil(@font-size-base * 0.85); -@font-size-h1: floor((@font-size-base * 3)); -@font-size-h2: floor((@font-size-base * 2.5)); -@font-size-h3: floor((@font-size-base * 2)); -@font-size-h4: floor((@font-size-base * 1.5)); -@font-size-h5: floor((@font-size-base * 1.25)); +@font-size-large: @font-size-base; +@font-size-small: @font-size-base; +@font-size-h1: @font-size-base; +@font-size-h2: @font-size-base; +@font-size-h3: @font-size-base; +@font-size-h4: @font-size-base; +@font-size-h5: @font-size-base; @font-size-h6: @font-size-base; -@line-height-base: 1.428571429; @line-height-computed: floor(@font-size-base * @line-height-base); @headings-font-family: @font-family-base; @headings-font-weight: 500; -@headings-line-height: 1.2; +@headings-line-height: @line-height-base; @headings-color: @hacker-primary-lighter; diff --git a/css/less/hacker_variables.less b/css/less/hacker_variables.less index b632840..b4849e1 100644 --- a/css/less/hacker_variables.less +++ b/css/less/hacker_variables.less @@ -39,16 +39,18 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @link-color: @hacker-primary-lighter; @link-hover-color: lighten(@link-color, 10%); @padding-base-vertical: 6px; -@padding-base-horizontal: 12px; +@padding-base-horizontal: 2ch; @padding-large-vertical: 10px; -@padding-large-horizontal: 16px; +@padding-large-horizontal: 3ch; @padding-small-vertical: 5px; -@padding-small-horizontal: 10px; +@padding-small-horizontal: 1ch; @border-radius-base: 2; @border-radius-large: 4; @border-radius-small: 1; -@line-height-large: 1.33; -@line-height-small: 1.5; +@line-height-base: 1.428571429; +@line-height-with-unit: 1.428571429em; +@line-height-large: @line-height-base * 2; +@line-height-small: @line-height-base; @component-active-color: @hacker-bg; @component-active-bg: @hacker-primary-lighter; @@ -59,19 +61,18 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @font-family-serif: @font-family-monospace; @font-family-base: @font-family-monospace; @font-size-base: 16px; -@font-size-large: ceil(@font-size-base * 1.25); -@font-size-small: ceil(@font-size-base * 0.85); -@font-size-h1: floor((@font-size-base * 3)); -@font-size-h2: floor((@font-size-base * 2.5)); -@font-size-h3: floor((@font-size-base * 2)); -@font-size-h4: floor((@font-size-base * 1.5)); -@font-size-h5: floor((@font-size-base * 1.25)); +@font-size-large: @font-size-base; +@font-size-small: @font-size-base; +@font-size-h1: @font-size-base; +@font-size-h2: @font-size-base; +@font-size-h3: @font-size-base; +@font-size-h4: @font-size-base; +@font-size-h5: @font-size-base; @font-size-h6: @font-size-base; -@line-height-base: 1.428571429; @line-height-computed: floor(@font-size-base * @line-height-base); @headings-font-family: @font-family-base; @headings-font-weight: 500; -@headings-line-height: 1.2; +@headings-line-height: @line-height-base; @headings-color: @hacker-primary-lighter;