/* Theme Name: BloggingLove Theme URI: Author: Ravi Chahar Author URI: https://www.blogginglove.com Version: 1.1 Description: BloggingLove is developed to provide the beautiful design and a better user experience. It has custom header option to display your logo and two navigation menus to add your categories and pages. There are multiple widgets which can be used to display the latest posts, simple text, comments etc. BloggingLove also supports language translation. License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: blogginglovetheme Domain Path: /languages Tags: two-columns, right-sidebar, flexible-header, custom-colors, custom-header, custom-menu, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready */ body { font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1.6em; color: #333; margin: 0 !important; box-sizing: border-box; background-color: #ececec; } ::selection { background: grey; } a:link, a:visited { color: #006ec3; text-decoration: none; } p { line-height: 2em; text-align: justify; } h1, h2, h3, h4, h5, h6 { margin: 0 0 10px 0; font-weight: 300; line-height: 1.3em; } /* General Layout */ .container { max-width: 1230px; margin: 0 auto; padding: 10px; box-sizing: border-box; margin-top: 3em; margin-bottom: 30px; } /* Content Area */ .post-info { color: #b1bdbf; } .post, .post1 { margin: 0 0 35px 0; border-bottom: 2px solid #efefef; } .post h1 { font-size: 35px; color: #1e1e1e; } .post-single h2 { font-size: 34px; font-weight: 400; color: #1e1e1e; } .post-single h3 { font-size: 34px; font-weight: 400; color: #1e1e1e; } .post-single h4 { font-size: 34px; font-weight: 400; color: #1e1e1e } .post-single h5 { font-size: 34px; font-weight: 400; color: #1e1e1e } .post-single h6 { font-size: 34px; font-weight: 400; color: #1e1e1e } .post h1 a { font-size: 36px; color: #1e1e1e; text-decoration: none; } .post h1 a:hover { color: #00bcd4; } .post-single { margin-bottom: 20px; } .post-single h1 { font-size: 36px; color: #1e1e1e; } .post-page { margin-bottom: 30px; } .post-page h1 { font-size: 36px; color: #1e1e1e; text-align: center; padding: 10px; border-bottom: 2px solid #5ec2ed; } .post-page h2{ font-size: 34px; font-weight: 400; color: #1e1e1e } .post-page h3{ font-size: 34px; font-weight: 400; color: #1e1e1e } .post-page h4{ font-size: 34px; font-weight: 400; color: #1e1e1e } .post-page h5{ font-size: 34px; font-weight: 400; color: #1e1e1e } .post-page h6{ font-size: 33px; font-weight: 400; color: #1e1e1e } /* Page Layout */ .post.has-thumbnail h1 a { font-size: 36px; text-decoration: none; line-height: 1.3em; color: #1e1e1e; } .post.has-thumbnail h1 a:hover { color: #00bcd4; } .post.has-thumbnail p.post-info { padding:0; } .post1 h1 a{ font-size: 36px; text-decoration: none; line-height: 1.3em; color: #1e1e1e; } .post1 h1 a:hover { color: #00bcd4; } a.read-button { background-color: #1e1e1e; color: white; padding: 3px 0; text-decoration: none; float: right; margin: 10px 0 35px 5px; border-radius: 3px; Width: 100%; text-align: center; } .post-para a.read-button:hover{ background-color: #00bcd4; } /* Clearfix */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* Featured Post Styles */ /* Aside Styles */ .post-aside, .post-link { font-size: 14px; background-color: green; padding: 20px; border-radius: 5px; color: white; border-bottom: none; } .mini-meta { font-size: 10px; margin: 0; color: yellow; display: block; } /* Header */ .site-header { border-bottom: none; text-align: center; border-top: 3px solid #1e1e1e; background-color: white; } .site-header h1 { padding-top: 0.5em; font-size: 30px; font-weight: 900; } h5#head_tagline1 { font-size: 14px; padding-bottom: 1em; } .site-header a { color: #1e1e1e; } /* Footer */ .site-footer { overflow: hidden; color: white; } /* Footer Widget Area */ .footer-widgets { padding: 50px 40px 30px; margin-right: -40px; background-color: #1e1e1e; } .footer-widget-area { width: 30%; float: left; box-sizing: border-box; margin-right: 2%; } .widget-item { padding: 0 20px; margin-bottom: 20px; } .widget-item ul li { list-style-type: none; border-bottom: 1px solid #afa5a5; padding-bottom: 15px; margin-bottom: 20px; } .widget-item ul { padding: 0; font-size: 15px; line-height: 1.5em; } .widget-item ul li a { text-decoration: none; color: #7f7f7f; } .widget-item ul li a:hover { color: #5ec2ed; } #footer_text { background-color: #262626; margin: 0; color: white; padding: 5px 10px; text-align: center; box-sizing: border-box; } #footer_text a{ text-decoration: none; color: #00bcd4; } #footer_text a:hover{ color: #5ec2ed; } /* Navigation menus */ .site-nav ul { margin: 0; padding: 0;} .site-nav ul:before, .site-nav ul:after { content: ""; display: table; } .site-nav ul:after { clear: both; } .site-nav ul { *zoom: 1; } .site-nav ul li { list-style-type: none; } .site-nav ul li a:link, .site-nav ul li a:visited { display: block; } .site-nav ul ul { position: absolute; left: -999em; } .site-nav ul li ul { border: none; } .site-nav ul li ul li { float: none; } .site-nav ul li:hover ul li a { color: white; background-color: #2b2727; width: 130px; text-align: center; opacity: 0.8; border: none; padding: 2px 0; } .site-nav ul li:hover ul li a:hover { background-color: #2b2727; opacity: 1.0; } .site-nav ul li:hover ul { left: auto; } /* Site Header Menu */ .site-header nav { text-align: center; } .site-header nav ul { font-weight: 700; font-size: 14px; line-height: 32px; } .site-header nav ul li { margin-right: 0; display:inline-block; } .site-header nav ul li a:link, .site-header nav ul li a:visited { display: block; padding: 10px 18px; border-bottom: none; text-decoration: none; text-transform: uppercase; color: #1e1e1e; } .site-header nav ul li a:hover { color: white; background-color: #1e1e1e; } .site-header nav ul li:hover ul li { display: block; } .site-header nav ul li:hover ul li a { font-size: 12px; } /* Footer Menu */ .site-footer nav { text-align: center; } .site-footer nav ul { padding: 8px 10px; } .site-footer nav ul li { margin-right: 10px; padding-right: 10px; border-right: 1px solid white; display: inline-block; } .site-footer nav ul li a { color: white; } .site-footer nav ul li a:hover { color: #5ec2ed; } .site-footer nav ul li:last-of-type { border-right: none; } .site-footer nav { background-color: #262626; color: white; } /* Image Styles */ img { max-width: 100%; height: auto; } img:hover { filter: contrast(80%) brightness(70%); } /* Header Search */ .searchbox { margin: 30px 0; background-color: #1e1e1e; padding: 15px 10px; box-sizing: border-box; } .searchbox form label { position: absolute; left: -9999px; } .searchbox form input#searchsubmit{ background-color: #564b4b; color: #FFF; padding: 15px 40px; border: none; vertical-align: top; text-transform: uppercase; margin: 10px 5px; } .searchbox form input#searchsubmit:hover{ background-color: #5ec2ed; cursor: pointer; } .searchbox form input#s { vertical-align: top; padding: 15px 25px; border: none; margin: 9px 2px 2px 4px; } .searchbox form input#s:focus{ background-color: #eae5e5; } /* Main Column */ .main-column { width: 67.5%; float: left; margin-right: 1%; box-sizing: border-box; background-color: white; padding: 2em 1.5em; } /* Secondary Column */ .secondary-column { width: 30%; float: right; box-sizing: border-box; background-color: white; padding: 2em 1.3em; } .widget-item h4 { color: white; background-color: #1e1e1e; padding: 8px 0 8px 15px; text-transform: uppercase; font-size: 16px; line-height: 24px; font-weight: 600; margin-bottom: 30px; } /* Author-box */ .author-box { padding: 20px 10px; margin: 40px 0; background-color: #f4f4f4; } .author-avatar img { float: left; margin: 0 20px 60px 0; border-radius: 50%; } .author-description { text-align: justify; } .author-description h3 a { text-decoration: none; } .author-description h3 a:hover { color: #f9e875; } /* Comments */ .comments-area { clear: left; margin: 20px 0; } h3#reply-title { margin-top: 20px; } h2.comment-title { font-size: 28px; line-height: 32px; margin-bottom: 40px; } article.comment-body { padding: 15px 15px 15px 5px; margin: 20px 0; } div.comment-metadata a { color: #bfb7b7; text-decoration: none; font-size: 12px; } ol.comment-list { list-style-type: none; margin: 0; background-color: #f4f4f4; } ol.children li { padding: 0 10px; border: 2px solid white; border-right: none; } ol.comment-list li { list-style-type: none; } div.comment-author img{ float: left; padding: 0 10px 20px 0; } div.comment-content { clear: left; margin: 5px 0 30px 0; } div.reply a { background-color: #2b2727; padding: 5px 10px; color: white; text-decoration: none; } div.reply a:hover { background-color: #5ec2ed; color: white; cursor: pointer; } div.comment-respond { padding: 10px 10px; } .comment-respond h3 { font-size: 28px; } p.comment-form-comment label { position: relative; top: 0; } p.comment-form-author label, p.comment-form-email label, p.comment-form-url label{ position: absolute; } textarea#comment { width: 100%; height: 150px; background-color: #f9f9f9; } input#author, input#email, input#url { position: relative; top: 30px; padding: 5px 0; margin-bottom: 30px; } input#submit { border: none; background-color: #2b2727; padding: 10px 10px; color: white; margin-top: 10px; } input#submit:hover { background-color: #5ec2ed; cursor: pointer; } .wp-caption, .wp-caption-text, .sticky, .screen-reader-text, .gallery-caption, .bypostauthor, .alignright, .alignleft, .aligncenter{ box-sizing: border-box; } /* Image Alignment */ .aligncenter { display: block; margin-left: auto; margin-right: auto; } .centered { display: block; margin-left: auto; margin-right: auto; } .aligncentered { display: block; margin-left: auto; margin-right: auto; } .alignright { float: right; padding: 4px; margin: 0 0 2px 7px; display: inline; } .alignleft { float: left; padding: 4px; margin: 0 7px 2px 0; display: inline; } /* Pagination */ nav a.page-numbers, nav span.page-numbers.current { background-color: #1e1e1e; padding: 8px 13px; color: white; text-decoration: none; border-radius: 5px; } nav a.page-numbers:hover, nav span.page-numbers.current:hover { background-color: #5ec2ed; } .handle{ width: 100%; background-color: yellow; cursor: pointer; box-sizing: border-box; padding: 15px 10px; display: none; } /* Media Screen */ @media screen and (max-width: 920px){ .main-column { width: 100%; float: none; margin-right: 0; margin-bottom: 20px; } .secondary-column { width: 100%; float: none; } .secondary-column div.widget-item ul { padding: 20px; } .footer-widget-area{ width: 47%; margin-right: 1%; } .footer-widget-area:last-of-type{ width: 100%; padding-right: 35px; } .site-header nav ul { display: block; } .searchbox form input#searchsubmit{ margin: 0 5px; } .searchbox form input#s{ margin-top: 1px; } .searchbox{ box-sizing: border-box; } } @media screen and (max-width: 770px){ .footer-widget-area{ width: 100%; margin-right: 0; float: none; padding-right: 35px; } .site-header nav ul { display: block; } .newsletter_box{ height: 250px; } .searchbox form{ box-sizing: border-box; } .searchbox form input#s{ padding: 15px 2px; } } @media screen and (max-width: 550px){ .one-half { width: 100%; float: none; margin-right: 0; } .site-header nav ul { display: none; } .site-header nav ul li{ box-sizing: border-box; width: 100% } .handle { display: block; color: white; background-color: #2b2727; text-align: center; } .searchbox #s { padding-right: 0; padding-left: 0; margin-bottom:6px; } .searchbox #searchsubmit { Padding: 1px 10px; margin: 5px 0 0 4px; } .newsletter_box form{ text-align: left; padding-left: 4px; } #headerimage { padding-left: 5px; } } /* Leave Comment Link */ .comment-link:hover { background-color: inherit; color: #5ec2ed; } .comment-link { text-decoration: none; } /* Blockquote*/ blockquote { max-width: 1000px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 18px; color: #428bca; } blockquote::before { content: "\201C"; display: block; font-size: 80px; left: -360px; top: 10px; position: relative; height: 0; } /*Header New*/ .header_main { max-width: 1420px; margin: 0 auto; box-sizing: border-box; } .header_left{ float: left; width: 30%; margin: 0; box-sizing: border-box; } .header-right{ float: right; width: 70%; margin: 0; box-sizing: border-box; } .site-header h1{ padding-top: 0.5em; font-size: 30px; font-weight: 900; position: absolute; left: -99999px; } #head_tagline1{ font-size: 14px; padding-bottom: 1em; position: absolute; left: -999999px; } #headerimage11{ padding: 15px 5px; } @media screen and (max-width: 920px){ .header_left{ float: none; width: 100%; text-align: center; } .header-right{ float: none; width: 100%; } } @media screen and (max-width: 620px){ .post1 h1 a, .post-single h1, .post-page h1, .post h1 a, .post.has-thumbnail h1 a { font-size: 30px; } } .main_home_front{ max-width: 1400px; }