Getting the new version up to spec, removing any unwanted code and matching it with the original design
This commit is contained in:
David Darnes
parent
12117e65cc
commit
7342ab839d
|
|
@ -1,7 +1,7 @@
|
|||
# [Garth](https://garth.darn.es/)
|
||||
[](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.
|
||||
|
||||
|
||||
|
||||
|
|
@ -38,9 +38,9 @@ You'll need to change the `description`, `title` and `url` to match with the pro
|
|||
|
||||
## 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
|
||||
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@
|
|||
{% include post-pagination.html %}
|
||||
|
||||
{% else %}
|
||||
<h2>Latest blog posts</h2>
|
||||
|
||||
<ul class="list list--posts">
|
||||
{% for page in site.posts %}
|
||||
<li class="item item--post">
|
||||
<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 %}
|
||||
{{ page.excerpt | markdownify | truncatewords: 60 }}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<link rel="shortcut icon" href="{{ site.logo }}">
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<header class="header">
|
||||
<div class="container">
|
||||
{% include site-logo.html %}
|
||||
|
||||
{% include site-nav.html %}
|
||||
</div>
|
||||
</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">
|
||||
<ul class="list list--nav">
|
||||
{% for item in site.pages %}
|
||||
{% unless item.styles == true or item.url contains "/page" or item.url == "/404.html" %}
|
||||
<li class="item item--nav{% if item[1] == page.url %} item--current{% endif %}">
|
||||
{% unless item.url contains ".css" or item.url contains "/page" or item.url contains "/404.html" %}
|
||||
<li class="item item--nav{% if item.url == page.url %} item--current{% endif %}">
|
||||
{% if item.collectionpage %}
|
||||
{% assign collectiondata = site.collections | where: "label", item.collectionpage | first %}
|
||||
<a href="{{ item.url }}">{{ collectiondata.title }}</a>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-GB">
|
||||
<head>
|
||||
<!-- General meta -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
{% if page.collectionpage %}
|
||||
{% assign collectiondata = site.collections | where: "label", page.collectionpage | first %}
|
||||
<title>{{ collectiondata.title }} - {{ site.title }}</title>
|
||||
|
|
@ -12,11 +10,9 @@
|
|||
{% endif %}
|
||||
|
||||
<link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
|
||||
|
||||
{% include site-favicons.html %}
|
||||
<link rel="shortcut icon" href="{{ site.logo }}">
|
||||
</head>
|
||||
<body>
|
||||
{% include site-icons.svg %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
$color__site--background: #ffefc8;
|
||||
$color__site--heading: darken(#46412A, 5%);
|
||||
$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--hover: darken($color__site--link, 10%);
|
||||
$color__site--link--current: desaturate($color__site--link, 100%);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -49,12 +49,15 @@ body {
|
|||
}
|
||||
|
||||
.header {
|
||||
@include flex(0, 0, auto);
|
||||
background: darken($color__site--background, 10%);
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
|
|
@ -69,12 +72,6 @@ body {
|
|||
|
||||
.footer {
|
||||
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 {
|
||||
&--paginator {
|
||||
@include flexbox;
|
||||
@include justify-content(space-between);
|
||||
@include justify-content(center);
|
||||
color: $color__site--captions;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
min-width: 20%;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
@include breakpoint(break-1) {
|
||||
@include order(-1);
|
||||
}
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -103,22 +94,13 @@ body {
|
|||
.main {
|
||||
@include flexbox;
|
||||
@include flex-direction(column);
|
||||
@include flex(1, 0, auto);
|
||||
margin-bottom: 1.6rem;
|
||||
@include breakpoint(break-1) {
|
||||
@include flex-direction(row);
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
@include flex(1, 0, auto);
|
||||
}
|
||||
|
||||
.header,
|
||||
.feature,
|
||||
.footer {
|
||||
@include flex(0, 0, auto);
|
||||
}
|
||||
|
||||
|
||||
// Lists
|
||||
.list {
|
||||
|
|
@ -149,113 +131,26 @@ body {
|
|||
}
|
||||
|
||||
|
||||
// Links, icons and images
|
||||
.link {
|
||||
display: inline-block;
|
||||
margin: .2rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: CurrentColor;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Images and media elements
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
audio,
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
// Form elements and buttons
|
||||
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%);
|
||||
}
|
||||
|
||||
// Text selection
|
||||
::selection {
|
||||
background: $color__site--heading;
|
||||
color: $color__site--background;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
// Sassline overrides
|
||||
.typeset {
|
||||
.button,
|
||||
|
|
|
|||
|
|
@ -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