add dark mode
parent
f072e716c5
commit
92c5e9f093
|
@ -24,7 +24,7 @@
|
|||
<#if r == posts.number+1>
|
||||
<li><a class="pagination-link is-current" href="${context!}/page/${posts.number+1}">${posts.number+1}</a></li>
|
||||
<#else>
|
||||
<li><a class="pagination-link has-text-black-ter" href="${context!}/page/${r}">${r}</a></li>
|
||||
<li><a class="pagination-link" href="${context!}/page/${r}">${r}</a></li>
|
||||
</#if>
|
||||
</#list>
|
||||
</ul>
|
||||
|
|
Binary file not shown.
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</#if>
|
||||
<#if name == 'slider'>
|
||||
<div class="blog-slider">
|
||||
<div class="blog-slider card">
|
||||
<div class="blog-slider__wrp swiper-wrapper">
|
||||
<#list posts.content as post>
|
||||
<#if post.topPriority == 1>
|
||||
|
@ -30,7 +30,7 @@
|
|||
<div class="blog-slider__content">
|
||||
<span class="blog-slider__code">${post.createTime?string["EEE MMM d"]}</span>
|
||||
<div class="blog-slider__title title is-5">${post.title!}</div>
|
||||
<div class="blog-slider__text">${post.summary!}</div>
|
||||
<div class="blog-slider__text" content="">${post.summary!}</div>
|
||||
<a href="${context!}/archives/${post.url!}" class="blog-slider__button">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<#macro navbar layout>
|
||||
<nav class="navbar navbar-main has-background-white is-paddingless " >
|
||||
<nav class="navbar navbar-main is-paddingless " >
|
||||
<div class="container ">
|
||||
<div class="navbar-brand transparent">
|
||||
<a class="navbar-item navbar-logo" href="${context!}">
|
||||
|
|
|
@ -68,6 +68,7 @@
|
|||
<link rel="stylesheet" href="${static!}/source/css/style.css">
|
||||
<link rel="stylesheet" href="${static!}/source/css/bundle.css">
|
||||
<link rel="stylesheet" href="${static!}/source/css/back-to-top.css">
|
||||
<link rel="stylesheet" href="${static!}/source/css/style.dark.css">
|
||||
|
||||
<#if post??>
|
||||
<link rel="stylesheet" type="text/css"
|
||||
|
|
|
@ -67,48 +67,48 @@ box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);">
|
|||
<#-- </div>-->
|
||||
<div class="level is-mobile">
|
||||
<#if settings.social_github?? && settings.social_github!=''>
|
||||
<a class="level-item button is-white is-marginless" target="_blank" title="Github"
|
||||
<a class="level-item button is-marginless" target="_blank" title="Github"
|
||||
href="https://github.com/${settings.social_github}">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<#if settings.social_qq?? && settings.social_qq!=''>
|
||||
<a class="level-item button is-white is-marginless" target="_blank" title="QQ"
|
||||
<a class="level-item button is-marginless" target="_blank" title="QQ"
|
||||
href="tencent://message/?uin=${settings.social_qq}&Site=&Menu=yes">
|
||||
<i class="fab fa-qq"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<#if settings.social_weibo?? && settings.social_weibo!=''>
|
||||
<a class="level-item button is-white is-marginless" target="_blank" title="Weibo"
|
||||
<a class="level-item button is-marginless" target="_blank" title="Weibo"
|
||||
href="https://weibo.com/${settings.social_weibo}">
|
||||
<i class="fab fa-weibo"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<#if settings.social_twitter?? && settings.social_twitter!=''>
|
||||
<a class="level-item button is-white is-marginless" target="_blank" title="Twitter"
|
||||
<a class="level-item button is-marginless" target="_blank" title="Twitter"
|
||||
href="https://twitter.com/${settings.social_twitter}">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<#if settings.social_facebook?? && settings.social_facebook!=''>
|
||||
<a class="level-item button is-white is-marginless" target="_blank" title="Facebook"
|
||||
<a class="level-item button is-marginless" target="_blank" title="Facebook"
|
||||
href="https://www.facebook.com/${settings.social_facebook}">
|
||||
<i class="fab fa-facebook"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<#if settings.social_email?? && settings.social_email!=''>
|
||||
<a class="level-item button is-white is-marginless" target="_blank" title="Email"
|
||||
<a class="level-item button is-marginless" target="_blank" title="Email"
|
||||
href="mailto:${settings.social_email}">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<#if settings.social_telegram?? && settings.social_telegram!=''>
|
||||
<a class="level-item button is-white is-marginless" target="_blank" title="Telegram"
|
||||
<a class="level-item button is-marginless" target="_blank" title="Telegram"
|
||||
href="https://t.me/${settings.social_telegram}">
|
||||
<i class="fab fa-telegram"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<a class="level-item button is-white is-marginless" target="_blank" title="RSS" href="${context!}/atom.xml">
|
||||
<a class="level-item button is-marginless" target="_blank" title="RSS" href="${context!}/atom.xml">
|
||||
<i class="fas fa-rss"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -28,6 +28,8 @@
|
|||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.4.1/css/all.css">
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-light.css">
|
||||
<link rel="stylesheet" href="${static!}/source/css/style.dark.css">
|
||||
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="//cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">
|
||||
|
@ -86,7 +88,6 @@
|
|||
#aniimated-thumbnials a {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
@ -105,7 +106,6 @@
|
|||
border-radius: 2px;
|
||||
}
|
||||
.photos .container {
|
||||
background-color: #fff;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
<#if r == posts.number+1>
|
||||
<li><a class="pagination-link is-current" href="${context!}/search/page/${posts.number+1}?keyword=${keyword}">${posts.number+1}</a></li>
|
||||
<#else>
|
||||
<li><a class="pagination-link has-text-black-ter" href="${context!}/search/page/${r}?keyword=${keyword}">${r}</a></li>
|
||||
<li><a class="pagination-link " href="${context!}/search/page/${r}?keyword=${keyword}">${r}</a></li>
|
||||
</#if>
|
||||
</#list>
|
||||
</ul>
|
||||
|
|
|
@ -4,9 +4,6 @@
|
|||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
body {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.section {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
@ -17,6 +14,19 @@ select,
|
|||
textarea {
|
||||
font-family: "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
.tag:not(body),
|
||||
.button,
|
||||
.file-cta,
|
||||
.file-name,
|
||||
.input,
|
||||
.pagination-ellipsis,
|
||||
.pagination-link,
|
||||
.pagination-next,
|
||||
.pagination-previous,
|
||||
.select select,
|
||||
.textarea {
|
||||
border-radius: 2px;
|
||||
}
|
||||
@media screen and (min-width: 1280px) {
|
||||
.is-1-column .container,
|
||||
.is-2-column .container {
|
||||
|
@ -106,7 +116,6 @@ img.thumbnail {
|
|||
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
.navbar-main .navbar-item {
|
||||
padding: 1.25rem 0.75rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
.navbar-main .navbar-item.is-active {
|
||||
|
@ -228,6 +237,7 @@ img.thumbnail {
|
|||
}
|
||||
.article .content a {
|
||||
word-wrap: break-word;
|
||||
border-bottom: 0.0625rem dashed #eee;
|
||||
}
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
|
@ -356,9 +366,6 @@ img.thumbnail {
|
|||
.has-link-grey {
|
||||
color: #7a7a7a !important;
|
||||
}
|
||||
.has-link-black-ter {
|
||||
color: #242424 !important;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.has-text-centered-mobile {
|
||||
text-align: center !important;
|
||||
|
@ -536,3 +543,6 @@ iframe,
|
|||
video {
|
||||
height: none;
|
||||
}
|
||||
.post-content a {
|
||||
border-bottom: 0.0625rem dashed #eee;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,144 @@
|
|||
/* default for no-preference */
|
||||
:root {
|
||||
--color: #333;
|
||||
--background: #f7f7f7;
|
||||
--cardbgcolor: #fff;
|
||||
--cardtitlecolor: #333333;
|
||||
--navbarcolor: #333333;
|
||||
--img-default-filter: none;
|
||||
--img-hover-filter: none;
|
||||
--btn-bg-color:#f5f5f5;
|
||||
--btn-color: #333;
|
||||
--btn-hover-color: #eee;
|
||||
--link-color: #333;
|
||||
}
|
||||
/* Light mode */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--color: #333333;
|
||||
--background: #f7f7f7;
|
||||
--cardbgcolor: #fff;
|
||||
--cardcolor: #333;
|
||||
--cardtitlecolor: #333333;
|
||||
--navbarcolor: #333333;
|
||||
--img-default-filter: none;
|
||||
--img-hover-filter: none;
|
||||
--link-color: #333;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color: #bcbcbc;
|
||||
--background: #2c2a2a !important;
|
||||
--cardbgcolor: #454545;
|
||||
--cardcolor: #bcbcbc;
|
||||
--cardtitlecolor: #bcbcbc;
|
||||
--navbarcolor: #bcbcbc;
|
||||
--img-default-filter: grayscale(100%);
|
||||
--img-hover-filter: none;
|
||||
--btn-bg-color:#2c2a2a;
|
||||
--btn-color: #bcbcbc;
|
||||
--btn-hover-color: #333;
|
||||
--link-color: #bcbcbc
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
}
|
||||
body > .footer, body > .navbar {
|
||||
background-color: var(--cardbgcolor);
|
||||
color: var(--cardcolor);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--cardbgcolor);
|
||||
color: var(--cardcolor);
|
||||
}
|
||||
.card .card-image img,
|
||||
img.thumbnail {
|
||||
filter: var(--img-default-filter);
|
||||
}
|
||||
.card .card-image img:hover,
|
||||
img.thumbnail:hover{
|
||||
filter: var(--img-hover-filter);
|
||||
}
|
||||
|
||||
.card .title {
|
||||
color: var(--color) !important;
|
||||
}
|
||||
.card .content,
|
||||
/*.card .title a{*/
|
||||
/* color: var(--cardtitlecolor) !important;*/
|
||||
/*}*/
|
||||
.pagination .pagination-link:not(.is-current),
|
||||
.pagination .pagination-previous,
|
||||
.pagination .pagination-next {
|
||||
background-color: var(--cardbgcolor);
|
||||
color: var(--cardcolor);
|
||||
}
|
||||
|
||||
.navbar-item, .navbar-link {
|
||||
color: var(--navbarcolor);
|
||||
|
||||
}
|
||||
.has-link-black-ter {
|
||||
color: var(--cardtitlecolor) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.button {
|
||||
background-color: var(--btn-bg-color) !important;
|
||||
color: var(--btn-color) !important;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--btn-hover-color) !important;
|
||||
}
|
||||
.level .level-item.button {
|
||||
background-color: var(--cardbgcolor) !important;
|
||||
border-color: var(--cardbgcolor) !important;
|
||||
color: var(--color) !important;
|
||||
}
|
||||
|
||||
.menu-list .level {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.menu-list a:hover {
|
||||
background-color: var(--background);
|
||||
opacity: 0.6;
|
||||
color: var(--link-color);
|
||||
}
|
||||
.tag:not(body) {
|
||||
background-color: var(--background) !important;
|
||||
color: var(--color) !important;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
h7,
|
||||
strong {
|
||||
color: var(--color) !important;
|
||||
}
|
||||
|
||||
.is-active a{
|
||||
color: var(--color) !important;
|
||||
}
|
||||
|
||||
a.navbar-item:hover {
|
||||
background-color: var(--cardbgcolor);
|
||||
color: #3273dc;
|
||||
}
|
|
@ -11,15 +11,16 @@ screen-fullhd = 1472px
|
|||
html
|
||||
font-size: 14px
|
||||
|
||||
body
|
||||
background-color: #f7f7f7
|
||||
//body
|
||||
// background-color: #f7f7f7
|
||||
|
||||
.section
|
||||
padding: 2.0rem 1.5rem
|
||||
|
||||
body, button, input, select, textarea
|
||||
font-family: family-sans
|
||||
|
||||
.tag:not(body),.button,.file-cta, .file-name, .input, .pagination-ellipsis, .pagination-link, .pagination-next, .pagination-previous, .select select, .textarea
|
||||
border-radius: 2px
|
||||
@media screen and (min-width: screen-widescreen)
|
||||
.is-1-column .container
|
||||
.is-2-column .container
|
||||
|
@ -108,7 +109,6 @@ img.thumbnail
|
|||
.navbar-main
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)
|
||||
.navbar-item
|
||||
padding: 1.25rem 0.75rem
|
||||
padding-right: 1.5rem
|
||||
&.is-active
|
||||
color: hsl(217, 71%, 53%)
|
||||
|
@ -207,6 +207,7 @@ img.thumbnail
|
|||
position: relative
|
||||
a
|
||||
word-wrap: break-word
|
||||
border-bottom: .0625rem dashed #eee
|
||||
|
||||
.rtl
|
||||
direction: rtl
|
||||
|
@ -329,8 +330,8 @@ img.thumbnail
|
|||
.has-link-grey
|
||||
color: hsl(0, 0%, 48%) !important
|
||||
|
||||
.has-link-black-ter
|
||||
color: hsl(0, 0%, 14%) !important
|
||||
//.has-link-black-ter
|
||||
//color: hsl(0, 0%, 14%) !important
|
||||
|
||||
@media screen and (max-width: screen-tablet - 1)
|
||||
.has-text-centered-mobile
|
||||
|
@ -496,3 +497,8 @@ figure.highlight
|
|||
iframe,
|
||||
video
|
||||
height: none
|
||||
|
||||
.post-content
|
||||
a
|
||||
border-bottom: .0625rem dashed #eee;
|
||||
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
padding: 25px;
|
||||
border-radius: 2px;
|
||||
height: 250px;
|
||||
|
@ -167,7 +166,7 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
.blog-slider__text {
|
||||
color: #4e4a67;
|
||||
/*color: #4e4a67;*/
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@ pre.line-numbers > code {
|
|||
.line-numbers .line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: -1.8rem;
|
||||
top: -2rem;
|
||||
padding-top: 1.6rem;
|
||||
font-size: 100%;
|
||||
/*background-color: #EBEDED;*/
|
||||
|
|
Loading…
Reference in New Issue