Refactor
Splitting and tidying files
This commit is contained in:
John O'Nolan
parent
7c4eefd66b
commit
2588ef44ab
14 changed files with 45 additions and 101 deletions
|
|
@ -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%));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,388 +0,0 @@
|
|||
|
||||
|
||||
/* Content grid
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-canvas {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[full-start]
|
||||
minmax(calc(calc(100% - 1200px) / 2), 1fr)
|
||||
[wide-start]
|
||||
auto
|
||||
[main-start]
|
||||
720px
|
||||
[main-end]
|
||||
auto
|
||||
[wide-end]
|
||||
minmax(calc(calc(100% - 1200px) / 2), 1fr)
|
||||
[full-end]
|
||||
;
|
||||
}
|
||||
|
||||
@media (max-width: 1296px) {
|
||||
.gh-canvas {
|
||||
grid-template-columns:
|
||||
[full-start]
|
||||
4vw
|
||||
[wide-start]
|
||||
auto
|
||||
[main-start]
|
||||
720px
|
||||
[main-end]
|
||||
auto
|
||||
[wide-end]
|
||||
4vw
|
||||
[full-end]
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 778px) {
|
||||
.gh-canvas {
|
||||
grid-template-columns:
|
||||
[full-start]
|
||||
4vw
|
||||
[wide-start]
|
||||
0
|
||||
[main-start]
|
||||
auto
|
||||
[main-end]
|
||||
0
|
||||
[wide-end]
|
||||
4vw
|
||||
[full-end]
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-canvas > * {
|
||||
grid-column: main-start / main-end;
|
||||
}
|
||||
|
||||
.kg-width-wide {
|
||||
grid-column: wide-start / wide-end;
|
||||
}
|
||||
|
||||
.kg-width-full {
|
||||
grid-column: full-start / full-end;
|
||||
}
|
||||
|
||||
|
||||
/* Content & Typography
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-content > * + * {
|
||||
margin-top: 4vmin;
|
||||
}
|
||||
|
||||
.gh-content > [id] + * {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.gh-content [id] {
|
||||
margin: 1.5em 0 0;
|
||||
}
|
||||
|
||||
.gh-content [id] + .kg-card,
|
||||
.gh-content blockquote + .kg-card {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.gh-canvas blockquote,
|
||||
.gh-canvas ol,
|
||||
.gh-canvas ul,
|
||||
.gh-canvas dl,
|
||||
.gh-canvas p {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.gh-content ul,
|
||||
.gh-content ol,
|
||||
.gh-content dl {
|
||||
padding-left: 1.9em;
|
||||
}
|
||||
|
||||
.gh-content hr {
|
||||
margin-top: 6vmin;
|
||||
}
|
||||
|
||||
.gh-content hr + * {
|
||||
margin-top: 6vmin !important;
|
||||
}
|
||||
|
||||
.gh-content blockquote {
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.gh-content blockquote::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -1.5em;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0.3rem;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.gh-canvas blockquote,
|
||||
.gh-canvas ol,
|
||||
.gh-canvas ul,
|
||||
.gh-canvas dl,
|
||||
.gh-canvas p {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.gh-content blockquote::before {
|
||||
left: -4vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Cards
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
:not(.kg-card):not([id]) + .kg-card {
|
||||
margin-top: 6vmin;
|
||||
}
|
||||
|
||||
.kg-card + :not(.kg-card):not([id]) {
|
||||
margin-top: 6vmin;
|
||||
}
|
||||
|
||||
.kg-card figcaption {
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
text-align: center;
|
||||
color: rgba(0,0,0,0.5);
|
||||
font-weight: 600;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.kg-card figcaption strong {
|
||||
color: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.gh-canvas :not(pre) code {
|
||||
vertical-align: middle;
|
||||
padding: 0.15em 0.4em 0.15em;
|
||||
border: #e1eaef 1px solid;
|
||||
font-weight: 400 !important;
|
||||
font-size: 0.9em;
|
||||
line-height: 1em;
|
||||
color: #dc0050;
|
||||
background: #f0f6f9;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
.gh-canvas > pre {
|
||||
overflow: scroll;
|
||||
padding: 16px 20px;
|
||||
background: rgba(255,255,255,0.6);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
.kg-embed-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Galleries
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-gallery-card + .kg-gallery-card {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
.kg-gallery-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
/* Bookmark Cards
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-bookmark-card,
|
||||
.kg-bookmark-publisher {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.kg-bookmark-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row-reverse;
|
||||
color: currentColor;
|
||||
background: rgba(255,255,255,0.6);
|
||||
font-family: inherit;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kg-bookmark-content {
|
||||
flex-basis: 0;
|
||||
flex-grow: 999;
|
||||
padding: 20px;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.kg-bookmark-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.kg-bookmark-description {
|
||||
display: -webkit-box;
|
||||
max-height: 45px;
|
||||
margin: 0.6em 0 0 0;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.55em;
|
||||
overflow: hidden;
|
||||
opacity: 0.8;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.kg-bookmark-metadata,
|
||||
.kg-bookmark-description {
|
||||
margin-top: 0.9em;
|
||||
}
|
||||
|
||||
.kg-bookmark-metadata {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.kg-bookmark-description {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kg-bookmark-icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-bottom;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.kg-bookmark-thumbnail {
|
||||
display: flex;
|
||||
flex-basis: 24rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.kg-bookmark-thumbnail img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: bottom;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.kg-bookmark-author {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kg-bookmark-publisher::before {
|
||||
content: "•";
|
||||
margin: 0 .5em;
|
||||
}
|
||||
|
||||
|
||||
/* Card captions
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-width-full.kg-card-hascaption {
|
||||
display: grid;
|
||||
grid-template-columns: inherit;
|
||||
}
|
||||
|
||||
.kg-width-wide.kg-card-hascaption img {
|
||||
grid-column: wide-start / wide-end;
|
||||
}
|
||||
.kg-width-full.kg-card-hascaption img {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.kg-width-full.kg-card-hascaption figcaption {
|
||||
grid-column: main-start / main-end;
|
||||
}
|
||||
|
||||
|
||||
/* Tables
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-content table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-content th {
|
||||
padding: 0.5em 0.8em;
|
||||
text-align: left;
|
||||
font-size: .75em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gh-content td {
|
||||
padding: 0.4em 0.7em;
|
||||
}
|
||||
|
||||
.gh-content tbody tr:nth-child(2n + 1) {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.gh-content tbody tr:nth-child(2n + 2) td:last-child {
|
||||
box-shadow:
|
||||
inset 1px 0 rgba(0,0,0,0.1),
|
||||
inset -1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.gh-content tbody tr:nth-child(2n + 2) td {
|
||||
box-shadow: inset 1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.gh-content tbody tr:last-child {
|
||||
border-bottom: 1px solid rgba(0,0,0,.1);
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
/* Error Templates
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-error {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-bottom: 2vmin;
|
||||
}
|
||||
|
||||
.gh-error-content {
|
||||
flex: 1 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-error-code {
|
||||
margin: 0;
|
||||
font-size: 14vmin;
|
||||
}
|
||||
|
||||
.gh-error-description {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
font-size: 4vmin;
|
||||
line-height: 1.2em;
|
||||
font-weight: 300;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.gh-error-link {
|
||||
display: block;
|
||||
margin-top: 4vmin;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.gh-error-stack {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 0;
|
||||
padding: 8vmin 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gh-error-stack-list {
|
||||
margin: 4vmin 0 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.gh-error-stack-list > li {
|
||||
padding: 2rem 0;
|
||||
margin: 0;
|
||||
border-top: rgba(0,0,0,0.1) 1px solid;
|
||||
}
|
||||
|
||||
.gh-error-stack-function {
|
||||
margin: 0 0 0.5em;
|
||||
font-size: 1.8rem;
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
/* Global Footer
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8vmin 4vw;
|
||||
}
|
||||
|
||||
.gh-foot .gh-container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.gh-foot a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.gh-foot-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav li {
|
||||
margin: 0 1.5vmin;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav a {
|
||||
display: inline-block;
|
||||
padding: 3px 0;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 -1px 0 0 currentcolor inset;
|
||||
}
|
||||
|
||||
.gh-foot-meta {
|
||||
margin: 2rem 0;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.gh-foot-menu .nav {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,303 +0,0 @@
|
|||
/* Global Header
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head {
|
||||
padding: 3vw 4vw;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.3em;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.gh-head a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gh-head .gh-container {
|
||||
display: grid;
|
||||
grid-gap: 40px;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
|
||||
/* Brand
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-brand {
|
||||
grid-column-start: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.gh-head-logo {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
font-weight: 600;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.gh-head-logo img {
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
|
||||
/* Primary Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav li {
|
||||
margin: 0 1.5vw 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav a {
|
||||
display: inline-block;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav-current a {
|
||||
box-shadow: 0 -1px 0 0 currentcolor inset;
|
||||
}
|
||||
|
||||
|
||||
/* Secondary Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gh-head-actions-list {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-head-actions-list a {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1.5vw;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile Menu Trigger
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-burger {
|
||||
position: relative;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gh-burger-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.gh-burger-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gh-burger-box::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: currentcolor;
|
||||
transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
||||
.gh-burger-inner::before,
|
||||
.gh-burger-inner::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: currentcolor;
|
||||
transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
||||
.gh-burger-inner::before {
|
||||
transform: translatey(-6px);
|
||||
}
|
||||
.gh-burger-inner::after {
|
||||
transform: translatey(6px);
|
||||
}
|
||||
|
||||
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
|
||||
transform: translatey(-8px);
|
||||
}
|
||||
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
transform: translatey(8px);
|
||||
}
|
||||
|
||||
.gh-head-open .gh-burger-box::before {
|
||||
width: 0;
|
||||
transform: translatex(19px);
|
||||
transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
|
||||
}
|
||||
|
||||
.gh-head-open .gh-burger-inner::before {
|
||||
width: 26px;
|
||||
transform: translatex(6px) rotate(135deg);
|
||||
}
|
||||
|
||||
.gh-head-open .gh-burger-inner::after {
|
||||
width: 26px;
|
||||
transform: translatex(6px) rotate(-135deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Layout Variants
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-brandnavactions .gh-head-brand {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.gh-head-brandnav .gh-container {
|
||||
grid-gap: 0;
|
||||
grid-template-columns: auto max-content max-content;
|
||||
}
|
||||
.gh-head-brandnav .gh-head-brand {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.gh-head-brandnav .gh-head-menu {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.gh-head-brandnav .gh-head-menu .nav li {
|
||||
margin: 0 0 0 1.5vw;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Mobile Menu
|
||||
/* ---------------------------------------------------------- */
|
||||
/* IDs needed to ensure sufficient specificity */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.gh-burger {
|
||||
display: inline-block;
|
||||
}
|
||||
#gh-head {
|
||||
transition: all 0.4s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
#gh-head .gh-container {
|
||||
height: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
#gh-head .gh-head-brand {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
grid-column-start: auto;
|
||||
max-width: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
}
|
||||
#gh-head .gh-head-menu {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 0 0 10vh 0;
|
||||
font-weight: 300;
|
||||
font-size: 3.6rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
#gh-head .gh-head-menu .nav li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
#gh-head .gh-head-menu .nav a {
|
||||
padding: 8px 0;
|
||||
}
|
||||
#gh-head .gh-head-menu .nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#gh-head .gh-head-actions {
|
||||
padding: 20px 0;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
}
|
||||
#gh-head .gh-head-actions a {
|
||||
margin: 0 10px;
|
||||
}
|
||||
/* Hide collapsed content */
|
||||
#gh-head .gh-head-actions,
|
||||
#gh-head .gh-head-menu {
|
||||
display: none;
|
||||
}
|
||||
/* Open the menu */
|
||||
.gh-head-open {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
.gh-head-open #gh-head {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 900;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.gh-head-open #gh-head .gh-container {
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
.gh-head-open #gh-head .gh-head-actions,
|
||||
.gh-head-open #gh-head .gh-head-menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
#gh-head .gh-head-menu {
|
||||
font-size: 6vmin;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
/* Members Forms
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
form[data-members-form] .button-loader,
|
||||
form[data-members-form] .message-success,
|
||||
form[data-members-form] .message-error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-success svg,
|
||||
.message-error svg {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin-right: 5px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
.message-success svg {
|
||||
fill: #fff;
|
||||
}
|
||||
.message-error svg {
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
|
||||
form[data-members-form].success .message-success,
|
||||
form[data-members-form].error .message-error {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 6vw;
|
||||
right: 6vw;
|
||||
z-index: 9999;
|
||||
max-width: calc(1400px - 12vw);
|
||||
margin: 0 auto;
|
||||
padding: 10px 0;
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5em;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
background: var(--color-base);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
form[data-members-form].success .message-success {
|
||||
background: var(--color-success);
|
||||
}
|
||||
form[data-members-form].error .message-error {
|
||||
color: var(--color-primary);
|
||||
background: #fff;
|
||||
box-shadow: var(--color-primary) 0 0 0 1px;
|
||||
}
|
||||
|
||||
form[data-members-form] .button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*-- Loading --*/
|
||||
|
||||
/* Hide button text */
|
||||
form[data-members-form].loading .button-content {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Show loading spinner */
|
||||
form[data-members-form].loading .button-loader {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -19px;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.button-loader svg path,
|
||||
.button-loader svg rect{
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
/*-- Show success message on success --*/
|
||||
form[data-members-form].success .message-success {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*-- Show error message on error --*/
|
||||
form[data-members-form].error .message-error {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
/* Read More
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-readmore {
|
||||
padding: 8vmin 4vw;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
.gh-readmore .gh-container {
|
||||
display: grid;
|
||||
grid-gap: 8vmin;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.gh-readmore-prev {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gh-readmore a {
|
||||
display: flex;
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gh-readmore h4 {
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.gh-readmore svg {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 1em;
|
||||
margin: 0.15em 0 0;
|
||||
}
|
||||
|
||||
.gh-readmore svg + h4,
|
||||
.gh-readmore h4 + svg {
|
||||
margin-left: 2vmin;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.gh-readmore {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.gh-readmore svg {
|
||||
margin: 0.1em 0 0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue