/*---------------------------------------------------------------------------------

Theme Name: McLuhan

Text Domain: mcluhan

Version: 2.1.1

Description: McLuhan is a clean, simple and lightweight WordPress theme, featuring a front page with a complete post archive arranged by year rather than a traditional blog flow. It also sports fully customizable background colors for the sidebar and content, Block Editor/Gutenberg support, a responsive design, social network links with icons, an AJAX-powered mobile search with instant results, a resume page template and a full-width template. Demo: https://andersnoren.se/themes/mcluhan/

Tags: two-columns, left-sidebar, custom-menu, custom-colors, editor-style, featured-images, full-width-template, sticky-post, threaded-comments, theme-options, blog, translation-ready, block-styles, wide-blocks

Author: Anders Norén

Author URI: https://andersnoren.se

License: GNU General Public License version 2.0

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Theme URI: https://andersnoren.se/teman/mcluhan-wordpress-theme/

Requires PHP: 5.4

Tested up to: 6.0

All files, unless otherwise stated, are released under the GNU General Public License

version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

-----------------------------------------------------------------------------------

0. CSS Reset

1. Document Setup

2. Structure

3. Element Base

4. Site Header

5. Site Navigation

6. Archive

7. Singular

8. Blocks

9. Entry Content

10. Page Templates

11. Search

12. Site Footer

13. Media Queries

----------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */

/* 0. CSS Reset

/* -------------------------------------------------------------------------------- */

html, body {

margin: 0;

padding: 0;

height: 100%;

min-height: 100%;

}

h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {

font-size: inherit;

line-height: inherit;

margin: 0;

padding: 0;

text-align: inherit;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

blockquote:before,

blockquote:after {

content: "";

}

input[type="search"]::-webkit-search-decoration,

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-results-button,

input[type="search"]::-webkit-search-results-decoration {

display: none;

}

/* Screen Reader Text */

.screen-reader-text {

clip: rect( 1px, 1px, 1px, 1px );

height: 1px;

overflow: hidden;

position: absolute !important;

width: 1px;

}

.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-weight: 700;

height: auto;

left: 5px;

line-height: normal;

padding: 15px 23px 14px;

text-decoration: none;

top: 5px;

width: auto;

z-index: 100001; /* Above WP toolbar. */

}

/* Skip Link */

.skip-link {

position: absolute;

left: -9999rem;

top: 2.5rem;

z-index: 999999999;

}

.skip-link:focus {

left: 2.5rem;

text-decoration: none;

}

/* Accessibility Settings */

@media ( prefers-reduced-motion: reduce ) {

* {

animation-duration: 0s !important;

transition-duration: 0s !important;

}

}

/* -------------------------------------------------------------------------------- */

/* 1. Document Setup

/* -------------------------------------------------------------------------------- */

body {

background: #fff;

border: none;

color: #121212;

font-family: Archivo, 'Helvetica Neue', sans-serif;

font-size: 18px;

padding-left: 380px;

}

body.lock-scroll {

height: 100%;

position: fixed;

width: 100%;

}

body * {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

a {

color: inherit;

text-decoration: underline;

}

a:hover {

text-decoration: none;

}

img {

display: block;

height: auto;

max-width: 100%;

}

.group:after,

.pagination:after,

.gallery:after,

.entry-content:after {

clear: both;

content: "";

display: block;

}

::selection {

background: #121212;

color: #FFF;

}

input::-webkit-input-placeholder { color: rgba( 0, 0, 4, 0.4 ); }

input:-ms-input-placeholder { color: rgba( 0, 0, 4, 0.4 ); }

input::-moz-placeholder { color: rgba( 0, 0, 4, 0.4 ); }

/* -------------------------------------------------------------------------------- */

/* 2. Structure

/* -------------------------------------------------------------------------------- */

.site-content {

position: relative;

}

.section-inner {

margin: 0 auto;

max-width: 560px;

width: 85%;

}

.section-inner.wide {

max-width: 800px;

}

.section-inner .section-inner {

width: 100%;

}

/* Base Transitions ----------------------------- */

a {

transition: all .15s linear;

}

/* Base Typography ----------------------------- */

.entry-title {

font-size: 36px;

font-weight: 600;

letter-spacing: -.45px;

line-height: 1.25;

margin: 0;

-ms-word-break: break-word;

word-break: break-word;

}

.excerpt {

font-size: 24px;

line-height: 1.45;

}

.excerpt a {

border-bottom: 1px solid #121212;

color: #121212;

}

.excerpt a:hover {

border-bottom-color: rgba( 0, 0, 4, 0.4 );

color: rgba( 0, 0, 4, 0.4 );

text-decoration: none;

}

/* Base Media -------------------------------- */

.bg-image {

background: no-repeat center;

background-size: cover;

}

/* Animations -------------------------------- */

@keyframes show {

from {

opacity: 0;

transform: translateY(10px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

@keyframes hide {

from {

opacity: 1;

transform: translateY(0);

}

to {

opacity: 0;

transform: translateY(-10px);

}

}

@keyframes foldOutLeft {

from { transform: rotate(0); }

to { transform: rotate(30deg); }

}

@keyframes foldOutRight {

from { transform: rotate(0); }

to { transform: rotate(-30deg); }

}

/* -------------------------------------------------------------------------------- */

/* 3. Element Base

/* -------------------------------------------------------------------------------- */

ol,

ul {

margin-left: 40px;

}

li {

line-height: 1.5;

margin-top: 15px;

}

dd,

dt {

line-height: 1.5;

}

dt {

font-weight: 700;

}

dd + dt {

margin-top: 15px;

}

code {

background: #f1f1f4;

padding: 0 1px;

}

pre {

background: #f1f1f4;

font-size: 14px;

line-height: 1.5;

padding: 20px;

white-space: pre-wrap;

word-wrap: break-word;

}

/* Headings ---------------------------------- */

h1,

h2,

h3,

h4,

h5,

h6 {

font-weight: 600;

line-height: 1.2;

margin: 60px 0 30px;

}

h1 { font-size: 40px; }

h2 { font-size: 32px; }

h3 { font-size: 28px; }

h4 { font-size: 24px; }

h5 { font-size: 20px; }

h6 { font-size: 18px; }

/* Inputs ------------------------------------ */

fieldset {

border: 1px solid rgba( 0, 0, 0, .2 );

padding: 25px;

}

fieldset legend {

font-size: 16px;

font-weight: 600;

margin-left: -15px;

padding: 0 15px;

}

label {

margin-bottom: 10px;

}

input[type="text"],

input[type="password"],

input[type="email"],

input[type="url"],

input[type="date"],

input[type="month"],

input[type="time"],

input[type="datetime"],

input[type="datetime-local"],

input[type="week"],

input[type="number"],

input[type="search"],

input[type="tel"],

input[type="color"],

textarea {

background: transparent;

border-radius: 0;

border: 1px solid rgba( 0, 0, 0, 0.2 );

box-shadow: none !important;

color: #121212;

display: block;

font-size: 1em;

margin: 0 0 15px 0;

padding: 15px;

transition: border-color .15s linear;

-moz-appearance: none;

-webkit-appearance: none;

width: 100%;

}

textarea {

line-height: 1.4;

height: 200px;

}

button,

.button,

.wp-block-file__button,

.wp-block-button__link,

input[type="button"],

input[type="submit"] {

-moz-appearance: none;

-webkit-appearance: none;

background: #121212;

border: none;

border-radius: 0;

box-shadow: none;

color: #fff;

display: inline-block;

font-family: inherit;

font-size: 16px;

font-weight: 600;

padding: 16px 24px 16px;

text-align: center;

text-decoration: none;

transition: background-color .15s linear;

}

.is-style-outline > .wp-block-button__link,

.wp-block-button__link.is-style-outline {

padding: 14px 22px 14px;

}

button:hover,

.button:hover,

input[type="button"]:hover,

input[type="submit"]:hover {

background: #454545;

cursor: pointer;

}

/* Tables ------------------------------------ */

table {

border-collapse: collapse;

border-spacing: 0;

empty-cells: show;

font-size: 0.9em;

margin-bottom: 30px;

max-width: 100%;

overflow: hidden;

width: 100%;

}

th,

td {

line-height: 1.4;

margin: 0;

overflow: visible;

padding: 2.5%;

}

caption {

font-size: 13px;

font-weight: 700;

padding-bottom: 2.5%;

text-align: center;

text-transform: uppercase;

}

thead {

vertical-align: bottom;

white-space: nowrap;

}

th {

font-weight: 600;

}

tbody > tr:nth-child(odd) {

background: rgba( 0, 0, 4, 0.05 );

}

/* Block Quotes ------------------------------ */

blockquote {

border-color: currentColor;

border-style: solid;

border-width: 0 0 0 2px;

margin: 0 0 30px 0;

padding: 0 0 0 20px;

}

blockquote p {

font-weight: 700;

hanging-punctuation: first;

}

blockquote cite {

display: block;

font-style: normal;

margin: 1em 0 0;

}

blockquote cite:before {

content: "— ";

}

/* Media ------------------------------------- */

figure {

margin: 0;

}

.wp-caption {

display: block;

max-width: 100%;

}

.gallery-caption,

.wp-caption-text,

:root figcaption {

font-size: 0.9em;

margin: 15px 0 0;

}

:root .gallery-caption,

:root .wp-caption-text {

margin-bottom: 0;

}

.wp-caption-text {

color: rgba( 0, 0, 0, .5 );

}

.wp-caption-text a {

color: inherit;

}

/* -------------------------------------------------------------------------------- */

/* 4. Site Header

/* -------------------------------------------------------------------------------- */

.site-header {

background: #121212;

color: #fff;

margin: 0 auto 0 auto;

padding: 80px 50px 144px 50px;

position: fixed;

left: 0;

bottom: 0;

top: 0;

width: 380px;

z-index: 99998;

}

.same-custom-bgs .site-header,

.white-bg .site-header {

border-right: 1px solid rgba( 0, 0, 4, .075 );

}

.site-header a {

color: #fff;

}

.dark .site-header,

.dark .site-header a {

color: rgba( 0, 0, 0, .9 );

}

.site-title,

.site-description {

line-height: 1.25;

}

.site-title {

font-size: inherit;

font-weight: inherit;

margin: 0;

}

.site-title a {

border-bottom: 1px solid transparent;

text-decoration: none;

}

.site-title a:hover {

border-bottom-color: #fff;

}

.dark .site-title a:hover {

border-bottom-color: rgba( 0, 0, 0, .9 );

}

.site-description {

color: rgba( 255, 255, 255, .6 );

margin-top: 8px;

}

.dark .site-description {

color: rgba( 0, 0, 0, .4 );

}

.nav-toggle {

cursor: pointer;

display: none;

height: 30px;

position: absolute;

right: 7.5%;

top: calc( 50% - 15px );

width: 50px;

}

.nav-toggle:before {

content: "";

display: block;

position: absolute;

bottom: -20px;

left: -20px;

right: 0;

top: -20px;

}

.nav-toggle .bar {

background: #fff;

display: block;

height: 1px;

margin-top: 0;

opacity: 1;

position: absolute;

right: 0;

top: 50%;

transform: rotate( 0deg );

transition: transform .2s ease-in 0s, margin 0.2s ease-out 0.2s;

width: 28px;

z-index: 1;

}

.dark .nav-toggle .bar {

background: rgba( 0, 0, 0, .9 );

}

.nav-toggle .bar:nth-child(1) { margin-top: -5px; }

.nav-toggle .bar:nth-child(2) { margin-top: 3px; }

.nav-toggle.active .bar {

transition: margin 0.2s ease-in, transform 0.2s ease-out 0.25s;

}

.nav-toggle.active .bar:nth-child(1) {

margin-top: -1px;

transform: rotate( 45deg );

}

.nav-toggle.active .bar:nth-child(2) {

margin-top: -1px;

transform: rotate( -45deg );

}

/* -------------------------------------------------------------------------------- */

/* 5. Site Navigation

/* -------------------------------------------------------------------------------- */

.mobile-menu-wrapper,

.mobile-search {

display: none;

transform: translateZ( 0 );

}

/* Main Menu ----------------------------- */

.menu-wrapper {

height: 100%;

margin-top: 60px;

overflow: hidden;

padding-bottom: 144px;

width: 100%;

}

.main-menu {

height: 100%;

margin: 0;

-ms-overflow-style: -ms-autohiding-scrollbar;

overflow: auto;

width: 100%;

}

.main-menu a {

border-bottom: 1px solid transparent;

text-decoration: none;

}

.main-menu ul {

list-style: none;

}

.main-menu li {

line-height: 1.25;

margin-bottom: 12px;

}

.main-menu .current-menu-item > a,

.main-menu a:hover {

border-bottom-color: #fff;

}

.dark .main-menu .current-menu-item > a,

.dark .main-menu a:hover {

border-bottom-color: rgba( 0, 0, 0, .9 );

}

.main-menu ul {

margin: 12px 0 0 25px;

}

/* Social Menu ----------------------------- */

body.hide-social .social-menu {

display: none !important;

}

.social-menu.desktop {

background: #121212;

padding: 50px 50px 50px 50px;

position: absolute;

bottom: 0;

left: 0;

right: 0;

}

.social-menu-inner {

display: flex;

flex-wrap: wrap;

list-style: none;

margin: -10px 0 0 -10px;

padding: 0;

}

.social-menu li {

display: block;

line-height: 1;

margin: 10px 0 0 10px;

position: relative;

}

.screen-reader-text {

position: absolute;

left: -9999em;

top: -9999em;

}

.social-menu a {

background: rgba( 255, 255, 255, 0.1 );

border-radius: 50%;

color: #fff;

display: block;

height: 44px;

position: relative;

text-decoration: none;

transition: background-color .2s linear, color .2s linear;

width: 44px;

}

.dark .social-menu a {

background: rgba( 0, 0, 0, 0.25 );

color: #fff;

}

.social-menu a:hover,

.social-menu a.active {

background: #fff;

color: #121212;

text-decoration: none;

}

.dark .social-menu a:hover,

.dark .social-menu a.active {

background: rgba( 0, 0, 0, .9 );

color: #fff;

}

.social-menu a::before {

content: '\f0c1';

display: inline-block;

font-family: 'Font Awesome 5';

font-size: 19px;

position: absolute;

left: 0;

right: 0;

top: calc( 50% - 9px );

transition: transform .3s ease-out;

text-align: center;

z-index: 2;

}

/* NON-BRAND ICONS */

.social-menu a[href*="mailto"]::before { content: '\f0e0'; }

.social-menu a[href*="/feed/"]::before,

.social-menu a[href*="rss"]::before { content: '\f09e'; }

/* BRAND ICONS */

.social-menu a[href*="500px.com"]::before { content: '\f26e'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="amazon.com"]::before { content: '\f270'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="angel.co"]::before { content: '\f209'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="audible.com"]::before { content: '\f373'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="behance.net"]::before { content: '\f1b4'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="blogger.com"]::before { content: '\f37d'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="codepen.io"]::before { content: '\f1cb'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="creativecommons.com"]::before { content: '\f25e'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="deviantart.com"]::before { content: '\f1bd'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="digg.com"]::before { content: '\f1a6'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="discordapp.com"]::before { content: '\f392'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="dribbble.com"]::before { content: '\f17d'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="ebay"]::before { content: '\f4f4'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="etsy.com"]::before { content: '\f2d7'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="facebook.com"]::before { content: '\f39e'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="flickr.com"]::before { content: '\f16e'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="github.com"]::before { content: '\f113'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="gitlab.com"]::before { content: '\f296'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="goodreads.com"]::before { content: '\f3a9'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="houzz"]::before { content: '\f27c'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="imdb.com"]::before { content: '\f2d8'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="instagram.com"]::before { content: '\f16d'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="kickstarter.com"]::before { content: '\f3bc'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="jsfiddle.net"]::before { content: '\f1cc'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="linkedin.com"]::before { content: '\f0e1'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="last.fm"]::before { content: '\f202'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="medium.com"]::before { content: '\f3c7'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="meetup.com"]::before { content: '\f2e0'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="mixcloud.com"]::before { content: '\f289'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="patreon.com"]::before { content: '\f3d9'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="pscp.tv"]::before { content: '\f3da'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="pinterest"]::before { content: '\f231'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="play.google.com"]::before { content: '\f3ab'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="plus.google.com"]::before { content: '\f0d5'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="producthunt.com"]::before { content: '\f288'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="quora.com"]::before { content: '\f2c4'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="reddit.com"]::before { content: '\f281'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="slack.com"]::before { content: '\f198'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="soundcloud.com"]::before { content: '\f1be'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="spotify.com"]::before { content: '\f1bc'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="tumblr.com"]::before { content: '\f173'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="twitch"]::before { content: '\f1e8'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="twitter.com"]::before { content: '\f099'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="vimeo.com"]::before { content: '\f27d'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="wordpress.org"]::before,

.social-menu a[href*="wordpress.com"]::before { content: '\f411'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="youtube.com"]::before { content: '\f167'; font-family: 'Font Awesome 5 Brands'; }

.social-menu a[href*="unsplash.com"]::before { content: '\f030'; font-family: 'Font Awesome 5'; }

.social-menu a[href*="?s="]::before { content: '\f002'; top: calc( 50% - 10px ); }

.no-js .social-menu .social-search-wrapper { display: none; }

/* -------------------------------------------------------------------------------- */

/* 6. Archive

/* -------------------------------------------------------------------------------- */

.page-header {

padding: 80px 0;

}

.page-header:last-child {

padding-bottom: 0;

}

.page-subtitle {

color: rgba( 0, 0, 4, 0.4 );

font-size: inherit;

font-weight: inherit;

margin: 0 0 10px 0;

}

.page-title {

font-size: 24px;

font-weight: inherit;

hanging-punctuation: first;

line-height: 1.45;

margin: 0;

}

.page-header p {

line-height: 1.5;

margin-top: 20px;

}

.page-header .search-form {

margin-top: 20px;

}

/* Post Wrappers ----------------------------- */

.posts:first-child {

margin-top: 80px;

}

.posts ul {

list-style: none;

margin: 0;

}

.posts li {

margin: 0;

}

.posts > ul + ul {

margin-top: 70px;

}

.posts .list-title {

font-size: inherit;

font-weight: inherit;

margin: 0 0 17px 0;

}

.posts .list-title a {

color: rgba( 0, 0, 4, 0.4 );

text-decoration: none;

}

.posts .list-title a:hover {

color: #121212;

text-decoration: none;

}

/* Post Previews ----------------------------- */

.post-preview {

border-top: 1px solid rgba( 0, 0, 4, .125 );

position: relative;

}

.post-preview a {

display: flex;

justify-content: space-between;

padding: 17px 0;

text-decoration: none;

}

.post-preview.no-title a {

justify-content: flex-end;

}

.post-preview a:hover {

text-decoration: none;

}

.sticky .sticky-arrow {

background: url( ./assets/images/arrow-black-right.svg ) no-repeat center;

background-size: auto 12px;

border-radius: 50%;

display: inline;

height: 12px;

position: absolute;

right: calc( 100% + 7px );

top: calc( 50% - 6px );

width: 20px;

}

.post-preview a .title {

font-size: inherit;

font-weight: inherit;

line-height: 1.25;

margin: 0;

-ms-word-break: break-word;

word-break: break-word;

}

.post-preview a .title span {

border-bottom: 1px solid transparent;

transition: border-color .2s linear;

}

.post-preview a:hover .title span {

border-bottom-color: #121212;

}

.post-preview time {

color: rgba( 0, 0, 4, 0.4 );

line-height: 1.25;

margin-left: 30px;

white-space: nowrap;

}

/* Archive Pagination ------------------------ */

.archive-pagination {

margin-top: 100px;

}