assets/css/blog.css in appscms-tools-theme-0.1.9 vs assets/css/blog.css in appscms-tools-theme-0.2.0

- old
+ new

@@ -1,9 +1,79 @@ -.section_post { +/**********************************************/ +/***************BLOG-CSS-STYLING *************/ +/********************************************/ + +html { + scroll-behavior: smooth; + font-size: 62.5%; +} +body { font-family: 'Open Sans', sans-serif !important; } -/* card title, content styling */ +a { + text-decoration: none !important; +} + +.section_post { + margin-top: 100px; +} + +/* logo styling */ +.logo { + width: 50px; + border-radius: 50%; +} + +/* HEADER STYLING */ +header { + width: 100%; + position: relative; + background: url(../assets/images/bg_elements.png); +} +.navbar { + width: 100%; + padding: 1.2rem 10rem !important; + position: fixed; + top: 0; + left: 0; + z-index: 999; +} +.navbar-brand { + font-size: 2.2rem; + color: var(--txtColor) !important; + font-weight: 900; +} +.navbar-dark .navbar-toggler { + outline: none !important; +} +.navbar-nav .nav-item { + padding: 0 10px; +} +.navbar-nav .nav-link:hover { + color: var(--txtColor) !important; + transition: all 0.2s linear; + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; +} +.nav-link { + text-decoration: none !important; + font-size: 16px; + color: gray !important; +} +.dropdown:hover .dropdown-menu { + display: block; + border: none; + font-size: 14px; + left: -160px; + padding: 13.5px; + background: transparent; +} +.dropdown-item { + text-align: right; +} + +/* blogs-card title, content styling */ .anchor_link { text-decoration: none !important; color: #343a40 !important; } .anchor_link:hover { @@ -21,11 +91,11 @@ line-height: 1.6; font-weight: 400; } /* close */ -/* for card-footer styling */ +/* Blog-card-footer styling */ .card-footer { border: none; } .wrapfooter { display: flex; @@ -49,13 +119,17 @@ .wrapfooter .span.post-read-more { align-items: center; display: inline-block; margin-top: 8px; } +.post-date { + color: rgba(0, 0, 0, 0.44); + font-size: 13px; +} /* close */ -/* some categories stlying */ +/* BLOG-Categories stlying */ .explore { color: #fff; margin-bottom: 100px; margin-top: 60px; width: 100%; @@ -88,13 +162,12 @@ border-radius: 15px; margin: 0 15px; } /* close */ -/* alertbar stlying */ +/* BLOG-alertbar stlying */ .alertbar { - font-family: 'Open Sans', sans-serif !important; box-shadow: 0 -3px 10px 0 rgb(0 0 0 / 8%); position: fixed; bottom: 0; left: 0; background-color: #fff; @@ -133,32 +206,32 @@ letter-spacing: 0.5px; cursor: pointer; } /* close */ -/* paginatopm 2 stlying*/ -.pagination2 a, -.pagination2 span { - padding: 7px 18px; - border: 1px solid #eee; +/* Blog-Pages-Pagination stlying*/ +.blog-pagination a, +.blog-pagination span { + padding: 7px 10px; margin-left: -2px; margin-right: -2px; background-color: #ffffff; display: inline-block; + text-decoration: none; } -.pagination2 a:hover { +.blog-pagination a:hover { background-color: #f1f1f1; color: #333; } -.pagination2 { +.blog-pagination { text-align: center; font-size: 14px; } -/* blog categories modifed */ +/* BLOG-Categories-PAGes styling */ .section-title h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.125); font-weight: 700; font-size: 1.5rem; margin-bottom: 27px; @@ -166,6 +239,185 @@ .section-title span { border-bottom: 1px solid rgba(0, 0, 0, 0.44); display: inline-block; padding-bottom: 20px; margin-bottom: -1px; +} + +/***************************************************************/ +/********************** post-layouts-styling *******************/ +/***************************************************************/ + +/* left-sidebar-social-styling */ +.post-content { + font-size: 20px; +} + +.socialIons { + position: sticky; + top: 100px; +} +.socialIons > .item-lists2 { + display: flex; + flex-direction: column; + width: 100%; +} +.socialIons > .item-lists2 > li { + list-style: none; + padding: 8px 0px; + margin: 0 auto; +} +.socialIons .item-lists2 li a { + color: rgba(95, 21, 21, 0.44); + fill: rgba(0, 0, 0, 0.44); + font-size: 15px; + cursor: pointer; + text-decoration: none !important; +} +.socialIons > .item-lists2 > li i { + font-size: 18px; + color: rgba(0, 0, 0, 0.44); + fill: rgba(0, 0, 0, 0.44); +} +.sep { + height: 1px; + width: 20px; + background: #999; + margin: 3px auto; +} +.comments-count { + margin: 18px 25px; + text-align: center; +} +.comment_count { + font-size: 12px; + color: rgba(95, 21, 21, 0.44) !important; + fill: rgba(0, 0, 0, 0.44); + text-decoration: none !important; +} +/* close */ + +/* right-sidebar-styling-starts */ +/* author bio styling.. */ +.author_image .author-thumb { + width: 60px; + height: 60px; + object-fit: cover; +} +.author-meta .postName { + font-size: 18px !important; + color: rgba(0, 0, 0, 0.8) !important; + text-decoration: none !important; + font-family: 'Merriweather', serif; +} +.btn_follow { + margin-left: 5px; + margin-bottom: 10px; + border-color: #02b875; + color: #1c9963 !important; + padding: 3px 10px; + text-align: center; + border-radius: 999em; + font-size: 1.5rem; + display: inline-block; + border: 1px solid; +} +.author_bio { + font-family: 'Merriweather', serif; + color: rgba(0, 0, 0, 0.44); + font-size: 13px; + line-height: 20px; +} +/* close */ + +/* pagination-styling-postpages */ +.pointerup i.fa { + color: #eaeaea; +} +.pointerup { + margin-bottom: -9px; + margin-left: 49%; + font-size: 30px; +} +.bottompagination span.navigation { + display: block; + font-size: 0.93rem; + padding: 15px 0 0 0; + text-align: center; + margin-bottom: 0rem; + color: #999; + border-top: 1px solid #ddd; +} +.pagination { + display: -ms-flexbox; + display: flex; + padding-left: 0; + list-style: none; + border-radius: 0.25rem; + display: block; + color: green; + font-size: 15px; + margin-bottom: 30px; +} +.pageUrl { + color: green; + font-size: 12px; + font-weight: 900; + text-decoration: none; + margin-right: 10px; +} +.pageUrl:hover { + text-decoration: none; + color: green; +} + +@media (max-width: 768px) { + .socialIons > .item-lists2 { + flex-direction: row; + align-items: center; + } + .socialIons > .item-lists2 > li { + padding-right: 30px; + margin: 0; + } + .sep { + margin: 0; + } + .author-meta { + padding-left: 15px; + } + .comments-count { + margin: 18px 0; + text-align: left; + } + + .navbar { + padding: 1.2rem 15px !important; + } + .title, + .description { + width: 100% !important; + text-align: center; + } + .angle-arrow { + position: fixed; + bottom: 4px; + right: 32px; + top: auto; + z-index: 999; + } + .alertbar form { + display: block; + margin-top: 10px; + } +} +@media (max-width: 992px) { + .dropdown:hover .dropdown-menu { + left: 0px; + padding: 0; + } + .dropdown-item { + text-align: left; + font-weight: 600; + padding: 0.25rem 0; + } }