Init v3.2

This commit is contained in:
JiXieShi
2024-03-21 15:25:12 +08:00
commit 6e70a1d4df
49 changed files with 2115 additions and 0 deletions

View 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;
}

View 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}