Getting the new version up to spec, removing any unwanted code and matching it with the original design
This commit is contained in:
parent
12117e65cc
commit
7342ab839d
|
@ -1,7 +1,7 @@
|
||||||
# [Garth](https://garth.darn.es/)
|
# [Garth](https://garth.darn.es/)
|
||||||
[![Gem Version](https://badge.fury.io/rb/garth-jekyll-theme.svg)](https://badge.fury.io/rb/garth-jekyll-theme)
|
[![Gem Version](https://badge.fury.io/rb/garth-jekyll-theme.svg)](https://badge.fury.io/rb/garth-jekyll-theme)
|
||||||
|
|
||||||
A stupidly simple theme for Jekyll, using the official Jekyll theme implementation.
|
🥁 A stupidly simple theme for Jekyll, using the official Jekyll theme implementation.
|
||||||
|
|
||||||
![Screenshot](https://raw.githubusercontent.com/daviddarnes/garth-jekyll-theme/master/screenshot.png)
|
![Screenshot](https://raw.githubusercontent.com/daviddarnes/garth-jekyll-theme/master/screenshot.png)
|
||||||
|
|
||||||
|
@ -38,9 +38,9 @@ You'll need to change the `description`, `title` and `url` to match with the pro
|
||||||
|
|
||||||
## Page layouts
|
## Page layouts
|
||||||
|
|
||||||
`page`, `post` and `home` (acts as the font page blog).
|
There are 3 layouts; `page`, `post` and `home` (home acts as the font page blog).
|
||||||
|
|
||||||
> **Note:** The Post List Page options are actually in the collection data within the `_config.yml` file.
|
> **Note:** The Post List Page options are actually in the collection data within the `_config.yml` file, this is so they can be edited with CMSs such as [Siteleaf](https://siteleaf.com)
|
||||||
|
|
||||||
## Credits
|
## Credits
|
||||||
|
|
||||||
|
|
|
@ -16,13 +16,13 @@
|
||||||
{% include post-pagination.html %}
|
{% include post-pagination.html %}
|
||||||
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<h2>Latest blog posts</h2>
|
|
||||||
<ul class="list list--posts">
|
<ul class="list list--posts">
|
||||||
{% for page in site.posts %}
|
{% for page in site.posts %}
|
||||||
<li class="item item--post">
|
<li class="item item--post">
|
||||||
<article class="article article--post typeset">
|
<article class="article article--post typeset">
|
||||||
|
|
||||||
<h5><a href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a></h5>
|
<h2><a href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a></h2>
|
||||||
{% include post-meta.html %}
|
{% include post-meta.html %}
|
||||||
{{ page.excerpt | markdownify | truncatewords: 60 }}
|
{{ page.excerpt | markdownify | truncatewords: 60 }}
|
||||||
|
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
<link rel="shortcut icon" href="{{ site.logo }}">
|
|
|
@ -1,7 +1,6 @@
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{% include site-logo.html %}
|
{% include site-logo.html %}
|
||||||
|
|
||||||
{% include site-nav.html %}
|
{% include site-nav.html %}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -1,2 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="height: 0; position: absolute">
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 129 B |
|
@ -1,8 +1,8 @@
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<ul class="list list--nav">
|
<ul class="list list--nav">
|
||||||
{% for item in site.pages %}
|
{% for item in site.pages %}
|
||||||
{% unless item.styles == true or item.url contains "/page" or item.url == "/404.html" %}
|
{% unless item.url contains ".css" or item.url contains "/page" or item.url contains "/404.html" %}
|
||||||
<li class="item item--nav{% if item[1] == page.url %} item--current{% endif %}">
|
<li class="item item--nav{% if item.url == page.url %} item--current{% endif %}">
|
||||||
{% if item.collectionpage %}
|
{% if item.collectionpage %}
|
||||||
{% assign collectiondata = site.collections | where: "label", item.collectionpage | first %}
|
{% assign collectiondata = site.collections | where: "label", item.collectionpage | first %}
|
||||||
<a href="{{ item.url }}">{{ collectiondata.title }}</a>
|
<a href="{{ item.url }}">{{ collectiondata.title }}</a>
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en-GB">
|
<html lang="en-GB">
|
||||||
<head>
|
<head>
|
||||||
<!-- General meta -->
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
{% if page.collectionpage %}
|
{% if page.collectionpage %}
|
||||||
{% assign collectiondata = site.collections | where: "label", page.collectionpage | first %}
|
{% assign collectiondata = site.collections | where: "label", page.collectionpage | first %}
|
||||||
<title>{{ collectiondata.title }} - {{ site.title }}</title>
|
<title>{{ collectiondata.title }} - {{ site.title }}</title>
|
||||||
|
@ -12,11 +10,9 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
|
<link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
|
||||||
|
<link rel="shortcut icon" href="{{ site.logo }}">
|
||||||
{% include site-favicons.html %}
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% include site-icons.svg %}
|
|
||||||
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
$color__site--background: #ffefc8;
|
$color__site--background: #ffefc8;
|
||||||
$color__site--heading: darken(#46412A, 5%);
|
$color__site--heading: darken(#46412A, 5%);
|
||||||
$color__site--body: #46412A;
|
$color__site--body: #46412A;
|
||||||
$color__site--captions: lighten($color__site--heading, 50%);
|
$color__site--captions: lighten($color__site--heading, 40%);
|
||||||
$color__site--link: #5B5BFF;
|
$color__site--link: #5B5BFF;
|
||||||
$color__site--link--hover: darken($color__site--link, 10%);
|
$color__site--link--hover: darken($color__site--link, 10%);
|
||||||
$color__site--link--current: desaturate($color__site--link, 100%);
|
$color__site--link--current: desaturate($color__site--link, 100%);
|
||||||
|
|
5
about.md
Normal file
5
about.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: About Garth
|
||||||
|
---
|
||||||
|
|
||||||
|
Garth is a really simple Jekyll theme, like really simple. Ya get me?
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="c" cx="35.06%" r="49.91%" fx="35.06%" fy="50%"><stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"/><stop stop-color="#EAEAEA" stop-opacity=".3" offset="100%"/></radialGradient><path id="a" d="M67.5 22.17A34.95 34.95 0 1 1 47.52 2.32l.06.04c.56.21 1.12.44 1.66.69l49.82 20.83c.52.22.77.81.58 1.33l-2.21 5.9c-.2.51-.78.79-1.3.62L67.5 22.17z"/><filter id="d" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset dx="8" dy="6" in="SourceAlpha" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0" in="shadowInnerInner1"/></filter><mask id="e" width="99.71" height="69.9" x="0" y="0" fill="white"><use xlink:href="#a"/></mask><path id="b" d="M50.45 6H33v24a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-9H7.73l-1.66 9.04A2.49 2.49 0 0 1 3.7 32H1.9a1.6 1.6 0 0 1-1.65-1.96L4.66 6H1.99A2 2 0 0 1 0 4V2a2 2 0 0 1 2-2h57a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2.73l4.42 24.04A1.6 1.6 0 0 1 59.04 32h-1.81a2.5 2.5 0 0 1-2.37-1.96L53.2 21H37a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2h15.1l-1.65-9zM10.48 6l-1.65 9H27V6H10.48z"/><mask id="f" width="61" height="32" x="0" y="0" fill="white"><use xlink:href="#b"/></mask></defs><g fill="none" fill-rule="evenodd" transform="translate(34 36)"><path fill="#05BF85" d="M34.95 69.9A34.95 34.95 0 0 0 69.9 34.95c0-3.33-69.9-3.33-69.9 0A34.95 34.95 0 0 0 34.95 69.9z"/><ellipse cx="34.95" cy="34.95" fill="#06E29D" rx="34.95" ry="3.88"/><circle cx="29" cy="44" r="2" fill="#FFFFFF" fill-opacity=".4"/><circle cx="41.5" cy="53.5" r=".5" fill="#FFFFFF" fill-opacity=".4"/><circle cx="39.5" cy="47.5" r="1.5" fill="#FFFFFF" fill-opacity=".4"/><circle cx="24.5" cy="52.5" r="1.5" fill="#FFFFFF" fill-opacity=".4"/><circle cx="32" cy="51" r="1" fill="#FFFFFF" fill-opacity=".4"/><circle cx="45" cy="42" r="1" fill="#FFFFFF" fill-opacity=".4"/><use fill="url(#c)" xlink:href="#a"/><use fill="black" filter="url(#d)" xlink:href="#a"/><use stroke="#9C9C9C" stroke-opacity=".3" stroke-width="2" mask="url(#e)" xlink:href="#a"/><g fill="#414141" stroke="#131111" stroke-width="2" transform="translate(4 57)"><use mask="url(#f)" xlink:href="#b"/></g></g></svg>
|
|
Before Width: | Height: | Size: 2.3 KiB |
|
@ -24,7 +24,7 @@ body {
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: 1200px;
|
max-width: 900px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -49,12 +49,15 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
@include flex(0, 0, auto);
|
||||||
background: darken($color__site--background, 10%);
|
background: darken($color__site--background, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
|
border-radius: 100%;
|
||||||
|
overflow: hidden;
|
||||||
img {
|
img {
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
|
@ -69,12 +72,6 @@ body {
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
border-top: 1px solid darken($color__site--background, 15%);
|
border-top: 1px solid darken($color__site--background, 15%);
|
||||||
a {
|
|
||||||
color: invert($color__site--heading);
|
|
||||||
&:hover {
|
|
||||||
color: lighten(invert($color__site--body), 15%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -82,20 +79,14 @@ body {
|
||||||
.nav {
|
.nav {
|
||||||
&--paginator {
|
&--paginator {
|
||||||
@include flexbox;
|
@include flexbox;
|
||||||
@include justify-content(space-between);
|
@include justify-content(center);
|
||||||
color: $color__site--captions;
|
color: $color__site--captions;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
min-width: 20%;
|
margin: 0 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
.copyright {
|
|
||||||
@include breakpoint(break-1) {
|
|
||||||
@include order(-1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -103,22 +94,13 @@ body {
|
||||||
.main {
|
.main {
|
||||||
@include flexbox;
|
@include flexbox;
|
||||||
@include flex-direction(column);
|
@include flex-direction(column);
|
||||||
|
@include flex(1, 0, auto);
|
||||||
margin-bottom: 1.6rem;
|
margin-bottom: 1.6rem;
|
||||||
@include breakpoint(break-1) {
|
@include breakpoint(break-1) {
|
||||||
@include flex-direction(row);
|
@include flex-direction(row);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
|
||||||
@include flex(1, 0, auto);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header,
|
|
||||||
.feature,
|
|
||||||
.footer {
|
|
||||||
@include flex(0, 0, auto);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Lists
|
// Lists
|
||||||
.list {
|
.list {
|
||||||
|
@ -149,113 +131,26 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Links, icons and images
|
// Images and media elements
|
||||||
.link {
|
|
||||||
display: inline-block;
|
|
||||||
margin: .2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
fill: CurrentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
audio,
|
audio,
|
||||||
video {
|
video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Form elements and buttons
|
// Text selection
|
||||||
button,
|
|
||||||
input[type="text"],
|
|
||||||
input[type="email"],
|
|
||||||
input[type="submit"],
|
|
||||||
textarea {
|
|
||||||
padding: .6rem 1.2rem;
|
|
||||||
margin-bottom: .6rem;
|
|
||||||
transition: color .1s, background-color .1s, border .1s;
|
|
||||||
line-height: inherit;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
&:focus {
|
|
||||||
outline: solid .2rem invert($color__site--accent);
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
margin: 0 0 .35rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="submit"],
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
background: $color__site--accent;
|
|
||||||
position: relative;
|
|
||||||
transition: box-shadow .1s;
|
|
||||||
will-change: box-shadow;
|
|
||||||
box-shadow: inset 0 0 0 2rem transparent;
|
|
||||||
&:hover {
|
|
||||||
box-shadow: inset 0 0 0 2rem rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
box-shadow: inset 0 0 0 2rem rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"],
|
|
||||||
input[type="email"],
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid $color__site--captions;
|
|
||||||
&:hover {
|
|
||||||
border-color: darken($color__site--captions, 20%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
@include baseline($fontsize: zeta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: all);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-input-placeholder {
|
|
||||||
color: darken($color__site--captions, 30%);
|
|
||||||
}
|
|
||||||
::-moz-placeholder {
|
|
||||||
color: darken($color__site--captions, 30%);
|
|
||||||
}
|
|
||||||
:-ms-input-placeholder {
|
|
||||||
color: darken($color__site--captions, 30%);
|
|
||||||
}
|
|
||||||
:-moz-placeholder {
|
|
||||||
color: darken($color__site--captions, 30%);
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: $color__site--heading;
|
background: $color__site--heading;
|
||||||
color: $color__site--background;
|
color: $color__site--background;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Sassline overrides
|
// Sassline overrides
|
||||||
.typeset {
|
.typeset {
|
||||||
.button,
|
.button,
|
||||||
|
|
5
demo/about.md
Normal file
5
demo/about.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: About Garth
|
||||||
|
---
|
||||||
|
|
||||||
|
Garth is a really simple Jekyll theme, like really simple. Ya get me?
|
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 160 KiB |
Loading…
Reference in New Issue
Block a user