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

switched to source serif pro as main font, fixed some other styling

Browse source
This commit is contained in:
Adam Piontek 2021-04-09 14:08:05 -04:00
parent ecae5e4b77
commit 1f7ef6f7f7
7 changed files with 73 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,14 +1,11 @@
/* Bootstrap custom variable overrides */ /* Bootstrap custom variable overrides */
// Typography // Typography
//
// Font, line-height, and color for body text, headings, and more.
$font-size-base: 1.125rem; $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, $font-family-serif: "Source Serif Pro", "Iowan Old Style", "Apple Garamond",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; Baskerville, "Times New Roman", "Droid Serif", Times, serif,
$font-family-base: $font-family-sans-serif; "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
$font-family-brand: Righteous, system-ui, -apple-system, "Segoe UI", Roboto, $font-family-brand: Righteous, system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
@ -17,6 +14,8 @@ $font-family-brand: Righteous, system-ui, -apple-system, "Segoe UI", Roboto,
$font-family-monospace: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, $font-family-monospace: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace !important; "Liberation Mono", "Courier New", monospace !important;
$font-family-base: $font-family-serif;
// Features // Features
$enable-shadows: true; $enable-shadows: true;
$enable-negative-margins: true; $enable-negative-margins: true;

25
assets/css/_fonts.scss
View file

@ -11,14 +11,17 @@
@import "../node_modules/@fontsource/jetbrains-mono/700.css"; /* bold | normal */ @import "../node_modules/@fontsource/jetbrains-mono/700.css"; /* bold | normal */
@import "../node_modules/@fontsource/jetbrains-mono/800.css"; /* bolder | normal */ @import "../node_modules/@fontsource/jetbrains-mono/800.css"; /* bolder | normal */
/* Fontsource Open Sans */
@import "../node_modules/@fontsource/open-sans/300.css"; /* light | normal */ /* Fontsource Source Code Pro */
@import "../node_modules/@fontsource/open-sans/300-italic.css"; /* light | italic */ @import "../node_modules/@fontsource/source-serif-pro/200.css"; /* light | normal */
@import "../node_modules/@fontsource/open-sans/400.css"; /* normal | normal */ @import "../node_modules/@fontsource/source-serif-pro/200-italic.css"; /* light | italic */
@import "../node_modules/@fontsource/open-sans/400-italic.css"; /* normal | italic */ @import "../node_modules/@fontsource/source-serif-pro/300.css"; /* light | normal */
@import "../node_modules/@fontsource/open-sans/600.css"; /* heavier? | normal */ @import "../node_modules/@fontsource/source-serif-pro/300-italic.css"; /* light | italic */
@import "../node_modules/@fontsource/open-sans/600-italic.css"; /* heavier | italic */ @import "../node_modules/@fontsource/source-serif-pro/400.css"; /* normal | normal */
@import "../node_modules/@fontsource/open-sans/700.css"; /* bold | normal */ @import "../node_modules/@fontsource/source-serif-pro/400-italic.css"; /* normal | italic */
@import "../node_modules/@fontsource/open-sans/700-italic.css"; /* bold | italic */ @import "../node_modules/@fontsource/source-serif-pro/600.css"; /* heavier? | normal */
@import "../node_modules/@fontsource/open-sans/800.css"; /* bolder? | normal */ @import "../node_modules/@fontsource/source-serif-pro/600-italic.css"; /* heavier | italic */
@import "../node_modules/@fontsource/open-sans/800-italic.css"; /* bolder? | italic */ @import "../node_modules/@fontsource/source-serif-pro/700.css"; /* bold | normal */
@import "../node_modules/@fontsource/source-serif-pro/700-italic.css"; /* bold | italic */
@import "../node_modules/@fontsource/source-serif-pro/900.css"; /* bolder? | normal */
@import "../node_modules/@fontsource/source-serif-pro/900-italic.css"; /* bolder? | italic */

25
assets/css/_nav-bar-help.scss
View file

@ -1,20 +1,23 @@
.navbar-expand-lg { .navbar-expand-lg {
.nav-item { .nav-item {
margin-left: 2px; margin-left: 2px;
.nav-link { a {
&.nav-link {
padding: 0 0 0 6px; padding: 0 0 0 6px;
margin: 8px 0 8px 0; margin: 8px 0 8px 0;
border-left: 6px transparent solid; border-left: 6px transparent solid;
&.active { &.active {
border-left: 6px $secondary solid; border-left: 6px $secondary solid;
border-bottom: none;
} }
} &:hover, &:active {
&:hover {
.nav-link {
color: $primary !important; color: $primary !important;
border-left: 6px $secondary solid; border-left: 6px $secondary solid;
border-bottom: none;
} }
} }
}
} }
} }
@ -22,24 +25,24 @@
.navbar-expand-lg { .navbar-expand-lg {
.nav-item { .nav-item {
margin-left: 0; margin-left: 0;
.nav-link { a {
&.nav-link {
padding: 0 0 6px 0; padding: 0 0 6px 0;
margin: 0 12px 0 12px; margin: 0 12px 0 12px;
border-left: 0; border-left: none;
border-top: 6px transparent solid; border-top: 6px transparent solid;
border-bottom: 6px transparent solid; border-bottom: 6px transparent solid;
&.active { &.active {
border-left: 0; border-left: none;
border-bottom: 6px $secondary solid; border-bottom: 6px $secondary solid;
} }
} &:hover, &:active {
&:hover {
.nav-link {
color: $primary !important; color: $primary !important;
border-left: 0; border-left: none;
border-bottom: 6px $secondary solid; border-bottom: 6px $secondary solid;
} }
} }
} }
} }
}
} }

12
assets/css/app.scss
View file

@ -27,6 +27,7 @@
pre, code, .font-monospace { pre, code, .font-monospace {
font-family: $font-family-monospace; font-family: $font-family-monospace;
font-weight: 300; font-weight: 300;
font-size: 15px;
} }
pre.chroma { pre.chroma {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
@ -49,9 +50,9 @@ body {
height: 100%; height: 100%;
} }
a { a {
color: white; color: rgba($white, 0.75);
// border-bottom: $secondary 2px solid; border-bottom: $gray-600 2px solid;
text-decoration: underline; text-decoration: none;
&.navbar-brand, &.navbar-brand,
&.nav-link { &.nav-link {
border-bottom: none; border-bottom: none;
@ -65,7 +66,10 @@ a {
&:hover { &:hover {
color: $primary; color: $primary;
text-decoration: none; text-decoration: none;
border-bottom: $secondary 2px solid; border-bottom: $secondary 3px solid;
&.navbar-brand {
border-bottom: none;
}
} }
} }
.border-gray-900 { .border-gray-900 {

11
assets/package-lock.json generated
View file

@ -9,6 +9,7 @@
"@fontsource/jetbrains-mono": "^4.2.2", "@fontsource/jetbrains-mono": "^4.2.2",
"@fontsource/open-sans": "^4.2.2", "@fontsource/open-sans": "^4.2.2",
"@fontsource/righteous": "^4.x", "@fontsource/righteous": "^4.x",
"@fontsource/source-serif-pro": "^4.2.3",
"@mdi/svg": "^5.x", "@mdi/svg": "^5.x",
"@popperjs/core": "^2.x", "@popperjs/core": "^2.x",
"babel-plugin-prismjs": "^2.0.1", "babel-plugin-prismjs": "^2.0.1",
@ -1298,6 +1299,11 @@
"resolved": "https://registry.npmjs.org/@fontsource/righteous/-/righteous-4.2.2.tgz", "resolved": "https://registry.npmjs.org/@fontsource/righteous/-/righteous-4.2.2.tgz",
"integrity": "sha512-mUjFblfCV6eWZj+lkrXFZsER8pq/3LOCoT3ezKPcerYH7StXQ8Gflcs0uMqacZP7CVLyzVUkPvSgLMQJTQvypg==" "integrity": "sha512-mUjFblfCV6eWZj+lkrXFZsER8pq/3LOCoT3ezKPcerYH7StXQ8Gflcs0uMqacZP7CVLyzVUkPvSgLMQJTQvypg=="
}, },
"node_modules/@fontsource/source-serif-pro": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/@fontsource/source-serif-pro/-/source-serif-pro-4.2.3.tgz",
"integrity": "sha512-dIOsmjqd8LPD4DM6SddqgVVliYizgNNpKg+2vOo7Lt1trW+Pvc1Y8x7tYsRZlsetVhvJ4UcgqLRgfVl48q00Yg=="
},
"node_modules/@mdi/svg": { "node_modules/@mdi/svg": {
"version": "5.9.55", "version": "5.9.55",
"resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz", "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz",
@ -10974,6 +10980,11 @@
"resolved": "https://registry.npmjs.org/@fontsource/righteous/-/righteous-4.2.2.tgz", "resolved": "https://registry.npmjs.org/@fontsource/righteous/-/righteous-4.2.2.tgz",
"integrity": "sha512-mUjFblfCV6eWZj+lkrXFZsER8pq/3LOCoT3ezKPcerYH7StXQ8Gflcs0uMqacZP7CVLyzVUkPvSgLMQJTQvypg==" "integrity": "sha512-mUjFblfCV6eWZj+lkrXFZsER8pq/3LOCoT3ezKPcerYH7StXQ8Gflcs0uMqacZP7CVLyzVUkPvSgLMQJTQvypg=="
}, },
"@fontsource/source-serif-pro": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/@fontsource/source-serif-pro/-/source-serif-pro-4.2.3.tgz",
"integrity": "sha512-dIOsmjqd8LPD4DM6SddqgVVliYizgNNpKg+2vOo7Lt1trW+Pvc1Y8x7tYsRZlsetVhvJ4UcgqLRgfVl48q00Yg=="
},
"@mdi/svg": { "@mdi/svg": {
"version": "5.9.55", "version": "5.9.55",
"resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz", "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz",

1
assets/package.json
View file

@ -10,6 +10,7 @@
"@fontsource/jetbrains-mono": "^4.2.2", "@fontsource/jetbrains-mono": "^4.2.2",
"@fontsource/open-sans": "^4.2.2", "@fontsource/open-sans": "^4.2.2",
"@fontsource/righteous": "^4.x", "@fontsource/righteous": "^4.x",
"@fontsource/source-serif-pro": "^4.2.3",
"@mdi/svg": "^5.x", "@mdi/svg": "^5.x",
"@popperjs/core": "^2.x", "@popperjs/core": "^2.x",
"babel-plugin-prismjs": "^2.0.1", "babel-plugin-prismjs": "^2.0.1",

4
lib/home73k_web/templates/layout/root.html.leex
View file

@ -10,9 +10,9 @@
<meta name="author" content="Adam Piontek"/> <meta name="author" content="Adam Piontek"/>
<link rel="alternate" type="application/rss+xml" title="73k Blog - Adam Piontek" href="<%= Routes.feed_path(@conn, :rss) %>" /> <link rel="alternate" type="application/rss+xml" title="73k Blog - Adam Piontek" href="<%= Routes.feed_path(@conn, :rss) %>" />
<link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/righteous-latin-400-normal.woff2") %>" as="font" type="font/woff2" crossorigin="anonymous"> <link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/righteous-latin-400-normal.woff2") %>" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/open-sans-latin-400-normal.woff2") %>" as="font" type="font/woff2" crossorigin="anonymous"> <link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/source-serif-pro-latin-400-normal.woff2") %>" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/jetbrains-mono-latin-300-normal.woff2") %>" as="font" type="font/woff2" crossorigin="anonymous"> <link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/jetbrains-mono-latin-300-normal.woff2") %>" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/open-sans-latin-600-normal.woff2") %>" as="font" type="font/woff2" crossorigin="anonymous"> <link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/source-serif-pro-latin-600-normal.woff2") %>" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="me" href="mailto:adam@73k.us"/> <link rel="me" href="mailto:adam@73k.us"/>
<link rel="me" href="sms:+16462341697"/> <link rel="me" href="sms:+16462341697"/>
<link rel="authorization_endpoint" href="https://indieauth.com/auth"/> <link rel="authorization_endpoint" href="https://indieauth.com/auth"/>