Various improvements

- new mono font
- copy updates
- simpler logic for header section
This commit is contained in:
Sodbileg Gansukh 2023-09-18 17:50:05 +08:00
parent d120bf0006
commit 3c79301108
15 changed files with 66 additions and 75 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -65,8 +65,7 @@ production stylesheet in assets/built/screen.css
--font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-serif: "EB Garamond", Georgia, Times, serif;
--font-serif-alt: Georgia, Times, serif;
--font-slab: "Roboto Slab", Georgia, Times, serif;
--font-mono: Menlo, Courier, monospace;
--font-mono: "JetBrains Mono", Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
--container-width: 1320px;
--container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
--grid-gap: 42px;
@ -112,11 +111,20 @@ production stylesheet in assets/built/screen.css
}
@font-face {
font-family: "Roboto Slab";
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 100 900;
font-weight: 100 800;
font-display: swap;
src: url(/assets/fonts/roboto-slab-roman.woff2) format("woff2");
src: url(/assets/fonts/jetbrains-mono-roman.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: italic;
font-weight: 100 800;
font-display: swap;
src: url(/assets/fonts/jetbrains-mono-italic.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@ -279,7 +287,7 @@ button.gh-form-input {
color: rgb(0 0 0 / 0.3);
}
:is(.has-serif-title, .has-slab-title) .gh-form-input {
:is(.has-serif-title, .has-mono-title) .gh-form-input {
padding-inline: 20px;
}
@ -315,7 +323,7 @@ button.gh-form-input {
cursor: pointer;
}
:is(.has-serif-title,.has-slab-title) button.gh-form-input {
:is(.has-serif-title,.has-mono-title) button.gh-form-input {
padding-inline-start: 50px;
}
@ -335,7 +343,7 @@ button.gh-form-input {
color: var(--color-secondary-text);
}
:is(.has-serif-title,.has-slab-title) .gh-form > svg {
:is(.has-serif-title,.has-mono-title) .gh-form > svg {
left: 16px;
}
@ -975,6 +983,7 @@ Search LOGO Login Subscribe
display: flex;
gap: 4px;
flex-wrap: wrap;
padding-bottom: 1px;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.05;
@ -1686,7 +1695,7 @@ Search LOGO Login Subscribe
border-bottom: 1px solid var(--color-border);
}
.gh-container-title:has(+ .gh-main:not(:has(.gh-card))) {
.gh-container:not(:has(.gh-card)) .gh-container-title {
display: none;
}
@ -2193,8 +2202,8 @@ unless a heading is the very first element in the post content */
font-family: var(--font-serif);
}
.has-slab-title .kg-toggle-card .kg-toggle-heading-text {
font-family: var(--font-slab);
.has-mono-title .kg-toggle-card .kg-toggle-heading-text {
font-family: var(--font-mono);
}
/* Callout */
@ -2232,8 +2241,8 @@ blockquote.kg-blockquote-alt {
font-family: var(--font-serif);
}
.has-slab-title .kg-card.kg-header-card h2.kg-header-card-header {
font-family: var(--font-slab);
.has-mono-title .kg-card.kg-header-card h2.kg-header-card-header {
font-family: var(--font-mono);
}
.has-serif-body .kg-header-card h3.kg-header-card-subheader {
@ -2287,8 +2296,8 @@ blockquote.kg-blockquote-alt {
font-family: var(--font-serif);
}
.has-slab-title .kg-product-card.kg-card .kg-product-card-title {
font-family: var(--font-slab);
.has-mono-title .kg-product-card.kg-card .kg-product-card-title {
font-family: var(--font-mono);
}
.has-serif-body .kg-product-card-description :is(p, ul, ol) {
@ -2466,7 +2475,7 @@ figcaption a {
--factor: 1.15;
}
.has-slab-title {
.has-mono-title {
--factor: 1.1;
}
@ -2479,9 +2488,8 @@ figcaption a {
font-weight: 550;
}
.has-slab-title :is(.is-title, .gh-content :is(h2, h3)) {
font-family: var(--font-slab);
font-weight: 650;
.has-mono-title :is(.is-title, .gh-content :is(h2, h3)) {
font-family: var(--font-mono);
}
.has-sans-body .is-body {
@ -2497,7 +2505,7 @@ figcaption a {
letter-spacing: -0.015em;
}
.has-slab-title .gh-header.is-classic .gh-header-title {
.has-mono-title .gh-header.is-classic .gh-header-title {
letter-spacing: -0.01em;
}
@ -2515,7 +2523,7 @@ figcaption a {
font-size: calc(1.6rem*var(--factor, 1))
}
.has-slab-title .gh-featured-feed .gh-card-title {
.has-mono-title .gh-featured-feed .gh-card-title {
font-size: calc(1.5rem*var(--factor, 1));
letter-spacing: 0;
}
@ -2524,12 +2532,12 @@ figcaption a {
font-size: clamp(1.6rem, 0.23vw + 1.51rem, 1.8rem);
}
.has-slab-title .gh-card-title {
.has-mono-title .gh-card-title {
font-size: calc(1.8rem*var(--factor, 1));
}
.has-slab-title .gh-header.gh-header.is-highlight .gh-card-title,
.has-slab-title .gh-header.gh-header.gh-header.is-magazine .gh-card-title {
.has-mono-title .gh-header.gh-header.is-highlight .gh-card-title,
.has-mono-title .gh-header.gh-header.gh-header.is-magazine .gh-card-title {
line-height: 1.15;
}
@ -2583,12 +2591,12 @@ figcaption a {
border-radius: 0;
}
.has-slab-title :is(.gh-button) {
border-radius: 6px;
.has-mono-title :is(.gh-button) {
border-radius: 0;
}
.has-slab-title :is(.gh-form) {
border-radius: 8px;
.has-mono-title :is(.gh-form) {
border-radius: 0;
}
.has-serif-title .gh-cta-title {
@ -2599,7 +2607,7 @@ figcaption a {
/* ---------------------------------------------------------- */
.gh-footer {
margin-top: 6vw;
margin-top: 12vw;
font-size: 1.5rem;
color: var(--color-darker-gray);
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -4,7 +4,7 @@
<main class="gh-main gh-outer">
{{#author}}
<section class="gh-archive{{#if @custom.show_site_in_sidebar}} has-sidebar{{/if}} gh-inner">
<section class="gh-archive{{#if @custom.show_publication_info_sidebar}} has-sidebar{{/if}} gh-inner">
<div class="gh-archive-inner">
<div class="gh-archive-wrapper">
<h1 class="gh-article-title is-title">
@ -38,6 +38,6 @@
</section>
{{/author}}
{{> "components/post-list" feed="archive" postFeedStyle=@custom.post_feed_style showTitle=false showSidebar=@custom.show_site_in_sidebar}}
{{> "components/post-list" feed="archive" postFeedStyle=@custom.post_feed_style showTitle=false showSidebar=@custom.show_publication_info_sidebar}}
</main>

View File

@ -41,7 +41,7 @@
{{ghost_head}}
</head>
<body class="{{body_class}} has-{{#match @custom.title_font "Elegant serif"}}serif{{else match @custom.title_font "Clean slab"}}slab{{else}}sans{{/match}}-title has-{{#match @custom.body_font "Elegant serif"}}serif{{else}}sans{{/match}}-body">
<body class="{{body_class}} has-{{#match @custom.title_font "Elegant serif"}}serif{{else match @custom.title_font "Consistent mono"}}mono{{else}}sans{{/match}}-title has-{{#match @custom.body_font "Elegant serif"}}serif{{else}}sans{{/match}}-body">
<div class="gh-viewport">

View File

@ -4,9 +4,9 @@
{{> "components/header" headerStyle=@custom.header_style}}
{{#match @custom.header_style "!=" "Highlight"}}
{{> "components/featured" showFeatured=@custom.highlight_featured_posts limit=4}}
{{> "components/featured" showFeatured=@custom.show_featured_posts limit=4}}
{{/match}}
{{> "components/cta"}}
{{> "components/post-list" feed="home" postFeedStyle=@custom.post_feed_style showTitle=true showSidebar=@custom.show_site_in_sidebar}}
{{> "components/post-list" feed="home" postFeedStyle=@custom.post_feed_style showTitle=true showSidebar=@custom.show_publication_info_sidebar}}

View File

@ -2,5 +2,5 @@
{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
<main class="gh-main">
{{> "components/post-list" feed="index" postFeedStyle=@custom.post_feed_style showTitle=true showSidebar=@custom.show_site_in_sidebar}}
{{> "components/post-list" feed="index" postFeedStyle=@custom.post_feed_style showTitle=true showSidebar=@custom.show_publication_info_sidebar}}
</main>

View File

@ -100,17 +100,17 @@
"header_and_footer_color": {
"type": "select",
"options": [
"Accent color",
"Background color"
"Background color",
"Accent color"
],
"default": "Accent color"
"default": "Background color"
},
"title_font": {
"type": "select",
"options": [
"Modern sans-serif",
"Elegant serif",
"Clean slab"
"Consistent mono"
],
"default": "Modern sans-serif"
},
@ -139,17 +139,18 @@
"Search",
"Off"
],
"description": "Highlight & Magazine styles will default to Landing until 7 posts have been published",
"description": "Landing is recommended for all sites, Highlight & Magazine are ideal for those with more content",
"default": "Landing",
"group": "homepage"
},
"use_publication_cover_as_background": {
"type": "boolean",
"default": false,
"description": "A cover image can be uploaded in Brand settings",
"group": "homepage",
"visibility": "header_style:[Landing, Search]"
},
"highlight_featured_posts": {
"show_featured_posts": {
"type": "boolean",
"default": false,
"group": "homepage",
@ -167,26 +168,22 @@
"show_images_in_feed": {
"type": "boolean",
"default": true,
"description": "Toggles thumbnails of the post cards when the post feed style is List",
"group": "homepage",
"visibility": "post_feed_style:List"
},
"show_author": {
"type": "boolean",
"default": true,
"description": "Show the author below each post",
"group": "homepage"
},
"show_publish_date": {
"type": "boolean",
"default": true,
"description": "Show the date published below each post",
"group": "homepage"
},
"show_site_in_sidebar": {
"show_publication_info_sidebar": {
"type": "boolean",
"default": false,
"description": "Include your site info on the side of the post feed",
"group": "homepage"
}
}

View File

@ -26,8 +26,8 @@
{{/foreach}}
</div>
<div class="gh-header-right">
{{#if @custom.highlight_featured_posts}}
{{> "components/featured" showFeatured=@custom.highlight_featured_posts limit=6}}
{{#if @custom.show_featured_posts}}
{{> "components/featured" showFeatured=@custom.show_featured_posts limit=6}}
{{else}}
<div class="gh-featured-feed">
{{#foreach posts from="5" limit="6"}}

View File

@ -1,13 +1,9 @@
{{#match headerStyle "!=" "Off"}}
{{#match headerStyle "Highlight"}}
{{#match posts.length ">=" 7}}
{{> "components/header-content"}}
{{/match}}
{{> "components/header-content"}}
{{else match headerStyle "Magazine"}}
{{#match posts.length ">=" 7}}
{{> "components/header-content"}}
{{/match}}
{{> "components/header-content"}}
{{else}}
{{#match headerStyle "Landing"}}
{{#if @site.members_enabled}}

View File

@ -21,27 +21,23 @@
{{!-- Homepage --}}
{{#match feed "home"}}
{{#match @custom.header_style "Highlight"}}
{{#match posts.length ">=" 7}}
{{#if @custom.highlight_featured_posts}}
{{#if @custom.show_featured_posts}}
{{#match posts.length ">=" 4}}
{{#get "posts" include="authors" limit="16"}}
{{#foreach posts from="5" limit="12"}}
{{> "post-card"}}
{{/foreach}}
{{/get}}
{{else}}
{{/match}}
{{else}}
{{#match posts.length ">=" 10}}
{{#get "posts" include="authors" limit="22"}}
{{#foreach posts from="11" limit="12"}}
{{> "post-card"}}
{{/foreach}}
{{/get}}
{{/if}}
{{else}}
{{#get "posts" include="authors" limit="12"}}
{{#foreach posts}}
{{> "post-card"}}
{{/foreach}}
{{/get}}
{{/match}}
{{/match}}
{{/if}}
{{else match @custom.header_style "Magazine"}}
{{#match posts.length ">=" 7}}
{{#get "posts" include="authors" limit="19"}}
@ -49,12 +45,6 @@
{{> "post-card"}}
{{/foreach}}
{{/get}}
{{else}}
{{#get "posts" include="authors" limit="12"}}
{{#foreach posts}}
{{> "post-card"}}
{{/foreach}}
{{/get}}
{{/match}}
{{else}}
{{#get "posts" include="authors" limit="12"}}

View File

@ -4,7 +4,7 @@
<main class="gh-main gh-outer">
{{#tag}}
<section class="gh-archive{{#if feature_image}} has-image{{/if}}{{#if @custom.show_site_in_sidebar}} has-sidebar{{/if}} gh-inner">
<section class="gh-archive{{#if feature_image}} has-image{{/if}}{{#if @custom.show_publication_info_sidebar}} has-sidebar{{/if}} gh-inner">
<div class="gh-archive-inner">
<header class="gh-archive-wrapper">
<h1 class="gh-article-title is-title">{{name}}</h1>
@ -17,6 +17,6 @@
</section>
{{/tag}}
{{> "components/post-list" feed="archive" postFeedStyle=@custom.post_feed_style showTitle=false showSidebar=@custom.show_site_in_sidebar}}
{{> "components/post-list" feed="archive" postFeedStyle=@custom.post_feed_style showTitle=false showSidebar=@custom.show_publication_info_sidebar}}
</main>