{{ with .Page.Params.Image }}{{ partial "taxonomy/image.html" . }}{{ end }}
-

{{ .Title }} -

+

{{ .Title }}

{{ if eq .Type "post"}}
- {{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .ReadingTime }}-minute read + {{ .Date.Format "Mon, Jan 2, 2006" }} + {{ .ReadingTime }}-minute read
{{ end }}
diff --git a/themes/anatole/layouts/index.html b/themes/anatole/layouts/index.html index c3227997..73737233 100644 --- a/themes/anatole/layouts/index.html +++ b/themes/anatole/layouts/index.html @@ -1,7 +1,7 @@ {{ define "main" }}
- {{ range first 10 .Site.RegularPages }} + {{ range first 8 .Site.RegularPages }} {{ if eq .Type "post"}}

{{ .Title }}

diff --git a/themes/anatole/layouts/partials/footer.html b/themes/anatole/layouts/partials/footer.html index a783144b..4942dcdc 100644 --- a/themes/anatole/layouts/partials/footer.html +++ b/themes/anatole/layouts/partials/footer.html @@ -1,5 +1,19 @@ - + + diff --git a/themes/anatole/layouts/partials/head.html b/themes/anatole/layouts/partials/head.html index c6ad29a7..be2d6822 100644 --- a/themes/anatole/layouts/partials/head.html +++ b/themes/anatole/layouts/partials/head.html @@ -9,9 +9,13 @@ - + + + + + diff --git a/themes/anatole/layouts/partials/navbar.html b/themes/anatole/layouts/partials/navbar.html index 3e8b635d..5cfea085 100644 --- a/themes/anatole/layouts/partials/navbar.html +++ b/themes/anatole/layouts/partials/navbar.html @@ -4,20 +4,21 @@ {{ range .Site.Menus.main }}
  • {{ .Name }}
    • {{ end }} -
    +
    + +
    -
    diff --git a/themes/anatole/static/css/backup_style.css b/themes/anatole/static/css/backup_style.css new file mode 100644 index 00000000..9a84d440 --- /dev/null +++ b/themes/anatole/static/css/backup_style.css @@ -0,0 +1,815 @@ +@charset "UTF-8"; +@import url('https://rsms.me/inter/inter.css'); +html { font-family: 'Inter', sans-serif; height:100%;} +@supports (font-variation-settings: normal) { + html { font-family: 'Inter var', sans-serif; } +} +:root { + --third-color:#0065BF; + --dark-text:#f8f8f8; + --dark-bg:#2b2b2b; + --light-text:#2b2b2b; + --light-bg:#f8f8f8; + + --text-color: var(--dark-text); + --bg-color: var(--dark-bg); +} + +/* Switched mode */ +.theme-switch:checked ~ #page { + --text-color:var(--light-text); + --bg-color:var(--light-bg); +} +.theme-switch{ + display:none; +} +#page { + background: var(--bg-color); + color:var(--text-color); +} +html { + background: var(--bg-color); + -webkit-font-smoothing: antialiased; +} + +body { + color: var(--text-color); + font-size: 15px; + width: 100%; + margin: 0 auto 30px auto; +} + +p { + line-height: 1.9em; + font-weight: 400; + font-size: 14px; +} + +a { + text-decoration: none; +} + +img { + opacity: .75; + transition: opacity .5s ease-in-out; +} +img:hover { + opacity: 1 +} +.category { + padding: 4px 6px; + border-radius: 3px; + color: var(--bg-color); + background-color: var(--text-color); + border: 1px solid var(--bg-color); +} + +.blog { + padding: 4px 6px; + border-radius: 3px; + color: var(--text-color); + background-color: var(--third-color); + border: 1px solid var(--text-color); +} + +.tag::before { + content: "#"; + opacity: .5; +} + +.tag, .category { + display: inline-block; + font-size: 15px; + line-height: 1; + margin: 5px 8px 5px 0; +} + +pre { + background-color: #f9f9fd; + padding: 5px; +} + +.info i{ + opacity: 0.5; + margin-right: 5px; +} + +a:link, a:visited { + opacity: 1; + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + -o-transition: all .15s linear; + -ms-transition: all .15s linear; + transition: all .15s linear; + color: var(--color); +} + +a:hover, a:active { + color: var(--third-color); +} + +/*basic styles ends*/ +/*animation starts*/ +.animated { + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -ms-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -ms-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; +} + +.animated.hinge { + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -ms-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; +} + +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes fadeInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-20px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@-o-keyframes fadeInDown { + 0% { + opacity: 0; + -o-transform: translateY(-20px); + } + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +.fadeInDown { + -webkit-animation-name: fadeInDown; + -moz-animation-name: fadeInDown; + -o-animation-name: fadeInDown; + animation-name: fadeInDown; +} + +/*animation ends*/ +.content { + height: auto; + float: right; + width: 70%; + margin-top: 60px; +} + +.page-top { + width: 70%; + position: fixed; + right: 0; + z-index: 3; + background-color: var(--bg-color); + height: 60px; + border-bottom: 1px solid #f8f8f8; +} +.page-top .nav { +width:90%; + list-style: none; + padding: 18px 30px; + float: left; + font-size: 14px; +} +.page-top .nav li, .page-top .language-selector li { + position: relative; + display: initial; + padding-right: 20px; +} +.page-top .nav a { + color: var(--text-color); +} +.page-top .nav a:hover { + color: var(--third-color); +} +.page-top .nav a.current { + color: var(--text-color); + padding-bottom: 22px; + border-bottom: 1px solid var(--text-color); +} +.page-top .information{ + float: right; + padding-top: 12px; + padding-right: 20px; +} +.page-top .information .avatar { + float: right; +} +.page-top .information .avatar img { + width: 48px; + height: 48px; + border-radius: 300px; +} +.page-top .information .back_btn { + float: left; + padding-top: 5px; + margin-right: -10px; +} +.page-top .information .back_btn li { + display: initial; + padding-right: 40px; +} +.page-top .language-selector { + float:right; + position:relative; + top:-5px; + padding-bottom:22px; +} +.page-top .language-selector img{ + display:inline; + position:fixed; + margin:0; + padding:10px; + top:0; + opacity:1; + +} +.page-top .language-selector ul{ + display:inline; + list-style:none; + position:relative; + margin-top:5px; +} +.page-top .language-selector li{ + vertical-align:top; + margin:10px; +} + +.sidebar { + width: 30%; + -webkit-background-size: cover; + background-size: cover; + background-color: var(--bg-color); + height: 100%; + transition: 0.8s; + top: 0; + left: 0; + position: fixed; + z-index: 4; + border-right: 1px solid var(--text-color); +} +.sidebar #logo{ + max-width: 300px; + width: 80%; + margin: 0 auto; + display:block; + padding: 10px; +} +.sidebar .logo-title { + text-align: center; + padding-top: 240px; +} +.sidebar .logo-title .description { + font-size: 14px; + width: 60%; + margin: 0 auto; + color: var(--text-color); + padding-bottom:10px; +} +.sidebar .logo-title .logo { + margin: 0 auto; +} +.sidebar .logo-title .title h3 { + text-transform: uppercase; + font-size: 2rem; + font-weight: bold; + letter-spacing: 2px; + line-height: 1; + margin: 1em; +} +.sidebar .logo-title .title a { + text-decoration: none; + color: var(--text-color); + font-size: 2rem; + font-weight: bold; +} +.sidebar .social-links { + list-style: none; + padding: 0; + font-size: 14px; + text-align: center; +} +.sidebar .social-links i { + margin-right: 3px; +} +.sidebar .social-links li { + display: inline; + padding: 0 4px; + line-height: 0; +} +.sidebar .social-links a { + color: var(--text-color); +} +.sidebar .social-links a:hover { + color: var(--third-color); +} + +.post { + background-color: var(--bg-color); + margin: 30px; + width:80%; + padding-left:20px; +} +.post .banner{ + width:100%; + max-height: 300px; + object-fit:scale-down; + object-position:top; +} +.post .post-title h1 { + text-transform: uppercase; + font-size: 30px; + letter-spacing: 5px; + line-height: 1; +} +.post .post-title h2 { + text-transform: uppercase; + letter-spacing: 1px; + font-size: 28px; + line-height: 1; + font-weight: 600; + color: var(--text-color); +} +.post .post-title h3 { + text-transform: uppercase; + letter-spacing: 1px; + line-height: 1; + font-weight: 600; + color: var(--text-color); + font-size: 22px; + margin: 0; +} +.post .post-title a { + text-decoration: none; + letter-spacing: 1px; + color: var(--text-color); +} +.post .post-title a:hover { + text-decoration: underline; +} +.post .post-content a { + text-decoration: none; + color: var(--third-color); +} + +.post .post-content table { + border-collapse:collapse; +} + +.post .post-content table,.post .post-content table td, .post .post-content table th{ + border: 1px dashed var(--text-color); +} + +.post .post-content table tr:nth-child(even) { + background-color: #f2f2f2; +} +.post .post-content table td, .post .post-content table th{ + padding: 15px +} +.post .post-content a:hover { + color: var(--third-color); +} +.post .post-content h3 { + color: var(--text-color); + font-size: 22px; + font-weight: 600; +} +.post .post-content h4 { + color: var(--text-color) + font-size: 16px; +} +.post .post-content img { + max-width: 60%; + text-align: center; + margin: 0 auto; + display:block; + padding:10px; +} +.post .post-footer { + padding: 0 0 30px 0; + border-bottom: 1px solid var(--text-color); +} +.post .post-footer .meta { + max-width: 100%; + height: 25px; + color: var(--text-color); +} +.post .post-footer .meta .info { + float: left; + font-size: 12px; + margin-bottom: 1em; +} +.post .post-footer .info .separator a { + margin-right: 0.2em; +} +.post .post-footer .meta .info .date { + margin-right: 10px; +} +.info { + margin: 1em; +} +.post .post-footer .meta a { + text-decoration: none; + color: var(--text-color) + padding-right: 10px; +} +.post .post-footer .meta a:hover { + color: var(--third-color); +} +.post .post-footer .blog{ + color: var(--text-color); +} +.post .post-footer .blog:hover{ + color: var(--first-color); +} +.post .post-footer .meta i { + margin-right: 6px; +} +.post .post-footer .tags { + padding-bottom: 15px; + font-size: 13px; +} +.post .post-footer .tags ul { + list-style-type: none; + display: inline; + margin: 0; + padding: 0; +} +.post .post-footer .tags ul li { + list-style-type: none; + margin: 0; + padding-right: 5px; + display: inline; +} +.post .post-footer .tags a { + text-decoration: none; + color: var(--text-color); + font-weight: 400; +} +.post .post-footer .tags a:hover { + text-decoration: none; +} + +.pagination { + margin: 30px; + padding: 0px 0 56px 0; + border-bottom: 1px solid var(--text-color); +} +.pagination ul { + list-style: none; + margin: 0; + padding: 0; + height: 13px; +} +.pagination ul li { + margin: 0 2px 0 2px; + display: inline; + line-height: 1; +} +.pagination ul li a { + text-decoration: none; +} +.pagination .pre { + float: left; +} +.pagination .next { + float: right; +} + +.like-reblog-buttons { + float: right; +} + +.like-button { + float: right; + padding: 0 0 0 10px; +} + +.reblog-button { + float: right; + padding: 0; +} + +#install-btn { + position: fixed; + bottom: 0px; + right: 6px; +} + +.footer { + clear: both; + text-align: center; + font-size: 14px; + margin: 0 auto; + bottom: 0; + position: absolute; + width: 100%; + padding-bottom: 20px; + background: var(--bg-color); +} + +.footer a { + color: var(--text-color); +} +.footer a:hover { + color: var(--third-color); +} + +/*for archive*/ +.archive { + width: 80%; +} +.list-title{ + margin:30px; + font-size:30px; + font-weight:bold; + color: var(--text-color) +} + +.list-title i{ + font-size:22px; + vertical-align:middle; + color: var(--text-color) +} + +.list-with-title { + font-size: 14px; + margin: 30px; + padding: 0; +} +.list-with-title li { + list-style-type: none; + padding: 0; +} +.list-with-title .listing-title { + font-size: 24px; + color: var(--text-color); + font-weight: 600; + line-height: 2.2em; +} +.list-with-title .listing { + padding: 0; +} +.list-with-title .listing .listing-post { + padding-bottom: 5px; +} +.list-with-title .listing .listing-post .post-time { + float: right; + color: var(--text-color); +} +.list-with-title .listing .listing-post a { + color: var(--text-color); +} +.list-with-title .listing .listing-post a:hover { + color: var(--third-color); +} + +/* share */ +.share { + margin: 0px 30px; + display: inline-flex; +} + +/* about */ +.about { + margin: 30px; + width:80%; +} +.about h3 { + font-size: 22px; +} + +/* links*/ +.links { + margin: 30px; +} +.links h3 { + font-size: 22px; +} +.links a { + cursor: pointer; +} + +/* Comments */ +.comment-count { + color: #666; +} + +.tab-community { + color: #666; +} + +.readmore { + font-size: 14px; + text-align:left; + padding:0; + text-decoration:underline; +} + +.back-button { + padding-top: 30px; + max-width: 100px; + padding-left: 40px; + float: left; +} + +/* Buttons */ +a.btn { + color: #868686; + font-weight: 400; +} + +.btn { + display: inline-block; + position: relative; + outline: 0; + color: rgba(0, 0, 0, 0.44); + background: transparent; + font-size: 14px; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 1px solid rgba(0, 0, 0, 0.15); + white-space: nowrap; + font-weight: 400; + font-style: normal; + border-radius: 999em; +} + +.btn:hover { + display: inline-block; + position: relative; + outline: 0px; + color: #464545; + background: transparent; + font-size: 14px; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 1px solid #464545; + white-space: nowrap; + font-weight: 400; + font-style: normal; + border-radius: 999em; +} + +[role="back"] { + padding: 0.5em 1.25em; + line-height: 1.666em; +} + +[role="home"] { + padding: 0.5em 1.25em; + line-height: 1.666em; +} + +[role="navigation"] { + padding: 0.5em 1.25em; + line-height: 1.666em; +} + +[role="tags"] { + padding: 6px 12px; +} + +/* Menu */ +.menu { + float: right; + padding-top: 30px; +} +.menu .btn-down { + margin: 0px; +} +.menu .btn-down li { + list-style: none; + width: 100px; +} +.menu .btn-down li a { + display: inline-block; + position: relative; + padding: 0.5em 1.25em; + outline: 0; + color: rgba(0, 0, 0, 0.44); + background: transparent; + font-size: 14px; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 1px solid rgba(0, 0, 0, 0.15); + white-space: nowrap; + font-weight: 400; + font-style: normal; + border-radius: 999em; + margin-top: 5px; +} +.menu .btn-down li a:hover { + position: relative; + padding: 0.5em 1.25em; + outline: 0; + color: #fff; + background: #3CBD10; + font-size: 14px; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 1px solid rgba(0, 0, 0, 0.15); + white-space: nowrap; + font-weight: 400; + font-style: normal; + border-radius: 999em; + margin-top: 5px; +} +.menu .btn-down div { + position: absolute; + visibility: hidden; + width: 100px; + float: right; +} + +.page_404 { + text-align: center; + padding-top: 50px; +} + +.pixelfed_embed { + margin:0 auto; + display:block; +} + +@media screen and (max-width: 960px) { + .sidebar { + width: 100%; + position: absolute; + border-right: none; + z-index: 1; + } + .sidebar .logo-title { + padding-top: 100px; + } + .sidebar .logo-title .title img { + width: 70px; + } + .sidebar .logo-title .title h3 { + font-size: 20px; + } + .sidebar #logo{ + padding-top:80px; + } + .page-top { + width: 100%; + } + + .post-title h3 { + line-height: 1.6; + } + + .content { + margin-top: 680px; + width: 100%; + z-index: 2; + position: absolute; + } + + .about, .post{ + width:90%; + margin-left:15px; + } + .footer { + display: none; + } + + .share { + display: grid; + } +} diff --git a/themes/anatole/static/css/style.css b/themes/anatole/static/css/style.css index 3179b31e..3e255d9f 100644 --- a/themes/anatole/static/css/style.css +++ b/themes/anatole/static/css/style.css @@ -4,19 +4,79 @@ html { font-family: 'Inter', sans-serif; height:100%;} @supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; } } +:root { + --dark-link:#59ABE3; + --dark-text:#f8f8f8; + --dark-bg:#2b2b2b; + --dark-opacity: 0.75; + --light-text:#2b2b2b; + --light-bg:#f8f8f8; + --light-link:#0065BF; + --light-opacity:1; + + --text-colour: var(--dark-text); + --bg-colour: var(--dark-bg); + --link-colour: var(--dark-link); + --opacity-img: var(--dark-opacity); +} + +@media (prefers-color-scheme: light) { + --text-colour: var(--light-text); + --bg-colour: var(--light-bg); + --link-colour: var(--light-link); + --opacity-img: var(--light-opacity); + +} +[data-theme="light"]{ + --text-colour: var(--light-text); + --bg-colour: var(--light-bg); + --link-colour: var(--light-link); + --opacity-img: var(--light-opacity); +} + +/* Switched mode */ + +.theme-switch:checked + *, +.theme-switch:checked + * + *{ + --text-colour:var(--light-text); + --bg-colour:var(--light-bg); + --link-colour:var(--light-link); + --opacity-img: var(--light-opacity); +} + +.theme-switch{ + display:none; +} + +.light{ + display:inline; + float:right; + color:var(--text-colour); +} + html { - background-color: #fff; - -webkit-font-smoothing: antialiased; + -webkit-animation-fill-mode: forwards; } body { - color: rgba(0, 0, 0, 0.8); + color: var(--text-colour); font-size: 15px; width: 100%; margin: 0 auto 30px auto; - background-color: #2b2b2b; + background: var(--bg-colour); +} +#page{ + display:block; + height:100%; + color: var(--text-colour); + background: var(--bg-colour); +} +.main, .content { + background: var(--bg-colour); + color: var(--text-colour); + height:100%; + display:block; } - p { line-height: 1.9em; font-weight: 400; @@ -27,25 +87,29 @@ a { text-decoration: none; } +img { + opacity: var(--opacity-img); + transition: opacity .5s ease-in-out; +} +img:hover { + opacity: 1 +} .category { padding: 4px 6px; border-radius: 3px; - color: #fff; - background-color: #f9f9fd; - border: 1px solid #f2f2f2; + border: 1px solid var(--text-colour); } .blog { padding: 4px 6px; border-radius: 3px; - color: #fff; - background-color: #0065bf; - border: 1px solid #f2f2f2; + background: var(--link-colour); + border: 1px solid var(--text-colour); } .tag::before { content: "#"; - opacity: .5; + opacity: .75; } .tag, .category { @@ -56,7 +120,7 @@ a { } pre { - background-color: #f9f9fd; + background: var(--bg-colour); padding: 5px; } @@ -72,99 +136,35 @@ a:link, a:visited { -o-transition: all .15s linear; -ms-transition: all .15s linear; transition: all .15s linear; - color: #424242; + color: var(--text-colour); } a:hover, a:active { - color: #0065BF; -} - -/*basic styles ends*/ -/*animation starts*/ -.animated { - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; - -ms-animation-fill-mode: both; - -o-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; - -ms-animation-duration: 1s; - -o-animation-duration: 1s; - animation-duration: 1s; -} - -.animated.hinge { - -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; - -ms-animation-duration: 1s; - -o-animation-duration: 1s; - animation-duration: 1s; -} - -@-webkit-keyframes fadeInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-20px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} -@-moz-keyframes fadeInDown { - 0% { - opacity: 0; - -moz-transform: translateY(-20px); - } - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} -@-o-keyframes fadeInDown { - 0% { - opacity: 0; - -o-transform: translateY(-20px); - } - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} -@keyframes fadeInDown { - 0% { - opacity: 0; - transform: translateY(-20px); - } - 100% { - opacity: 1; - transform: translateY(0); - } -} -.fadeInDown { - -webkit-animation-name: fadeInDown; - -moz-animation-name: fadeInDown; - -o-animation-name: fadeInDown; - animation-name: fadeInDown; + color: var(--link-colour); } -/*animation ends*/ .content { - height: auto; + background: var(--bg-colour); + position:fixed; + left:30%; + height: 100%; float: right; width: 70%; margin-top: 60px; + overflow:auto; + -ms-overflow-style:none; +} +.content::-webkit-scrollbar{ + display:none; } - .page-top { width: 70%; position: fixed; right: 0; z-index: 3; - background-color: #fff; height: 60px; - border-bottom: 1px solid #f2f2f2; + border-bottom: 1px solid var(--text-colour); + background: var(--bg-colour); } .page-top .nav { width:90%; @@ -173,21 +173,16 @@ width:90%; float: left; font-size: 14px; } -.page-top .nav li, .page-top .language-selector li { +.page-top .nav li{ position: relative; display: initial; padding-right: 20px; } .page-top .nav a { - color: #5A5A5A; + color: var(--text-colour); } .page-top .nav a:hover { - color: #0065BF; -} -.page-top .nav a.current { - color: #5A5A5A; - padding-bottom: 22px; - border-bottom: 1px solid #5A5A5A; + color: var(--link-colour); } .page-top .information{ float: right; @@ -214,39 +209,42 @@ width:90%; .page-top .language-selector { float:right; position:relative; - top:-5px; - padding-bottom:22px; -} -.page-top .language-selector img{ - display:inline; - position:fixed; - margin:0; - padding:10px; - top:0; + display:inline-flex; + top:-11px; } .page-top .language-selector ul{ - display:inline; list-style:none; - position:relative; - margin-top:5px; + padding-bottom:0; + margin:0; } .page-top .language-selector li{ vertical-align:top; - margin:10px; + margin:0; + padding-bottom:22px; +} +.page-top .language-selector li div{ + position:relative; + height:50px; + display:inline; + top:-5px; + left:-5px; + margin-right:5px; +} +.page-top .language-selector i{ + padding-bottom:15px; + margin-top:5px; } - .sidebar { width: 30%; + background: var(--bg-colour); -webkit-background-size: cover; background-size: cover; - background-color: #fff; height: 100%; - transition: 0.8s; top: 0; left: 0; position: fixed; z-index: 4; - border-right: 1px solid #f2f2f2; + border-right: 1px solid var(--text-colour); } .sidebar #logo{ max-width: 300px; @@ -263,7 +261,7 @@ width:90%; font-size: 14px; width: 60%; margin: 0 auto; - color: #565654; + color: var(--text-colour); padding-bottom:10px; } .sidebar .logo-title .logo { @@ -279,7 +277,7 @@ width:90%; } .sidebar .logo-title .title a { text-decoration: none; - color: #464646; + color: var(--text-colour); font-size: 2rem; font-weight: bold; } @@ -298,14 +296,13 @@ width:90%; line-height: 0; } .sidebar .social-links a { - color: #565654; + color: var(--text-colour); } .sidebar .social-links a:hover { - color: #0065BF; + color: var(--link-colour); } - .post { - background-color: #FFF; + background: var(--bg-colour); margin: 30px; width:80%; padding-left:20px; @@ -328,28 +325,28 @@ width:90%; font-size: 28px; line-height: 1; font-weight: 600; - color: #5f5f5f; + color: var(--text-colour); } .post .post-title h3 { text-transform: uppercase; letter-spacing: 1px; line-height: 1; font-weight: 600; - color: #464646; + color: var(--text-colour); font-size: 22px; margin: 0; } .post .post-title a { text-decoration: none; letter-spacing: 1px; - color: #5f5f5f; + color: var(--text-colour); } .post .post-title a:hover { text-decoration: underline; } .post .post-content a { text-decoration: none; - color: #0065BF; + color: var(--link-colour); } .post .post-content table { @@ -357,7 +354,7 @@ width:90%; } .post .post-content table,.post .post-content table td, .post .post-content table th{ - border: 1px dashed #2b2b2b; + border: 1px dashed var(--text-colour); } .post .post-content table tr:nth-child(even) { @@ -367,15 +364,15 @@ width:90%; padding: 15px } .post .post-content a:hover { - color: #2F69B3; + color: var(--link-colour); } .post .post-content h3 { - color: #5F5F5F; + color: var(--text-colour); font-size: 22px; font-weight: 600; } .post .post-content h4 { - color: #5F5F5F; + color: var(--text-colour); font-size: 16px; } .post .post-content img { @@ -387,12 +384,12 @@ width:90%; } .post .post-footer { padding: 0 0 30px 0; - border-bottom: 1px solid #f2f2f2; + border-bottom: 1px solid var(--text-colour); } .post .post-footer .meta { max-width: 100%; height: 25px; - color: #bbbbbb; + color: var(--text-colour); } .post .post-footer .meta .info { float: left; @@ -410,17 +407,17 @@ width:90%; } .post .post-footer .meta a { text-decoration: none; - color: #bbbbbb; + color: var(--text-colour); padding-right: 10px; } .post .post-footer .meta a:hover { - color: #0065BF; + color: var(--link-colour); } .post .post-footer .blog{ - color: #f8f8f8; + color: var(--text-colour); } .post .post-footer .blog:hover{ - color: #2b2b2b; + color: var(--text-colour); } .post .post-footer .meta i { margin-right: 6px; @@ -443,7 +440,7 @@ width:90%; } .post .post-footer .tags a { text-decoration: none; - color: rgba(0, 0, 0, 0.44); + color: var(--text-colour); font-weight: 400; } .post .post-footer .tags a:hover { @@ -453,7 +450,7 @@ width:90%; .pagination { margin: 30px; padding: 0px 0 56px 0; - border-bottom: 1px solid #f2f2f2; + border-bottom: 1px solid var(--text-colour); } .pagination ul { list-style: none; @@ -496,11 +493,6 @@ width:90%; right: 6px; } -#disqus_thread { - margin: 30px; - border-bottom: 1px solid #f2f2f2; -} - .footer { clear: both; text-align: center; @@ -510,29 +502,34 @@ width:90%; position: absolute; width: 100%; padding-bottom: 20px; - background: #fff; + background: var(--bg-colour); } .footer a { - color: #A6A6A6; + color: var(--text-colour); } .footer a:hover { - color: #0065BF; + color: var(--link-colour); } /*for archive*/ .archive { width: 80%; } +.description { + color: var(--text-colour); +} .list-title{ margin:30px; font-size:30px; font-weight:bold; + color: var(--text-colour); } .list-title i{ font-size:22px; vertical-align:middle; + color: var(--text-colour); } .list-with-title { @@ -546,7 +543,7 @@ width:90%; } .list-with-title .listing-title { font-size: 24px; - color: #666666; + color: var(--text-colour); font-weight: 600; line-height: 2.2em; } @@ -558,13 +555,13 @@ width:90%; } .list-with-title .listing .listing-post .post-time { float: right; - color: #C5C5C5; + color: var(--text-colour); } .list-with-title .listing .listing-post a { - color: #8F8F8F; + color: var(--text-colour); } .list-with-title .listing .listing-post a:hover { - color: #0065BF; + color: var(--link-colour); } /* share */ @@ -738,6 +735,7 @@ a.btn { margin:0 auto; display:block; } + @media screen and (max-width: 960px) { .sidebar { width: 100%; @@ -770,6 +768,8 @@ a.btn { width: 100%; z-index: 2; position: absolute; + left:0; + height:100%; } .about, .post{