diff --git a/config.toml b/config.toml index 367c6ae1..658384a0 100644 --- a/config.toml +++ b/config.toml @@ -35,7 +35,7 @@ description = "Quintessentially Celtic, vehemently Viking, passionately European profilePicture = "images/profile.jpg" siteLogo = "images/na-sm.png" keywords = "" -favicon = "favicons/favicon-180x180.png" +favicon = "favicons/favicon.png" ## Social Links [[params.socialIcons]] diff --git a/themes/anatole/static/css/old_style.css b/themes/anatole/static/css/old_style.css new file mode 100644 index 00000000..ff95f988 --- /dev/null +++ b/themes/anatole/static/css/old_style.css @@ -0,0 +1,745 @@ +@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; } +} + +html { + background-color: #2b2b2b; + -webkit-font-smoothing: antialiased; +} + +body { + color: #f8f8f8; + font-size: 15px; + width: 100%; + margin: 0 auto 30px auto; + background-color: #2b2b2b; +} + +p { + line-height: 1.9em; + font-weight: 400; + font-size: 14px; +} + +a { + text-decoration: none; +} + +.category { + padding: 4px 6px; + border-radius: 3px; + color: #fff; + background-color: #2b2b2b; + border: 1px solid #000; +} + +.tag::before { + content: "#"; + opacity: .5; +} + +.tag, .category { + display: inline-block; + font-size: 15px; + line-height: 1; + margin: 5px 8px 5px 0; +} + +pre { + background-color: #2b2b2b; + 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: #424242; +} + +a:hover, a:active { + color: #4786D6; +} + +/*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: 60%; + margin-top: 60px; +} + +.page-top { + width: 60%; + position: fixed; + right: 0; + z-index: 3; + background-color: #2b2b2b; + height: 60px; + border-bottom: 1px solid #000; +} +.page-top .nav{ + list-style: none; + width:100%; + display:block; + float: left; + padding:20px; + font-size: 12px; +} +.page-top .nav li { + position: relative; + display: initial; + padding-right: 20px; +} +.page-top .nav a { + color: #f8f8f8; +} +.page-top .nav a:hover { + color: #4786D6; +} +.page-top .nav a.current { + color: #f8f8f8; + padding-bottom: 22px; + border-bottom: 1px solid #f8f8f8; +} + +.page-top .information { + float: right; + padding-top: 12px; + padding-right: 20px; +} +.page-top .information .avatar { + float: right; +} +.page-top .information .avatar img { + width: 32px; + height: 32px; + 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; +} + +.sidebar { + width: 40%; + -webkit-background-size: cover; + background-size: cover; + background-color: #2b2b2b; + height: 100%; + transition: 0.8s; + top: 0; + left: 0; + position: fixed; + z-index: 4; + border-right: 1px solid #000; +} +.sidebar .logo-title { + text-align: center; + padding-top: 240px; +} +.sidebar .logo-title .description { + font-size: 14px; + color: #f8f8f8; +} +.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: #f8f8f8; + 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: #f8f8f8; +} +.sidebar .social-links a:hover { + color: #4786D6; +} + +.post { + background-color: #2b2b2b; + margin: 30px; +} +.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: #f8f8f8; +} +.post .post-title h3 { + text-transform: uppercase; + letter-spacing: 1px; + line-height: 1; + font-weight: 600; + color: #f8f8f8; + font-size: 22px; + margin: 0; +} +.post .post-title a { + text-decoration: none; + letter-spacing: 1px; + color: #f8f8f8; +} +.post .post-title a:hover { + text-decoration: underline; +} +.post .post-content a { + text-decoration: none; + letter-spacing: 1px; + color: #f8f8f8; +} +.post .post-content a:hover { + color: #2F69B3; +} +.post .post-content h3 { + color: #f8f8f8; + font-size: 22px; + font-weight: 600; +} +.post .post-content h4 { + color: #f8f8f8; + font-size: 16px; +} +.post .post-content img { + max-width: 100%; +} +.post .post-footer { + padding: 0 0 30px 0; + border-bottom: 1px solid #000; +} +.post .post-footer .meta { + max-width: 100%; + height: 25px; + color: #f8f8f8; +} +.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: #f8f8f8; + padding-right: 10px; +} +.post .post-footer .meta a:hover { + color: #4786D6; +} +.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: #f8f8f8; + font-weight: 400; +} +.post .post-footer .tags a:hover { + text-decoration: none; +} + +.pagination { + margin: 30px; + padding: 0px 0 56px 0; + border-bottom: 1px solid #000; +} +.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; +} + +#disqus_thread { + margin: 30px; + border-bottom: 1px solid #f2f2f2; +} + +.footer { + clear: both; + text-align: center; + font-size: 10px; + margin: 0 auto; + bottom: 0; + position: absolute; + width: 100%; + padding-bottom: 20px; + background: #2b2b2b; +} +.footer a { + color: #f8f8f8; +} +.footer a:hover { + color: #4786D6; +} + +/*for archive*/ +.archive { + width: 100%; +} + +.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: #f8f8f8; + 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: #C5C5C5; +} +.list-with-title .listing .listing-post a { + color: #8F8F8F; +} +.list-with-title .listing .listing-post a:hover { + color: #4786D6; +} + +/* share */ +.share { + margin: 0px 30px; + display: inline-flex; +} + +.evernote { + width: 32px; + height: 32px; + border-radius: 300px; + background-color: #3E3E3E; + margin-right: 5px; +} +.evernote a { + color: #fff; + padding: 11px; + font-size: 12px; +} +.evernote a:hover { + color: #ED6243; + padding: 11px; +} + +.weibo { + width: 32px; + height: 32px; + border-radius: 300px; + background-color: #ED6243; + margin-right: 5px; +} +.weibo a { + color: #fff; + padding: 9px; +} +.weibo a:hover { + color: #BD4226; +} + +.twitter { + width: 32px; + height: 32px; + border-radius: 300px; + background-color: #59C0FD; + margin-right: 5px; +} +.twitter a { + color: #fff; + padding: 9px; +} +.twitter a:hover { + color: #4B9ECE; +} + +/* about */ +.about { + margin: 30px; +} +.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; +} + +.read_more { + font-size: 14px; +} + +.back-button { + padding-top: 30px; + max-width: 100px; + padding-left: 40px; + float: left; +} + +/* Facebook Comments */ +#fb_comments_container { + margin: 30px; +} + +/* 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; +} + + + +@media screen and (max-width: 960px) { + .sidebar { + width: 100%; + position: absolute; + border-right: none; + z-index: 1; + } + .sidebar .logo-title { + padding-top: 120px; + } + .sidebar .logo-title .title img { + width: 100px; + } + .sidebar .logo-title .title h3 { + font-size: 20px; + } + + .page-top { + width: 100%; + } + + .post-title h3 { + line-height: 1.6; + } + + .content { + margin-top: 420px; + width: 100%; + z-index: 2; + position: absolute; + } + + .footer { + display: none; + } + + .share { + display: grid; + } +} diff --git a/themes/anatole/static/css/style.css b/themes/anatole/static/css/style.css index ff95f988..80ab763b 100644 --- a/themes/anatole/static/css/style.css +++ b/themes/anatole/static/css/style.css @@ -1,17 +1,12 @@ @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; } -} - html { - background-color: #2b2b2b; + background-color: #fff; -webkit-font-smoothing: antialiased; } body { - color: #f8f8f8; + color: rgba(0, 0, 0, 0.5); + font-family: 'Verdana', sans-serif; font-size: 15px; width: 100%; margin: 0 auto 30px auto; @@ -32,8 +27,16 @@ a { padding: 4px 6px; border-radius: 3px; color: #fff; - background-color: #2b2b2b; - border: 1px solid #000; + background-color: #f9f9fd; + border: 1px solid #f2f2f2; +} + +.blog { + padding: 4px 6px; + border-radius: 3px; + color: #fff; + background-color: #0065bf; + border: 1px solid #f2f2f2; } .tag::before { @@ -49,7 +52,7 @@ a { } pre { - background-color: #2b2b2b; + background-color: #f9f9fd; padding: 5px; } @@ -69,7 +72,7 @@ a:link, a:visited { } a:hover, a:active { - color: #4786D6; + color: #0065BF; } /*basic styles ends*/ @@ -146,25 +149,23 @@ a:hover, a:active { .content { height: auto; float: right; - width: 60%; + width: 70%; margin-top: 60px; } .page-top { - width: 60%; + width: 70%; position: fixed; right: 0; z-index: 3; - background-color: #2b2b2b; + background-color: #fff; height: 60px; - border-bottom: 1px solid #000; + border-bottom: 1px solid #f2f2f2; } -.page-top .nav{ +.page-top .nav { list-style: none; - width:100%; - display:block; + padding: 18px 30px; float: left; - padding:20px; font-size: 12px; } .page-top .nav li { @@ -173,17 +174,16 @@ a:hover, a:active { padding-right: 20px; } .page-top .nav a { - color: #f8f8f8; + color: #5A5A5A; } .page-top .nav a:hover { - color: #4786D6; + color: #0065BF; } .page-top .nav a.current { - color: #f8f8f8; + color: #5A5A5A; padding-bottom: 22px; - border-bottom: 1px solid #f8f8f8; + border-bottom: 1px solid #5A5A5A; } - .page-top .information { float: right; padding-top: 12px; @@ -193,8 +193,8 @@ a:hover, a:active { float: right; } .page-top .information .avatar img { - width: 32px; - height: 32px; + width: 48px; + height: 48px; border-radius: 300px; } .page-top .information .back_btn { @@ -208,17 +208,24 @@ a:hover, a:active { } .sidebar { - width: 40%; + width: 30%; -webkit-background-size: cover; background-size: cover; - background-color: #2b2b2b; + background-color: #fff; height: 100%; transition: 0.8s; top: 0; left: 0; position: fixed; z-index: 4; - border-right: 1px solid #000; + border-right: 1px solid #f2f2f2; +} +.sidebar #logo{ + max-width: 300px; + width: 80%; + margin: 0 auto; + display:block; + padding: 10px; } .sidebar .logo-title { text-align: center; @@ -226,7 +233,10 @@ a:hover, a:active { } .sidebar .logo-title .description { font-size: 14px; - color: #f8f8f8; + width: 60%; + margin: 0 auto; + color: #565654; + padding-bottom:10px; } .sidebar .logo-title .logo { margin: 0 auto; @@ -241,7 +251,7 @@ a:hover, a:active { } .sidebar .logo-title .title a { text-decoration: none; - color: #f8f8f8; + color: #464646; font-size: 2rem; font-weight: bold; } @@ -260,15 +270,23 @@ a:hover, a:active { line-height: 0; } .sidebar .social-links a { - color: #f8f8f8; + color: #565654; } .sidebar .social-links a:hover { - color: #4786D6; + color: #0065BF; } .post { - background-color: #2b2b2b; + background-color: #FFF; 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; @@ -282,21 +300,21 @@ a:hover, a:active { font-size: 28px; line-height: 1; font-weight: 600; - color: #f8f8f8; + color: #5f5f5f; } .post .post-title h3 { text-transform: uppercase; letter-spacing: 1px; line-height: 1; font-weight: 600; - color: #f8f8f8; + color: #464646; font-size: 22px; margin: 0; } .post .post-title a { text-decoration: none; letter-spacing: 1px; - color: #f8f8f8; + color: #5f5f5f; } .post .post-title a:hover { text-decoration: underline; @@ -304,31 +322,50 @@ a:hover, a:active { .post .post-content a { text-decoration: none; letter-spacing: 1px; - color: #f8f8f8; + color: #0065BF; +} + +.post .post-content table { + border-collapse:collapse; +} + +.post .post-content table,.post .post-content table td, .post .post-content table th{ + border: 1px dashed #2b2b2b; +} + +.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: #2F69B3; } .post .post-content h3 { - color: #f8f8f8; + color: #5F5F5F; font-size: 22px; font-weight: 600; } .post .post-content h4 { - color: #f8f8f8; + color: #5F5F5F; font-size: 16px; } .post .post-content img { - max-width: 100%; + 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 #000; + border-bottom: 1px solid #f2f2f2; } .post .post-footer .meta { max-width: 100%; height: 25px; - color: #f8f8f8; + color: #bbbbbb; } .post .post-footer .meta .info { float: left; @@ -346,11 +383,17 @@ a:hover, a:active { } .post .post-footer .meta a { text-decoration: none; - color: #f8f8f8; + color: #bbbbbb; padding-right: 10px; } .post .post-footer .meta a:hover { - color: #4786D6; + color: #0065BF; +} +.post .post-footer .blog{ + color: #f8f8f8; +} +.post .post-footer .blog:hover{ + color: #2b2b2b; } .post .post-footer .meta i { margin-right: 6px; @@ -373,7 +416,7 @@ a:hover, a:active { } .post .post-footer .tags a { text-decoration: none; - color: #f8f8f8; + color: rgba(0, 0, 0, 0.44); font-weight: 400; } .post .post-footer .tags a:hover { @@ -383,7 +426,7 @@ a:hover, a:active { .pagination { margin: 30px; padding: 0px 0 56px 0; - border-bottom: 1px solid #000; + border-bottom: 1px solid #f2f2f2; } .pagination ul { list-style: none; @@ -440,18 +483,18 @@ a:hover, a:active { position: absolute; width: 100%; padding-bottom: 20px; - background: #2b2b2b; + background: #fff; } .footer a { - color: #f8f8f8; + color: #A6A6A6; } .footer a:hover { - color: #4786D6; + color: #0065BF; } /*for archive*/ .archive { - width: 100%; + width: 80%; } .list-with-title { @@ -465,7 +508,7 @@ a:hover, a:active { } .list-with-title .listing-title { font-size: 24px; - color: #f8f8f8; + color: #666666; font-weight: 600; line-height: 2.2em; } @@ -483,7 +526,7 @@ a:hover, a:active { color: #8F8F8F; } .list-with-title .listing .listing-post a:hover { - color: #4786D6; + color: #0065BF; } /* share */ @@ -542,6 +585,7 @@ a:hover, a:active { /* about */ .about { margin: 30px; + width:80%; } .about h3 { font-size: 22px; @@ -701,8 +745,6 @@ a.btn { padding-top: 50px; } - - @media screen and (max-width: 960px) { .sidebar { width: 100%; @@ -711,15 +753,17 @@ a.btn { z-index: 1; } .sidebar .logo-title { - padding-top: 120px; + padding-top: 100px; } .sidebar .logo-title .title img { - width: 100px; + width: 70px; } .sidebar .logo-title .title h3 { font-size: 20px; } - + .sidebar #logo{ + padding-top:80px; + } .page-top { width: 100%; } @@ -729,12 +773,16 @@ a.btn { } .content { - margin-top: 420px; + margin-top: 680px; width: 100%; z-index: 2; position: absolute; } + .about, .post{ + width:90%; + margin-left:15px; + } .footer { display: none; }