X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;f=assets%2Fmain%2Fsass%2Flayout%2F_ghost.scss;fp=assets%2Fmain%2Fsass%2Flayout%2F_ghost.scss;h=c94026f2b62f0ebfe4d47a75ad578aa88f366990;hb=714fb918d579b6767e2069a6152e09128757643d;hp=0000000000000000000000000000000000000000;hpb=7611683c757a1fc6ec09ba884c179d98d7d959e0;p=editorial.git

diff --git a/assets/main/sass/layout/_ghost.scss b/assets/main/sass/layout/_ghost.scss
new file mode 100644
index 0000000..c94026f
--- /dev/null
+++ b/assets/main/sass/layout/_ghost.scss
@@ -0,0 +1,330 @@
+// Main
+// --------------------------------------------
+
+#header .logo {
+    color: #3d4449;
+    font-weight: bold;
+}
+
+#header .logo.image {
+    padding: 0;
+    border: none;
+    display: inline-flex;
+    height: 28px;
+
+    @include breakpoint('<=small') {
+        display: flex;
+        justify-content: center;
+        text-align: center;
+    }
+}
+
+#header .logo.image img {
+    height: 28px;
+    transform: none !important;
+}
+
+@include breakpoint('<=small') {
+    #sidebar:not(.inactive) .toggle:before {
+        color: #fff;
+    }
+
+    #sidebar:not(.inactive) .toggle:after {
+        background: #f56a6a;
+    }
+}
+
+#banner {
+    border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+}
+
+
+.content {
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+// Pagination
+// --------------------------------------------
+
+// Couple of alignment fixes cause we're not
+// using page numbers, just prev/next
+.pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 3rem 0;
+    border-top: solid 2px rgba(210, 215, 217, 0.75);
+}
+
+
+// Tag Archive
+// --------------------------------------------
+
+.tag-header {
+    padding: 5em 0 2em 0;
+    border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+    text-align: center;
+}
+
+
+// Author Archive
+// --------------------------------------------
+
+.author-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 4em 0 3em 0;
+    border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+    text-align: center;
+
+}
+
+.author-profile-image {
+    flex-shrink: 0;
+    margin: 0 0 15px 0;
+    width: 100px;
+    height: 100px;
+    box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
+    display: block;
+    background: #222;
+    border-radius: 100%;
+
+    object-fit: cover;
+}
+
+.author-header h1 {
+    margin-bottom: 0.5rem;
+}
+
+.author-meta {
+    display: flex;
+    align-items: center;
+}
+
+.author-meta .icon,
+.author-meta .bull {
+    padding: 5px 10px;
+}
+
+.author-location:before {
+    margin-right: 10px;
+}
+
+// Author Box
+// --------------------------------------------
+
+.post-footer {
+    margin: 4rem auto 0;
+    max-width: 700px;
+}
+
+.authors {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: 0 -40px;
+}
+
+.author-box  {
+    flex: 1 1 300px;
+    display: inline-flex;
+    align-items: flex-start;
+    padding: 5px 20px;
+    margin: 0 20px 20px;
+    border: none;
+}
+
+.author-box:hover {
+    color: #212931 !important;
+}
+
+.author-box:hover .author-box-name {
+    color: #18bfef;
+    transition: color 0.2s ease;
+}
+
+.author-box .author-profile-image {
+    height: 60px;
+    width: 60px;
+    margin-right: 20px;
+}
+
+.author-box-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.author-box-label {
+    font-family: _font(family-heading);
+    font-size: 0.7rem;
+    line-height: 1em;
+    font-weight: 300;
+    text-transform: uppercase;
+    color: #999;
+}
+
+.author-box-name {
+    margin: 3px 0;
+    font-size: 1.3rem;
+    line-height: 1.2em;
+    transition: color 0.5s ease;
+}
+
+.author-box p {
+    margin: 0;
+    font-size: 0.9rem;
+    line-height: 1.5em;
+}
+
+.kg-image {
+    max-width: 100%;
+}
+
+// Content
+// --------------------------------------------
+
+.kg-card {
+    margin: 0 0 2rem 0;
+}
+
+.kg-embed-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 100%;
+}
+
+.kg-image {
+    max-width: 100%;
+}
+
+.kg-card figcaption {
+    font-size: 0.8rem;
+    line-height: 1.4em;
+    text-align: center;
+}
+
+.kg-width-wide {
+    position: relative;
+    margin-left: -6rem;
+    margin-right: -6rem;
+    width: calc(100% + 12rem);
+
+    @include breakpoint('<=large') {
+        margin-left: -4rem;
+        margin-right: -4rem;
+        width: calc(100% + 8rem);
+    }
+    @include breakpoint('<=medium') {
+        margin-left: -2rem;
+        margin-right: -2rem;
+        width: calc(100% + 4rem);
+    }
+    @include breakpoint('<=small') {
+        margin-left: 0;
+        margin-right: 0;
+        width: 100%;
+    }
+}
+
+.kg-width-full {
+    position: relative;
+    margin-left: -14.1rem;
+    margin-right: -14.1rem;
+    width: calc(100% + 28.2rem);
+
+    @include breakpoint('<=large') {
+        margin-left: -8rem;
+        margin-right: -8rem;
+        width: calc(100% + 16rem);
+    }
+    @include breakpoint('<=medium') {
+        margin-left: -4rem;
+        margin-right: -4rem;
+        width: calc(100% + 8rem);
+    }
+    @include breakpoint('<=small') {
+        margin-left: -2rem;
+        margin-right: -2rem;
+        width: calc(100% + 4rem);
+    }
+}
+
+.kg-gallery-container {
+    display: flex;
+    flex-direction: column;
+    margin-left: -6rem;
+    margin-right: -6rem;
+    width: calc(100% + 12rem);
+
+    @include breakpoint('<=large') {
+        margin-left: -4rem;
+        margin-right: -4rem;
+        width: calc(100% + 8rem);
+    }
+    @include breakpoint('<=medium') {
+        margin-left: -2rem;
+        margin-right: -2rem;
+        width: calc(100% + 4rem);
+    }
+    @include breakpoint('<=small') {
+        margin-left: 0;
+        margin-right: 0;
+        width: 100%;
+    }
+}
+
+.kg-gallery-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.kg-gallery-image img {
+    display: block;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.kg-gallery-row:not(:first-of-type) {
+    margin: 0.75em 0 0 0;
+}
+
+.kg-gallery-image:not(:first-of-type) {
+    margin: 0 0 0 0.75em;
+}
+
+.kg-gallery-card + .kg-image-card.kg-width-wide,
+.kg-gallery-card + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
+    margin: -2.25em 0 3em;
+}
+
+// Error Pages
+// --------------------------------------------
+
+.error-page {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.error-wrapper {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    padding-bottom: 8rem !important;
+    text-align: center;
+}
+
+.error-code {
+    margin: 0;
+}