diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/scss/tale.scss | 8 | ||||
-rw-r--r-- | assets/scss/tale/_base.scss | 66 | ||||
-rw-r--r-- | assets/scss/tale/_catalogue.scss | 39 | ||||
-rw-r--r-- | assets/scss/tale/_code.scss | 46 | ||||
-rw-r--r-- | assets/scss/tale/_layout.scss | 92 | ||||
-rw-r--r-- | assets/scss/tale/_pagination.scss | 44 | ||||
-rw-r--r-- | assets/scss/tale/_post.scss | 63 | ||||
-rw-r--r-- | assets/scss/tale/_syntax.scss | 65 | ||||
-rw-r--r-- | assets/scss/tale/_variables.scss | 29 |
9 files changed, 452 insertions, 0 deletions
diff --git a/assets/scss/tale.scss b/assets/scss/tale.scss new file mode 100644 index 0000000..3cdfa99 --- /dev/null +++ b/assets/scss/tale.scss @@ -0,0 +1,8 @@ +@import 'tale/variables'; +@import 'tale/base'; +@import 'tale/code'; +@import 'tale/post'; +@import 'tale/syntax'; +@import 'tale/layout'; +@import 'tale/pagination'; +@import 'tale/catalogue'; diff --git a/assets/scss/tale/_base.scss b/assets/scss/tale/_base.scss new file mode 100644 index 0000000..a513579 --- /dev/null +++ b/assets/scss/tale/_base.scss @@ -0,0 +1,66 @@ +* { + @include box-sizing; + line-height: 1.5; +} + +html, +body { + color: $default-color; + margin: 0; + padding: 0; +} + +html { + font-family: $serif-primary; + font-size: 14px; + overflow-y: scroll; + + @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/assets/scss/tale/_catalogue.scss b/assets/scss/tale/_catalogue.scss new file mode 100644 index 0000000..3331016 --- /dev/null +++ b/assets/scss/tale/_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/assets/scss/tale/_code.scss b/assets/scss/tale/_code.scss new file mode 100644 index 0000000..1597e13 --- /dev/null +++ b/assets/scss/tale/_code.scss @@ -0,0 +1,46 @@ +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; // Ensures the null space also isn't selectable + padding: 0 .75rem 0 .25rem; + // Make sure numbers aren't selectable + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } +} diff --git a/assets/scss/tale/_layout.scss b/assets/scss/tale/_layout.scss new file mode 100644 index 0000000..ba4a7b0 --- /dev/null +++ b/assets/scss/tale/_layout.scss @@ -0,0 +1,92 @@ +.container { + margin: 0 auto; + max-width: 800px; + width: 80%; +} + +main, +footer, +.nav-container { + display: block; + 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/assets/scss/tale/_pagination.scss b/assets/scss/tale/_pagination.scss new file mode 100644 index 0000000..3700e15 --- /dev/null +++ b/assets/scss/tale/_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/assets/scss/tale/_post.scss b/assets/scss/tale/_post.scss new file mode 100644 index 0000000..3680d80 --- /dev/null +++ b/assets/scss/tale/_post.scss @@ -0,0 +1,63 @@ +.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; + } + + // CSS for making emoji inline + img.emoji { + display: inline-block; + left: 0; + transform: none; + width: 1rem; + height: 1rem; + vertical-align: text-top; + padding: 0; + margin: 0; + } +} diff --git a/assets/scss/tale/_syntax.scss b/assets/scss/tale/_syntax.scss new file mode 100644 index 0000000..15ad797 --- /dev/null +++ b/assets/scss/tale/_syntax.scss @@ -0,0 +1,65 @@ +.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/assets/scss/tale/_variables.scss b/assets/scss/tale/_variables.scss new file mode 100644 index 0000000..8a064f3 --- /dev/null +++ b/assets/scss/tale/_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; +} |