Numerous improvements and bug fixes.

- Refactored themes to always load with just a single file. This avoids
  a round trip on each request.
- Locally load font when available on the system, then try to
  load the woff2 file, then fall back to regular woff.
- Update markup to use relative urls where it is safe. RSS feeds still
  use absolute URLs.
- Only set og:image:(height/width) when using the standard color icon.
- Fixed styles on the pagination buttons.
- Added ability to switch font to Source Code Pro (useSourceCodePro).
- Added yellow theme.
- Added grey theme.
- Bold and remove underline for active page in header.
- Removed markdownify on summary.
- Only display date if present.
This commit is contained in:
quest
2022-09-10 12:35:00 -10:00
parent 1610962731
commit 26ad260858
102 changed files with 306 additions and 142 deletions

View File

@@ -91,4 +91,4 @@ a.read-more:active {
cursor: pointer;
outline: none;
}
}
}

View File

@@ -0,0 +1,8 @@
@import '../style-scp.css';
:root {
--accent: #23B0FF;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

View File

@@ -1,10 +1,4 @@
@import '../main.css';
@import '../header.css';
@import '../logo.css';
@import '../pagination.css';
@import '../post.css';
@import '../syntax.css';
@import '../variables.css';
@import '../style.css';
:root {
--accent: #23B0FF;

View File

@@ -0,0 +1,8 @@
@import '../style-scp.css';
:root {
--accent: #78E2A0;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

View File

@@ -1,10 +1,4 @@
@import '../main.css';
@import '../header.css';
@import '../logo.css';
@import '../pagination.css';
@import '../post.css';
@import '../syntax.css';
@import '../variables.css';
@import '../style.css';
:root {
--accent: #78E2A0;

View File

@@ -0,0 +1,8 @@
@import '../style-scp.css';
:root {
--accent: lightgrey;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

View File

@@ -0,0 +1,8 @@
@import '../style.css';
:root {
--accent: lightgrey;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

View File

@@ -0,0 +1 @@
@import '../style-scp.css';

View File

@@ -0,0 +1 @@
@import '../style.css';

View File

@@ -0,0 +1,8 @@
@import '../style-scp.css';
:root {
--accent: #EE72F1;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

View File

@@ -1,10 +1,4 @@
@import '../main.css';
@import '../header.css';
@import '../logo.css';
@import '../pagination.css';
@import '../post.css';
@import '../syntax.css';
@import '../variables.css';
@import '../style.css';
:root {
--accent: #EE72F1;

View File

@@ -0,0 +1,8 @@
@import '../style-scp.css';
:root {
--accent: #FF6266;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

View File

@@ -1,10 +1,4 @@
@import '../main.css';
@import '../header.css';
@import '../logo.css';
@import '../pagination.css';
@import '../post.css';
@import '../syntax.css';
@import '../variables.css';
@import '../style.css';
:root {
--accent: #FF6266;

View File

@@ -0,0 +1,8 @@
@import '../style-scp.css';
:root {
--accent: #ffe658;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

View File

@@ -0,0 +1,8 @@
@import '../style.css';
:root {
--accent: #ffe658;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

39
assets/css/font-scp.css Normal file
View File

@@ -0,0 +1,39 @@
@font-face {
font-display: swap;
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 300;
src: local("Source Code Pro") url("/assets/fonts/SourceCodePro-Light.otf.woff2") format("woff2") url("/assets/fonts/SourceCodePro-Light.otf.woff") format("woff");
font-display: swap;
}
@font-face {
font-display: swap;
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local("Source Code Pro") url("/assets/fonts/SourceCodePro-Regular.otf.woff2") format("woff2") url("/assets/fonts/SourceCodePro-Regular.otf.woff") format("woff");
font-display: swap;
}
@font-face {
font-display: swap;
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 700;
src: local("Source Code Pro") url("/assets/fonts/SourceCodePro-Bold.otf.woff2") format("woff2") url("/assets/fonts/SourceCodePro-Bold.otf.woff") format("woff");
font-display: swap;
}
body {
font-family: 'Source Code Pro', Monaco, Consolas, Ubuntu Mono, monospace;
}
code,
kbd {
font-family: 'Source Code Pro', Monaco, Consolas, Ubuntu Mono, monospace !important;
}
.post-content {
font-weight: 300;
}

View File

@@ -1,17 +1,26 @@
@font-face {
font-display: swap;
font-family: 'Fira Code';
font-style: normal;
font-style: normal;
font-weight: 400;
src: url("../fonts/FiraCode-Regular.woff") format("woff");
src: local("Fira Code") url("/assets/fonts/FiraCode-Regular.woff2") format("woff2") url("/assets/fonts/FiraCode-Regular.woff") format("woff");
font-display: swap;
}
@font-face {
font-display: swap;
font-family: 'Fira Code';
font-style: normal;
font-weight: 800;
src: url("../fonts/FiraCode-Bold.woff") format("woff");
font-style: normal;
font-weight: 700;
src: local("Fira Code") url("/assets/fonts/FiraCode-Bold.woff2") format("woff2") url("/assets/fonts/FiraCode-Bold.woff") format("woff");
font-display: swap;
}
body {
font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
}
code,
kbd {
font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
}

View File

@@ -49,6 +49,11 @@
--shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
margin: 20px 1px;
a.active {
font-weight: bold;
text-decoration: none;
}
@media (--phone) {
@mixin menu;
top: 50px;
@@ -159,4 +164,4 @@
position: relative;
}
}
}
}

View File

@@ -11,10 +11,9 @@ html {
body {
margin: 0;
padding: 0;
font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
font-size: 1rem;
line-height: 1.54;
letter-spacing: -0.02em;
letter-spacing: 0;
background-color: color-mod(var(--accent) blend(#1D1E28 98%));
color: var(--color);
text-rendering: optimizeLegibility;
@@ -128,7 +127,6 @@ figure {
}
code, kbd {
font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
font-feature-settings: normal;
background: color-mod(var(--accent) a(20%));
color: var(--accent);

View File

@@ -42,45 +42,54 @@
text-decoration: none;
}
}
}
.button {
position: relative;
display: inline-flex;
flex: 1;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 8px;
padding: 0;
cursor: pointer;
appearance: none;
overflow: hidden;
+ .button {
margin-left: 10px;
.button:hover, a.button:hover, button:hover {
background: none;
}
a {
display: flex;
padding: 8px 16px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
.button {
border: none;
color: var(--accent);
background: none;
position: relative;
display: inline-flex;
flex: 1;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 0;
padding: 0;
cursor: pointer;
appearance: none;
overflow: hidden;
}
&__text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
+.button {
margin-left: 10px;
}
&.next .button__icon {
margin-left: 8px;
}
a, a:hover {
display: flex;
padding: 8px 16px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: none !important;
border: none;
}
&.previous .button__icon {
margin-right: 8px;
&__text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&.next .button__icon {
margin-left: 8px;
}
&.previous .button__icon {
margin-right: 8px;
}
}
}
}

18
assets/css/style-scp.css Normal file
View File

@@ -0,0 +1,18 @@
@import 'variables.css';
@import 'font-scp.css';
@import 'buttons.css';
@import 'form.css';
@import 'header.css';
@import 'logo.css';
@import 'main.css';
@import 'post.css';
@import 'pagination.css';
@import 'footer.css';
@import 'prism.css';
@import 'syntax.css';
@import 'code.css';
@import 'terms.css';
@import 'gist.css';