Refactor

Splitting and tidying files

assets/css/components/buttons.css

@@ -1,7 +1,7 @@
 /* Buttons
 /* ---------------------------------------------------------- */
 
-.button {
+.gh-button {
     display: inline-block;
     height: var(--height);
     padding: 0 2rem;
@@ -19,49 +19,49 @@
     transition: 0.4s ease;
 }
 
-.button.fit {
+.gh-button.gh-button-fit {
     width: 100%;
 }
 
-.button.small {
+.gh-button.gh-button-small {
     height: calc(var(--height) * 0.9);
     line-height: calc(var(--height) * 0.9);
     padding: 0 1.5rem;
     font-size: 1.2rem;
 }
 
-.button.large {
+.gh-button.gh-button-large {
     height: calc(var(--height) * 1.14);
     line-height: calc(var(--height) * 1.14);
     padding: 0 3rem;
     font-size: 1.6rem;
 }
 
-.button.disabled,
-.button:disabled {
+.gh-button.gh-button-disabled,
+.gh-button:disabled {
     pointer-events: none;
     opacity: 0.4;
 }
 
-.button {
+.gh-button {
     color: var(--color-primary) !important;
     background-color: transparent;
     box-shadow: inset 0 0 0 2px var(--color-primary);
 }
 
-.button:hover {
+.gh-button:hover {
     text-decoration: none;
     color: color(var(--color-primary) l(-15%)) !important;
     box-shadow: inset 0 0 0 2px color(var(--color-primary) l(-10%));
     transition: 0.2s ease;
 }
 
-.button.primary {
+.gh-button.gh-button-primary {
     color: #fff !important;
     background-color: var(--color-primary);
     box-shadow: none;
 }
 
-.button.primary:hover {
+.gh-button.gh-button-primary:hover {
     background-color: color(var(--color-primary) l(-10%));
 }

assets/css/components/forms.css

@@ -2,7 +2,7 @@
 /* ---------------------------------------------------------- */
 
 form {
-    margin: 0 0 var(--margin) 0;
+    margin: 0;
 }
 
 fieldset {
@@ -12,21 +12,13 @@ fieldset {
 }
 
 label {
-    color: var(--color-primary);
     display: block;
     font-size: 0.9em;
-    font-weight: var(--font-bold);
-    margin: 0 0 (var(--margin) * 0.5) 0;
+    font-weight: 700;
 }
 
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="tel"],
-input[type="search"],
-input[type="url"],
-select,
-textarea {
+.gh-input,
+.gh-textarea {
     background: var(--color-bg);
     border-radius: var(--radius);
     border: none;
@@ -39,65 +31,41 @@ textarea {
     width: 100%;
 }
 
-input[type="text"]:invalid,
-input[type="password"]:invalid,
-input[type="email"]:invalid,
-input[type="tel"]:invalid,
-input[type="search"]:invalid,
-input[type="url"]:invalid,
-select:invalid,
-textarea:invalid {
-    box-shadow: none;
-}
-
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="email"]:focus,
-input[type="tel"]:focus,
-input[type="search"]:focus,
-input[type="url"]:focus,
-select:focus,
-textarea:focus {
+.gh-input:focus {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 1px var(--color-primary);
 }
 
-select {
+.gh-select {
     height: var(--height);
     padding-right: var(--height);
     text-overflow: ellipsis;
 }
 
-select option {
+.gh-select option {
     color: var(--color-primary);
     background: var(--color-bg);
 }
 
-select:focus::-ms-value {
+.gh-select:focus::-ms-value {
     background-color: transparent;
 }
 
-select::-ms-expand {
+.gh-select::-ms-expand {
     display: none;
 }
 
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="tel"],
-input[type="search"],
-input[type="url"],
-select {
+.gh-input,
+.gh-select {
     height: var(--height);
 }
 
-textarea {
+.gh-textarea {
     padding: 0.3em 0.6em;
     resize: vertical;
 }
 
-input[type="checkbox"],
-input[type="radio"] {
+.gh-check {
     display: block;
     margin-right: -2em;
     opacity: 0;
@@ -105,8 +73,8 @@ input[type="radio"] {
     z-index: -1;
 }
 
-input[type="checkbox"] + label,
-input[type="radio"] + label {
+.gh-check + label,
+.gh-check + label {
     display: flex;
     align-items: center;
     color: var(--color-base);
@@ -119,8 +87,8 @@ input[type="radio"] + label {
     user-select: none;
 }
 
-input[type="checkbox"] + label:before,
-input[type="radio"] + label:before {
+.gh-check + label:before,
+.gh-check + label:before {
     background: var(--color-bg);
     border-radius: var(--radius);
     border: solid 1px var(--color-border);
@@ -133,25 +101,25 @@ input[type="radio"] + label:before {
     margin-right: 1rem;
 }
 
-input[type="checkbox"]:checked + label:before,
-input[type="radio"]:checked + label:before {
+.gh-check:checked + label:before,
+.gh-check:checked + label:before {
     background: var(--color-primary);
     border-color: var(--color-primary);
     color: var(--color-bg);
     content: '✓';
 }
 
-input[type="checkbox"]:focus + label:before,
-input[type="radio"]:focus + label:before {
+.gh-check:focus + label:before,
+.gh-check:focus + label:before {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 1px var(--color-primary);
 }
 
 
-input[type="checkbox"] + label:before {
+.gh-check + label:before {
     border-radius: var(--radius);
 }
 
-input[type="radio"] + label:before {
+.gh-check + label:before {
     border-radius: 100%;
 }

assets/css/ghost/content.css

@@ -183,7 +183,7 @@
 .gh-canvas > pre {
     overflow: scroll;
     padding: 16px 20px;
-    background: rgba(255,255,255,0.6);
+    background: rgba(255,255,255,0.8);
     border-radius: 5px;
     box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
 }

assets/css/screen.css

@@ -11,19 +11,17 @@ production stylesheet in assets/built/screen.css using: gulp dev
 /* Base */
 @import "vars.css";
 @import "components/global.css";
-
-/* Ghost components */
-@import "components/header.css";
-@import "components/content.css";
-@import "components/readmore.css";
-@import "components/members.css";
-@import "components/errors.css";
-@import "components/footer.css";
-
-/* Global components */
 @import "components/forms.css";
 @import "components/buttons.css";
 
+/* Ghost components */
+@import "ghost/header.css";
+@import "ghost/content.css";
+@import "ghost/readmore.css";
+@import "ghost/members.css";
+@import "ghost/errors.css";
+@import "ghost/footer.css";
+
 
 /* Main - Your styles here! Edit below
 /* ---------------------------------------------------------- */
@@ -42,8 +40,6 @@ html,
     flex-direction: column;
 }
 
-/* Global */
-
 .gh-page {
     padding: 0 4vw;
 }

page.hbs

@@ -1,7 +1,6 @@
 {{!< default}}
 
 {{#post}}
-
 <article class="gh-article {{post_class}}">
 
     <header class="gh-header gh-canvas">
@@ -21,5 +20,4 @@
     </div>
 
 </article>
-
 {{/post}}

partials/subscribe-form.hbs

@@ -1,19 +0,0 @@
-<section class="subscribe-form">
-    <h3 class="subscribe-form-title">Subscribe to {{@site.title}}</h3>
-    <p class="subscribe-form-description">Get the latest posts delivered right to your inbox</p>
-    <form data-members-form="subscribe">
-        <div class="form-group">
-            <input class="subscribe-email" data-members-email placeholder="youremail@example.com" autocomplete="false" />
-            <button class="button primary" type="submit">
-                <span class="button-content">Subscribe</span>
-                <span class="button-loader">{{> "icons/loader"}}</span>
-            </button>
-        </div>
-        <div class="message-success">
-            <strong>Great!</strong> Check your inbox and click the link to confirm your subscription.
-        </div>
-        <div class="message-error">
-            Please enter a valid email address!
-        </div>
-    </form>
-</section>

post.hbs

@@ -1,6 +1,7 @@
 {{!< default}}
 
 {{#post}}
+
 <article class="gh-article {{post_class}}">
 
     <header class="gh-header gh-canvas">