peterkrzyzek/ghost_leaders_theme
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity

Refactor

Browse source 
Splitting and tidying files
This commit is contained in:
John O'Nolan 2019-11-17 17:37:59 +07:00
parent 7c4eefd66b
commit 2588ef44ab
14 changed files with 45 additions and 101 deletions
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

20
assets/css/components/buttons.css
View file

@ -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%));
}

78
assets/css/components/forms.css
View file

@ -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%;
}

2
assets/css/components/content.css → assets/css/ghost/content.css
View file

@ -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);
}

0
assets/css/components/errors.css → assets/css/ghost/errors.css
View file

0
assets/css/components/footer.css → assets/css/ghost/footer.css
View file

0
assets/css/components/header.css → assets/css/ghost/header.css
View file

0
assets/css/components/members.css → assets/css/ghost/members.css
View file

0
assets/css/components/readmore.css → assets/css/ghost/readmore.css
View file

20
assets/css/screen.css
View file

@ -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;
}

2
page.hbs
View file

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

19
partials/subscribe-form.hbs
View file

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

1
post.hbs
View file

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