adam/home73k
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

syntax highlighting and blog/post liveviews working; numerous other styling updates

Browse source
This commit is contained in:
Adam Piontek 2021-04-05 16:51:59 -04:00
commit 2218a678b1
35 changed files with 610 additions and 120 deletions

8
assets/css/_bs-custom.scss
View file

@ -4,8 +4,8 @@
//
// Font, line-height, and color for body text, headings, and more.
// stylelint-disable value-keyword-case
$font-family-sans-serif: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto,
$font-size-base: 1.125rem;
$font-family-sans-serif: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
$font-family-base: $font-family-sans-serif;
@ -14,10 +14,8 @@ $font-family-brand: Righteous, system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
$font-family-monospace: "Fira Mono", SFMono-Regular, Menlo, Monaco, Consolas,
$font-family-monospace: "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace !important;
$font-family-code: "Fira Code", "Fira Mono", SFMono-Regular, Menlo, Monaco,
Consolas, "Liberation Mono", "Courier New", monospace !important;
// Features
$enable-shadows: true;

48
assets/css/_fonts.scss
View file

@ -1,35 +1,23 @@
/* Fontsource Work Sans */
@import "../node_modules/@fontsource/work-sans/100.css"; /* thin | normal */
@import "../node_modules/@fontsource/work-sans/100-italic.css"; /* thin | italic */
// @import "../node_modules/@fontsource/work-sans/200.css"; /* thin-light | normal */
// @import "../node_modules/@fontsource/work-sans/200-italic.css"; /* thin-light | italic */
@import "../node_modules/@fontsource/work-sans/300.css"; /* light | normal */
@import "../node_modules/@fontsource/work-sans/300-italic.css"; /* light | italic */
@import "../node_modules/@fontsource/work-sans/400.css"; /* normal | normal */
@import "../node_modules/@fontsource/work-sans/400-italic.css"; /* normal | italic */
// @import "../node_modules/@fontsource/work-sans/500.css"; /* heavier | normal */
// @import "../node_modules/@fontsource/work-sans/500-italic.css"; /* heavier | italic */
@import "../node_modules/@fontsource/work-sans/600.css"; /* heavier? | normal */
@import "../node_modules/@fontsource/work-sans/600-italic.css"; /* heavier | italic */
@import "../node_modules/@fontsource/work-sans/700.css"; /* bold | normal */
@import "../node_modules/@fontsource/work-sans/700-italic.css"; /* bold | italic */
// @import "../node_modules/@fontsource/work-sans/800.css"; /* bolder? | normal */
// @import "../node_modules/@fontsource/work-sans/800-italic.css"; /* bolder? | italic */
// @import "../node_modules/@fontsource/work-sans/900.css"; /* black | normal */
// @import "../node_modules/@fontsource/work-sans/900-italic.css"; /* black | italic */
/* Fontsource Righteous */
/* brand : Fontsource Righteous */
@import "../node_modules/@fontsource/righteous/400.css"; /* normal | normal */
/* Fontsource Fira Mono */
@import "../node_modules/@fontsource/fira-mono/400.css"; /* normal | normal */
@import "../node_modules/@fontsource/fira-mono/500.css"; /* heavier normal? */
// @import "../node_modules/@fontsource/fira-mono/700.css"; /* bold | normal */
/* Fontsource Fira Code */
/* monospace : Fontsource Fira Code */
@import "../node_modules/@fontsource/fira-code/300.css"; /* light | normal */
@import "../node_modules/@fontsource/fira-code/400.css"; /* normal | normal */
// @import "../node_modules/@fontsource/fira-code/500.css"; /* heavier normal? */
// @import "../node_modules/@fontsource/fira-code/600.css"; /* heavier normal? */
@import "../node_modules/@fontsource/fira-code/500.css"; /* heavier normal? */
@import "../node_modules/@fontsource/fira-code/600.css"; /* heavier normal? */
@import "../node_modules/@fontsource/fira-code/700.css"; /* bold | normal */
/* Fontsource Open Sans */
@import "../node_modules/@fontsource/open-sans/300.css"; /* light | normal */
@import "../node_modules/@fontsource/open-sans/300-italic.css"; /* light | italic */
@import "../node_modules/@fontsource/open-sans/400.css"; /* normal | normal */
@import "../node_modules/@fontsource/open-sans/400-italic.css"; /* normal | italic */
@import "../node_modules/@fontsource/open-sans/600.css"; /* heavier? | normal */
@import "../node_modules/@fontsource/open-sans/600-italic.css"; /* heavier | italic */
@import "../node_modules/@fontsource/open-sans/700.css"; /* bold | normal */
@import "../node_modules/@fontsource/open-sans/700-italic.css"; /* bold | italic */
@import "../node_modules/@fontsource/open-sans/800.css"; /* bolder? | normal */
@import "../node_modules/@fontsource/open-sans/800-italic.css"; /* bolder? | italic */

269
assets/css/_pygments.css Normal file
View file

@ -0,0 +1,269 @@
pre {
line-height: 125%;
}
td.linenos .normal {
color: #37474f;
background-color: #263238;
padding-left: 5px;
padding-right: 5px;
}
span.linenos {
color: #37474f;
background-color: #263238;
padding-left: 5px;
padding-right: 5px;
}
td.linenos .special {
color: #607a86;
background-color: #263238;
padding-left: 5px;
padding-right: 5px;
}
span.linenos.special {
color: #607a86;
background-color: #263238;
padding-left: 5px;
padding-right: 5px;
}
pre.pygments .hll {
background-color: #2c3b41;
}
pre.pygments {
background: #263238;
color: #eeffff;
}
pre.pygments .c {
color: #546e7a;
font-style: italic;
} /* Comment */
pre.pygments .err {
color: #ff5370;
} /* Error */
pre.pygments .esc {
color: #89ddff;
} /* Escape */
pre.pygments .g {
color: #eeffff;
} /* Generic */
pre.pygments .k {
color: #bb80b3;
} /* Keyword */
pre.pygments .l {
color: #c3e88d;
} /* Literal */
pre.pygments .n {
color: #eeffff;
} /* Name */
pre.pygments .o {
color: #89ddff;
} /* Operator */
pre.pygments .p {
color: #89ddff;
} /* Punctuation */
pre.pygments .ch {
color: #546e7a;
font-style: italic;
} /* Comment.Hashbang */
pre.pygments .cm {
color: #546e7a;
font-style: italic;
} /* Comment.Multiline */
pre.pygments .cp {
color: #546e7a;
font-style: italic;
} /* Comment.Preproc */
pre.pygments .cpf {
color: #546e7a;
font-style: italic;
} /* Comment.PreprocFile */
pre.pygments .c1 {
color: #546e7a;
font-style: italic;
} /* Comment.Single */
pre.pygments .cs {
color: #546e7a;
font-style: italic;
} /* Comment.Special */
pre.pygments .gd {
color: #ff5370;
} /* Generic.Deleted */
pre.pygments .ge {
color: #89ddff;
} /* Generic.Emph */
pre.pygments .gr {
color: #ff5370;
} /* Generic.Error */
pre.pygments .gh {
color: #c3e88d;
} /* Generic.Heading */
pre.pygments .gi {
color: #c3e88d;
} /* Generic.Inserted */
pre.pygments .go {
color: #546e7a;
} /* Generic.Output */
pre.pygments .gp {
color: #ffcb6b;
} /* Generic.Prompt */
pre.pygments .gs {
color: #ff5370;
} /* Generic.Strong */
pre.pygments .gu {
color: #89ddff;
} /* Generic.Subheading */
pre.pygments .gt {
color: #ff5370;
} /* Generic.Traceback */
pre.pygments .kc {
color: #89ddff;
} /* Keyword.Constant */
pre.pygments .kd {
color: #bb80b3;
} /* Keyword.Declaration */
pre.pygments .kn {
color: #89ddff;
font-style: italic;
} /* Keyword.Namespace */
pre.pygments .kp {
color: #89ddff;
} /* Keyword.Pseudo */
pre.pygments .kr {
color: #bb80b3;
} /* Keyword.Reserved */
pre.pygments .kt {
color: #bb80b3;
} /* Keyword.Type */
pre.pygments .ld {
color: #c3e88d;
} /* Literal.Date */
pre.pygments .m {
color: #f78c6c;
} /* Literal.Number */
pre.pygments .s {
color: #c3e88d;
} /* Literal.String */
pre.pygments .na {
color: #bb80b3;
} /* Name.Attribute */
pre.pygments .nb {
color: #82aaff;
} /* Name.Builtin */
pre.pygments .nc {
color: #ffcb6b;
} /* Name.Class */
pre.pygments .no {
color: #eeffff;
} /* Name.Constant */
pre.pygments .nd {
color: #82aaff;
} /* Name.Decorator */
pre.pygments .ni {
color: #89ddff;
} /* Name.Entity */
pre.pygments .ne {
color: #ffcb6b;
} /* Name.Exception */
pre.pygments .nf {
color: #82aaff;
} /* Name.Function */
pre.pygments .nl {
color: #82aaff;
} /* Name.Label */
pre.pygments .nn {
color: #ffcb6b;
} /* Name.Namespace */
pre.pygments .nx {
color: #eeffff;
} /* Name.Other */
pre.pygments .py {
color: #ffcb6b;
} /* Name.Property */
pre.pygments .nt {
color: #ff5370;
} /* Name.Tag */
pre.pygments .nv {
color: #89ddff;
} /* Name.Variable */
pre.pygments .ow {
color: #89ddff;
font-style: italic;
} /* Operator.Word */
pre.pygments .w {
color: #eeffff;
} /* Text.Whitespace */
pre.pygments .mb {
color: #f78c6c;
} /* Literal.Number.Bin */
pre.pygments .mf {
color: #f78c6c;
} /* Literal.Number.Float */
pre.pygments .mh {
color: #f78c6c;
} /* Literal.Number.Hex */
pre.pygments .mi {
color: #f78c6c;
} /* Literal.Number.Integer */
pre.pygments .mo {
color: #f78c6c;
} /* Literal.Number.Oct */
pre.pygments .sa {
color: #bb80b3;
} /* Literal.String.Affix */
pre.pygments .sb {
color: #c3e88d;
} /* Literal.String.Backtick */
pre.pygments .sc {
color: #c3e88d;
} /* Literal.String.Char */
pre.pygments .dl {
color: #eeffff;
} /* Literal.String.Delimiter */
pre.pygments .sd {
color: #546e7a;
font-style: italic;
} /* Literal.String.Doc */
pre.pygments .s2 {
color: #c3e88d;
} /* Literal.String.Double */
pre.pygments .se {
color: #eeffff;
} /* Literal.String.Escape */
pre.pygments .sh {
color: #c3e88d;
} /* Literal.String.Heredoc */
pre.pygments .si {
color: #89ddff;
} /* Literal.String.Interpol */
pre.pygments .sx {
color: #c3e88d;
} /* Literal.String.Other */
pre.pygments .sr {
color: #89ddff;
} /* Literal.String.Regex */
pre.pygments .s1 {
color: #c3e88d;
} /* Literal.String.Single */
pre.pygments .ss {
color: #89ddff;
} /* Literal.String.Symbol */
pre.pygments .bp {
color: #89ddff;
} /* Name.Builtin.Pseudo */
pre.pygments .fm {
color: #82aaff;
} /* Name.Function.Magic */
pre.pygments .vc {
color: #89ddff;
} /* Name.Variable.Class */
pre.pygments .vg {
color: #89ddff;
} /* Name.Variable.Global */
pre.pygments .vi {
color: #89ddff;
} /* Name.Variable.Instance */
pre.pygments .vm {
color: #82aaff;
} /* Name.Variable.Magic */
pre.pygments .il {
color: #f78c6c;
} /* Literal.Number.Integer.Long */

39
assets/css/app.scss
View file

@ -16,6 +16,29 @@
/* Navbar custom styling */
@import "nav-bar-help";
/* Pygments syntax highlighting styles */
@import "pygments";
/* code highlighting */
pre.pygments {
line-height: 125%;
background-color: #272822 !important;
overflow: wrap !important;
padding: 0.75rem;
border-radius: .25em;
code {
font-family: $font-family-code;
color: #eeffff;
}
}
code.inline {
background-color: #272822;
color: #eeffff;
padding: .2em .5em;
border-radius: .25em;
display: inline;
}
/* main */
html,
body {
@ -24,12 +47,12 @@ body {
height: 100%;
}
a {
color: $primary;
color: $secondary;
&:visited {
color: $info;
}
&:hover {
color: $secondary;
color: $primary;
}
}
.border-gray-900 {
@ -59,15 +82,9 @@ a {
.fw-600 {
font-weight: 600;
}
.font-sans-serif {
font-family: $font-family-sans-serif;
}
.font-brand {
font-family: $font-family-brand;
}
.font-code {
font-family: $font-family-code;
}
.fs-larger {
font-size: larger;
}
@ -124,10 +141,8 @@ a {
margin-top: 2rem;
}
}
.post-lede.lead {
font-size: 1.25rem;
font-weight: 300;
color: $gray-300;
.post li {
line-height: 1.75rem;
}
/* extra */