[!] Homepage tagline, ex: BlogName - Tagline
[!] Title separator ( – ), ( | ), ( • )
[!] Default meta description, recommended 155–160 characters
[!] Default meta image, size recommended 1600x700 px
[!] Schema logo, size recommended 175x55 px
[!] Favicon high resolution, required format (.png), min size 200x200 px
[!] New Google Analytic 2021
[!] number only
[!] true or false
[!] tag name, class, id
[!] Limit Label Display
-------------------------
# JetTheme Css Variable #
-------------------------
*/
/*
-----------------------------------------------
JetTheme Blogger Template
Name : JetTheme Core
Version : 2.9
Designer : jettheme
URL : www.jettheme.com
-----------------------------------------------
*/
:root {
--bs-font-sans-serif: $(body.text.family);
--bs-body-bg: $(body.background);
--bs-body-color: $(body.text.color);
--jt-primary: $(keycolor);
--jt-heading-color: $(posts.title.color);
--jt-heading-link: $(posts.title.color);
--jt-heading-hover: $(keycolor);
--jt-link-color: $(body.link.color);
--jt-link-hover: $(body.hover.color);
--jt-blockquote: $(posts.text.color);
--jt-btn-primary: $(posts.icons.color);
--jt-btn-primary-hover: $(labels.background.color);
--jt-btn-light-hover: $(posts.title.color);
--jt-border-light: $(border.color);
--jt-bg-light: #f3f7f9;
--jt-archive-bg: #ffffff;
--jt-nav-color: $(tabs.color);
--jt-nav-hover: $(tabs.hover);
--jt-nav-selected: $(tabs.selected.color);
--jt-dropdown-bg: $(dropdown.bg);
--jt-dropdown-color: $(dropdown.color);
--jt-dropdown-hover: $(dropdown.hover);
--jt-dropdown-selected: $(dropdown.selected);
--jt-header-bg: $(header.bg);
--jt-header-color: $(header.color);
--jt-header-border: $(header.border);
--jt-footer-bg: $(footer.bg);
--jt-footer-color: $(footer.color);
--jt-footer-link: $(footer.link);
--jt-footer-border: $(footer.border);
--jt-socket-bg: $(socket.bg);
--jt-socket-color: $(socket.color);
}
.dark-mode {
--bs-body-bg: hsl(210, 11%, 15%);
--bs-body-color: hsl(210, 11%, 80%);
--jt-heading-color: hsl(210, 11%, 80%);
--jt-heading-link: hsl(210, 11%, 80%);
--jt-btn-light-hover: hsl(210, 11%, 85%);
--jt-border-light: hsl(210, 11%, 20%);
--jt-bg-light: hsl(210, 11%, 20%);
--jt-archive-bg: hsl(210, 11%, 17%);
--jt-nav-color: hsl(210, 11%, 70%);
--jt-dropdown-bg: hsl(210, 11%, 18%);
--jt-dropdown-color: hsl(210, 11%, 70%);
--jt-header-bg: hsl(210, 11%, 15%);
--jt-header-color: hsl(210, 11%, 80%);
--jt-header-border: hsl(210, 11%, 20%);
--jt-footer-bg: hsl(210, 11%, 15%);
--jt-footer-color: hsl(210, 11%, 80%);
--jt-footer-border: hsl(210, 11%, 20%);
--jt-socket-bg: hsl(210, 11%, 17%);
--jt-socket-color: hsl(210, 11%, 80%);
}
body {
font: $(body.text);
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.d-block {
display:none;
}
.h1,.h2,.h3,.h4,.h5,.h6,
h1,h2,h3,h4,h5,h6 {
font: $(posts.title);
}
a {
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: .3s;
text-decoration: none;
color: var(--jt-link-color);
}
a:hover {
color: var(--jt-link-hover);
}
.fs-7 {
font-size: 0.875rem;
}
.fs-8 {
font-size: 0.75rem;
}
.fs-9 {
font-size: 0.7rem;
}
.btn{
box-shadow: none !important
}
.btn-sm {
min-width: 32px;
min-height: 32px;
}
img,
svg,
iframe {
max-width:100%
}
img {
height:auto;
object-fit:cover;
}
label {
cursor: pointer;
}
.visually-hidden {
position: unset !important;
}
.form-control:focus {
box-shadow: none;
border-color: var(--jt-primary);
}
.form-control::placeholder {
opacity: .5;
}
.dropdown-toggle::after {
border-width: 0.25em 0.25em 0;
}
.dropdown-menu {
margin: 0;
padding: 0;
}
.px-3 {
padding-right: 1rem;
padding-left: 1rem;
}
.ratio:before{
content: none;
}
.ratio-1x1 {
padding-bottom: 100%;
}
.ratio-4x3 {
padding-bottom: 75%;
}
.ratio-16x9 {
padding-bottom: 56.25%;
}
.ratio-21x9 {
padding-bottom: 43%;
}
.object-cover {
object-fit: cover;
}
.jt-text-primary,
.hover-text-primary:hover,
input:checked ~ .check-text-primary {
color: var(--jt-primary)!important
}
.jt-btn-primary,
.jt-btn-outline-primary:hover {
color: #fff;
background-color: var(--jt-btn-primary);
border-color: var(--jt-btn-primary);
}
.jt-btn-light {
color: var(--bs-body-color);
background-color: var(--jt-bg-light);
border-color: var(--jt-bg-light);
}
.jt-btn-light:hover {
color: var(--jt-btn-light-hover);
}
.jt-btn-primary:hover,
.hover-btn-primary:hover,
input:checked + .jt-btn-outline-primary {
color: #fff !important;
background-color: var(--jt-btn-primary-hover)!important;
border-color: var(--jt-btn-primary-hover)!important
}
.jt-btn-outline-primary {
color: var(--jt-btn-primary);
border-color: var(--jt-btn-primary);
}
.jt-bg-primary {
background-color: var(--jt-primary)
}
.jt-bg-light {
background-color: var(--jt-bg-light)
}
.bg-archive {
background-color: var(--jt-archive-bg)
}
.jt-border-light {
border-color: var(--jt-border-light)!important;
}
input:checked ~ .d-block-check {
display: block !important;
}
input:checked ~ .d-none-check {
display: none !important;
}
.dropdown-menu,
.accordion-item,
.accordion-header {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border-color: var(--jt-border-light);
}
.lazyload {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: .3s;
opacity: 0;
}
.lazyload.loaded {
opacity: 1;
}
/* JetTheme Style */
pre {
background-color: var(--jt-bg-light);
margin-bottom: 1rem;
padding: 1rem;
font-size: 0.75rem;
}
blockquote {
border-left: 5px solid var(--jt-blockquote);
color: inherit;
font-size: 1.125rem;
margin-bottom: 1.5rem;
margin-top: 1.5rem;
padding-left: 1rem;
}
.header-animate.header-hidden {
transform: translateY(-100%);
box-shadow: none !important;
}
#header {
background-color: var(--jt-header-bg);
color: var(--jt-header-color);
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: .3s;
min-height: 50px;
border-bottom: 1px solid var(--jt-header-border);
}
.header-social {
border-right: 1px solid var(--jt-header-border);
}
.jt-icon {
display: inline-block;
height: 1em;
vertical-align: -0.15em;
width: 1em;
fill:none;
stroke:currentColor;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:2;
}
.jt-icon-center {
font-family: sans-serif;
}
.icon-dark,
.dark-mode .icon-light {
display: none;
}
.dark-mode .icon-dark {
display: block;
}
#dark-toggler,
#search-toggler,
#navbar-toggler {
line-height: 1;
}
#dark-toggler {
font-size: 17px;
}
#footer {
background-color: var(--jt-footer-bg);
color: var(--jt-footer-color);
border-top: 1px solid var(--jt-footer-border);
}
#socket {
background-color: var(--jt-socket-bg);
color: var(--jt-socket-color);
}
#navbar {
z-index: 9999;
}
#navbar .menu-item {
position: relative;
}
#navbar .nav-link {
min-height: 40px;
}
#navbar .dropdown-toggle {
cursor: pointer;
align-items: center;
display: flex;
}
#navbar.d-block,
#navbar .dropdown-menu,
#navbar .nav-link,
#navbar .dropdown-toggle {
-webkit-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
#navbar .navbar-nav > .menu-item > .nav-link {
font: $(tabs.font);
line-height: 1.5;
color: var(--jt-nav-color);
}
#navbar .navbar-nav > .menu-item:hover > .nav-link,
#navbar .navbar-nav > .menu-item:hover > .dropdown-toggle {
color: var(--jt-nav-hover);
}
#navbar .navbar-nav > .menu-item > .nav-link.active,
#navbar .navbar-nav > .menu-item > .active ~ .dropdown-toggle {
color: var(--jt-nav-selected);
}
.logo-wrap {
width: $(logo.width);
}
#search-header .dropdown-menu {
background-color:var(--jt-dropdown-bg);
color: var(--jt-dropdown-color);
border-color: var(--jt-header-border);
min-width: 300px;
right:0;
top:100%
}
.blog-admin {
display: none;
}
#pagination li + li {
margin-left: 5px;
}
.no-items {
display: none;
}
.feature-image,
.separator,
.tr-caption-container {
margin-bottom: 1rem;
}
.tr-caption-container {
width: 100%;
}
.separator a,
.tr-caption-container a {
margin: 0 !important;
padding: 0 !important;
}
.tr-caption {
font-size: 12px;
font-style: italic;
}
.widget:last-child {
margin-bottom: 0 !important;
}
#post-body .widget {
margin-top: 1.5rem;
}
.item-title {
color: var(--jt-heading-link);
}
.item-title:hover {
color: var(--jt-heading-hover);
}
#comment-editor{
width:100%
}
#primary .widget-title {
font-weight: 300;
text-transform: uppercase;
}
#footer .widget-title {
text-transform: uppercase;
}
#footer .widget-title,
#sidebar .widget-title {
font-size: 13px !important;
}
#footer .widget-title:after {
content: "";
display: block;
width: 50px;
border-bottom: 2px solid var(--jt-primary);
margin-top: 10px;
}
#primary .widget-title > span {
background-color: var(--bs-body-bg);
padding-right: 5px;
position: relative;
}
#main .widget-title:before,
#sidebar .widget-title:before {
background-color: var(--jt-bg-light);
content: "";
height: 1px;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
#main .widget-title:before {
border-right: 30px solid var(--jt-primary);
height: 5px;
}
.send-success:not(.loading) .contact-form-msg,
.send-error:not(.loading) .contact-form-msg {
display:block !important;
}
.send-success .contact-form-msg{
border-color: rgba(25,135,84,.3) !important;
}
.send-error .contact-form-msg{
border-color: rgba(255,193,7,.3) !important;
}
.send-success .contact-form-msg:before{
content: attr(data-success);
}
.send-error .contact-form-msg:before{
content: attr(data-error);
}
hr.example-ads:before {
content: "Advertisement here";
}
hr.example-ads {
background-color: var(--jt-bg-light);
border-radius: 0.25rem;
font-size: 0.875rem;
height: auto;
margin: 0;
opacity: 1;
padding: 1.5rem 0;
text-align: center;
}
body > .google-auto-placed {
margin: 0 auto 1.5rem;
max-width: 1108px;
}
.google-auto-placed > ins {
margin: 0 !important;
}
/* TYPOGRAPY */
.h1,h1{font-size:calc(1.375rem + 1.5vw)}
.h2,h2{font-size:calc(1.325rem + .9vw)}
.h3,h3{font-size:calc(1.3rem + .6vw)}
.h4,h4{font-size:calc(1.275rem + .3vw)}
.h5,h5{font-size:$(title.h5)}
.h6,h6{font-size:$(title.h6)}
.entry-title {
color: var(--jt-heading-color);
}
.entry-text h1,
.entry-text h2,
.entry-text h3,
.entry-text h4,
.entry-text h5,
.entry-text h6 {
color: var(--jt-heading-color);
padding-top: 1em;
margin-bottom: 1rem;
}
.entry-text li {
margin-bottom: 0.5rem;
}
/* Responsive Style */
@media (min-width: 576px) {
.ratio-sm-4x3 {
padding-bottom: 75%;
}
.ratio-sm-16x9 {
padding-bottom: 56.25%;
}
.border-sm-end {
border-right-width: 1px !important;
border-right-style: solid;
}
#post-pager .next-page {
border-left: 1px solid;
}
}
@media (min-width: 768px) {
.position-md-relative {
position: relative;
}
.border-md-end {
border-right-width: 1px !important;
border-right-style: solid;
}
}
@media (min-width: 992px) {
.d-lg-flex {
display: flex;
}
.col-lg-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-lg-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.border-lg-end {
border-right-width: 1px !important;
border-right-style: solid;
}
#navbar .navbar-nav > .menu-item {
display: flex;
}
#navbar .dropdown-menu {
background-color:var(--jt-dropdown-bg);
border-color: var(--jt-header-border);
margin-top: -10px;
display: block;
opacity: 0;
visibility: hidden;
pointer-events: none;
box-shadow: 5px 10px 10px -5px rgba(0, 0, 0, 0.14);
top:100%;
min-width: 150px;
}
#navbar .dropdown-menu .nav-link {
padding-right: 20px;
font-size: $(dropdown.font);
color: var(--jt-dropdown-color);
}
#navbar .dropdown-menu .dropdown-toggle {
position: absolute;
right: 10px;
top: 20px;
}
#navbar .dropdown-menu .dropdown-menu {
left: 100%;
top: -1px;
}
#navbar .dropdown-menu .menu-item:hover > .nav-link,
#navbar .dropdown-menu .menu-item:hover > .dropdown-toggle {
color: var(--jt-dropdown-hover);
}
#navbar .dropdown-menu .menu-item > .nav-link.active,
#navbar .dropdown-menu .menu-item > .active ~ .dropdown-toggle {
color: var(--jt-dropdown-selected);
}
#navbar .menu-item:hover > .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: unset;
margin: 0;
}
#navbar .navbar-nav > .menu-item > .nav-link {
padding: 1.5rem 1.2rem;
white-space:nowrap;
}
#navbar .navbar-nav > .menu-item > .dropdown-toggle {
bottom: 0;
pointer-events: none;
position: absolute;
right: 5px;
top: 3px;
}
#sidebar {
border-left: 1px solid var(--jt-border-light);
}
#footer-widget .widget {
margin-bottom: 0 !important;
}
}
@media (min-width: 1200px){
.container {
max-width: 1140px;
}
.h1,h1{font-size:$(posts.title.size)}
.h2,h2{font-size:$(title.h2)}
.h3,h3{font-size:$(title.h3)}
.h4,h4{font-size:$(title.h4)}
}