diff options
Diffstat (limited to '_sass')
| -rw-r--r-- | _sass/_base.scss | 59 | ||||
| -rw-r--r-- | _sass/_catalogue.scss | 39 | ||||
| -rw-r--r-- | _sass/_code.scss | 44 | ||||
| -rw-r--r-- | _sass/_layout.scss | 89 | ||||
| -rw-r--r-- | _sass/_pagination.scss | 44 | ||||
| -rw-r--r-- | _sass/_post.scss | 51 | ||||
| -rw-r--r-- | _sass/_syntax.scss | 312 | ||||
| -rw-r--r-- | _sass/_variables.scss | 29 |
8 files changed, 667 insertions, 0 deletions
diff --git a/_sass/_base.scss b/_sass/_base.scss new file mode 100644 index 0000000..cdf20d3 --- /dev/null +++ b/_sass/_base.scss @@ -0,0 +1,59 @@ +* { + @include box-sizing; + line-height: 1.5; +} + +html, body { + color: $default-color; + margin: 0; + padding: 0; +} + +html { + font-family: $serif-primary; + font-size: 14px; + + @media (min-width: 600px) { + font-size: 16px; + } +} + +body { + -webkit-text-size-adjust: 100%; +} + +h1, h2, h3, h4, h5, h6 { + color: $default-shade; + font-family: $sans-serif; + line-height: normal; +} + +a { + color: $blue; + text-decoration: none; +} + +blockquote { + border-left: .25rem solid $grey-2; + color: $grey-1; + margin: .8rem 0; + padding: .5rem 1rem; + + p:last-child { + margin-bottom: 0; + } + + @media (min-width: 600px) { + padding: 0 5rem 0 1.25rem; + } +} + +img { + display: block; + margin: 0 0 1rem; + max-width: 100%; +} + +td { + vertical-align: top; +} diff --git a/_sass/_catalogue.scss b/_sass/_catalogue.scss new file mode 100644 index 0000000..efc113c --- /dev/null +++ b/_sass/_catalogue.scss @@ -0,0 +1,39 @@ +.catalogue { + &-item { + border-bottom: 1px solid $grey-2; + color: $default-color; + display: inline-block; + padding: 2rem 0; + + &:hover .catalogue-line, + &:focus .catalogue-line { + width: 5rem; + } + + &:last-child { + border: 0; + } + } + + &-time { + color: $default-tint; + font-family: $serif-secondary; + letter-spacing: .5px; + } + + &-title { + color: $default-shade; + display: block; + font-family: $sans-serif; + font-size: 2rem; + font-weight: 700; + margin: .5rem 0; + } + + &-line { + @include transition(all .3s ease-out); + border-top: .2rem solid $default-shade; + display: block; + width: 2rem; + } +} diff --git a/_sass/_code.scss b/_sass/_code.scss new file mode 100644 index 0000000..1aab580 --- /dev/null +++ b/_sass/_code.scss @@ -0,0 +1,44 @@ +pre, code { + font-family: $monospaced; +} + +code { + background-color: $grey-3; + border-radius: 3px; + color: $code-color; + font-size: 85%; + padding: .25em .5em; +} + +pre { + margin: 0 0 1rem; +} + +pre code { + background-color: transparent; + color: inherit; + font-size: 100%; + padding: 0; +} + +.highlight { + background-color: $grey-3; + border-radius: 3px; + line-height: 1.4; + margin: 0 0 1rem; + padding: 1rem; + + pre { + margin-bottom: 0; + overflow-x: auto; + } + + .lineno { + color: $default-tint; + display: inline-block; + padding: 0 .75rem 0 .25rem; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } +} diff --git a/_sass/_layout.scss b/_sass/_layout.scss new file mode 100644 index 0000000..58b03a2 --- /dev/null +++ b/_sass/_layout.scss @@ -0,0 +1,89 @@ +.container { + margin: 0 auto; + max-width: 800px; + width: 80%; +} + +main, footer, .nav-container { + margin: 0 auto; + max-width: 800px; + width: 80%; +} + +.nav { + box-shadow: 0 2px 2px -2px $shadow-color; + overflow: auto; + + &-container { + margin: 1rem auto; + position: relative; + text-align: center; + } + + &-title { + @include transition(all .2s ease-out); + color: $default-color; + display: inline-block; + margin: 0; + padding-right: .2rem; + + &:hover, + &:focus { + opacity: .6; + } + } + + ul { + list-style-type: none; + margin: 1rem 0 0; + padding: 0; + text-align: center; + } + + li { + @include transition(all .2s ease-out); + color: $default-color; + display: inline-block; + opacity: .6; + padding: 0 2rem 0 0; + + &:last-child { + padding-right: 0; + } + + &:hover, + &:focus { + opacity: 1; + } + } + + a { + color: $default-color; + font-family: $sans-serif; + } +} + +@media (min-width: 600px) { + .nav { + &-container { + text-align: left; + } + + ul { + bottom: 0; + position: absolute; + right: 0; + } + } +} + +footer { + font-family: $serif-secondary; + padding: 2rem 0; + text-align: center; + + span { + color: $default-color; + font-size: .8rem; + } +} diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss new file mode 100644 index 0000000..05adf90 --- /dev/null +++ b/_sass/_pagination.scss @@ -0,0 +1,44 @@ +.pagination { + border-top: .5px solid $grey-2; + font-family: $serif-secondary; + padding-top: 2rem; + position: relative; + text-align: center; + + span { + color: $default-shade; + font-size: 1.1rem; + } + + .top { + @include transition(all .3s ease-out); + color: $default-color; + font-family: $sans-serif; + font-size: 1.1rem; + opacity: .6; + + &:hover { + opacity: 1; + } + } + + .arrow { + @include transition(all .3s ease-out); + color: $default-color; + position: absolute; + + &:hover, + &:focus { + opacity: .6; + text-decoration: none; + } + } + + .left { + left: 0; + } + + .right { + right: 0; + } +} diff --git a/_sass/_post.scss b/_sass/_post.scss new file mode 100644 index 0000000..08949f3 --- /dev/null +++ b/_sass/_post.scss @@ -0,0 +1,51 @@ +.post { + padding: 3rem 0; + + &-info { + color: $default-tint; + font-family: $serif-secondary; + letter-spacing: 0.5px; + text-align: center; + + span { + font-style: italic; + } + } + + &-title { + color: $default-shade; + font-family: $sans-serif; + font-size: 4rem; + margin: 1rem 0; + text-align: center; + } + + &-line { + border-top: 0.4rem solid $default-shade; + display: block; + margin: 0 auto 3rem; + width: 4rem; + } + + p { + margin: 0 0 1rem; + text-align: justify; + } + + a:hover { + text-decoration: underline; + } + + img { + margin: 0 auto 0.5rem; + } + + img+em { + color: $default-tint; + display: block; + font-family: $sans-serif; + font-size: 0.9rem; + font-style: normal; + text-align: center; + } +} diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss new file mode 100644 index 0000000..38c22c4 --- /dev/null +++ b/_sass/_syntax.scss @@ -0,0 +1,312 @@ +.highlight .hll { + background-color: #ffc; +} + +.highlight .c { + color: #999; +} + +/* Comment */ +.highlight .err { + color: #a00; + background-color: #faa +} + +/* Error */ +.highlight .k { + color: #069; +} + +/* Keyword */ +.highlight .o { + color: #555 +} + +/* Operator */ +.highlight .cm { + color: #09f; + font-style: italic +} + +/* Comment.Multiline */ +.highlight .cp { + color: #099 +} + +/* Comment.Preproc */ +.highlight .c1 { + color: #999; +} + +/* Comment.Single */ +.highlight .cs { + color: #999; +} + +/* Comment.Special */ +.highlight .gd { + background-color: #fcc; + border: 1px solid #c00 +} + +/* Generic.Deleted */ +.highlight .ge { + font-style: italic +} + +/* Generic.Emph */ +.highlight .gr { + color: #f00 +} + +/* Generic.Error */ +.highlight .gh { + color: #030; +} + +/* Generic.Heading */ +.highlight .gi { + background-color: #cfc; + border: 1px solid #0c0 +} + +/* Generic.Inserted */ +.highlight .go { + color: #aaa +} + +/* Generic.Output */ +.highlight .gp { + color: #009; +} + +/* Generic.Prompt */ +.highlight .gs {} + +/* Generic.Strong */ +.highlight .gu { + color: #030; +} + +/* Generic.Subheading */ +.highlight .gt { + color: #9c6 +} + +/* Generic.Traceback */ +.highlight .kc { + color: #069; +} + +/* Keyword.Constant */ +.highlight .kd { + color: #069; +} + +/* Keyword.Declaration */ +.highlight .kn { + color: #069; +} + +/* Keyword.Namespace */ +.highlight .kp { + color: #069 +} + +/* Keyword.Pseudo */ +.highlight .kr { + color: #069; +} + +/* Keyword.Reserved */ +.highlight .kt { + color: #078; +} + +/* Keyword.Type */ +.highlight .m { + color: #f60 +} + +/* Literal.Number */ +.highlight .s { + color: #d44950 +} + +/* Literal.String */ +.highlight .na { + color: #4f9fcf +} + +/* Name.Attribute */ +.highlight .nb { + color: #366 +} + +/* Name.Builtin */ +.highlight .nc { + color: #0a8; +} + +/* Name.Class */ +.highlight .no { + color: #360 +} + +/* Name.Constant */ +.highlight .nd { + color: #99f +} + +/* Name.Decorator */ +.highlight .ni { + color: #999; +} + +/* Name.Entity */ +.highlight .ne { + color: #c00; +} + +/* Name.Exception */ +.highlight .nf { + color: #c0f +} + +/* Name.Function */ +.highlight .nl { + color: #99f +} + +/* Name.Label */ +.highlight .nn { + color: #0cf; +} + +/* Name.Namespace */ +.highlight .nt { + color: #2f6f9f; +} + +/* Name.Tag */ +.highlight .nv { + color: #033 +} + +/* Name.Variable */ +.highlight .ow { + color: #000; +} + +/* Operator.Word */ +.highlight .w { + color: #bbb +} + +/* Text.Whitespace */ +.highlight .mf { + color: #f60 +} + +/* Literal.Number.Float */ +.highlight .mh { + color: #f60 +} + +/* Literal.Number.Hex */ +.highlight .mi { + color: #f60 +} + +/* Literal.Number.Integer */ +.highlight .mo { + color: #f60 +} + +/* Literal.Number.Oct */ +.highlight .sb { + color: #c30 +} + +/* Literal.String.Backtick */ +.highlight .sc { + color: #c30 +} + +/* Literal.String.Char */ +.highlight .sd { + color: #c30; + font-style: italic +} + +/* Literal.String.Doc */ +.highlight .s2 { + color: #c30 +} + +/* Literal.String.Double */ +.highlight .se { + color: #c30; +} + +/* Literal.String.Escape */ +.highlight .sh { + color: #c30 +} + +/* Literal.String.Heredoc */ +.highlight .si { + color: #a00 +} + +/* Literal.String.Interpol */ +.highlight .sx { + color: #c30 +} + +/* Literal.String.Other */ +.highlight .sr { + color: #3aa +} + +/* Literal.String.Regex */ +.highlight .s1 { + color: #c30 +} + +/* Literal.String.Single */ +.highlight .ss { + color: #fc3 +} + +/* Literal.String.Symbol */ +.highlight .bp { + color: #366 +} + +/* Name.Builtin.Pseudo */ +.highlight .vc { + color: #033 +} + +/* Name.Variable.Class */ +.highlight .vg { + color: #033 +} + +/* Name.Variable.Global */ +.highlight .vi { + color: #033 +} + +/* Name.Variable.Instance */ +.highlight .il { + color: #f60 +} + +/* Literal.Number.Integer.Long */ +.css .o, +.css .o+.nt, +.css .nt+.nt { + color: #999; +} diff --git a/_sass/_variables.scss b/_sass/_variables.scss new file mode 100644 index 0000000..288ade9 --- /dev/null +++ b/_sass/_variables.scss @@ -0,0 +1,29 @@ +// Colors +$default-color: #555; +$default-shade: #353535; +$default-tint: #aaa; +$grey-1: #979797; +$grey-2: #e5e5e5; +$grey-3: #f9f9f9; +$white: #fff; +$blue: #4a9ae1; +$shadow-color: rgba(0, 0, 0, .2); +$code-color: #bf616a; + +// Fonts +$serif-primary: 'Libre Baskerville', 'Times New Roman', Times, serif; +$serif-secondary: Palatino, 'Palatino LT STD', 'Palatino Linotype', 'Book Antiqua', 'Georgia', serif; +$sans-serif: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; +$monospaced: Menlo, Monaco, monospace; + +@mixin box-sizing($type: border-box) { + -webkit-box-sizing: $type; + -moz-box-sizing: $type; + box-sizing: $type; +} + +@mixin transition($args...) { + -webkit-transition: $args; + -moz-transition: $args; + transition: $args; +} |