/** * Theme Name: Airy * Description: A simple theme for blogging. * Version: 1.16 * Author: Darinka Kostelnik * Author URI: http://darinka.design * Tags: one-column, custom-menu, custom-colors, custom-logo, editor-style, theme-options, featured-images, threaded-comments, translation-ready, blog * Text Domain: airy * License: GNU General Public License v2.0 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /** * Layout * --------------------------------------------------------------------------- */ #container {} .wrapper { width: 72%; margin: 0 auto; } #main {} #header .wrapper { display: flex; align-items: center; height: 100%; } #main .wrapper { max-width: 700px; margin-left: 14%; } #footer { overflow: hidden; background: var(--footer-color); color: var(--block-color); padding: 4em 0; margin: 0; position: relative; } div>p:last-child, section>p:last-child, blockquote>p:last-child { margin-bottom: 8px; } div>ul:last-child, section>ul:last-child, div>ol:last-child, section>ol:last-child { padding-bottom: 20px; } /** * Header * --------------------------------------------------------------------------- */ #header { height: auto; margin: 4em 0 6em; } .branding { margin-right: 0; word-break: break-word; min-width: 200px; } h1.site-title { font-size: 28pt; margin: 0; display: block; line-height: 0.875; } h2.site-description { font-size: 9pt; padding: 0 0 0 2em; display: block; max-width: 20ch; line-height: 1.025; opacity: 0.85; } /** * Menus * --------------------------------------------------------------------------- */ /* ====== Menu General ====== */ .menu {} .menu .wrap {} .menu ul { list-style: none; display: flex; font-size: 13pt; letter-spacing: -0.0125em; flex-wrap: wrap; } .menu li { padding: 0; } .menu li.current-menu-item>a, .menu li.current_page_parent>a { opacity: 0.65; } .menu li a { color: inherit; font-weight: 600; opacity: 0.85; display: block; } .menu li a:hover, .menu li a:focus, .menu li:hover>a { opacity: 1; } /* ====== Primary Menu ====== */ #menu-burger { position: relative; display: block; width: 50px; height: 50px; text-align: center; margin-left: 4em; } #menu-burger span { position: relative; top: calc(50% - 8px); left: 0; right: 0; margin: 0 auto; display: block; width: 20px; height: 3px; background: black; transform: rotate(0deg); transition: .2s ease-in-out; } #menu-burger span:nth-child(2) { top: calc(50% - 4px); } #menu-burger span:nth-child(3) { top: calc(50% + 0px); } .menu-hamburger { width: 420px; max-width: 100%; background: #fff; position: fixed; top: 0; left: -700px; height: 100vh; overflow-x: hidden; overflow-y: auto; opacity: 1; font-size: .85em; z-index: 100; transition: all .3s ease-out; box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.05); } body.admin-bar .menu-hamburger { top: 32px; } body.menu-shown .menu-hamburger { left: 0; } .menu-hamburger .wrap { padding: 6em; font-size: 0.875em; } .menu-hamburger ul { padding: 40px 0 0; flex-direction: column; } .menu-hamburger ul ul { padding-top: 0; padding-left: 1em; } .menu-hamburger li {} .menu-hamburger li a { padding: 4px 0; } #body-overlay { background: black; width: 100%; height: 100vh; position: fixed; top: 0; left: -100%; opacity: 0; z-index: 6; transition: opacity .2s linear, left .2s .2s; } body.menu-shown #body-overlay { left: 0; opacity: .7; cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABAUlEQVRIib3X3U3DMBRA4QOKukEkZmAL2IF5ki0QQ3QFlgCxA+oGfTl9aItKfn1dO1ey/GAnXyzb9yqoO/VdbVU2ak0DHIFf4BN4BQ7UjQ54uv2KXv2qvPJO/Vbb4UBN/A9VmZpQA/+HzsGl8RG6BF/x0QMl0DX4XnwWTYFz8UU0FY7iq2gETsWT0Ci8hiejOfAcHj4HOfAQCqMqTWai7y/9D+cC80KwuDxmwgAO+lDkwh3wBjwDe84ltQ29IWN/p05vbzC3l0Cz8FJoGC+JTl21u+AImozXQJPwWugqXhNdxGujs/gW6CS+FTrCH9Tb3BuuMhnRc/mF2akflVc6bM0Jeh8V3CMV5WsAAAAASUVORK5CYII=), auto; transition: left .1s, opacity .35s .1s cubic-bezier(0.7, 0, 0.3, 1); } /* ====== Secondary Menu ====== */ .menu-primary { margin-left: auto; } .menu-primary .wrap { display: flex; } .menu-primary div > ul:last-child { padding: 0; } .menu-primary li { position: relative; } .menu-primary li a { padding: 20px 0 20px 2.5em; } .menu-primary ul ul { position: absolute; top: auto; left: 0; flex-direction: column; background: #fff; z-index: 3; padding: 10px 30px; margin-left: 10px; width: 200px; font-size: 11pt; display: none; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05); animation: hideMenu 0.1s cubic-bezier(0.7, 0, 0.3, 1) forwards; } @keyframes hideMenu { 100% { display: none; opacity: 0; transform: translateY(-20px); } } @keyframes showMenu { 0% { display: block; opacity: 0; transform: translateY(-20px); } 100% { display: block; opacity: 1; transform: translateY(0); } } .menu-primary ul li:hover>ul, .menu-primary ul li:focus-within>ul, .menu-primary ul li ul:hover { display: block; animation: showMenu 0.2s cubic-bezier(0.7, 0, 0.3, 1) forwards; } .menu-primary ul ul a { padding: 0; margin: 10px 0; } .menu-primary ul ul ul { left: 120px; top: -10px; } #menu-secondary-mobile { display: none; } /** * Content * --------------------------------------------------------------------------- */ /* === Thumbnails === */ .thumbnail { margin: 1em -5% 2em; width: calc(100% + 10%); max-width: 100vw; height: auto; } .plural .thumbnail { } /* ====== POSTS ====== */ .hentry {} .sticky {} /* === Post Header === */ .entry-header { padding: 0 0 1.275em; } .entry-title { word-break: break-word; } .entry-title a {} .entry-title a:hover {} .entry-byline { color: var(--meta-color); font-weight: 500; font-size: 0.825em;; } .entry-byline a { color: var(--text-color); text-decoration: underline; } .entry-byline a:hover {} .entry-byline .published {} .entry-author { color: var(--meta-color); padding: 2em 0 0; display: flex; align-items: center; font-size: 0.825em; } /* === Post content and excerpts === */ .entry { margin: 0 0 6em; } .entry-content { margin-bottom: 0; } .entry-summary {} /* === Post Footer === */ .entry-footer { color: var(--meta-color); font-weight: 500; } .entry-meta {} .entry-meta a {} .entry-meta a:hover {} .entry-meta .published {} .entry-meta .category {} .entry-footer a[rel=tag] { font-size: .875rem; background: rgba(0, 0, 0, 0.04); border-radius: 2px; color: var(--meta-color); display: inline-block; font-weight: 500; padding: .2em .65em; border-radius: 4px; } /* ====== Attachment Meta (on image attachment pages) ====== */ .attachment-meta {} .attachment-meta .image-gallery {} .attachment-meta .image-info {} .image-info ul {} .image-info ul li {} .image-info .prep {} .image-info .image-data {} /* ====== LOOP META ====== */ .loop-meta {} .loop-title {} .loop-description {} .archive-header { border-bottom: 1px solid var(--line-color); margin-bottom: 4em; } .archive-title { font-size: 160%; margin-bottom: 32px; font-weight: 700; } .archive-description { max-width: 48ch; font-size: 0.875em; font-weight: 500; color: var(--meta-color); margin-top: -1em; padding-bottom: 2em; } /* ====== PAGINATION ====== */ /* === Single post navigation (between different posts) === */ .loop-nav { display: flex; padding: 2em 0; color: var(--meta-color); font-size: 0.875em; font-weight: 500; } .loop-nav>div { flex: 1 1 0 } .loop-nav>div:first-child { border-right: 1px solid; padding-right: 1em; text-align: right; max-width: 50%; } .loop-nav>div:last-child { padding-left: 1em; } .loop-nav a { display: block; word-break: break-word; } .loop-nav a:hover {} .loop-nav a[rel="prev"] {} .loop-nav a[rel="next"] {} /* === Archive-type pages === */ .nav-links { display: flex; } .pagination .page-numbers, .page-links .page-numbers, .page-links a { border: 2px solid; padding: 0 8px; min-width: 48px; height: 46px; line-height: 46px; text-align: center; display: inline-block; margin: 0 4px 0 0; } .pagination a.page-numbers {} .pagination a.page-numbers:hover, .page-links a:hover { border-color: var(--text-color); } .page-numbers.current {} .page-numbers.dots { border: 0; margin: 0; } .page-numbers.prev, .page-numbers.next { font-size: 0.875em; padding: 0 16px; line-height: 44px; } .page-numbers.next { float: right; } /* Accessibility */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .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; clip-path: none; display: block; font-size: 11pt; font-weight: bold; height: auto; top: 1em; right: 1em; padding: 1em 2em; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #main[tabindex="-1"]:focus { outline: 0; } /* === Comments pagination === */ .comments-nav {} .comments-nav a {} .comments-nav a:hover {} .comments-nav .page-numbers {} /** * Sidebars and widgets * --------------------------------------------------------------------------- */ /* ====== General ====== */ .sidebar { background: var(--widgets-color); padding: 3em 0 2em; margin-top: 3em; font-size: 0.875em; } .widget { margin-bottom: 60px; background: var(--block-color); padding: 2em 3em; border-radius: 8px; filter: drop-shadow(0px 15px 34px rgba(0, 0, 0, 0.08)); } .widget-title {} .widget form, .widget div { width: 100%; padding: 0; margin: 0; } /* ====== Specific ====== */ #sidebar-primary {} #sidebar-secondary {} #sidebar-subsidiary {} #sidebar-header {} #sidebar-before-content {} #sidebar-after-content {} #sidebar-after-singular {} /** * Comments Template * --------------------------------------------------------------------------- */ #comments-template {} /* ====== COMMENTS ======= */ #comments {} #comments-number {} /* === Comments closed message === */ .comments-closed { font-size: .875rem; background: rgba(0, 0, 0, 0.04); border-radius: 2px; color: var(--tag-color); display: inline-block; font-weight: 500; padding: .2em .65em; border-radius: 4px; } .comments-closed.pings-open {} /* === Comment list === */ ol.comment-list { list-style: none; padding-left: 0; padding-bottom: 0; margin: 0; } ol.comment-list ol.children {} /* === Individual comments */ li.comment { list-style-type: none; font-size: 13pt; } .comment-body { margin-bottom: 3em; } li.ping { margin: 0 0 20px; } li.bypostauthor {} .reply { margin: 0 0 0 80px; } /* === Avatars === */ .comment-list .avatar {} /* === Meta === */ .comment-meta { position: relative; font-size: 10pt; color: var(--meta-color); padding-bottom: 10px; } .comment-author { font-size: 110%; font-style: normal; font-weight: 600; } .comment-author cite {} .comment-meta .published {} /* === Comment text/content === */ .comment-content { margin-left: 80px; /* margin-bottom: 60px; */ } .comment-content p { padding-bottom: 10px; } /* === Reply & Edit links === */ .comment-reply-link, .comment-edit-link { font-size: .875rem; background: rgba(0, 0, 0, 0.04); border-radius: 2px; color: var(--tag-color); display: inline-block; font-weight: 500; padding: .2em .65em; border-radius: 4px; } .comment-reply-link:hover, .comment-edit-link:hover { color: black; font-weight: 600; } .comment-edit-link { float: right; margin-top: -20px; } /* ====== RESPOND (COMMENT FORM) ====== */ #respond form { margin-bottom: 60px; padding: 2em 3em; background: var(--widgets-color); border-radius: 4px; } #reply-title {} #reply-title small {} #respond .log-in-out {} #respond p { margin-bottom: 1em; } #respond label .required { color: red; } #respond input[type="text"] {} #respond input[type="text"]:focus {} #respond input[type="url"] {} #respond input[type="url"]:focus {} #respond input[type="email"] {} #respond input[type="email"]:focus {} #respond input[type="submit"] {} #respond input[type="submit"]:focus {} #respond input[type="submit"]:hover {} #respond textarea {} #respond textarea:focus {} #respond label[for=comment] { display: none; } .comment-notes, .logged-in-as { color: var(--meta-color); font-weight: 500; font-size: 0.775em; } /** * Footer * --------------------------------------------------------------------------- */ #footer { font-size: 0.875em; font-weight: 500; } #footer .site-title { text-align: left; } #footer .copyright {} #footer .credit, #footer .branding { font-size: 80%; padding: 0 0 2em; } #footer a { color: inherit; } #footer a:hover {} /** * Media Queries * --------------------------------------------------------------------------- */ @media screen and (max-width: 1080px) { /* smaller type */ body { font-size: 1rem; } /* menu in sidebar */ .menu-primary {visibility: hidden;height: 0;width: 0;} #menu-secondary-mobile { display: block; } /* image */ .thumbnail, .plural .thumbnail { } } @media screen and (max-width: 680px) { body { font-size: 0.875rem; } /* wrapper smaller padding */ .wrapper { width: 90%; } #main .wrapper { margin-left: 5%; } /* menu smaller padding */ .menu-hamburger { width: 90%; } .menu-hamburger .wrap { padding: 4em; } /* images */ .alignnone, .alignfull, .alignwide { width: 100vw; max-width: 100vw; margin-left: -5.5%; } .wp-block-embed iframe { margin: -1em 0; height: 360px; } /* .widget */ form, .widget {padding: 5%;} } /** * Clearing Floats * --------------------------------------------------------------------------- */ .clearfix::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }