/*
Theme Name: Salt (Test)
Theme URI: https://github.com/sarahmonster/salt
Author: sarah semark
Author URI: https://triggersandsparks.com
Description: The cure for anything is salt: sweat, tears, or the sea.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: salt
Tags: translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
salt is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
## Links
## Menus
# Accessibility
# Alignments
# Widgets
# Content
## Posts and pages
## Comments
# Infinite scroll
# Media
## Captions
## Galleries
--------------------------------------------------------------*/
// Rem output with px fallback
// Drop caps
//
// Used to provide emphasis and visual interest. Applied to the first paragraph
// of every post by default, but can also be applied manually by adding the `cap` class.
//
// markup:
// This is a paragraph using a drop-cap. It will look best when it's long enough that the text wraps.
//
// Styleguide 2.2
// Center block
// A skewed edge, used to make containers look funkier.
// Courtesy of http://www.hongkiat.com/blog/skewed-edges-css/
// Apply a rainbowy gradient to text elements.
// Styling for page headers, used for pages as well as single entry pages.
// Better text underlines, because that's how I roll.
// Apply a card border.
// Base colours
//
// Our base colours are made up of various shades of grey.
// They're used pretty heavily throughout to counteract our bright accent colours.
// Primary colours
//
// In keeping with the military theme, we use a series of olive-ish greens as the primary accent colour.
// This is used to distinguish elements (like labels) from their surrounding text, as well as for
// background colours and the colours of less important elements.
// Accent colours
//
// Accent colours are used to highlight important information and to add visual appeal.
// These provide a contrast to our primary palette.
// zsg: ignore
// Background & body text
// Inputs
// Buttons
// Misc HTML elements
// Screenreader stuff; best to leave be.
// zsg:endignore
// Links
// Typography
//
// The sites makes use of three typefaces: Freight Text Pro for body text,
// Proxima Nova for interface elements, and Lust Display for page titles.
//
// $font__main - Freight Text Pro, used for body copy.
// $font__accent - System fonts, used for interface elements. Looks prettiest on Apple devices.
// $font__display - Lust Display, used for (very big!) page headings.
//
// Styleguide 2.0
// Maybe I should be using system fonts too?
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
}
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden], template {
display: none;
}
a {
background-color: transparent;
}
a:active, a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b, strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2.44em;
margin: 0.67em 0;
line-height: 1.4;
}
h2 {
font-size: 1.95em;
line-height: 1.4;
}
h3 {
font-size: 1.56em;
line-height: 1.4;
}
h4 {
font-size: 1.25em;
line-height: 1.5;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.8em;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code, kbd, pre, samp {
font-family: monospace, monospace;
font-size: 1em;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button, select {
text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled], html input[disabled] {
cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 0;
}
/*--------------------------------------------------------------
# Structure
--------------------------------------------------------------*/
body {
background: #ffffff;
}
.site {
background: #ffffff;
margin: 0 auto;
max-width: 1000px;
padding: calc(40px / 2);
}
@media (min-width: 768px) {
.site {
padding: 40px
}
}
.site-branding, .site-logo-link {
display: none;
}
.site-footer {
color: #A09CA0;
font-size: calc(1 * 16 * 1px);
font-size: calc(1 * 1rem);
font-style: italic;
padding-top: calc(40px / 2);
margin: 0 calc(40px / 2) 0;
text-align: center;
}
@media (min-width: 768px) {
.site-footer {
margin: 0 calc(40px * 2) 0;
padding-top: calc(40px / 2)
}
}
.site-footer a {
color: #B53377;
border-color: transparent;
}
.site-footer a:hover {
border-color: #A09CA0;
}
.site-footer .emoji {
font-style: normal;
}
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body, button, input, select, textarea {
color: #4B454C;
font-family: "Freight Text Pro", freight-text-pro, Georgia, serif;
font-size: calc(1.4 * 16 * 1px);
font-size: calc(1.4 * 1rem);
line-height: 1.6;
}
@media (min-width: 768px) {
body, button, input, select, textarea {
font-size: calc(1.6 * 16 * 1px);
font-size: calc(1.6 * 1rem)
}
}
// Headings
//
// We use headings to make long pages of text (so basically every page ever) easier to scan through.
// As of right now, only styles for h1 to h3 are provided.
//
// markup:
// Heading one
// Heading two
// Heading three
//
// Styleguide 2.1
h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: 500;
line-height: 1.2;
margin: 0 0 40px/2;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
}
h1 {
color: #716E72;
line-height: 1;
font-family: lust-display, "Freight Text Pro", freight-text-pro, Georgia, serif;
font-weight: 900;
font-size: calc(2.6 * 16 * 1px);
font-size: calc(2.6 * 1rem);
letter-spacing: -0.02em;
}
@media (min-width: 768px) {
h1 {
font-size: calc(4.8 * 16 * 1px);
font-size: calc(4.8 * 1rem)
}
}
@media (min-width: 1024px) {
h1 {
font-size: calc(6 * 16 * 1px);
font-size: calc(6 * 1rem)
}
}
h1 a {
color: #716E72;
}
h2 {
color: #716E72;
font-style: italic;
font-size: calc(1.8 * 16 * 1px);
font-size: calc(1.8 * 1rem);
font-weight: 100;
line-height: 1.2;
margin-top: 3em;
}
@media (min-width: 768px) {
h2 {
font-size: calc(2.4 * 16 * 1px);
font-size: calc(2.4 * 1rem)
}
}
h3 {
color: #716E72;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: calc(0.8 * 16 * 1px);
font-size: calc(0.8 * 1rem);
font-weight: 600;
letter-spacing: 2px;
margin: 0;
text-transform: uppercase;
}
@media (min-width: 768px) {
h3 {
font-size: calc(0.9 * 16 * 1px);
font-size: calc(0.9 * 1rem)
}
}
p {
margin: 0 0 calc(40px*2);
}
.cap::first-letter {
color: #A09CA0;
display: block;
float: left;
font-size: calc(7.3 * 16 * 1px);
font-size: calc(7.3 * 1rem);
font-family: lust-display, "Freight Text Pro", freight-text-pro, Georgia, serif;
font-weight: 400;
line-height: 0.85;
margin: .12em .1em -.2em -.05em;
-webkit-appearance: none;
}
@media (min-width: 768px) {
.cap::first-letter {
font-size: calc(12.3 * 16 * 1px);
font-size: calc(12.3 * 1rem);
margin: 0.08em .1em -.125em -.05em
}
}
.cap::first-line {
font-variant: small-caps;
letter-spacing: 2px;
}
.cap::after {
display: table;
clear: both;
content: '';
}
// Text elements
//
// Standard text elements.
//
// markup:
// Blockquotes look like this.
//
// Styleguide 2.3
dfn, cite, em, i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
border-top: 1px solid #A09CA0;
color: #A09CA0;
display: block;
font-size: calc(1.2 * 16 * 1px);
font-size: calc(1.2 * 1rem);
font-style: italic;
margin: 0.25em auto;
padding-top: 0.5em;
text-align: left;
}
@media (min-width: 768px) {
blockquote {
font-size: calc(1.4 * 16 * 1px);
font-size: calc(1.4 * 1rem)
}
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: calc(0.9375 * 16 * 1px);
font-size: calc(0.9375 * 1rem);
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code, kbd, tt, var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: calc(0.9375 * 16 * 1px);
font-size: calc(0.9375 * 1rem);
}
abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark, ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
}
strong {
background: #F9EAF7;
color: #4B454C;
padding: 0 5px;
}
.caps {
font-variant: small-caps;
letter-spacing: 1px;
text-transform: lowercase;
}
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
box-sizing: border-box;
}
*, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
box-sizing: inherit;
}
blockquote, q {
quotes: "" "";
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul, ol {
margin: 0 0 1.5em 0;
padding: 0;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
.entry-content ul li {
list-style: none;
position: relative;
}
.entry-content ul li::before {
content: '\2022';
font-size: 0.5em;
line-height: 3;
position: absolute;
right: 102%;
}
li > ul, li > ol {
margin-bottom: 0;
margin-left: 1em;
}
dt {
font-weight: bold;
}
dd {
margin: 0 1.5em 1.5em;
}
img {
height: auto; /* Make sure images are scaled correctly. */
max-width: 100%; /* Adhere to container width. */
}
table {
margin: 0 0 1.5em;
width: 100%;
}
/*--------------------------------------------------------------
# SVG icons
--------------------------------------------------------------*/
/* Make sure to hide your sprite! */
.hide {
display: none;
}
/* Default colouration & size */
.salt-icon {
fill: currentColor;
height: 28px;
width: 28px;
}
/* Social menu */
.menu-social-menu-container ul ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu-social-menu-container ul li {
display: inline-block;
}
.menu-social-menu-container ul a {
display: inline-block;
line-height: 1;
padding: 4px;
}
.menu-social-menu-container ul svg {
fill: #B53377;
height: 28px;
speak: none;
transition: fill .1s ease-in 0;
width: 28px;
}
.menu-social-menu-container ul a:hover {
background: none;
}
.menu-social-menu-container ul a:hover svg {
fill: #3C98BC;
}
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
/*
Buttons
markup:
Styleguide 2.1
*/
button, input[type="button"], input[type="reset"], input[type="submit"] {
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #e6e6e6;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, .8);
@include font-size(0.75);
line-height: 1;
padding: .6em 1em .4em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
border-color: #ccc #bbb #aaa;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}
button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus {
border-color: #aaa #bbb #bbb;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}
/*
Inputs
markup:
Styleguide 2.2
*/
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus {
color: #111;
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] {
padding: 3px;
}
textarea {
padding-left: 3px;
width: 100%;
}
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
color: #B53377;
transition: all 0.2s ease-out;
}
a:hover, a:focus, a:active {
color: #3C98BC;
}
a:focus {
outline: thin dotted;
}
a:hover, a:active {
outline: 0;
}
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
/* Navigation */
.menu {
font-size: calc(1 * 16 * 1px);
font-size: calc(1 * 1rem);
font-weight: 600;
letter-spacing: 0.05em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
width: 740px;
max-width: 100%;
vertical-align: top;
padding: calc(40px / 2) 0;
text-transform: uppercase;
display: flex;
flex-wrap: nowrap;
list-style: none;
margin: 0 auto;
padding-left: 0;
list-style: none;
}
@media (min-width: 768px) {
.menu {
justify-content: center;
padding: calc(40px / 2) calc(40px * 2)
}
}
.menu-item {
margin: 0 calc(40px / 2) 0 calc(40px / 2 * -1);
align-items: center;
display: flex;
}
.menu-item::before {
content: '\00b7';
display: inline;
}
.menu-item:first-child::before {
display: none;
}
.menu-item a {
text-decoration: none;
color: #232024;
display: inline-block;
padding: calc(40px / 8) calc(40px / 2);
}
.menu-item a:hover {
color: #B53377;
}
.current-menu-item a {
color: #B53377;
}
/* On small screens, decrease space between menu items. */
@media (max-width: calc(768px - 1px)) {
.main-navigation {
position: relative;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
margin: -20px;
width: calc(100% + 40px);
}
.main-navigation::after, .main-navigation::before {
position: fixed;
top: 0;
bottom: 0;
width: 25px;
height: 120px;
display: block;
content: '';
}
.main-navigation::before {
background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #ffffff 100%);
left: 0;
}
.main-navigation::after {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 100%);
right: 0;
}
.main-navigation .nav-menu::-webkit-scrollbar {
display: none;
}
.menu-item {
margin: 0 6px 0 -6px;
}
.menu-item:first-of-type {
padding-left: calc(40px / 2);
margin-left: 0;
}
.menu-item:last-of-type {
padding-right: calc(40px / 2);
margin-right: 0;
}
.menu-link {
font-size: calc(0.9 * 16 * 1px);
font-size: calc(0.9 * 1rem);
padding: 5px 6px;
}
}
.comment-navigation, .posts-navigation, .post-navigation {
padding-bottom: 40px;
line-height: 1.2;
position: relative;
}
.comment-navigation a, .posts-navigation a, .post-navigation a {
text-decoration: none;
display: inline-block;
background-color: #B53377;
background-image: linear-gradient(to right, #B53377 0%, #3C98BC 50%, rgba(255, 255, 255, 0) 50%);
background-position: 100% 0;
background-size: 200% 200%;
color: rgba(255, 255, 255, 0);
color: transparent;
transition: .1s .2s;
background-clip: text;
-webkit-background-clip: text;
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(181, 51, 119)), color-stop(0.5, rgb(60, 152, 188)), color-stop(0.5, transparent));
display: flex;
flex-direction: column;
justify-content: center;
}
.comment-navigation a:hover, .posts-navigation a:hover, .post-navigation a:hover {
background-position: 0 0;
color: rgba(255, 255, 255, 0);
transition: .2s 0;
}
.comment-navigation .salt-icon, .posts-navigation .salt-icon, .post-navigation .salt-icon {
display: block;
background: #232024;
//border: 2px solid $white;
border-radius: 50%;
box-shadow: 0 0 0px 2px lighten(#232024, 20%);
fill: #ffffff;
height: 40px;
line-height: 1;
padding: 3px;
transition: all 200ms linear;
width: 40px;
position: absolute;
}
.comment-navigation:hover .salt-icon, .posts-navigation:hover .salt-icon, .post-navigation:hover .salt-icon {
background: lighten(#232024, 10%);
}
.comment-navigation .post-navigation-description, .posts-navigation .post-navigation-description, .post-navigation .post-navigation-description {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: calc(0.8 * 16 * 1px);
font-size: calc(0.8 * 1rem);
font-weight: 600;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
color: #4B454C;
display: block;
}
@media (min-width: 768px) {
.comment-navigation .post-navigation-description, .posts-navigation .post-navigation-description, .post-navigation .post-navigation-description {
font-size: calc(0.9 * 16 * 1px);
font-size: calc(0.9 * 1rem);
}
}
.nav-previous {
padding-left: 50px;
}
.nav-previous .salt-icon {
left: 0;
}
.nav-next {
text-align: end;
padding-right: 50px;
}
.nav-next .salt-icon {
right: 0;
transform: rotate(180deg);
}
@media (max-width: calc(768px - 1px)) {
.nav-previous + .nav-next {
margin-top: 40px;
}
}
@media (min-width: 768px) {
.nav-links {
display: flex;
}
.nav-previous {
width: 50%;
flex: 1 0 50%;
}
.nav-next {
flex: 1 0 50%;
}
}
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
word-wrap: normal !important;
/* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
outline: 0;
}
/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft, .alignright {
max-width: 636px !important; /* Let's work to make this !important unnecessary */
}
.alignleft img, .alignright img, .alignleft figcaption, .alignright figcaption {
max-width: 50%;
width: 50%;
}
.alignleft figcaption {
clear: left;
}
.alignright figcaption {
clear: right;
}
.alignleft img, .alignleft figcaption {
float: left;
margin-right: 1.5em;
}
.alignright img, .alignright figcaption {
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget-area {
width: 25%;
}
.widget {
margin: 0 0 1.5em;
/* Make sure select elements fit in widgets. */
}
.widget select {
max-width: 100%;
}
/*--------------------------------------------------------------
## Articles
--------------------------------------------------------------*/
.blog .hentry, .archive .hentry {
margin: 0 auto;
max-width: 740px;
}
.entry-title a {
display: inline-block;
background-color: #B53377;
background-image: linear-gradient(to right, #B53377 0%, #3C98BC 50%, rgba(255, 255, 255, 0) 50%);
background-position: 100% 0;
background-size: 200% 200%;
color: rgba(255, 255, 255, 0);
color: transparent;
transition: .1s .2s;
background-clip: text;
-webkit-background-clip: text;
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(181, 51, 119)), color-stop(0.5, rgb(60, 152, 188)), color-stop(0.5, transparent));
}
.entry-title a:hover {
background-position: 0 0;
color: rgba(255, 255, 255, 0);
transition: .2s 0;
}
/* Use a fancy article header for posts. */
.single .entry-header, .page-header {
text-align: center;
border-bottom: 3px solid #A09CA0;
margin: 40px 0;
}
@media (min-width: 768px) {
.single .entry-header, .page-header {
margin: calc(40px * 3) 0
}
}
.single .entry-header .entry-meta, .page-header .entry-meta {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: calc(0.8 * 16 * 1px);
font-size: calc(0.8 * 1rem);
font-weight: 600;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
color: #716E72;
position: relative;
}
@media (min-width: 768px) {
.single .entry-header .entry-meta, .page-header .entry-meta {
font-size: calc(0.9 * 16 * 1px);
font-size: calc(0.9 * 1rem)
}
}
.single .entry-header .entry-meta::before, .page-header .entry-meta::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
border-bottom: 2px solid #A09CA0;
}
.single .entry-header .entry-meta .entry-date, .single .entry-header .entry-meta .page-description, .page-header .entry-meta .entry-date, .page-header .entry-meta .page-description {
color: #716E72;
display: inline-block;
padding: 0 20px;
background: #ffffff;
position: relative;
text-decoration: none;
}
.single .entry-header .entry-title, .single .entry-header .page-title, .page-header .entry-title, .page-header .page-title {
background: #F26BAF;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #61D2FF, #F26BAF);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #61D2FF, #F26BAF);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.single .entry-header .entry-meta, .single .entry-header .entry-title, .page-header .entry-meta, .page-header .entry-title {
margin-bottom: calc(40px / 2);
}
@media (min-width: 768px) {
.single .entry-header .entry-meta, .single .entry-header .entry-title, .page-header .entry-meta, .page-header .entry-title {
margin-bottom: 40px
}
}
.updated:not(.published) {
display: none;
}
.page-header {
text-align: center;
border-bottom: 3px solid #A09CA0;
margin: 40px 0;
}
@media (min-width: 768px) {
.page-header {
margin: calc(40px * 3) 0
}
}
.page-header .nix-prefix {
background: none;
display: block;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: calc(0.8 * 16 * 1px);
font-size: calc(0.8 * 1rem);
font-weight: 600;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
color: #716E72;
position: relative;
overflow: hidden;
text-align: center;
-webkit-text-fill-color: initial;
}
@media (min-width: 768px) {
.page-header .nix-prefix {
font-size: calc(0.9 * 16 * 1px);
font-size: calc(0.9 * 1rem)
}
}
.page-header .nix-prefix::before, .page-header .nix-prefix::after {
background-color: #A09CA0;
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 50%;
}
.page-header .nix-prefix::before {
right: 0.5em;
margin-left: -50%;
}
.page-header .nix-prefix::after {
left: 0.5em;
margin-right: -50%;
}
.page-header .page-title {
background: #F26BAF;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #61D2FF, #F26BAF);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #61D2FF, #F26BAF);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-header .nix-prefix, .page-header .page-title {
margin-bottom: calc(40px / 2);
}
@media (min-width: 768px) {
.page-header .nix-prefix, .page-header .page-title {
margin-bottom: 40px
}
}
.page-header .archive-description {
color: #716E72;
font-style: italic;
margin: 0 auto;
max-width: 740px;
}
/* Pages (hide title) */
.page .entry-header {
height: calc(40px * 2);
}
@media (min-width: 768px) {
.page .entry-header {
height: calc(40px * 4)
}
}
.page .entry-header .entry-title {
display: none;
}
/* Homepage */
.intro .entry-header {
border: 0;
}
.single .entry-content, .page .entry-content, .tax-talks .entry-content {
margin: 0 auto;
max-width: 740px;
}
/* Add drop caps, in case we forgot to. */
.single:not(.single-wanderlist-location) .entry-content > p:first-of-type::first-letter, .tax-talks .entry-content p:first-of-type:not(.wp-block-caption)::first-letter {
color: #A09CA0;
display: block;
float: left;
font-size: calc(7.3 * 16 * 1px);
font-size: calc(7.3 * 1rem);
font-family: lust-display, "Freight Text Pro", freight-text-pro, Georgia, serif;
font-weight: 400;
line-height: 0.85;
margin: .12em .1em -.2em -.05em;
-webkit-appearance: none;
}
@media (min-width: 768px) {
.single:not(.single-wanderlist-location) .entry-content > p:first-of-type::first-letter, .tax-talks .entry-content p:first-of-type:not(.wp-block-caption)::first-letter {
font-size: calc(12.3 * 16 * 1px);
font-size: calc(12.3 * 1rem);
margin: 0.08em .1em -.125em -.05em
}
}
.single:not(.single-wanderlist-location) .entry-content > p:first-of-type::first-line, .tax-talks .entry-content p:first-of-type:not(.wp-block-caption)::first-line {
font-variant: small-caps;
letter-spacing: 2px;
}
.single:not(.single-wanderlist-location) .entry-content > p:first-of-type::after, .tax-talks .entry-content p:first-of-type:not(.wp-block-caption)::after {
display: table;
clear: both;
content: '';
}
.entry-content a {
display: inline-block;
background-color: #B53377;
background-image: linear-gradient(to right, #B53377 0%, #3C98BC 50%, rgba(255, 255, 255, 0) 50%);
background-position: 100% 0;
background-size: 200% 200%;
color: rgba(255, 255, 255, 0);
color: transparent;
transition: .1s .2s;
background-clip: text;
-webkit-background-clip: text;
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(181, 51, 119)), color-stop(0.5, rgb(60, 152, 188)), color-stop(0.5, transparent));
}
.entry-content a:hover {
background-position: 0 0;
color: rgba(255, 255, 255, 0);
transition: .2s 0;
}
// Style Wanderlist text snippets
.wanderlist-country-count {
color: #3C98BC;
font-weight: bolder;
font-size: 1.5em;
line-height: 1;
}
.wanderlist-current-location {
color: #3C98BC;
font-style: italic;
}
.entry-footer {
margin: 0 auto calc(40px * 2);
max-width: 740px;
display: flex;
flex-wrap: wrap;
}
.category-links a {
background: #61D2FF;
color: #232024;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: calc(0.8 * 16 * 1px);
font-size: calc(0.8 * 1rem);
font-weight: 600;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
text-decoration: none;
padding: 5px 10px;
margin-right: 5px;
}
@media (min-width: 768px) {
.category-links a {
font-size: calc(0.9 * 16 * 1px);
font-size: calc(0.9 * 1rem)
}
}
.category-links a:hover {
color: #ffffff;
}
.category-links a::before {
content: '#';
display: inline;
}
.tag-links a {
background: #F26BAF;
color: #232024;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: calc(0.8 * 16 * 1px);
font-size: calc(0.8 * 1rem);
font-weight: 600;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
text-decoration: none;
padding: 5px 10px;
margin-right: 5px;
}
@media (min-width: 768px) {
.tag-links a {
font-size: calc(0.9 * 16 * 1px);
font-size: calc(0.9 * 1rem)
}
}
.tag-links a:hover {
color: #ffffff;
}
.tag-links a::before {
content: '#';
display: inline;
}
/*--------------------------------------------------------------
## Frontpage
--------------------------------------------------------------*/
.home .page-header {
border: none;
}
.home {
background: #181b1c;
color: rgba(255, 255, 255, 1);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1.4rem;
}
.home .site {
background: none;
}
.home .text-block {
max-width: 40rem;
margin-left: auto;
margin-right: auto;
clear: both;
}
.home a {
color: #E84F9E;
}
.home a:hover {
color: #1FB7C5;
}
/*--------------------------------------------------------------
## Custom post types
--------------------------------------------------------------*/
// Event cards.
.event .salt-upcoming {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: calc(0.8 * 16 * 1px);
font-size: calc(0.8 * 1rem);
font-weight: 600;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
padding: 2px 5px;
position: absolute;
top: 10px;
left: -10px;
background: #61D2FF;
}
@media (min-width: 768px) {
.event .salt-upcoming {
font-size: calc(0.9 * 16 * 1px);
font-size: calc(0.9 * 1rem);
}
}
.phoenix-event-list {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1em;
}
@media (min-width: 768px) {
.phoenix-event-list {
grid-template-columns: 1fr 1fr
}
}
.event {
padding: 1em;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.125);
width: 100%;
}
.event .entry-title {
margin-top: 0;
font-size: calc(1.6 * 16 * 1px);
font-size: calc(1.6 * 1rem);
}
.event .salt-event-details {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: calc(1.125 * 16 * 1px);
font-size: calc(1.125 * 1rem);
}
/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
word-wrap: break-word;
}
.bypostauthor {
display: block;
}
/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer {
/* Theme Footer (when set to scrolling) */
display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
display: block;
}
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
#wpstats {
display: none;
}
/* Make sure embeds and iframes fit their containers. */
embed, iframe, object {
max-width: 100%;
}
.jetpack-video-wrapper > embed, .jetpack-video-wrapper > iframe, .jetpack-video-wrapper > object, .jetpack-video-wrapper > .wp-video {
margin-bottom: 0;
}
/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.entry-content img {
max-width: 100%;
height: auto;
}
.entry-content figure, .entry-content .wp-caption {
line-height: 0;
margin: 0 0 40px;
max-width: 100%;
}
.entry-content figure a, .entry-content .wp-caption a {
background: none;
padding: 0;
margin: 0;
display: block;
}
.entry-content figcaption, .entry-content .wp-caption-text {
font-size: calc(1.2 * 16 * 1px);
font-size: calc(1.2 * 1rem);
color: #716E72;
font-style: italic;
line-height: 1.4;
margin: 0;
width: 100%;
}
@media (min-width: 768px) {
.entry-content figure, .entry-content .wp-caption {
position: relative;
margin: 0 calc(40px * -1) 40px;
max-width: calc(100% + 40px * 2);
}
.entry-content figcaption, .entry-content .wp-caption-text {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
padding: calc(40px / 2);
}
}
/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.3333333333%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.6666666667%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.2857142857%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.1111111111%;
}
.gallery-caption {
display: block;
}
/*--------------------------------------------------------------
## Gutenberg blocks
--------------------------------------------------------------*/
p.has-drop-cap:not(.focus)::first-letter {
color: #A09CA0;
display: block;
float: left;
font-size: calc(7.3 * 16 * 1px);
font-size: calc(7.3 * 1rem);
font-family: lust-display, "Freight Text Pro", freight-text-pro, Georgia, serif;
font-weight: 400;
line-height: 0.85;
margin: .12em .1em -.2em -.05em;
-webkit-appearance: none;
}
@media (min-width: 768px) {
p.has-drop-cap:not(.focus)::first-letter {
font-size: calc(12.3 * 16 * 1px);
font-size: calc(12.3 * 1rem);
margin: 0.08em .1em -.125em -.05em
}
}
p.has-drop-cap:not(.focus)::first-line {
font-variant: small-caps;
letter-spacing: 2px;
}
p.has-drop-cap:not(.focus)::after {
display: table;
clear: both;
content: '';
}