Convert to new theme, WeFlock

Add basic styling, and update the README and package.json. Let's
go, or, should I say, #weflock!
This commit is contained in:
Hippo 2021-10-30 22:11:08 +05:30
parent c63a07e8df
commit 83334884aa
8 changed files with 79 additions and 10 deletions

View file

@ -1,3 +1,7 @@
# WeFlock
This is a theme designed for the Snipette magazine and based on [Casper](https://github.com/TryGhost/Casper), the default theme for [Ghost](http://github.com/tryghost/ghost/).
# Casper # Casper
The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper! If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page. The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper! If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -16,7 +16,7 @@ production stylesheet in assets/built/screen.css
7.1. Post Byline 7.1. Post Byline
7.2. Members Subscribe Form 7.2. Members Subscribe Form
7.4. Related Posts 7.4. Related Posts
7.5. Koenig Styles 7.5. Snipette Scissors
8. Author Template 8. Author Template
9. Error Template 9. Error Template
11. Site Footer 11. Site Footer
@ -52,12 +52,17 @@ production stylesheet in assets/built/screen.css
*/ */
/* Fonts */ /* Fonts */
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-sans-serif: "Didact Gothic", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-serif: Georgia, Times, serif; --font-serif: "Fanwood Text", "Crimson Text Regular", "Crimson Text", "Crimson Pro", Georgia, Times, serif;
--font-mono: Menlo, Courier, monospace; --font-mono: Menlo, Courier, monospace;
--font-heading: "Abhaya Libre Extrabold", "Georgia Bold", "Georgia", Times, serif;
} }
body {
font-family: var(--font-sans-serif);
}
/* 2. Layout - Page building blocks /* 2. Layout - Page building blocks
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -104,6 +109,7 @@ production stylesheet in assets/built/screen.css
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
filter: brightness(50%);
} }
.site-header-content { .site-header-content {
@ -115,7 +121,7 @@ production stylesheet in assets/built/screen.css
align-items: center; align-items: center;
padding: 6vw 3vw; padding: 6vw 3vw;
min-height: 200px; min-height: 200px;
max-height: 340px; max-height: 450px;
text-align: center; text-align: center;
} }
@ -575,6 +581,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
margin: 20px 0 0; margin: 20px 0 0;
} }
.post-card-header h2 {
font-family: var(--font-heading);
text-transform: lowercase;
}
.post-feed .no-image .post-card-content-link { .post-feed .no-image .post-card-content-link {
padding: 0; padding: 0;
} }
@ -818,6 +829,8 @@ make sure this only happens on large viewports / desktop-ish devices.
.article-title { .article-title {
color: color-mod(var(--color-darkgrey) l(-5%)); color: color-mod(var(--color-darkgrey) l(-5%));
font-family: var(--font-heading);
text-transform: lowercase;
} }
.article-excerpt { .article-excerpt {
@ -1439,6 +1452,30 @@ Ghost editor. */
border-radius: 5px; border-radius: 5px;
} }
.header-cta-button {
margin-top: 4rem;
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 500px;
padding: 5px 5px 5px 15px;
font-size: 1.8rem;
color: #fff;
background: #fff2;
border-radius: 8px;
}
.header-cta-button span {
display: inline-block;
padding: 10px 20px;
color: #fff;
font-weight: 500;
background: var(--ghost-accent-color);
border-radius: 5px;
}
/* 7.4. Read more /* 7.4. Read more
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -1489,6 +1526,23 @@ Ghost editor. */
} }
} }
/* 7.5. Snipette Scissors
/* ---------------------------------------------------------- */
.gh-content > hr {
border: 0;
height: 3rem;
display: block;
background-image: url(/assets/images/scissors.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50%;
}
.gh-content > hr::after,
{
display: none;
}
/* 8. Author Template /* 8. Author Template
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

BIN
assets/images/scissors.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View file

@ -13,6 +13,11 @@
this will take care of caching and cache-busting automatically --}} 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"}}" />
{{! -- Here come all the fonts! -- }}
<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=Abhaya+Libre:wght@800&family=Crimson+Text:ital,wght@0,400;0,700;1,400;1,700&family=Didact+Gothic&family=Fanwood+Text:ital@0;1&display=swap" rel="stylesheet">
{{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings, {{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
it should always be the last tag before the closing head tag --}} it should always be the last tag before the closing head tag --}}
{{ghost_head}} {{ghost_head}}

View file

@ -24,6 +24,12 @@ into the {body} of the default.hbs template --}}
{{/if}} {{/if}}
</h1> </h1>
<p>{{@site.description}}</p> <p>{{@site.description}}</p>
{{#unless @member}}
<a class="header-cta-button" href="#/portal">
<div>Enter your email</div>
<span>Subscribe</span>
</a>
{{/unless}}
</div> </div>
{{!-- The main content area --}} {{!-- The main content area --}}

View file

@ -1,8 +1,8 @@
{ {
"name": "casper", "name": "weflock",
"description": "A clean, minimal default theme for the Ghost publishing platform", "description": "Snipette theme with Analog vibes, derived from Casper",
"demo": "https://demo.ghost.io", "demo": "https://snipettemag.com",
"version": "4.1.1", "version": "1.0.0",
"engines": { "engines": {
"ghost": ">=4.0.0", "ghost": ">=4.0.0",
"ghost-api": "v4" "ghost-api": "v4"