Convert to new theme, WeFlock

Add basic styling, and update the README and package.json. Let's
go, or, should I say, #weflock!

README.md

@@ -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
 
 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.

assets/css/screen.css

@@ -16,7 +16,7 @@ production stylesheet in assets/built/screen.css
   7.1. Post Byline
   7.2. Members Subscribe Form
   7.4. Related Posts
-  7.5. Koenig Styles
+  7.5. Snipette Scissors
 8.  Author Template
 9.  Error Template
 11. Site Footer
@@ -52,12 +52,17 @@ production stylesheet in assets/built/screen.css
      */
 
     /* 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-heading: "Abhaya Libre Extrabold", "Georgia Bold", "Georgia", Times, serif;
 
 }
 
+body {
+    font-family: var(--font-sans-serif);
+}
+
 
 /* 2. Layout - Page building blocks
 /* ---------------------------------------------------------- */
@@ -104,6 +109,7 @@ production stylesheet in assets/built/screen.css
     width: 100%;
     height: 100%;
     object-fit: cover;
+    filter: brightness(50%);
 }
 
 .site-header-content {
@@ -115,7 +121,7 @@ production stylesheet in assets/built/screen.css
     align-items: center;
     padding: 6vw 3vw;
     min-height: 200px;
-    max-height: 340px;
+    max-height: 450px;
     text-align: center;
 }
 
@@ -575,6 +581,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     margin: 20px 0 0;
 }
 
+.post-card-header h2 {
+    font-family: var(--font-heading);
+    text-transform: lowercase;
+}
+
 .post-feed .no-image .post-card-content-link {
     padding: 0;
 }
@@ -818,6 +829,8 @@ make sure this only happens on large viewports / desktop-ish devices.
 
 .article-title {
     color: color-mod(var(--color-darkgrey) l(-5%));
+    font-family: var(--font-heading);
+    text-transform: lowercase;
 }
 
 .article-excerpt {
@@ -1439,6 +1452,30 @@ Ghost editor. */
     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
 /* ---------------------------------------------------------- */
@@ -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
 /* ---------------------------------------------------------- */

default.hbs

@@ -13,6 +13,11 @@
     this will take care of caching and cache-busting automatically --}}
     <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,
     it should always be the last tag before the closing head tag --}}
     {{ghost_head}}

index.hbs

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

package.json

@@ -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": {
         "ghost": ">=4.0.0",
         "ghost-api": "v4"