Init v3.2
This commit is contained in:
477
themes/blog/public/css/app.css
Normal file
477
themes/blog/public/css/app.css
Normal file
@@ -0,0 +1,477 @@
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-family: josefin sans,-apple-system,BlinkMacSystemFont,helvetica neue,pingfang sc,hiragino sans gb,STHeiti,microsoft yahei,wenquanyi micro hei,Arial,Verdana,sans-serif;
|
||||
}
|
||||
html::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-thumb {
|
||||
height: 40px;
|
||||
background-color: #eee;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #ddd
|
||||
}
|
||||
pre{
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
background: #f5f2f0;
|
||||
}
|
||||
body{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
a{
|
||||
color: #161209;
|
||||
text-decoration: none;
|
||||
transition: color .2s ease,border-color .46s ease,background .46s ease,opacity .46s ease;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: #673ab7;
|
||||
color: var(--primary,#673ab7);
|
||||
|
||||
}
|
||||
p{
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
blockquote{
|
||||
text-indent: 2em;
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
}
|
||||
blockquote::before{
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
top: -10px;
|
||||
content: '“';
|
||||
font-family: fantasy;
|
||||
font-size: 40px;
|
||||
color: #673ab7;
|
||||
color: var(--primary,#673ab7);
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 860px){
|
||||
body{
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family: josefin sans;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.eot);
|
||||
src: local("Josefin Sans"),local("JosefinSans-Normal"),url(//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.eot?#iefix) format("embedded-opentype"),url(//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.woff2) format("woff2"),url(//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.woff) format("woff"),url(//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.ttf) format("truetype"),url(//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.svg#JosefinSans) format("svg")
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
width: auto;
|
||||
max-width: 1200px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.head{
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
}
|
||||
.head-content{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@media screen and (max-width: 860px){
|
||||
.head-content{
|
||||
padding-top: 10px;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.nav a{
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 32px;
|
||||
margin-bottom: 82px;
|
||||
}
|
||||
@media screen and (max-width: 860px){
|
||||
.sub-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.post-warp{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
max-width: 780px;
|
||||
margin: 0 auto;
|
||||
min-height: calc(100vh - 120px);
|
||||
padding: 46px 0;
|
||||
}
|
||||
@media screen and (max-width: 860px){
|
||||
.post-warp{
|
||||
min-height: calc(100vh - 132px);
|
||||
}
|
||||
}
|
||||
|
||||
.markdow img{
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.footer{
|
||||
color: #999;
|
||||
display: flex;
|
||||
height: 54px;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.footer-divider{
|
||||
margin: 0 10px;
|
||||
}
|
||||
@media screen and (max-width: 860px){
|
||||
.footer{
|
||||
flex-direction: column;
|
||||
}
|
||||
.footer span{
|
||||
text-align: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.footer-divider{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.footer a{
|
||||
color: #999;
|
||||
margin: 0 8px;
|
||||
}
|
||||
pre{
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
overflow: auto;
|
||||
}
|
||||
hr{
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
hr:after{
|
||||
content: '';
|
||||
display: block;
|
||||
margin: 30px auto;
|
||||
width: 10%;
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*Categories*/
|
||||
|
||||
.categories{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
.categories-card{
|
||||
width: 50%;
|
||||
margin-bottom: 46px;
|
||||
min-height: 250px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
@media screen and (max-width: 860px){
|
||||
.categories-card{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.icon{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.categories-article{
|
||||
text-indent: 2em;
|
||||
}
|
||||
.categories-article a{
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/*Pagination*/
|
||||
|
||||
.pagination{
|
||||
display: flex;
|
||||
margin: 60px 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
.pagination li{
|
||||
list-style-type: none;
|
||||
margin: 0 10px;
|
||||
width: 20px;
|
||||
}
|
||||
.pagination li a {
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #bfbfbf;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
.pagination li a:hover,.pagination .active a{
|
||||
border-bottom: 3px solid #673ab7;
|
||||
border-bottom: 3px solid var(--primary,#673ab7);
|
||||
}
|
||||
|
||||
/*Index*/
|
||||
.articles{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 400px;
|
||||
}
|
||||
.articles li{
|
||||
padding-bottom: 8px;
|
||||
list-style-type: none;
|
||||
margin: 40px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.articles li:after{
|
||||
content: '';
|
||||
display: block;
|
||||
margin: 60px auto;
|
||||
width: 10%;
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.articles li:last-child:after{
|
||||
display: none;
|
||||
}
|
||||
.read-all{
|
||||
display: inline-block;
|
||||
padding: 4px 20px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background: #673ab7;
|
||||
border: 2px solid #673ab7;
|
||||
background: var(--primary,#673ab7);
|
||||
border: 2px solid var(--primary,#673ab7);
|
||||
text-decoration: none;
|
||||
border-radius: 2px;
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.read-all:hover{
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.articles li .title{
|
||||
color: #555;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.articles li .title:hover{
|
||||
color: #673ab7;
|
||||
color: var(--primary,#673ab7);
|
||||
}
|
||||
.article-info{
|
||||
margin:20px 0 60px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
.article-info img{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.article-img img{
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border-radius:3%;
|
||||
object-fit:cover;
|
||||
}
|
||||
.article-info .divider-line{
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background: #999;
|
||||
margin: 0 14px;
|
||||
}
|
||||
.article{
|
||||
padding: 10px 0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.articles .description{
|
||||
color: #555;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
line-height: 2;
|
||||
text-indent: 2em;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@media screen and (max-width: 860px){
|
||||
.articles .description{
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.sub{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/*dashboard*/
|
||||
.item-content{
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.search-box{
|
||||
height: 40px;
|
||||
display: flex;
|
||||
border-radius: 2px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #673ab7;
|
||||
border: 1px solid var(--primary,#673ab7);
|
||||
width: 320px;
|
||||
}
|
||||
.search-input{
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
border: none;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.search-input:focus,.search-input:active{
|
||||
border: none;
|
||||
outline:none;
|
||||
}
|
||||
.search-icon{
|
||||
cursor: pointer;
|
||||
margin: 0 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.colors{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.colors li{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 10px 20px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.colors li.active:before{
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.action{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.action a{
|
||||
padding: 8px 16px;
|
||||
border-radius: 2px;
|
||||
opacity: .8;
|
||||
color: #fff;
|
||||
background-color: #673ab7;
|
||||
background-color: var(--primary,#673ab7);
|
||||
font-size: 14px;
|
||||
}
|
||||
.action a:hover{
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 4px rgba(0,0,0,.2);
|
||||
}
|
||||
.action-tip{
|
||||
font-size: 14px;
|
||||
color: #673ab7;
|
||||
color: var(--primary,#673ab7);
|
||||
}
|
||||
.action-msg{
|
||||
z-index: 1400;
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: auto;
|
||||
right: 24px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px 16px;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
min-width: 288px;
|
||||
border-radius: 4px;
|
||||
background-color: #673ab7;
|
||||
background-color: var(--primary,#673ab7);
|
||||
box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
|
||||
}
|
||||
.action-msg .close{
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
font-size: 16px;
|
||||
right: 24px;
|
||||
}
|
5
themes/blog/public/css/prism.css
Normal file
5
themes/blog/public/css/prism.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* PrismJS 1.28.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+c+cpp+cmake+go+java+json+json5+kotlin+lua+markup-templating+nginx+php+python+verilog+yaml&plugins=line-highlight+show-language+toolbar+copy-to-clipboard */
|
||||
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
|
||||
pre[data-line]{position:relative;padding:1em 0 1em 3em}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:hsla(24,20%,50%,.08);background:linear-gradient(to right,hsla(24,20%,50%,.1) 70%,hsla(24,20%,50%,0));pointer-events:none;line-height:inherit;white-space:pre}@media print{.line-highlight{-webkit-print-color-adjust:exact;color-adjust:exact}}.line-highlight:before,.line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:hsla(24,20%,50%,.4);color:#f4f1ef;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px #fff}.line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}.line-numbers .line-highlight:after,.line-numbers .line-highlight:before{content:none}pre[id].linkable-line-numbers span.line-numbers-rows{pointer-events:all}pre[id].linkable-line-numbers span.line-numbers-rows>span:before{cursor:pointer}pre[id].linkable-line-numbers span.line-numbers-rows>span:hover:before{background-color:rgba(128,128,128,.2)}
|
||||
div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}
|
Reference in New Issue
Block a user