Created
August 21, 2020 07:42
-
-
Save yogiprsetya/0208f84a41ac1fa1fe0c279e0426dcad to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@font-face { | |
font-family: "Roboto"; | |
font-style: normal; | |
font-weight: 400; | |
font-display: swap; | |
src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2"); | |
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; | |
} | |
@font-face { | |
font-family: "Roboto"; | |
font-style: normal; | |
font-weight: 500; | |
font-display: swap; | |
src: local("Roboto Medium"), local("Roboto-Medium"), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2"); | |
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; | |
} | |
* { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
article, | |
aside, | |
figcaption, | |
figure, | |
footer, | |
header, | |
section { | |
display: block; | |
} | |
body { | |
font-family: "Roboto", sans-serif; | |
font-size: 16px; | |
color: #444; | |
margin: 0 auto; | |
position: relative; | |
line-height: 1; | |
} | |
.main-menu { | |
background: #fff; | |
min-height: 70px; | |
height: 100%; | |
border-bottom: 1px solid rgba(204, 204, 204, 0.3); | |
} | |
ol, | |
ul { | |
list-style: none; | |
} | |
blockquote, | |
q { | |
quotes: none; | |
} | |
blockquote:after, | |
blockquote:before, | |
q:after, | |
q:before { | |
content: ""; | |
content: none; | |
} | |
*, | |
::after, | |
::before { | |
box-sizing: border-box; | |
} | |
img { | |
vertical-align: middle; | |
max-width: 100%; | |
height: auto; | |
} | |
em { | |
font-style: italic; | |
} | |
.container { | |
max-width: 1000px; | |
padding: 0 15px; | |
margin: 0 auto; | |
} | |
.text-center { | |
text-align: center !important; | |
} | |
h2, | |
h3 { | |
line-height: 1.25; | |
} | |
a { | |
text-decoration: none; | |
color: #e41e61; | |
} | |
a:hover { | |
color: #ff6b82; | |
} | |
p { | |
line-height: 1.6rem; | |
margin-bottom: 20px; | |
} | |
strong { | |
font-weight: 700; | |
opacity: 0.9; | |
} | |
a img, | |
button, | |
button:focus, | |
img { | |
outline: 0 !important; | |
border: 0 !important; | |
} | |
.new-post-home h3, | |
.popular-today h3 { | |
font-size: 1.13rem; | |
font-weight: 500; | |
padding-bottom: 30px; | |
} | |
.comment-form-areas h3, | |
.comments-area h3, | |
.new-post-aside h3, | |
.related h3 { | |
padding: 10px 0 25px; | |
border-bottom: 1px solid #ebebeb; | |
margin-bottom: 30px; | |
color: #333; | |
font-weight: 500; | |
} | |
.new-post-aside header span, | |
.new-post-home article header span { | |
font-size: 0.8rem; | |
text-transform: uppercase; | |
margin-bottom: 10px; | |
display: block; | |
} | |
.site-content { | |
margin: 50px auto; | |
} | |
.wp-block-image { | |
margin-bottom: 20px; | |
} | |
.wp-block-image figcaption { | |
margin-top: 10px; | |
font-size: 1rem; | |
opacity: 0.9; | |
font-style: italic; | |
} | |
.nav-links, | |
.row { | |
box-sizing: border-box; | |
display: flex; | |
flex: 0 1 auto; | |
flex-direction: row; | |
flex-wrap: wrap; | |
} | |
.category-page .main, | |
.category-page aside, | |
.nav-links div, | |
.site-content .main, | |
aside { | |
box-sizing: border-box; | |
flex: 0 0 auto; | |
} | |
.main-menu .container { | |
height: 70px; | |
display: flex; | |
flex-wrap: wrap; | |
align-items: center; | |
justify-content: space-between; | |
} | |
.main-menu nav { | |
overflow: hidden; | |
margin: auto !important; | |
} | |
.main-menu nav li { | |
display: inline; | |
} | |
.main-menu nav a { | |
color: #555; | |
padding: 0 15px; | |
font-size: 15px; | |
text-decoration: none; | |
} | |
.main-menu .burger-icon { | |
right: 15px; | |
position: absolute; | |
display: none; | |
z-index: 5; | |
background: 0; | |
} | |
.main-menu svg { | |
fill: #555; | |
position: relative; | |
} | |
.main-menu .search-button { | |
width: 16px; | |
} | |
.main-menu .search-button svg { | |
top: 0; | |
} | |
.main-menu .form-search { | |
position: relative; | |
float: right; | |
border-top: 1px solid #ff6b82; | |
z-index: 2; | |
display: none; | |
} | |
.main-menu .form-search.open { | |
display: inline-block; | |
} | |
.main-menu .form-search input[type="text"] { | |
padding: 11px 14px; | |
height: 44px; | |
line-height: 44px; | |
position: absolute; | |
border: 2px solid #ff6b82; | |
right: 0; | |
} | |
.main-menu a.brand { | |
display: inline-block; | |
position: absolute; | |
font-weight: 500; | |
} | |
.site-content .main { | |
flex-basis: 66%; | |
width: 66%; | |
padding-right: 40px; | |
} | |
.site-content h2, | |
.site-content h3, | |
.site-content h4, | |
.site-content h5 { | |
color: #333; | |
font-weight: 500; | |
margin: 20px 0 10px; | |
} | |
.site-content h2 { | |
font-size: 1.9rem; | |
font-weight: 700; | |
} | |
.site-content h3 { | |
font-size: 1.6rem; | |
} | |
.site-content h4 { | |
font-size: 1.34rem; | |
} | |
.site-content h5 { | |
font-size: 1.25rem; | |
} | |
.site-content .size-featured-image { | |
width: 100%; | |
margin-bottom: 22px; | |
max-height: 375px; | |
object-fit: cover; | |
} | |
.site-content .post-category a { | |
font-weight: 400; | |
text-transform: uppercase; | |
font-size: 1rem; | |
} | |
.site-content .post-category a:not(:last-child) { | |
margin-right: 15px; | |
} | |
.site-content h1 { | |
font-size: 1.8rem; | |
color: #333; | |
font-weight: 700; | |
line-height: 1.2; | |
margin: 7px 0 15px; | |
} | |
.site-content .entry-meta { | |
font-size: 1rem; | |
color: #555; | |
} | |
.site-content .entry-meta .author { | |
text-transform: capitalize; | |
} | |
.site-content .entry-content { | |
margin: 5% 0 10%; | |
} | |
.site-content .entry-content img { | |
width: 100%; | |
display: block; | |
} | |
.comment-content ol, | |
.comment-content ul, | |
.site-content .entry-content ol, | |
.site-content .entry-content ul { | |
margin: 0 0 20px 30px; | |
list-style: disc; | |
} | |
.comment-content ol li, | |
.comment-content ul li, | |
.site-content .entry-content ol li, | |
.site-content .entry-content ul li { | |
margin-bottom: 5px; | |
line-height: 1.5rem; | |
} | |
.comment-content ol, | |
.site-content .entry-content ol { | |
list-style: decimal !important; | |
} | |
.site-content .entry-content blockquote { | |
padding: 15px 20px; | |
border-top: 1px solid #ebebeb; | |
border-bottom: 1px solid #ebebeb; | |
color: #333; | |
font-size: 1.2rem; | |
margin: 30px 0; | |
} | |
.entry-content cite { | |
color: #555; | |
font-size: 0.9rem; | |
font-style: italic; | |
} | |
.wp-block-quote p { | |
margin-bottom: 10px; | |
} | |
.site-content .content-foot { | |
padding-bottom: 3rem; | |
font-size: 1rem; | |
} | |
.site-content figure + figure { | |
margin-top: 25px; | |
} | |
.site-content figcaption { | |
font-style: italic; | |
margin-top: 7px; | |
opacity: 0.8; | |
text-align: center; | |
font-size: 15px; | |
} | |
aside { | |
flex-basis: 33%; | |
width: 33%; | |
} | |
.category-page { | |
margin-top: 3rem; | |
} | |
.category-page .main { | |
flex-basis: 66.66666667%; | |
width: 66.66666667%; | |
padding-right: 47px; | |
} | |
.category-page .main img { | |
width: 100%; | |
margin-bottom: 1.5rem; | |
} | |
.category-page article { | |
margin-bottom: 2.5rem; | |
} | |
.category-page aside { | |
flex-basis: 33.33333333%; | |
max-width: 33.33333333%; | |
} | |
.category-page header span { | |
display: block; | |
margin: 1rem 0; | |
} | |
.category-page header h2 { | |
color: #ff6b82; | |
font-size: 2rem; | |
font-weight: 500; | |
} | |
header.page-header { | |
background: #fafafa; | |
padding-top: 3rem; | |
padding-bottom: 3rem; | |
} | |
.page-header h1 { | |
font-size: 1.5rem; | |
color: #333; | |
font-weight: 500; | |
letter-spacing: 0.1rem; | |
margin-bottom: 1rem; | |
} | |
header .description { | |
width: 60%; | |
} | |
.page-numbers { | |
font-size: 0.9rem; | |
margin: 3rem auto; | |
} | |
.page-numbers li { | |
display: inline-block; | |
} | |
.page-numbers li span { | |
padding: 10px 15px; | |
border: 1px solid #ebebeb; | |
color: #ff6b82; | |
} | |
.page-numbers li a { | |
color: #555; | |
padding: 10px 15px; | |
border: 1px solid transparent; | |
} | |
.page-numbers li a:hover { | |
border: 1px solid #ebebeb; | |
} | |
.page-numbers li:not(:last-child):not(:first-child) { | |
margin-right: 5px; | |
} | |
footer { | |
padding: 50px 0; | |
background: #fafafa; | |
margin-top: 35px; | |
} | |
footer h3 { | |
color: #333; | |
font-weight: 500; | |
} | |
footer p { | |
font-size: 1rem; | |
margin-top: 10px; | |
} | |
.social-list li { | |
display: inline-block; | |
padding: 15px; | |
} | |
.social-list a { | |
color: #333; | |
font-size: 0.9rem; | |
} | |
.featured-category { | |
background: #fafafa; | |
} | |
.featured-category .container { | |
padding-top: 5rem; | |
padding-bottom: 5rem; | |
} | |
.featured-category figure { | |
position: relative; | |
float: left; | |
flex: 1; | |
height: 450px; | |
background: #333; | |
} | |
.featured-category figure:not(:last-child) { | |
margin-right: 15px; | |
} | |
.featured-category img { | |
min-width: 100%; | |
opacity: 0.7; | |
object-fit: cover; | |
height: 100%; | |
} | |
.featured-category figcaption { | |
position: absolute; | |
bottom: 0; | |
text-align: center; | |
width: 100%; | |
padding: 0 25px; | |
} | |
.featured-category figcaption a { | |
color: #fff; | |
font-size: 1rem; | |
padding: 8px 13px; | |
background: #ff6b82; | |
margin-bottom: 10px; | |
display: inline-block; | |
} | |
.featured-category figcaption a:hover { | |
background: #fff; | |
} | |
.featured-category figcaption p { | |
color: #fff; | |
font-size: 1.3rem; | |
font-weight: 500; | |
} | |
.new-post-home { | |
margin-top: 50px; | |
} | |
.new-post-home article { | |
flex-basis: 25%; | |
max-width: 25%; | |
} | |
.new-post-home article img { | |
height: 220px; | |
object-fit: cover; | |
} | |
.new-post-home article:not(:last-child) { | |
padding-right: 15px; | |
} | |
.new-post-home article header { | |
min-height: 70px; | |
padding: 22px 0 40px; | |
} | |
.new-post-home article h2 { | |
font-size: 1rem; | |
color: #333; | |
font-weight: 500; | |
} | |
.new-post-home article p { | |
font-size: 0.9rem; | |
color: #555; | |
} | |
.new-post-home article p a { | |
display: inline-block; | |
color: #555; | |
margin-top: 10px; | |
} | |
.new-post-aside { | |
background: #fafafa; | |
padding: 20px; | |
} | |
.new-post-aside h3 { | |
font-size: 1.4rem !important; | |
margin: 10px 0 30px; | |
padding-top: 0; | |
} | |
.new-post-aside header h2 { | |
color: #333; | |
font-size: 1rem; | |
} | |
.new-post-aside header span { | |
color: #dc2362; | |
} | |
.new-post-aside p a { | |
font-size: 0.9rem; | |
color: #555; | |
} | |
.new-post-aside article { | |
margin-bottom: 20px; | |
} | |
.new-post-aside article:not(:last-child) { | |
border-bottom: 1px solid #ebebeb; | |
padding-bottom: 20px; | |
} | |
.popular-today { | |
border-top: 1px solid #ebebeb; | |
} | |
.popular-today h3 { | |
padding: 3rem 0 2.2rem; | |
} | |
.popular-today article { | |
flex-basis: 50%; | |
width: 50%; | |
margin-bottom: 40px; | |
} | |
.popular-today article:nth-child(odd) { | |
padding-right: 30px; | |
} | |
.popular-today span { | |
color: #ff6b82; | |
font-size: 0.8rem; | |
text-transform: uppercase; | |
margin: 25px 0 10px; | |
display: block; | |
} | |
.popular-today p { | |
font-size: 1rem; | |
line-height: 1.3rem; | |
} | |
.popular-today .post-info { | |
margin: 11px 0 15px; | |
} | |
.popular-today .post-info a { | |
font-weight: 400; | |
font-size: 0.8rem; | |
} | |
.popular-today a { | |
color: #333; | |
font-weight: 500; | |
} | |
.popular-today img { | |
height: 300px; | |
object-fit: cover; | |
width: 100%; | |
} | |
.nav-links div { | |
flex-basis: 50%; | |
width: 50%; | |
font-size: 1rem; | |
} | |
.nav-links a { | |
color: #333; | |
line-height: 1.3; | |
} | |
.nav-links a span { | |
display: block; | |
text-transform: uppercase; | |
font-size: 0.7rem; | |
color: #555; | |
margin-bottom: 10px; | |
} | |
.nav-links .nav-previous { | |
padding-right: 10px; | |
} | |
.nav-links .nav-next { | |
text-align: right; | |
padding-left: 10px; | |
} | |
.post-navigation h2.screen-reader-text { | |
display: none; | |
} | |
.entry-footer { | |
padding-top: 40px; | |
margin-top: 15px; | |
border-top: 1px solid #ebebeb; | |
} | |
.related { | |
background: #fafafa; | |
margin: 40px 0; | |
padding: 35px; | |
} | |
.related h3 { | |
font-size: 1.4rem !important; | |
margin-bottom: 30px !important; | |
margin: 10px 0 30px; | |
padding-top: 0; | |
} | |
.related article { | |
flex-basis: 33.33333333%; | |
max-width: 33.33333333%; | |
} | |
.related article:not(:last-child) { | |
padding-right: 15px; | |
} | |
.related img { | |
height: 150px; | |
object-fit: cover; | |
width: 100%; | |
margin-bottom: 20px; | |
} | |
.related a { | |
color: #555; | |
font-size: 0.9rem; | |
font-weight: 500; | |
line-height: 1.3; | |
} | |
.comment-respond #email { | |
margin-left: auto; | |
} | |
.comment-respond input, | |
.comment-respond textarea { | |
display: block; | |
padding: 0.75rem 1.25rem; | |
color: #555; | |
font-size: 0.875rem; | |
outline: 0; | |
border: 1px solid #ebebeb; | |
margin-bottom: 1.8rem; | |
width: 100%; | |
} | |
.comment-respond textarea { | |
width: 100%; | |
} | |
.comment-respond .comment-form-cookies-consent { | |
display: none; | |
} | |
.comment-respond .btn { | |
width: 100%; | |
color: #222; | |
font-weight: 500; | |
cursor: pointer; | |
} | |
.comment-respond .btn:hover { | |
color: #fff; | |
background: #ff6b82; | |
} | |
.comment-respond small { | |
font-weight: 400; | |
font-size: 1rem; | |
float: right; | |
color: #ff6b82; | |
} | |
.comment-form-areas { | |
background: #fafafa; | |
padding: 30px; | |
margin-bottom: 1.875rem; | |
} | |
.comment-form-areas input { | |
flex: 0 0 48%; | |
} | |
.comment-form-areas h3 { | |
font-size: 1.4rem !important; | |
margin: 10px 0 30px; | |
padding-top: 0; | |
} | |
.comment-form-input { | |
display: flex; | |
flex-direction: row; | |
justify-content: space-between; | |
} | |
.comments-area { | |
margin-bottom: 3rem; | |
} | |
.comments-area h3 { | |
font-size: 1.4rem !important; | |
margin: 10px 0 30px; | |
padding-top: 0; | |
} | |
.comments-area .comment-author { | |
float: left; | |
margin-right: 20px; | |
} | |
.comments-area cite { | |
display: block; | |
color: #333; | |
margin-bottom: 8px; | |
} | |
.comments-area time { | |
font-size: 0.85rem; | |
color: #555; | |
} | |
.comments-area .comment-details { | |
overflow: hidden; | |
} | |
.comments-area img { | |
border-radius: 3px; | |
} | |
.comments-area .comment-content { | |
margin-top: 20px; | |
font-size: 1rem; | |
} | |
.comments-area article ~ .children { | |
margin: 1rem 0 0 2rem; | |
} | |
.comments-area .depth-1 { | |
border-bottom: 1px solid #ebebeb; | |
margin-bottom: 2rem; | |
padding-bottom: 2rem; | |
} | |
a.comment-reply-link { | |
float: right; | |
padding: 0.4rem 0.85rem; | |
font-size: 0.7rem; | |
border: 1px solid #ebebeb; | |
border-radius: 1.25rem; | |
} | |
a.comment-reply-link a { | |
color: #555; | |
} | |
.shares-button { | |
float: right; | |
} | |
.shares-button .item { | |
display: inline; | |
} | |
.shares-button .item:not(:last-child) { | |
margin-right: 10px; | |
} | |
.shares-button .item a { | |
border: 1px solid #ebebeb; | |
background: #fff; | |
padding: 6px 16px; | |
color: #555; | |
border-radius: 30px; | |
} | |
.shares-button .item a:hover { | |
color: #fff !important; | |
} | |
.shares-button .item a.facebook svg { | |
fill: #483cea; | |
} | |
.shares-button .item a.facebook:hover { | |
background: #483cea; | |
} | |
.shares-button .item a.facebook:hover svg { | |
fill: #fff !important; | |
} | |
.shares-button .item a.twitter svg { | |
fill: #5199f2; | |
} | |
.shares-button .item a.twitter:hover { | |
background: #5199f2; | |
} | |
.shares-button .item a.twitter:hover svg { | |
fill: #fff !important; | |
} | |
.shares-button .item a.whatsapp svg { | |
fill: #4bc25a; | |
} | |
.shares-button .item a.whatsapp:hover { | |
background: #4bc25a; | |
} | |
.shares-button .item a.whatsapp:hover svg { | |
fill: #fff !important; | |
} | |
.post-tags { | |
display: inline; | |
} | |
.post-tags li { | |
display: inline; | |
} | |
.post-tags li:not(:last-child) { | |
margin-right: 15px; | |
} | |
.post-tags a { | |
color: #555; | |
padding: 6px 15px; | |
border: 1px solid #ebebeb; | |
} | |
.post-tags a:hover { | |
background: #ff6b82; | |
color: #fff !important; | |
} | |
@media only screen and (max-width: 768px) { | |
.main-menu nav { | |
display: block; | |
z-index: 1; | |
right: 0; | |
width: 100%; | |
} | |
.main-menu nav.responsive { | |
padding-bottom: 10px; | |
} | |
.main-menu nav.responsive a { | |
display: block; | |
padding: 9px 15px; | |
} | |
.main-menu a { | |
display: none; | |
} | |
.burger-icon { | |
display: block !important; | |
} | |
nav.responsive { | |
top: 70px; | |
background: #fff; | |
position: absolute; | |
} | |
.featured-category .container { | |
padding-top: 3rem; | |
padding-bottom: 3rem; | |
} | |
.featured-category figure { | |
flex-basis: 100%; | |
margin-right: 0 !important; | |
margin-bottom: 18px; | |
height: unset; | |
} | |
.featured-category img { | |
height: 240px; | |
object-fit: cover; | |
} | |
.new-post-home article { | |
flex-basis: 50%; | |
max-width: 50%; | |
} | |
.new-post-home article:nth-child(even) { | |
padding-right: 0; | |
} | |
.new-post-home article h2 { | |
font-size: inherit; | |
} | |
.popular-today article { | |
flex-basis: 100%; | |
width: 100%; | |
padding-right: 0 !important; | |
} | |
.archive .description { | |
width: unset; | |
} | |
.site-content .main { | |
flex-basis: 100%; | |
width: 100%; | |
padding-right: 0; | |
} | |
.site-content { | |
margin-top: 30px; | |
} | |
.site-content aside { | |
flex-basis: 100%; | |
width: 100%; | |
} | |
.site-content h1 { | |
font-size: 1.5rem; | |
} | |
.shares-button { | |
float: none; | |
display: block; | |
margin-top: 2.2rem; | |
} | |
.related { | |
padding: 20px; | |
} | |
.related .column:not(:last-child) { | |
margin-right: 7px; | |
} | |
.related img { | |
height: 130px; | |
} | |
.category-page { | |
margin-top: 3rem; | |
} | |
.category-page .main.column { | |
flex-basis: unset; | |
margin-right: 0; | |
} | |
.comment-respond #author, | |
.comment-respond #email { | |
flex-basis: 100%; | |
width: 100%; | |
} | |
.comment-respond input, | |
.comment-respond textarea { | |
margin-bottom: 1.4rem; | |
} | |
.category-page .main { | |
flex-basis: 100%; | |
width: 100%; | |
padding-right: 0; | |
} | |
.category-page aside { | |
flex-basis: 100%; | |
max-width: 100%; | |
} | |
} | |
@media only screen and (max-width: 414px) { | |
.entry-meta span + span { | |
display: block; | |
margin-top: 10px; | |
} | |
} | |
.rate { | |
padding: 0; | |
line-height: 1; | |
} | |
.rate button { | |
padding: 0; | |
line-height: 0; | |
background: 0 0; | |
border: 0; | |
cursor: pointer; | |
margin-right: 5px; | |
} | |
.rate legend { | |
margin-bottom: 10px; | |
} | |
.rate button svg { | |
fill: #d3d3d3; | |
} | |
.rate label { | |
font-weight: 700; | |
font-size: 20px; | |
margin-left: 5px; | |
vertical-align: text-bottom; | |
} | |
.toc { | |
margin: 20px 0 0 30px !important; | |
} | |
.toc .h2, | |
.toc .h3 { | |
margin: 14px 0; | |
} | |
.toc .h3 { | |
margin-left: 20px; | |
} | |
.toc a { | |
text-decoration: none; | |
} | |
details { | |
padding: 15px; | |
border: 1px solid #ebebeb; | |
background: #fafafa; | |
margin: 20px 0; | |
} | |
summary { | |
cursor: pointer; | |
font-weight: 700; | |
} | |
.toc a { | |
color: #333 !important; | |
} | |
.toc li { | |
line-height: 1 !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment