simon/ghost-theme-sd.ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Typography

Browse Source
This commit is contained in:
Sodbileg Gansukh 2023-07-10 16:13:01 +08:00
parent 259d1e49dd
commit e29085e389
8 changed files with 48 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

27
assets/css/screen.css
View File

@ -11,8 +11,9 @@
--color-primary-text: var(--color-darker-gray); --color-primary-text: var(--color-darker-gray);
--color-secondary-text: rgba(0, 0, 0, 0.4); --color-secondary-text: rgba(0, 0, 0, 0.4);
--color-border: rgba(0, 0, 0, 0.08); --color-border: rgba(0, 0, 0, 0.08);
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-serif: Georgia, Times, serif; --font-serif: EB Garamond, Georgia, Times, serif;
--font-slab: Roboto Slab;
--font-mono: Menlo, Courier, monospace; --font-mono: Menlo, Courier, monospace;
--container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px); --container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
--grid-gap: 40px; --grid-gap: 40px;
@ -152,6 +153,28 @@ a:hover {
width: 100%; width: 100%;
} }
/* Typography */
.has-sans-title [data-title] {
font-family: var(--font-sans);
}
.has-serif-title [data-title] {
font-family: var(--font-serif);
}
.has-slab-title [data-title] {
font-family: var(--font-slab);
}
.has-sans-body [data-body] {
font-family: var(--font-sans);
}
.has-serif-body [data-body] {
font-family: Georgia;
}
/* 5. Navigation */ /* 5. Navigation */
.gh-navigation { .gh-navigation {

6
default.hbs
View File

@ -11,6 +11,10 @@
<link rel="preload" as="style" href="{{asset "built/screen.css"}}"> <link rel="preload" as="style" href="{{asset "built/screen.css"}}">
<link rel="preload" as="script" href="{{asset "built/casper.js"}}"> <link rel="preload" as="script" href="{{asset "built/casper.js"}}">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:ital,wght@0,400;0,700;0,800;1,400;1,700&family=Roboto+Slab:wght@400;600;700&display=swap" rel="stylesheet">
{{!-- Theme assets - use the {{asset}} helper to reference styles & scripts, this will take care of caching and cache-busting automatically --}} {{!-- Theme assets - use the {{asset}} helper to reference styles & scripts, this will take care of caching and cache-busting automatically --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}"> <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}">
@ -39,7 +43,7 @@
{{ghost_head}} {{ghost_head}}
</head> </head>
<body class="{{body_class}}"> <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">
<div class="gh-viewport"> <div class="gh-viewport">

10
package.json
View File

@ -106,6 +106,16 @@
], ],
"default": "Background color" "default": "Background color"
}, },
"title_font": {
"type": "select",
"options": ["Modern sans-serif", "Elegant serif", "Clean slab"],
"default": "Modern sans-serif"
},
"body_font": {
"type": "select",
"options": ["Modern sans-serif", "Elegant serif"],
"default": "Modern sans-serif"
},
"footer_signup_header": { "footer_signup_header": {
"type": "text", "type": "text",
"default": "Stay in the loop" "default": "Stay in the loop"

4
partials/components/header.hbs
View File

@ -42,7 +42,7 @@
{{!-- Landing layout --}} {{!-- Landing layout --}}
{{#match headerStyle "Landing"}} {{#match headerStyle "Landing"}}
<h1>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1> <h1 data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
<form> <form>
<input type="email" placeholder="jamie@example.com"> <input type="email" placeholder="jamie@example.com">
<button class="gh-button" type="submit">Subscribe</button> <button class="gh-button" type="submit">Subscribe</button>
@ -51,7 +51,7 @@
{{!-- Search layout --}} {{!-- Search layout --}}
{{#match headerStyle "Search"}} {{#match headerStyle "Search"}}
<h1>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1> <h1 data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
<button data-ghost-search>{{> "icons/search"}}Search</button> <button data-ghost-search>{{> "icons/search"}}Search</button>
{{/match}} {{/match}}

2
partials/components/navigation.hbs
View File

@ -2,7 +2,7 @@
<div class="gh-navigation-inner gh-inner"> <div class="gh-navigation-inner gh-inner">
<div class="gh-navigation-brand"> <div class="gh-navigation-brand">
<a class="gh-navigation-logo" href="{{@site.url}}"> <a class="gh-navigation-logo" href="{{@site.url}}" data-title>
{{#if @site.logo}} {{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}"> <img src="{{@site.logo}}" alt="{{@site.title}}">
{{else}} {{else}}

6
partials/loop.hbs
View File

@ -15,9 +15,9 @@
</figure> </figure>
{{/if}} {{/if}}
<div class="gh-card-wrapper"> <div class="gh-card-wrapper">
<h3 class="gh-card-title">{{title}}</h3> <h3 class="gh-card-title" data-title>{{title}}</h3>
<p class="gh-card-excerpt">{{excerpt}}</p> <p class="gh-card-excerpt" data-body>{{excerpt}}</p>
<footer class="gh-card-meta"> <footer class="gh-card-meta" data-body>
{{#if @custom.show_author}} {{#if @custom.show_author}}
<span class="gh-card-author">By {{#foreach authors}}{{#if @first}}{{name}}{{else}}, {{name}}{{/if}}{{/foreach}}</span> <span class="gh-card-author">By {{#foreach authors}}{{#if @first}}{{name}}{{else}}, {{name}}{{/if}}{{/foreach}}</span>
{{/if}} {{/if}}