/* Theme Name: SippitySup - Spring 2020 Author: Danny Cohen Author URI: http://dannycohen.design/ Version: March 2, 2020 */ @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); @import url('//fonts.googleapis.com/css?family=Roboto:400,400i,700,900&display=swap'); @import url('font/leaguespartan/stylesheet.css'); /* Yummy Icon */ @font-face { font-family: 'y-icon'; src: url('font/yummlyfont/y-icon.eot'); src: url('font/yummlyfont/y-icon.eot?#iefix') format('embedded-opentype') , url('font/yummlyfont/y-icon.svg#y-icon') format('svg') , url('font/yummlyfont/y-icon.woff') format('woff') , url('font/yummlyfont/y-icon.ttf') format('truetype'); font-weight: normal; font-style: normal } .y-icon { display: inline-block; font-family: 'y-icon' !important; font-style: normal; speak: none; font-weight: normal } /* Resets and Boilerplates */ * { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #222; font-size: 1em; line-height: 1.4;} h1, h2, h3, h4, h5, h6 {font-weight:normal;} a {text-decoration:none; outline: none;} a:hover, a:active { outline: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* FORMS */ label { cursor: pointer; } button[disabled], input[disabled] { cursor: default; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* Remove inner padding and border in FF3/4: h5bp.com/l */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ .hide {display:none !important; visibility: hidden;} hr.foot {border:0px;clear: both;display: block; overflow: hidden;visibility: hidden;width: 0px; margin:0;padding:0; height: 0px;} /* Contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* Site Styling */ ::-moz-selection { color:rgba(255,255,255,.8); background:#000; text-shadow: none;} ::selection { color:rgba(255,255,255,.8); background:#000; text-shadow: none;} a:link { -webkit-tap-highlight-color: #000; text-shadow: none;} .left, .alignleft {float:left;} .right, .alignright {float:right;} .aligncenter {margin:0 auto; display:block;} a { color: #030303; } a:hover {} img, embed, iframe, object { max-width: 100%; } body { color:#030303; font-family: "Roboto"; } .black {color:#030303;} h1, h2, h3, h4, h5, h6 { font-family:"League Spartan";} /* Layout */ #container { margin:0 auto; max-width:1040px; font-size: 14px; color: #030303; letter-spacing: 0; line-height: 20px; position: relative; min-height: 100vh;} #container .adspace {display: none;} /* Grid Info*/ .grid {width:130px;} /* But 130 + 130 = 260, plus 40 equals 300!*/ .gutter {width:40px;} /* A centered wrapper */ .section-wrapper, header, .archive-header, .blog .article-listing, .archive .article-listing, .search-results .article-listing, .front-page-articles , .archive-post-nav-links, footer { margin:0 auto; max-width:1040px; margin: 0 30px 30px;} /* Header */ header { margin:30px; color:white; background:#030303; margin-bottom:64px; padding:30px 40px; display:flex; justify-content: space-between; align-content: center; overflow: hidden;} header h1 {} header h1 a { display:block; overflow:hidden; text-indent:-99999px; width:162px; height:23.85px; background-image: url('images/SippitySupNewLogo.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; } header nav {} header nav ul {} header nav li {} header nav a {} .header-toolbar {list-style: none; display:flex;} .header-toolbar li {height:27px; width:28px; display:block; margin-left:27px;} .header-toolbar li a {display:block; background-size: contain; background-repeat: no-repeat; background-position: center center; overflow: hidden;} #header-toolbar-navigation { position: relative; z-index:99999; cursor: pointer;} #main {} /* Header Search Toolbar */ #header-toolbar-search {position: relative; } #header-toolbar-search a { position: relative; z-index:999; cursor: pointer;} #header-toolbar-search g#magnifying-glass, #header-toolbar-search #ss_header_toolbar_search_form {transition: all 0.3s ease;} #ss_header_toolbar_search_form {position: absolute; top:-6px; z-index:998; max-width:1040px; margin:0 auto; min-width:300px; opacity:0; pointer-events: none; right:0;} #ss_header_toolbar_search_form input {padding:12px; width:100%; padding-right:0; border:none !important;} #header-toolbar-search g#magnifying-glass #x-bottomtop, #header-toolbar-search g#magnifying-glass #x-topbottom {opacity:0;;} .toolbarSearchShown #ss_header_toolbar_search_form {right:0; opacity:1; pointer-events: all;} .toolbarSearchShown g#magnifying-glass {stroke:#030303;} .toolbarSearchShown svg:hover g#magnifying-glass {stroke:#b61e1e; } .toolbarSearchShown.searchFieldHasValue g#magnifying-glass{stroke: #0493C2; } .toolbarSearchShown.searchFieldHasValue svg:hover g#magnifying-glass { stroke: #0493C2; } /* Site Navigation */ #site_nav {opacity:0; pointer-events: none; visibility: hidden; position: absolute; top:0; right:30px; height: 100vh; background:rgba(255, 255, 255, 0.84); color:#030303; transition: all 0.15s ease; z-index:99998; font-family:"League Spartan"; max-width:1040px; padding:30px 0px; margin:0 auto; min-width:340px; -webkit-backdrop-filter: blur(0px); min-height:100vh; height:100vh; overflow: hidden;} .navigationShown #site_nav {opacity:1; pointer-events: all; visibility: visible; top:0; right: 30px; -webkit-backdrop-filter: blur(5px); } .site-nav-wrapper { padding:30px 40px; position:relative; top:0;margin-top:80px; height: calc(100vh - 120px); overflow-y: scroll; right:-100vw; transition: all 0.3s ease; } .navigationShown .site-nav-wrapper {right:0;} body.navigationShown { width:100vw; height:100vh; overflow: hidden;} g#Hamburger line {transition: all 0.3s ease; transform: rotate(0deg); transform-origin: 14% 50%; position: relative; } .navigationShown g#Hamburger line {stroke:#030303; position: fixed;} .navigationShown g#Hamburger #Line1 { transform: rotate(45deg); } .navigationShown g#Hamburger #Line2 {opacity: 0;} .navigationShown g#Hamburger #Line3 { transform: rotate(-45deg); } #site_nav nav {margin-bottom:52px;} #site_nav nav ul {list-style: none; width:100%; } #site_nav nav ul li {margin-bottom: 18px; text-align: right;} #site_nav nav a {font-size: 18px; color: #030303; letter-spacing: 0; text-align: right; display: inline-block; border-bottom: 4px solid transparent;} #site_nav nav a:hover {border-bottom: 4px solid;} /* Front Page */ .front-page-articles { margin-bottom: 60px;} /* Flickity */ .front-page-articles.flickity-enabled .front-page-article {width:100vw;} .front-page-articles.flickity-enabled .flickity-prev-next-button {top:100%; font-family: "League Spartan"; transform: translateY(0); width:30%; } .front-page-articles.flickity-enabled .flickity-prev-next-button.previous:after {content:"Newer"; left:50%; } .front-page-articles.flickity-enabled .flickity-prev-next-button.next:before {content:"Older"; right:50%;} .front-page-articles.flickity-enabled .flickity-prev-next-button:after, .front-page-articles.flickity-enabled .flickity-prev-next-button:before { position: absolute; vertical-align: middle; padding: 15px; display: block; top: 0; } .front-page-articles.flickity-enabled .flickity-button:disabled {opacity: 0;} .front-page-articles.flickity-enabled .flickity-prev-next-button .flickity-button-icon {left:auto; width:auto; position: relative;} .front-page-article { margin:0 auto; margin-bottom: 40px; display: block;} .front-page-article-image {max-width: 380px; width:100%; height:auto; margin:0 auto 48px; display: block; pointer-events: none; transition: opacity 0.1s ease; } .front-page-article:hover .front-page-article-image {opacity: .9;} .front-page-article h2 {font-size: 24px; color: #030303; letter-spacing: 0; text-align: center; line-height: 29px; margin-bottom: 20px;} .front-page-article h4 {font-size: 13px; color: #030303; letter-spacing: 1.22px; text-align: center; text-transform: uppercase; } .front-page-article h4 span {border-bottom:4px solid transparent;} .front-page-article:hover h4 span { border-bottom: 4px solid;} /* Archives */ .archive-header {} .archive-header h2 {font-size: 26px; color: #000000; letter-spacing: 0; text-align: center; line-height: 40px; margin-bottom: 20px;} .archive-header h2 .archive-title-prefix {display: block; font-size:14px; line-height: 40px; text-transform: uppercase; letter-spacing: .25em;} .archive-header h2 .pagination-info {} .archive-header-category-filter { margin:0 auto 40px; position: relative; width:340px; } .archive-header-category-filter h4 {text-align: center; margin:0 auto;} .archive-header-category-filter h4 a {} .archive-header-category-filter a {font-family: LeagueSpartan-Bold, 'LeagueSpartan-Bold', 'League Spartan'; font-weight:900; font-size: 20px; color: #726D6D; letter-spacing: 0; text-align: center; line-height: 40px; opacity: .84; } .archive-header-category-filter ul {margin:0 auto; text-align: center; list-style: none; top:40px; position: absolute; width:100%; background:rgba(255, 255, 255, 0.91); border:2px white solid; width:100%; border-radius: 4px; overflow: hidden; opacity:0; transition: all 0.1s ease; pointer-events: none; z-index: 10;} .archive-header-category-filter:hover ul {opacity:1; pointer-events: all;} .archive-header-category-filter ul li { margin:0 auto; text-align: center; width:100%; } .archive-header-category-filter ul li a {display: block;} .archive-header-category-filter ul .current-cat a, .archive-header-category-filter .current-menu-item a{color:#030303;} .archive-header-category-filter ul .current-cat a:after, .archive-header-category-filter .current-menu-item a:after {content:" \2714"} .archive-header-category-filter ul li a:hover {color:#030303;} .archive-post-nav-links {display: flex; margin-top:30px;margin-bottom: 30px; } .archive-post-nav-links div { flex-grow: 1; flex-basis: 0;} .archive-post-nav-links .previous {text-align: left;} .archive-post-nav-links .next {text-align: right;} .archive-post-nav-links a { display:block; font-size:16px; font-weight:bold; font-family: LeagueSpartan-Bold, 'LeagueSpartan-Bold', 'League Spartan'; font-weight:900; background-repeat: no-repeat; background-size: 10px; vertical-align: middle; padding-top: 6px;} .archive-post-nav-links .previous a { padding-left: 20px; background-image:url('images/left-arrow.svg'); background-position: left center;} .archive-post-nav-links .next a { padding-right: 20px; background-image:url('images/right-arrow.svg'); background-position: right center;} .archive-post-nav-links .pagination-info { text-align:center; font-size:16px; font-weight:bold; font-family: LeagueSpartan-Bold, 'LeagueSpartan-Bold', 'League Spartan'; font-weight:900; background-repeat: no-repeat; background-size: 10px; vertical-align: middle; padding-top: 6px; } /* Article Navigation and Listing */ .article-listing {display:flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; position: relative; z-index: 1;} .article-listing-item {display:block; width:calc( (100% - 80px) /3); margin-bottom:40px; position: relative; flex-basis: 1; transition: all 0.3s ease; -webkit-backface-visibility: hidden;} .article-listing-item:hover {opacity: .85; } .article-listing-caption { display:block; background:#030303; font-size: 9px; color: #FFFFFF; letter-spacing: 0; padding:8px; margin:0; text-transform: uppercase; letter-spacing: .1em; box-sizing: border-box;} .article-listing-item-image {max-width:100%; height:auto;pointer-events: none; margin:0 auto; display: block;} /* Article Listing in Archives, Blog, and Search Results */ .archive .article-listing .article-listing-caption, .blog .article-listing .article-listing-caption {display: none;} .post-type-archive-sippity_recipe .article-listing .article-listing-caption {position: absolute; width:100%; top:0; z-index: 3; display: block;} .post-type-archive-sippity_recipe .article-listing .article-listing-item-image {position: relative; top:0; z-index:1;} .search-results .article-listing .article-listing-caption {position: absolute; width:100%; top:0; z-index: 3; display: none;} .search-results.post-type-archive-sippity_recipe .article-listing .article-listing-caption {display: block;} .search-results .article-listing .article-listing-item-image {position: relative; top:0; z-index:1;} /* Article Style */ article { width:640px; margin:0 auto; font-size: 11px; line-height: 220%; } .article-header {} .article-header .article-title { font-size: 2.6em; line-height:150%; color: #030303; letter-spacing: 0; text-align: center; margin-bottom: 1.4em; } .article-header .inline-parenthesis {display:inline-block;} .article-byline {font-size: 14px; color: #030303; letter-spacing: 0; text-transform: uppercase; text-align: center; display: block; margin-bottom: 30px;} .article-content { width:100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 40px; grid-template-areas: "a b"; min-height: 0; /* NEW */ min-width: 0; font-size:1.4em;} .article-content-featured-image { order:1; grid-area:a;} .article-content-copy {grid-area:b; order:999; position: relative;} .article-content-full-width {width:640px; position: relative; left:0; grid-column: 1 / -1;} .article-content-copy img.aligncenter.size-large, .article-content-copy img.size-full.aligncenter, .article-content-copy .recipe, .article-content-copy .wp-block-image img[sizes] , .article-content-copy img.size-full.alignnone { display: block; position: relative; left: calc(-100% - 40px); width:calc(200% + 40px); max-width: calc(200% + 40px); } .article-content p a, .article-content li a, .article-content blockquote a {font-weight:bold; text-decoration: underline;} .article-content p a:hover, .article-content li a:hover, .article-content blockquote a:hover {text-decoration: none;} .article-content p, .article-content ul, .article-content ol, .article-content blockquote, .article-content img { margin-bottom:1em; } .article-content h3 {margin-bottom: 1em;} .article-content p {} .article-content ul , .article-content ol {padding-left:20px;} .article-content blockquote {} .article-content img { max-width:100%; height:auto; } .article-content img.alignleft { margin:0 1em 1em 0; } .article-content img.alignright { margin:0 0 1em 1em; } .article-content .sharedaddy {display: none;} .article-footer { clear:both; } .article-footer .article-listing {display:flex; margin-top:90px;} .article-footer .article-listing-item img { max-height: 280px; } /* Article Sharing Buttons */ .article-share-buttons, .sd-content ul {list-style:none; display:flex; margin:0 auto; margin-bottom: 30px; justify-content: center;} .article-share-buttons li , .sd-content ul li {} .sd-content ul li.shared-end , .sd-content ul a.share-more {display: none;} .article-share-buttons a , .sd-content ul a {color:white; border-radius:50%; display:block; font-size:15px; width:15px; line-height:0; text-align:center;padding:10px 10px; margin:0 .5em; } .article-share-buttons a:hover , .sd-content ul a:hover { -webkit-transform: scale(1.1); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.1); /* IE 9 */ transform: scale(1.1); /* Firefox 16+, IE 10+, Opera */} .article-share-buttons a[href*="pinterest"] , .sd-content ul li.share-pinterest a {background-color:#cb2027;} .article-share-buttons a[href*="twitter"] , .sd-content ul li.share-twitter a {background-color:#00aced;} .article-share-buttons a[href*="facebook"] , .sd-content ul li.share-facebook a {background-color:#3b5998;} .article-share-buttons a[href*="instagram"] , .sd-content ul li.share-instagram a {background-color:#517fa4;} .article-share-buttons a[href*="stumbleupon"], .sd-content ul li.share-stumbleupon a, .sd-content ul li.share-custom-stumbleupon a {background-color:#eb4924;} .sd-content ul li.share-custom-stumbleupon span {background:none !important; background-image: none !important;} .article-share-buttons a[href*="google"] , .sd-content ul li.share-google-plus-1 a {background-color:#dd4b39;} .article-share-buttons a[href*="yummly"] , .sd-content ul li.share-custom-yummly a {background-color:#e16120;} .sd-content ul li.share-custom-yummly span {background:none !important; background-image: none !important;} .article-share-buttons a[href*="mailto"] , .sd-content ul li.share-email a {background-color:#999;} /* Pages */ article.page .article-content {display:block;} article.page .article-byline {display: none;} article.page .article-footer .article-listing {display:none;} article.page .article-content p, article.page .article-content ul, article.page .article-content ol, article.page.article-content blockquote, article.page.article-content img { margin-bottom:1.5em; } article.page .article-content-copy img.aligncenter.size-large, article.page .article-content-copy img.size-full.aligncenter, article.page .article-content-copy .recipe {left:0; width:auto; max-width:100%;} article.page .article-content-featured-image img {margin-left: auto; margin-right: auto; display: block; margin-bottom: 30px;} /* Beverages */ .article-content-wine , .article-content-copy a.wine-pairing {border:thin solid #E9E9E9; box-sizing: border-box; padding:20px; order:10; grid-area:a;} .article-content-copy a.wine-pairing:hover { border:thin solid #c4c4c4; } .article-content-copy a.wine-pairing {display: block; margin-bottom: 15px; font-size:90%; overflow: hidden;} .article-content-copy a.wine-pairing .wine-pairing-headline {text-align: center; font-family: "League Spartan"; text-transform: uppercase; padding:4px 7px; font-size: 10px; color: #030303;} .article-content-copy a.wine-pairing .wine-pairing-name {margin-bottom: .5em;} .article-content-copy a.wine-pairing .wine-pairing-description , .article-content-copy a.wine-pairing .wine-pairing-author , .article-content-copy a.wine-pairing .wine-pairing-price , .article-content-copy a.wine-pairing .wine-pairing-pairs-well-with{font-size:12px;} .article-content-copy a.wine-pairing .wine-pairing-description {margin-bottom: 1em;} .article-content-copy a.wine-pairing .wine-pairing-pairs-well-with {font-style: italic;} .article-content-copy a.wine-pairing img {max-width: 30%; height: auto; padding-left:3%;} /* Recipes */ article.sippity_recipe .article-content {display:block;} article.sippity_recipe .article-footer .article-listing {display:none;} article.sippity_recipe .article-content p, article.page .article-content ul, article.page .article-content ol, article.page.article-content blockquote, article.page.article-content img { margin-bottom:1.5em; } article.sippity_recipe .article-content-copy img.aligncenter.size-large, article.sippity_recipe .article-content-copy img.size-full.aligncenter, article.sippity_recipe .article-content-copy .recipe {left:0; width:auto; max-width:100%;} article.sippity_recipe .recipe-title , article.sippity_recipe .article-content-featured-image, article.sippity_recipe .recipe-header .byline {display: none;} article.sippity_recipe .recipe-header .print-this-recipe {width:15px; height:15px;} .article-content-copy .recipe {background:#E9E9E9; position: relative; box-sizing: border-box; padding:20px; order:10; grid-area:a;} .article-content-copy .recipe:before {display: block; position: absolute; content:"Recipe"; transform: rotate(-90deg); top:33px;left:-60px; background:#E9E9E9; font-family: "League Spartan"; text-transform: uppercase; padding:4px 7px; font-size: 10px; color: #030303; width:80px; height:20px; line-height: 24px; vertical-align: middle; letter-spacing: 4px; text-align: center;} .article-content-copy .recipe-view-original-recipe.button {display: none;} .article-content-copy .recipe.embedded .recipe-content img {display: none;} .recipe, .article-content-copy .recipe {margin-bottom: 30px;} .recipe-header {display: flex; flex-wrap: wrap; position: relative; margin-bottom: 30px;} .recipe-header .recipe-title {width:100%; font-family: "League Spartan";font-size:23px;line-height: 150%; padding-right:74px;} .recipe-header .byline {width: 100%;} .recipe-header .print-this-recipe {position: absolute; right:0; top:0; padding:1em; overflow: hidden; width:15px; height:15px; background-image: url('images/print.svg'); background-repeat: no-repeat; background-size: contain; text-indent: -9999px;} .recipe-header .print-this-recipe:hover {opacity: .8;} .recipe-header .recipe-servings, article .recipe-header .recipe-source, article .recipe-header .recipe-date {width:calc(100%/3);} .recipe-header .recipe-servings strong, article .recipe-header .recipe-source strong, article .recipe-header .recipe-date strong {display: block; font-size:13px;} .recipe h4 {font-size:14px; font-family: "League Spartan"; margin-bottom: 1em; text-transform: uppercase;} .recipe-notes {display: flex; margin-bottom: 30px;} .recipe-notes .notes-content {padding-left:1em;} .recipe .recipe-directions {margin-top: 30px;} /* Recipe Search Form */ #recipe_search_form {max-width:640px; margin:0 auto; display:flex; border:thin solid #E9E9E9; box-sizing: border-box; padding:15px; align-items: center; align-content: center; justify-content: space-between; margin-bottom: 30px; } #recipe_search_form fieldset {padding:5px; } #recipe_search_form fieldset select { font-family:inherit; background:white; color: #030303; border:2px solid rgba(151, 151, 151, 0.34); box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.30); padding:7px; font-size: 14px; letter-spacing: 0; border-radius: 3px; overflow: hidden; } /* Comments */ .comments { width:calc(70% - 40px); margin-left: calc(30% + 40px); margin-top:40px; } h3#comments {font-size: 18px; color: #030303; letter-spacing: 0; line-height: 40px; margin-bottom: 20px;} ol#commentlist {list-style: none; margin-bottom: 80px;} ol#commentlist li { margin-bottom: 30px;} ol#commentlist .children {padding-left:60px; list-style:none;} .comment-meta {display: flex; align-content: space-between; align-items: center; font-size:11px; margin-bottom:26px;} .comment-meta span:first-child {font-size: 14px; color: #000000; letter-spacing: 0; line-height: 14px; font-family: "League Spartan"; } .comment-meta span:first-child {flex-grow: 1;} .comment-body {display:flex; } .comment-body .avatar {width:50px; border-radius: 50%; margin-right:10px;} .comment-text {font-size: 14px; color: #000000; letter-spacing: 0; line-height: 20px;} .comment-text p {margin-bottom: .5em;} .comment .reply {text-align: right;} .comment .comment-reply-link { font-family: "League Spartan"; text-transform: uppercase; font-size:9px; letter-spacing: 3px; line-height: 1; padding:9px 7px; text-align: center; border-radius: 3px; } .comment-respond { } .comment-respond h3 {font-size: 18px; color: #000000; letter-spacing: 0; line-height: 40px;} .comment-respond .logged-in-as {font-size:11px; margin-bottom: .5em;} .comment-respond form label {display: none;} .comment-respond textarea {width:100%; margin-bottom: 10px; min-height: 150px; box-sizing: border-box;} /* Forms */ form {} form fieldset {} form label {display:block;} form input:not([type="submit"]), form textarea { font-family:inherit; background:white; color: #030303; border:2px solid rgba(151, 151, 151, 0.34); box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.30); padding:7px; font-size: 14px; letter-spacing: 0; border-radius: 3px; overflow: hidden;} form input:focus, form textarea:focus { border:2px solid rgba(151, 151, 151, 0.84); } form input[type="submit"], button[type="submit"] { background:black; color:white; font-family: "League Spartan"; text-transform: uppercase; font-size:90%; letter-spacing: 3px; line-height: 1; padding:9px 7px; text-align: center; border-radius:3px;} /* Footer */ footer {background:white; color: #030303; margin:90px 30px 30px 30px;} .home footer {display: none;} footer h1 {display: block; margin:0 auto; margin-bottom: 40px;} footer h1 a {display:block; margin:0 auto; text-align: center;} footer nav { margin-bottom: 40px; padding:0 40px; } footer nav ul {list-style:none; display:flex; align-items: center; justify-content: space-evenly; align-content: center;} footer nav ul li {padding:0 10px;} footer nav ul li a { font-family:"League Spartan"; text-transform: uppercase; padding:0px; text-align: center; display: inline-block; border-bottom: 4px solid transparent;} footer nav ul li a:hover {border-bottom: 4px solid;} footer .footer-colophon {display:block; text-align: right; font-weight: 100; margin: 30px 0;} footer .footer-colophon a {text-decoration: underline;} footer .footer-colophon a:hover {text-decoration: none;} footer form.search-form label {display: flex; align-items: center; justify-content: space-evenly; margin-top:-7px;} footer form.search-form label input {margin:0 3px; max-width: 100px;} /* 404 */ h2.error404 {margin:60px auto; font-size:64px; line-height: 140%; letter-spacing: .1em; text-align: center;} /* Reponsive */ @media (max-width: 700px) { #site_nav {min-width: calc(100vw - 30px); } .navigationShown #site_nav {right:15px;} .section-wrapper, header, .archive-header, .archive .article-listing, .front-page-articles {margin:0 15px;} header {margin:15px 15px 30px;} #ss_header_toolbar_search_form { min-width: 220px;} .front-page-articles {width:100%; margin:0 auto 60px;} .front-page-articles.flickity-enabled .front-page-article {margin: 0 30px; width: 100vw; box-sizing: border-box;} .front-page-article h2 { padding: 0 30px;} article {width:auto; max-width:100%; margin:0 15px;} .article-content {flex-wrap: wrap; display: flex;} .article-content-copy img.aligncenter.size-large, .article-content-copy img.size-full.aligncenter, .article-content-copy .recipe, .article-content-copy .wp-block-image img[sizes] , .article-content-copy img.size-full.alignnone {max-width: 100%; width:auto; margin-left:auto; margin-right:auto; left:0; position: relative; } .comments {width: 100%; margin:0 auto;} .article-listing-item { width: calc( (100% - 40px) / 2); } .article-listing-item[rel="Related"] {display: none;} article.sippity_recipe .article-content-featured-image {display: block;} .recipe-content img {display: none;} .article-content-copy .recipe:before {display: none;} .recipe-header {justify-content: space-between;} .recipe-header .recipe-servings, article .recipe-header .recipe-source, article .recipe-header .recipe-date {width: auto; } .recipe-header .print-this-recipe.button { display: block; order: 99; position: relative;} footer { margin:30px; padding:20px;} footer nav {margin-bottom: 40px; } footer nav ul {list-style:none; align-items: center; display:block;} footer nav ul li {display:block;} footer nav ul li a { font-family:"League Spartan"; text-transform: uppercase; padding:5px 10px; text-align: center; display: block;} footer form.search-form label {margin-top:0; padding: 5px 10px;} footer form.search-form label input {width:auto; max-width: 700px;} } /* PRINT STYLES */ @media print { .advertisement, .sharedaddy {display: none;} a:link:after { content: " ( " attr(href) " ) "; font-size: 90%; display:block; } .title:after, .subtitle:before {content:""; display:none;} body.recipe-printing {background:white; width: auto; border: 0; margin: 0 5%; padding: 0; float: none !important; font-family:Georgia; font-size:12pt; } body.recipe-printing:before {content:"SippitySup"; font-size:130%; font-weight:bold;} body.recipe-printing:after {content:"Copyright © 2008-2020"; padding-top:2em; font-size:90%; font-weight:bold;} body.recipe-printing footer, body.recipe-printing header, body.recipe-printing #container , body.recipe-printing .advertisement {display: none !important;} body.recipe-printing #main , body.recipe-printing #container {display: block; width:100%; border:none; box-shadow:0px 0px 0px rgba(0,0,0,0); } #print-this-recipe { box-shadow:0px 0px 0px rgba(0,0,0,0); border:none; display:block !important;} #print-this-recipe img {max-height: 200px !important; max-width: 200px !important;} #print-this-recipe h4 {font-weight:bold; font-size:100%; margin-bottom:.2em;} #print-this-recipe p {margin-bottom:1em;} #print-this-recipe .recipe-title a:link:after { font-size:12pt;} #print-this-recipe .view-original-recipe-wrapper , #print-this-recipe .print-this-recipe {display:none !important;} }