diff options
Diffstat (limited to 'static/css/main.css')
| -rw-r--r-- | static/css/main.css | 199 |
1 files changed, 198 insertions, 1 deletions
diff --git a/static/css/main.css b/static/css/main.css index 078127e..3c65045 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1 +1,198 @@ -html{font-size:calc(1vh + 1vw)}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif}img{height:auto;width:100%;max-width:40vw}.no-break{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.control{list-style-type:none;margin:0;padding:0}.btn{cursor:pointer;text-decoration:none}.list,.pagination ul{list-style-type:none;margin:0 auto;padding:0}body{color:#001d21;width:80vw;margin:0 auto}.list{min-height:80vh;margin:0 auto 1rem;background:#333 url(/images/greenbox.jpg) no-repeat top/cover content-box content-box;-webkit-perspective:calc(100vw + 100vh);perspective:calc(100vw + 100vh)}.list li{padding:1em 0;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}.list li:first-child{padding-top:0}.list span{position:absolute;left:-3.5em}.list a{color:#001d21;background:#fff;width:100%;display:block;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transform:rotate(0deg) skew(0deg);transform:rotate(0deg) skew(0deg)}.list li:hover a{-webkit-transform:rotate(5deg) skew(20deg);transform:rotate(5deg) skew(20deg);-webkit-transition:-webkit-transform .5s ease 0s;transition:-webkit-transform .5s ease 0s;transition:transform .5s ease 0s;transition:transform .5s ease 0s,-webkit-transform .5s ease 0s;-webkit-animation:slide 15s ease .5s 1 normal forwards running;animation:slide 15s ease .5s 1 normal forwards running;-webkit-box-shadow:.3rem .3rem 0 0 #01a290;box-shadow:.3rem .3rem 0 0 #01a290}.list a:active{outline:none}.list a,.list span{vertical-align:super;line-height:2em}@-webkit-keyframes slide{0%{-webkit-transform:rotate(5deg) skew(20deg) translateX(0);transform:rotate(5deg) skew(20deg) translateX(0)}to{-webkit-transform:rotate(5deg) skew(20deg) translateX(-10rem);transform:rotate(5deg) skew(20deg) translateX(-10rem)}}@keyframes slide{0%{-webkit-transform:rotate(5deg) skew(20deg) translateX(0);transform:rotate(5deg) skew(20deg) translateX(0)}to{-webkit-transform:rotate(5deg) skew(20deg) translateX(-10rem);transform:rotate(5deg) skew(20deg) translateX(-10rem)}}.pagination a{font-size:2rem;color:#01a290;line-height:1}.pagination ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.pagination li{margin-left:2rem}.header{margin:0 auto;padding:1rem 0 .5rem;min-height:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.header img{max-width:6rem}.header .menu{display:-webkit-box;display:-ms-flexbox;display:flex}.header .menu li{margin-left:1rem}.header .menu a{color:#01a290}.footer{text-align:center;margin:.5rem 0}.footer a{text-decoration:none;color:#333}.content{min-height:70vh;color:#001d21}.content .no-content{width:100%;background:#01a290 url(/images/greenbox.jpg) no-repeat 50%/100% content-box content-box;color:#fff;font-size:2rem;line-height:2;text-align:center;text-indent:-999vw;height:40vh}.content h1.title a{display:block;background:#fff;color:#001d21;border-bottom:none}.content a{color:#01a290}.content dl,.content ol,.content ul{line-height:2}.content .meta{border-bottom:1px solid #333;margin:1.5rem 0;font-style:italic;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:flow-end;-ms-flex-pack:flow-end;justify-content:flow-end}.content .meta ul{margin:1rem 1rem 1rem 0;line-height:normal}.content .meta li{display:inline-block}.content .meta li a{line-height:normal}.content .meta p{margin-right:1rem}pre{padding:.8rem 1rem}code,pre{overflow:auto}code{font-size:.8rem;font-family:Fira Code,Inconsolata,Deja Vu Sans Mono,Source Code Pro,Consolas,monospace;padding:.2rem .6rem}@media screen and (max-width:600px){.content .meta{display:block}}
\ No newline at end of file +html { + font-size: calc(1vh + 1vw); } + +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif; } + +img { + height: auto; + width: 100%; + max-width: 40vw; } + +.no-break { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + +.control { + list-style-type: none; + margin: 0; + padding: 0; } + +.btn { + cursor: pointer; + text-decoration: none; } + +.pagination ul, +.list { + list-style-type: none; + margin: 0 auto; + padding: 0; } + +body { + color: #001D21; + width: 80vw; + margin: 0 auto; } + +.list { + min-height: 80vh; + margin: 0 auto 1rem auto; + background: #333 url(/images/greenbox.jpg) no-repeat top/cover content-box content-box; + -webkit-perspective: calc(100vw + 100vh); + perspective: calc(100vw + 100vh); } + .list li { + padding: 1em 0; + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .list li:first-child { + padding-top: 0; } + .list span { + position: absolute; + left: -3.5em; } + .list a { + color: #001D21; + background: #FFF; + width: 100%; + display: block; + text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + -webkit-transform: rotate(0deg) skew(0deg); + transform: rotate(0deg) skew(0deg); } + .list li:hover a { + -webkit-transform: rotate(5deg) skew(20deg); + transform: rotate(5deg) skew(20deg); + -webkit-transition: -webkit-transform .5s ease 0s; + transition: -webkit-transform .5s ease 0s; + transition: transform .5s ease 0s; + transition: transform .5s ease 0s, -webkit-transform .5s ease 0s; + -webkit-animation: slide 15s ease .5s 1 normal forwards running; + animation: slide 15s ease .5s 1 normal forwards running; + -webkit-box-shadow: 0.3rem 0.3rem 0rem 0rem #01A290; + box-shadow: 0.3rem 0.3rem 0rem 0rem #01A290; } + .list a:active { + outline: none; } + .list span, + .list a { + vertical-align: super; + line-height: 2em; } + +@-webkit-keyframes slide { + 0% { + -webkit-transform: rotate(5deg) skew(20deg) translateX(0rem); + transform: rotate(5deg) skew(20deg) translateX(0rem); } + 100% { + -webkit-transform: rotate(5deg) skew(20deg) translateX(-10rem); + transform: rotate(5deg) skew(20deg) translateX(-10rem); } } + +@keyframes slide { + 0% { + -webkit-transform: rotate(5deg) skew(20deg) translateX(0rem); + transform: rotate(5deg) skew(20deg) translateX(0rem); } + 100% { + -webkit-transform: rotate(5deg) skew(20deg) translateX(-10rem); + transform: rotate(5deg) skew(20deg) translateX(-10rem); } } + +.pagination a { + font-size: 2rem; + color: #01A290; + line-height: 1; } + +.pagination ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + +.pagination li { + margin-left: 2rem; } + +.header { + margin: 0 auto; + padding: 1rem 0 0.5rem 0; + min-height: 2rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + .header img { + max-width: 6rem; } + .header .menu { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .header .menu li { + margin-left: 1rem; } + .header .menu a { + color: #01A290; } + +.footer { + text-align: center; + margin: 0.5rem 0 0.5rem 0; } + .footer a { + text-decoration: none; + color: #333; } + +.content { + min-height: 70vh; + color: #001D21; } + .content .no-content { + width: 100%; + background: #01A290 url(/images/greenbox.jpg) no-repeat center/100% content-box content-box; + color: #FFF; + font-size: 2rem; + line-height: 2; + text-align: center; + text-indent: -999vw; + height: 40vh; } + .content h1.title a { + display: block; + background: #FFF; + color: #001D21; + border-bottom: none; } + .content a { + color: #01A290; } + .content ul, .content ol, .content dl { + line-height: 2; } + .content .meta { + border-bottom: 1px solid #333; + margin: 1.5rem 0; + font-style: italic; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: flow-end; + -ms-flex-pack: flow-end; + justify-content: flow-end; } + .content .meta ul { + margin: 1rem 1rem 1rem 0; + line-height: normal; + line-height: initial; } + .content .meta li { + display: inline-block; } + .content .meta li a { + line-height: normal; } + .content .meta p { + margin-right: 1rem; } + +pre { + overflow: auto; + padding: 0.8rem 1rem; } + +code { + overflow: auto; + font-size: 0.8rem; + font-family: 'Fira Code', Inconsolata, 'Deja Vu Sans Mono', 'Source Code Pro', Consolas, monospace; + padding: 0.2rem 0.6rem; } + +@media screen and (max-width: 600px) { + .content .meta { + display: block; } } + |