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.
This commit is contained in:
DJ Chase 2022-03-09 03:34:04 +00:00 committed by Ben Harris
parent dbdf1f8ae6
commit 678fa41f70
3 changed files with 68 additions and 28 deletions

View File

@ -1,6 +1,7 @@
/*! /*!
* Bootstrap v3.3.7 (http://getbootstrap.com) * Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc. * Copyright 2011-2016 Twitter, Inc.
* Copyright 2022 DJ Chase
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked by mio for tilde.team * Forked by mio for tilde.team
*/ */
@ -214,3 +215,40 @@ ul.table-of-contents {
padding-bottom: 22px; padding-bottom: 22px;
border-bottom: 1px solid @hacker-box-border; 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;
}
}

View File

@ -41,16 +41,18 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw
@link-color: #BD93F9; @link-color: #BD93F9;
@link-hover-color: lighten(@link-color, 10%); @link-hover-color: lighten(@link-color, 10%);
@padding-base-vertical: 6px; @padding-base-vertical: 6px;
@padding-base-horizontal: 12px; @padding-base-horizontal: 2ch;
@padding-large-vertical: 10px; @padding-large-vertical: 10px;
@padding-large-horizontal: 16px; @padding-large-horizontal: 3ch;
@padding-small-vertical: 5px; @padding-small-vertical: 5px;
@padding-small-horizontal: 10px; @padding-small-horizontal: 1ch;
@border-radius-base: 2; @border-radius-base: 2;
@border-radius-large: 4; @border-radius-large: 4;
@border-radius-small: 1; @border-radius-small: 1;
@line-height-large: 1.33; @line-height-base: 1.428571429;
@line-height-small: 1.5; @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-color: @hacker-bg;
@component-active-bg: @hacker-primary-lighter; @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-serif: @font-family-monospace;
@font-family-base: @font-family-monospace; @font-family-base: @font-family-monospace;
@font-size-base: 16px; @font-size-base: 16px;
@font-size-large: ceil(@font-size-base * 1.25); @font-size-large: @font-size-base;
@font-size-small: ceil(@font-size-base * 0.85); @font-size-small: @font-size-base;
@font-size-h1: floor((@font-size-base * 3)); @font-size-h1: @font-size-base;
@font-size-h2: floor((@font-size-base * 2.5)); @font-size-h2: @font-size-base;
@font-size-h3: floor((@font-size-base * 2)); @font-size-h3: @font-size-base;
@font-size-h4: floor((@font-size-base * 1.5)); @font-size-h4: @font-size-base;
@font-size-h5: floor((@font-size-base * 1.25)); @font-size-h5: @font-size-base;
@font-size-h6: @font-size-base; @font-size-h6: @font-size-base;
@line-height-base: 1.428571429;
@line-height-computed: floor(@font-size-base * @line-height-base); @line-height-computed: floor(@font-size-base * @line-height-base);
@headings-font-family: @font-family-base; @headings-font-family: @font-family-base;
@headings-font-weight: 500; @headings-font-weight: 500;
@headings-line-height: 1.2; @headings-line-height: @line-height-base;
@headings-color: @hacker-primary-lighter; @headings-color: @hacker-primary-lighter;

View File

@ -39,16 +39,18 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw
@link-color: @hacker-primary-lighter; @link-color: @hacker-primary-lighter;
@link-hover-color: lighten(@link-color, 10%); @link-hover-color: lighten(@link-color, 10%);
@padding-base-vertical: 6px; @padding-base-vertical: 6px;
@padding-base-horizontal: 12px; @padding-base-horizontal: 2ch;
@padding-large-vertical: 10px; @padding-large-vertical: 10px;
@padding-large-horizontal: 16px; @padding-large-horizontal: 3ch;
@padding-small-vertical: 5px; @padding-small-vertical: 5px;
@padding-small-horizontal: 10px; @padding-small-horizontal: 1ch;
@border-radius-base: 2; @border-radius-base: 2;
@border-radius-large: 4; @border-radius-large: 4;
@border-radius-small: 1; @border-radius-small: 1;
@line-height-large: 1.33; @line-height-base: 1.428571429;
@line-height-small: 1.5; @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-color: @hacker-bg;
@component-active-bg: @hacker-primary-lighter; @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-serif: @font-family-monospace;
@font-family-base: @font-family-monospace; @font-family-base: @font-family-monospace;
@font-size-base: 16px; @font-size-base: 16px;
@font-size-large: ceil(@font-size-base * 1.25); @font-size-large: @font-size-base;
@font-size-small: ceil(@font-size-base * 0.85); @font-size-small: @font-size-base;
@font-size-h1: floor((@font-size-base * 3)); @font-size-h1: @font-size-base;
@font-size-h2: floor((@font-size-base * 2.5)); @font-size-h2: @font-size-base;
@font-size-h3: floor((@font-size-base * 2)); @font-size-h3: @font-size-base;
@font-size-h4: floor((@font-size-base * 1.5)); @font-size-h4: @font-size-base;
@font-size-h5: floor((@font-size-base * 1.25)); @font-size-h5: @font-size-base;
@font-size-h6: @font-size-base; @font-size-h6: @font-size-base;
@line-height-base: 1.428571429;
@line-height-computed: floor(@font-size-base * @line-height-base); @line-height-computed: floor(@font-size-base * @line-height-base);
@headings-font-family: @font-family-base; @headings-font-family: @font-family-base;
@headings-font-weight: 500; @headings-font-weight: 500;
@headings-line-height: 1.2; @headings-line-height: @line-height-base;
@headings-color: @hacker-primary-lighter; @headings-color: @hacker-primary-lighter;