/* Theme Name: MCE Theme URI: https://makecookingeasier.pl Description: Szablon MCE 2017 Version: 0.1 Author: Emil Kruszy Skokowski Author URI: http://kruszy.com Tags: Blank, HTML5, CSS3 License: MIT License URI: http://opensource.org/licenses/mit-license.php */ @import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,700,700i&subset=latin-ext'); /*------------------------------------*\ MAIN \*------------------------------------*/ /* global box-sizing */ *, *:after, *:before { -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* html element 62.5% font-size for REM use */ html { font-size:62.5%; } body { font:400 16px/1.4 'Cormorant Garamond', serif; color:#000; } /* clear */ .clear:before, .clear:after { content:' '; display:table; } .clear:after { clear:both; } .clear { *zoom:1; } img { max-width:100%; vertical-align:bottom; height: auto; } a { color:#9d9d9b; text-decoration:none; } a:hover { color:#000; } a:focus { outline:0; } a:hover, a:active { outline:0; -webkit-transition: all 0.3s; /* Safari */ transition: all 0.3s; } input:focus { outline:0; border:1px solid #ccc; } /*------------------------------------*\ STRUCTURE \*------------------------------------*/ /* wrapper */ .wrapper { max-width:710px; width:100%; margin:0 auto; position:relative; } body.category .wrapper { max-width: 960px; } /* header */ .header { margin-top: 0px; margin-bottom: 60px; } .social-media { text-align: right; margin-right: 20px; right: 0; margin-bottom: 0; } .social-media li { list-style-type: none; display: inline-block; margin: 0 5px; } .social-media li a { display: block; height: 20px; width: 20px; background-size: cover; -moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 0.4s; -ms-transition: all 0.4s ease; transition: all 0.4s ease; } .social-media li a:hover {opacity: 0.7;} .facebook { background-image: url('img/facebook.jpg'); } .instagram { background-image: url('img/instagram.jpg'); } .pinterest { background-image: url('img/pinterest.jpg'); } .form-control { width: 0px; color: #fff; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; -moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: width 0.4s; -ms-transition: width 0.4s ease; transition: width 0.4s ease; overflow: hidden; right: -34px; position: relative; padding: 6px 0 6px 34px; top: -6px; z-index: 9999; width: 0px; } .navbar-form .form-group { position: relative; } .navbar-form .form-group input:hover, .navbar-form .form-group input:focus { padding: 6px 10px; width: 200px; top: -6px; width: 200px; color: #333; } .loupe { display: inline-block; background-image: url('img/loupe.jpg'); background-size: cover; width: 19px; position: relative; height: 20px; } /* logo */ .logo { text-align: center; margin: 20px auto 0 auto; max-width: 480px; } .logo-img { } @media only screen and (max-width: 500px) { } .hr { width: 960px; max-width: 100%!important; height: 26px; display: block; background-size: cover; background-image: url(img/hr.jpg); margin: 25px auto; } /* nav */ .nav { text-align: center; margin-top: 30px; cursor: pointer; } .nav ul { padding: 0; -webkit-padding-start: 0; } .menu-item { display: inline-block; list-style-type: none; } .menu-item a { padding: 0 30px; font-size: 20px; text-transform: lowercase; } /* article */ article { margin: 0 auto 150px auto; } .grid article { margin:0 0 50px 0; } article .thumb { text-align: center; height: auto; display: block; margin: 0 auto; } article h2, .single h1 { text-align: center; font-size: 36px; color: #000; display: block; font-weight: 400; line-height: 29pt; margin: 0 auto 30px auto; } article h2 a { color: #000; } .article-mini { width:50%; display: block; padding: 0 30px; min-height: 300px; } .article-mini h2 { font-size: 24px; line-height: 23pt; margin-bottom: 10px; margin-top: 10px; } .date { display: block; margin: 0 auto; text-align: center; font-size: 20px; color:#858585; } .article-mini .date { font-size: 14px; } .comments { text-align: center; margin: 0 auto; display: block; } .comments a { display: inline-block; padding: 2px 10px; border: 1px solid #ddd; } .nav-pills { list-style-type: none; text-align: center; -webkit-padding-start: 0; border-top: 1px solid #dadada; padding-top: 10px; } .nav-pills li { display: inline-block; position: relative; margin: 0 10px; } .pagination { text-align: center; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fb-container { display: none; outline:0; cursor: pointer; } .fb-social-post:hover .fb-container, .fb-social-post:focus .fb-container{ display: inline-block; position: absolute; z-index: 100; left: -35px; padding: 10px; top: 17px; background-color: #fff; -webkit-animation: fadeIn 0.5s; animation: fadeIn 0.5s; box-shadow: 1px 1px 2px #f4f4f4; cursor: pointer; } /* single */ .single h1 a { color: #000; } /* sidebar */ .sidebar { } /* footer */ .footer { text-align: center; margin-top: 30px; } /* komentarze */ .commentlist2 li, .commentlist2 ul { list-style-type: none; } .commentlist2 > li { float: left; width: 100%; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #aeaeae; } .commentlist2 .children, .depth-2 { margin-top: 15px; float: left; width: 100%; } h3#comments { margin-top: 100px; margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: 400; } .related-posts { margin: 80px 0; } .related-posts h2 { text-align: center; margin-bottom: 20px!important; } #comment { border: 1px solid #aeaeae; padding: 5px 10px; } .vcard img { width: 64px; } input#submit { background: 0 none; -webkit-appearance: none; border: 1px solid #aeaeae; border-radius: 0; padding: 5px 20px; -moz-transition: all 0.5s; -webkit-transition: all 0.5; -o-transition: width 0.5s; -ms-transition: width 0.5s ease; transition: width 0.5s ease; } input#submit:hover { opacity: 0.5; } /*------------------------------------*\ ADMIN \*------------------------------------*/ /*------------------------------------*\ IMAGES \*------------------------------------*/ /*------------------------------------*\ TYPOGRAPHY \*------------------------------------*/ /*------------------------------------*\ RESPONSIVE \*------------------------------------*/ @media only screen and (min-width:320px) { } @media only screen and (max-width:760px) { html { margin: 0!important; } body { padding: 20px; font:400 18px/1.4 'Cormorant Garamond', serif!important; } .article-mini { width: 100%; padding: 0; } .hr {width:100%; max-width: 100%;} .social-media { position:static; margin: 0; -webkit-padding-start: 0; } .navbar-form .form-group input:hover,.navbar-form .form-group input:active, .navbar-form .form-group input:focus { width: 146px; top: -5px; padding: 6px 2px; right: 0; } #cssmenu > ul > li { display: block; } .social-media li:first-child { margin: 0; } #respond input, #respond textarea { width: 100%; } } @media only screen and (min-width:768px) { } @media only screen and (min-width:1024px) { } @media only screen and (min-width:1140px) { } @media only screen and (min-width:1280px) { } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:144dpi) { } /*------------------------------------*\ MISC \*------------------------------------*/ ::selection { color: #fff; background: #dba8b9; text-shadow:none; } ::-webkit-selection { color: #fff; background: #dba8b9; text-shadow:none; } ::-moz-selection { color: #fff; background: #dba8b9; text-shadow:none; } /*------------------------------------*\ WORDPRESS CORE \*------------------------------------*/ .alignnone { margin:5px 20px 20px 0; } .aligncenter, div.aligncenter { display:block; text-align: center; margin:5px auto 5px auto; } .alignright { float:right; margin:5px 0 20px 20px; } .alignleft { float:left; margin:5px 20px 20px 0; } a img.alignright { float:right; margin:5px 0 20px 20px; } a img.alignnone { margin:5px 20px 20px 0; } a img.alignleft { float:left; margin:5px 20px 20px 0; } a img.aligncenter { display:block; margin-left:auto; margin-right:auto; } .wp-caption { background:#FFF; border:1px solid #F0F0F0; max-width:96%; padding:5px 3px 10px; text-align:center; } .wp-caption.alignnone { margin:5px 20px 20px 0; } .wp-caption.alignleft { margin:5px 20px 20px 0; } .wp-caption.alignright { margin:5px 0 20px 20px; } .wp-caption img { border:0 none; height:auto; margin:0; max-width:98.5%; padding:0; width:auto; } .wp-caption .wp-caption-text, .gallery-caption { font-size:11px; line-height:17px; margin:0; padding:0 4px 5px; } .sticky { } .bypostauthor { } /*------------------------------------*\ PRINT \*------------------------------------*/ @media print { * { background:transparent !important; color:#000 !important; box-shadow:none !important; text-shadow:none !important; } a, a:visited { text-decoration:underline; } a[href]:after { content:" (" attr(href) ")"; } abbr[title]:after { content:" (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content:""; } pre,blockquote { border:1px solid #999; page-break-inside:avoid; } thead { display:table-header-group; } tr,img { page-break-inside:avoid; } img { max-width:100% !important; } @page { margin:0.5cm; } p, h2, h3 { orphans:3; widows:3; } h2, h3 { page-break-after:avoid; } } /* MENU */ #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { } #cssmenu { } #cssmenu, #cssmenu > ul > li > ul > li a:hover { } #cssmenu > ul { list-style: inside none; padding: 0; margin: 0; } #cssmenu > ul > li { list-style: inside none; padding: 0; margin: 0; position: relative; } #cssmenu > ul > li > a { } #cssmenu > ul > li > a:hover { } #cssmenu > ul > li:first-child > a { } #cssmenu > ul > li > a:after { } #cssmenu ul li.has-sub:hover > a:after { top: 0; bottom: 0; } #cssmenu > ul > li.has-sub > a:before { } #cssmenu > ul > li.has-sub:hover > a:before { top: 19px; } #cssmenu ul li.has-sub:hover > a { background: #fff; border-color: #fff; padding-bottom: 13px; padding-top: 13px; top: -1px; z-index: 999; } #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div { display: block; } #cssmenu ul li.has-sub > a:hover { } #cssmenu ul li > ul, #cssmenu ul li > div { display: none; width: auto; position: absolute; top: 31px; font-size: 14px; padding: 10px 0; background: #fff; border-radius: 0 0 5px 5px; z-index: 999; } #cssmenu ul li > ul { width: 200px; } #cssmenu ul li > ul li { display: block; list-style: inside none; padding: 0; text-align: left; margin: 0; position: relative; } #cssmenu ul li > ul li a { margin: 6px 0; display: block; font-size: 14px; } #cssmenu ul ul a:hover { } #cssmenu > ul > li.has-sub > a:hover:before { } .hr{ max-width:100%; }