diff options
Diffstat (limited to 'src/vec.scss')
| -rw-r--r-- | src/vec.scss | 425 |
1 files changed, 425 insertions, 0 deletions
diff --git a/src/vec.scss b/src/vec.scss new file mode 100644 index 0000000..0a56f7b --- /dev/null +++ b/src/vec.scss @@ -0,0 +1,425 @@ +@import url(//fonts.googleapis.com/css?family=Droid+Sans+Mono|Russo+One|Source+Sans+Pro:400,700); +@import url(//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css); + +@import "github-gist.scss"; + +$font-body: 'Source Sans Pro', 'PingFang SC', 'Microsoft YaHei', Arial, Serif; +$font-title: 'Russo One', 'PingFang SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; +$font-code: 'Droid Sans Mono', Menlo, Monaco, monospace; + +html { + height:100%; +} + +body { + margin: 0; + padding:0; + min-height:100%; + font-family: $font-body; + font-size: 100%; + letter-spacing: .01rem; + position:relative; +} + +h1,h2,h3,h4,h5,h6 { + font-family: $font-title; + font-weight: 700; + line-height: 1.25; +} + +a { + color: #005580; + text-decoration: none; + + &:hover { + color: #08c; + } +} + +img,video { + max-width: 100%; +} + +.pull-left { + float: left; +} + +.pull-right { + float: right; +} + +.clearfix::before,.clearfix::after { + display: table; + content: ""; + line-height: 0 +} + +.clearfix::after { + clear: both +} + +.content { + margin: 0 auto; + padding: 6rem 1.85rem 8rem; + max-width: 40rem; +} + +@mixin awesome-fa { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* ============== Header ============== */ +header { + position: fixed; + top: 0; + width: 100%; + height: 1.75rem; + font-family: $font-code; + font-size: .875rem; + font-weight: bold; + background: #2d2d2d; + border-bottom: 1px solid #000; + z-index: 99; + + ul,ol { + margin: 0; + padding: 0; + list-style: none + } + + nav { + padding: 0 .5rem + } + + .nav-center { + text-align: center; + line-height: 1.75rem; + color: #000; + text-transform: uppercase; + text-shadow: rgba(255,255,255,.098) 0 1px 0,rgba(255,255,255,.12) 0 0 1.875rem + } + + a { + color: #bbb; + line-height: 1.75rem; + padding: 0 .5rem + } + + a:hover, .current a { + color: #fff; + } +} + + +/* ============== Footer ============== */ +footer { + position: absolute; + width: 100%; + padding: 1rem; + bottom: 0; + box-sizing: border-box; + color: #ccc; + + a { + color: #ccc; + } + + .footer-info { + border-top: .4rem double #f2f2f2; + padding-top: .25rem + } +} + +/* ============== Index ============== */ + +.user-profile { + width: 100%; + padding: 4rem 1rem 8rem; + font-family: '','Monaco',monospace; + color: #888; + text-align: center; + box-sizing: border-box; +} + +.user-profile .user-avatar { + margin: 1rem 0 +} + +.user-profile .user-avatar img { + width: 16rem; + height: 16rem +} + +.user-profile .user-socials a { + color: #a7a7a7; + font-size: 1.25rem; + line-height: 1.5rem; + text-decoration: none +} + +.user-profile .user-socials a:hover { + color: #777 +} + +.user-profile .user-motivation { + max-width: 56rem; + font-size: 4rem; + line-height: 4.125rem; + margin: 1rem auto +} + +/* ============== List ============== */ + +.posts { + margin-left: -6rem; + + .posts-archive { + margin-bottom: 3rem; + + time { + display: block; + width: 8rem; + float: left; + font-family: $font-title; + font-size: 1.75rem; + text-align: right; + color: #CCCCCC; + font-weight: bold; + white-space: nowrap; + line-height: 1.25rem; + padding: .125rem 0; + } + + ol { + margin-left: 12rem; + + li { + margin-bottom: .5rem; + list-style: decimal; + } + } + } +} + +/* ============== Page ============== */ + +.post { + color: #444; + line-height: 1.8; + width: 100%; + + hr { + height: 0.25rem; + padding: 0; + margin: 1.5rem 0; + background-color: #e7e7e7; + border: 0; + } + + em { + text-emphasis-style: circle; + text-emphasis-position: under; + } + + code { + font-family: $font-code; + font-size: 0.85rem; + color: #555; + background-color: #f5f5f5; + border: 1px solid #eef; + border-radius: 3px; + padding: 0.2rem 0.5rem; + } + + pre { + display: block; + margin: 0 0 1rem 0; + padding: 1rem; + font-size: 0.8rem; + line-height: 1.4; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; + background-color: #f5f5f5; + + code { + font-size: 0.7rem; + padding: 0; + color: inherit; + border: none; + } + } + + blockquote { + padding: 0.5rem 1rem; + margin: 0.8rem 0; + color: #7a7a7a; + border-left: 0.3rem solid #e5e5e5; + + p:first-child { + margin-top: 0; + } + + p:last-child { + margin-bottom: 0; + } + } +} + +#TableOfContents { + border-radius: .25rem; + padding: 1rem; + background-color: #f7f7f7; + margin: 5rem 0 0 35rem; + position: absolute; + font-size: .875rem; + + ul { + list-style: none; + margin: 0; + padding: 0; + } + + a { + display: inline-block; + white-space: nowrap; + overflow: hidden; + max-width: 14rem; + text-overflow: ellipsis; + + &:before { + content: '•'; + padding-right: .25rem; + } + } + + a + ul { + padding-left: 1.5rem; + } + + & ~ section { + margin-left: -6rem; + } + +} + +.pagination { + width: 100%; + margin: 4rem 0 0; + padding: 1.6rem 0; + border-top: 1px solid #e7e7e7; + + a { + width: 42%; + overflow: hidden; + position: relative; + } + + @mixin vertical-center { + position: absolute; + top: 50%; + margin-top: -.5rem; + } + + .previous { + float: left; + padding-left: 1.25rem; + + &:before { + @include awesome-fa; + @include vertical-center; + left: 0; + content: "\f053"; + } + } + + .next { + float: right; + text-align: right; + padding-right: 1.25rem; + + &:after { + @include awesome-fa; + @include vertical-center; + right: 0; + content: "\f054"; + } + } +} + +.disqus { + width: 100%; + padding: 5rem 0 2rem; + border-top: 1px solid #e7e7e7; +} + + + +/* ============== media ============== */ + +@media (max-width: 480px) { + .content { + margin: 0 auto; + padding: 4rem 1rem 8rem; + } + + .user-profile .user-avatar img { + width: 8rem; + height: 8rem + } + + .user-profile .user-motivation { + font-size: 2.625rem; + line-height: 3.125rem + } + + .pagination { + a { + font-size: .75rem; + } + + .previous:before, .next:after { + margin-top: -.35rem; + } + } +} + +@media (max-width: 920px) { + .posts { + margin-left: 0rem; + } + + #TableOfContents { + display: none; + + & ~ section { + margin-left: 0rem; + } + } + +} + +@media (max-width: 700px) { + .posts { + margin-left: 0rem; + + .posts-archive { + time { + float: none; + text-align: left; + margin-bottom: 1rem; + } + + ol { + margin-left: 0; + } + } + } +} + |