Closes #73.
Unified · Split
Binary file not shown.
Binary file not shown.
| @@ -1,6 +1,7 @@ | |||
| 1 | class app.Settings | 1 | class app.Settings |
| 2 | SETTINGS_KEY = 'settings' | 2 | SETTINGS_KEY = 'settings' |
| 3 | DOCS_KEY = 'docs' | 3 | DOCS_KEY = 'docs' |
| 4 | DARK_KEY = 'dark' | ||
| 4 | 5 | ||
| 5 | @defaults: -> | 6 | @defaults: -> |
| 6 | count: 0 | 7 | count: 0 |
| @@ -45,13 +46,21 @@ class app.Settings · 38 unmodified lines | |||
| 45 | 46 | ||
| 46 | setDocs: (docs) -> | 47 | setDocs: (docs) -> |
| 47 | try | 48 | try |
| 48 | Cookies.set DOCS_KEY, docs.join('/'), | 49 | Cookies.set DOCS_KEY, docs.join('/'), path: '/', expires: 1e8 |
| 49 | path: '/' | 50 | catch |
| 50 | expires: 1e8 | 51 | return |
| 52 | |||
| 53 | setDark: (value) -> | ||
| 54 | try | ||
| 55 | if value | ||
| 56 | Cookies.set DARK_KEY, '1', path: '/', expires: 1e8 | ||
| 57 | else | ||
| 58 | Cookies.expire DARK_KEY | ||
| 51 | catch | 59 | catch |
| 52 | return | 60 | return |
| 53 | 61 | ||
| 54 | reset: -> | 62 | reset: -> |
| 55 | try Cookies.expire DOCS_KEY | 63 | try Cookies.expire DOCS_KEY |
| 64 | try Cookies.expire DARK_KEY | ||
| 56 | try @store.del(SETTINGS_KEY) | 65 | try @store.del(SETTINGS_KEY) |
| 57 | return | 66 | return |
| @@ -1,5 +1,8 @@ | |||
| 1 | [ | 1 | [ |
| 2 | [ "2015-01-13", | 2 | [ "2015-02-08", |
| 3 | "New dark theme\nClick the icon in the bottom left corner to activate.\n<a href=\"https://github.com/Thibaut/devdocs/issues\" target=\"_blank\">Feedback</a> welcome :)" | ||
| 4 | ], [ | ||
| 5 | "2015-01-13", | ||
| 3 | "<a href=\"/offline\">Offline mode</a> has landed!\nIf you notice any bugs, please report them on <a href=\"https://github.com/Thibaut/devdocs/issues\" target=\"_blank\">GitHub</a>." | 6 | "<a href=\"/offline\">Offline mode</a> has landed!\nIf you notice any bugs, please report them on <a href=\"https://github.com/Thibaut/devdocs/issues\" target=\"_blank\">GitHub</a>." |
| 4 | ], [ | 7 | ], [ |
| 5 | "2014-12-21", | 8 | "2014-12-21", |
| @@ -51,7 +51,10 @@ templates.sidebarPickerNote = """ · 50 unmodified lines | |||
| 51 | sidebarFooter = (html) -> """<div class="_sidebar-footer">#{html}</div>""" | 51 | sidebarFooter = (html) -> """<div class="_sidebar-footer">#{html}</div>""" |
| 52 | 52 | ||
| 53 | templates.sidebarSettings = -> | 53 | templates.sidebarSettings = -> |
| 54 | sidebarFooter """<a class="_sidebar-footer-link _sidebar-footer-edit" data-pick-docs>Select documentation</a>""" | 54 | sidebarFooter """ |
| 55 | <a class="_sidebar-footer-link _sidebar-footer-light" title="Toggle light" data-light></a> | ||
| 56 | <a class="_sidebar-footer-link _sidebar-footer-edit" data-pick-docs>Select documentation</a> | ||
| 57 | """ | ||
| 55 | 58 | ||
| 56 | templates.sidebarSave = -> | 59 | templates.sidebarSave = -> |
| 57 | sidebarFooter """<a class="_sidebar-footer-link _sidebar-footer-save">Save</a>""" | 60 | sidebarFooter """<a class="_sidebar-footer-link _sidebar-footer-save">Save</a>""" |
| @@ -17,6 +17,14 @@ class app.views.Document extends app.View · 16 unmodified lines | |||
| 17 | @activate() | 17 | @activate() |
| 18 | return | 18 | return |
| 19 | 19 | ||
| 20 | toggleLight: -> | ||
| 21 | css = $('link[rel="stylesheet"][data-alt]') | ||
| 22 | alt = css.getAttribute('data-alt') | ||
| 23 | css.setAttribute('data-alt', css.getAttribute('href')) | ||
| 24 | css.setAttribute('href', alt) | ||
| 25 | app.settings.setDark(alt.indexOf('dark') > 0) | ||
| 26 | return | ||
| 27 | |||
| 20 | setTitle: (title) -> | 28 | setTitle: (title) -> |
| 21 | @el.title = if title then "DevDocs/#{title}" else 'DevDocs' | 29 | @el.title = if title then "DevDocs/#{title}" else 'DevDocs' |
| 22 | 30 | ||
| @@ -79,6 +79,9 @@ class app.views.Sidebar extends app.View · 78 unmodified lines | |||
| 79 | if event.target.hasAttribute? 'data-reset-list' | 79 | if event.target.hasAttribute? 'data-reset-list' |
| 80 | $.stopEvent(event) | 80 | $.stopEvent(event) |
| 81 | @reset() | 81 | @reset() |
| 82 | else if event.target.hasAttribute? 'data-light' | ||
| 83 | $.stopEvent(event) | ||
| 84 | app.document.toggleLight() | ||
| 82 | return | 85 | return |
| 83 | 86 | ||
| 84 | onGlobalClick: (event) => | 87 | onGlobalClick: (event) => |
| @@ -0,0 +1,72 @@ | |||
| 1 | //= depend_on icons.png | ||
| 2 | //= depend_on icons@2x.png | ||
| 3 | |||
| 4 | //= require vendor/open-sans | ||
| 5 | |||
| 6 | /*! | ||
| 7 | * Copyright 2013-2015 Thibaut Courouble and other contributors | ||
| 8 | * | ||
| 9 | * This source code is licensed under the terms of the Mozilla | ||
| 10 | * Public License, v. 2.0, a copy of which may be obtained at: | ||
| 11 | * http://mozilla.org/MPL/2.0/ | ||
| 12 | */ | ||
| 13 | |||
| 14 | @import 'global/variables-dark', | ||
| 15 | 'global/icons', | ||
| 16 | 'global/classes', | ||
| 17 | 'global/base'; | ||
| 18 | |||
| 19 | @import 'components/app', | ||
| 20 | 'components/header', | ||
| 21 | 'components/notif', | ||
| 22 | 'components/sidebar', | ||
| 23 | 'components/content', | ||
| 24 | 'components/page', | ||
| 25 | 'components/fail', | ||
| 26 | 'components/notice', | ||
| 27 | 'components/path', | ||
| 28 | 'components/prism', | ||
| 29 | 'components/mobile'; | ||
| 30 | |||
| 31 | @import 'pages/angular', | ||
| 32 | 'pages/bower', | ||
| 33 | 'pages/c', | ||
| 34 | 'pages/chai', | ||
| 35 | 'pages/coffeescript', | ||
| 36 | 'pages/cordova', | ||
| 37 | 'pages/d3', | ||
| 38 | 'pages/ember', | ||
| 39 | 'pages/express', | ||
| 40 | 'pages/go', | ||
| 41 | 'pages/haskell', | ||
| 42 | 'pages/jquery', | ||
| 43 | 'pages/knockout', | ||
| 44 | 'pages/git', | ||
| 45 | 'pages/grunt', | ||
| 46 | 'pages/laravel', | ||
| 47 | 'pages/less', | ||
| 48 | 'pages/lodash', | ||
| 49 | 'pages/marionette', | ||
| 50 | 'pages/markdown', | ||
| 51 | 'pages/maxcdn', | ||
| 52 | 'pages/mdn', | ||
| 53 | 'pages/modernizr', | ||
| 54 | 'pages/moment', | ||
| 55 | 'pages/mongoose', | ||
| 56 | 'pages/nginx', | ||
| 57 | 'pages/node', | ||
| 58 | 'pages/php', | ||
| 59 | 'pages/phpunit', | ||
| 60 | 'pages/postgres', | ||
| 61 | 'pages/rdoc', | ||
| 62 | 'pages/react', | ||
| 63 | 'pages/redis', | ||
| 64 | 'pages/requirejs', | ||
| 65 | 'pages/rethinkdb', | ||
| 66 | 'pages/rfc', | ||
| 67 | 'pages/sinon', | ||
| 68 | 'pages/socketio', | ||
| 69 | 'pages/sphinx', | ||
| 70 | 'pages/underscore', | ||
| 71 | 'pages/yard', | ||
| 72 | 'pages/yii'; | ||
| @@ -425,6 +425,11 @@ · 424 unmodified lines | |||
| 425 | ._splash-sponsor > ._maxcdn-logo { | 425 | ._splash-sponsor > ._maxcdn-logo { |
| 426 | background-image: image-url('maxcdn-bw.png'); | 426 | background-image: image-url('maxcdn-bw.png'); |
| 427 | 427 | ||
| 428 | @if $style == 'dark' { | ||
| 429 | filter: invert(100%); | ||
| 430 | -webkit-filter: invert(100%); | ||
| 431 | } | ||
| 432 | |||
| 428 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { | 433 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { |
| 429 | background-image: image-url('maxcdn-bw@2x.png'); | 434 | background-image: image-url('maxcdn-bw@2x.png'); |
| 430 | } | 435 | } |
| @@ -443,6 +448,11 @@ · 12 unmodified lines | |||
| 443 | ._splash-sponsor > ._shopify-logo { | 448 | ._splash-sponsor > ._shopify-logo { |
| 444 | background-image: image-url('shopify-bw.png'); | 449 | background-image: image-url('shopify-bw.png'); |
| 445 | 450 | ||
| 451 | @if $style == 'dark' { | ||
| 452 | filter: invert(100%); | ||
| 453 | -webkit-filter: invert(100%); | ||
| 454 | } | ||
| 455 | |||
| 446 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { | 456 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { |
| 447 | background-image: image-url('shopify-bw@2x.png'); | 457 | background-image: image-url('shopify-bw@2x.png'); |
| 448 | } | 458 | } |
| @@ -98,7 +98,11 @@ · 97 unmodified lines | |||
| 98 | top: 1rem; | 98 | top: 1rem; |
| 99 | left: 1rem; | 99 | left: 1rem; |
| 100 | opacity: .4; | 100 | opacity: .4; |
| 101 | @extend %icon, %icon-search; | 101 | @if $style == 'dark' { |
| 102 | @extend %icon, %icon-search-white; | ||
| 103 | } @else { | ||
| 104 | @extend %icon, %icon-search; | ||
| 105 | } | ||
| 102 | } | 106 | } |
| 103 | } | 107 | } |
| 104 | 108 | ||
| @@ -132,7 +136,11 @@ · 27 unmodified lines | |||
| 132 | opacity: .3; | 136 | opacity: .3; |
| 133 | 137 | ||
| 134 | &:hover { opacity: .5; } | 138 | &:hover { opacity: .5; } |
| 135 | &:before { @extend %icon, %icon-clear; } | 139 | @if $style == 'dark' { |
| 140 | &:before { @extend %icon, %icon-close-white; } | ||
| 141 | } @else { | ||
| 142 | &:before { @extend %icon, %icon-clear; } | ||
| 143 | } | ||
| 136 | ._search-active > & { display: block; } | 144 | ._search-active > & { display: block; } |
| 137 | } | 145 | } |
| 138 | 146 | ||
| @@ -17,7 +17,11 @@ · 16 unmodified lines | |||
| 17 | .token.constant, | 17 | .token.constant, |
| 18 | .token.symbol, | 18 | .token.symbol, |
| 19 | .token.deleted { | 19 | .token.deleted { |
| 20 | color: #905; | 20 | @if $style == 'dark' { |
| 21 | color: #cf6a4c; | ||
| 22 | } @else { | ||
| 23 | color: #905; | ||
| 24 | } | ||
| 21 | } | 25 | } |
| 22 | 26 | ||
| 23 | .token.selector, | 27 | .token.selector, |
| @@ -26,7 +30,11 @@ · 2 unmodified lines | |||
| 26 | .token.char, | 30 | .token.char, |
| 27 | .token.builtin, | 31 | .token.builtin, |
| 28 | .token.inserted { | 32 | .token.inserted { |
| 29 | color: #5e8e01; | 33 | @if $style == 'dark' { |
| 34 | color: #d0c584; | ||
| 35 | } @else { | ||
| 36 | color: #5e8e01; | ||
| 37 | } | ||
| 30 | } | 38 | } |
| 31 | 39 | ||
| 32 | .token.operator, | 40 | .token.operator, |
| @@ -34,23 +42,39 @@ · 1 unmodified line | |||
| 34 | .token.url, | 42 | .token.url, |
| 35 | .language-css .token.string, | 43 | .language-css .token.string, |
| 36 | .style .token.string { | 44 | .style .token.string { |
| 37 | color: #a67f59; | 45 | @if $style == 'dark' { |
| 46 | color: #8f9d6a; | ||
| 47 | } @else { | ||
| 48 | color: #a67f59; | ||
| 49 | } | ||
| 38 | } | 50 | } |
| 39 | 51 | ||
| 40 | .token.atrule, | 52 | .token.atrule, |
| 41 | .token.attr-value, | 53 | .token.attr-value, |
| 42 | .token.keyword { | 54 | .token.keyword { |
| 43 | color: #0070a3; | 55 | @if $style == 'dark' { |
| 56 | color: #7587a6; | ||
| 57 | } @else { | ||
| 58 | color: #0070a3; | ||
| 59 | } | ||
| 44 | } | 60 | } |
| 45 | 61 | ||
| 46 | .token.function { | 62 | .token.function { |
| 47 | color: #dd4a68; | 63 | @if $style == 'dark' { |
| 64 | color: #ac885b; | ||
| 65 | } @else { | ||
| 66 | color: #dd4a68; | ||
| 67 | } | ||
| 48 | } | 68 | } |
| 49 | 69 | ||
| 50 | .token.regex, | 70 | .token.regex, |
| 51 | .token.important, | 71 | .token.important, |
| 52 | .token.variable { | 72 | .token.variable { |
| 53 | color: #e90; | 73 | @if $style == 'dark' { |
| 74 | color: #e9c062; | ||
| 75 | } @else { | ||
| 76 | color: #e90; | ||
| 77 | } | ||
| 54 | } | 78 | } |
| 55 | 79 | ||
| 56 | .token.important { | 80 | .token.important { |
| @@ -162,7 +162,11 @@ · 161 unmodified lines | |||
| 162 | &:hover { opacity: .65; } | 162 | &:hover { opacity: .65; } |
| 163 | 163 | ||
| 164 | &:before { | 164 | &:before { |
| 165 | @extend %icon, %icon-dir; | 165 | @if $style == 'dark' { |
| 166 | @extend %icon, %icon-dir-white; | ||
| 167 | } @else { | ||
| 168 | @extend %icon, %icon-dir; | ||
| 169 | } | ||
| 166 | 170 | ||
| 167 | .open > &, .open-title > & { | 171 | .open > &, .open-title > & { |
| 168 | -webkit-transform: rotate(90deg); | 172 | -webkit-transform: rotate(90deg); |
| @@ -340,6 +344,7 @@ · 171 unmodified lines | |||
| 340 | ._sidebar-footer-link { | 344 | ._sidebar-footer-link { |
| 341 | position: relative; | 345 | position: relative; |
| 342 | display: block; | 346 | display: block; |
| 347 | overflow: hidden; | ||
| 343 | height: 2.5rem; | 348 | height: 2.5rem; |
| 344 | line-height: 1rem; | 349 | line-height: 1rem; |
| 345 | padding: .75rem; | 350 | padding: .75rem; |
| @@ -360,7 +365,31 @@ · 14 unmodified lines | |||
| 360 | } | 365 | } |
| 361 | 366 | ||
| 362 | ._sidebar-footer-edit { | 367 | ._sidebar-footer-edit { |
| 363 | &:before { @extend %icon-settings; } | 368 | @if $style == 'dark' { |
| 369 | &:before { @extend %icon-settings-white; } | ||
| 370 | } @else { | ||
| 371 | &:before { @extend %icon-settings; } | ||
| 372 | } | ||
| 373 | } | ||
| 374 | |||
| 375 | ._sidebar-footer-light { | ||
| 376 | float: right; | ||
| 377 | width: 2.5rem; | ||
| 378 | padding: 0; | ||
| 379 | opacity: .6; | ||
| 380 | |||
| 381 | &:before { | ||
| 382 | float: none; | ||
| 383 | position: absolute; | ||
| 384 | top: .75rem; | ||
| 385 | left: .75rem; | ||
| 386 | |||
| 387 | @if $style == 'dark' { | ||
| 388 | @extend %icon-light-white; | ||
| 389 | } @else { | ||
| 390 | @extend %icon-light; | ||
| 391 | } | ||
| 392 | } | ||
| 364 | } | 393 | } |
| 365 | 394 | ||
| 366 | ._sidebar-footer-save { | 395 | ._sidebar-footer-save { |
| @@ -370,5 +399,9 @@ · 3 unmodified lines | |||
| 370 | box-shadow: inset 0 1px $noteGreenBorder, | 399 | box-shadow: inset 0 1px $noteGreenBorder, |
| 371 | 1px 0 $noteGreenBorder; | 400 | 1px 0 $noteGreenBorder; |
| 372 | 401 | ||
| 373 | &:before { @extend %icon-check; } | 402 | @if $style == 'dark' { |
| 403 | &:before { @extend %icon-check-white; } | ||
| 404 | } @else { | ||
| 405 | &:before { @extend %icon-check; } | ||
| 406 | } | ||
| 374 | } | 407 | } |
| @@ -101,7 +101,11 @@ · 100 unmodified lines | |||
| 101 | height: .4375rem; | 101 | height: .4375rem; |
| 102 | margin: .125rem 0 0 .0625rem; | 102 | margin: .125rem 0 0 .0625rem; |
| 103 | vertical-align: top; | 103 | vertical-align: top; |
| 104 | @extend %icon, %icon-link; | 104 | @if $style == 'dark' { |
| 105 | @extend %icon, %icon-link-white; | ||
| 106 | } @else { | ||
| 107 | @extend %icon, %icon-link; | ||
| 108 | } | ||
| 105 | } | 109 | } |
| 106 | } | 110 | } |
| 107 | 111 | ||
| @@ -4,7 +4,7 @@ · 3 unmodified lines | |||
| 4 | width: 1rem; | 4 | width: 1rem; |
| 5 | height: 1rem; | 5 | height: 1rem; |
| 6 | background-image: image-url('icons.png'); | 6 | background-image: image-url('icons.png'); |
| 7 | background-size: 5rem 13rem; | 7 | background-size: 5rem 15rem; |
| 8 | } | 8 | } |
| 9 | 9 | ||
| 10 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { | 10 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { |
| @@ -77,3 +77,10 @@ · 66 unmodified lines | |||
| 77 | ._icon-socketio:before { background-position: -2rem -12rem; } | 77 | ._icon-socketio:before { background-position: -2rem -12rem; } |
| 78 | ._icon-modernizr:before { background-position: -3rem -12rem; } | 78 | ._icon-modernizr:before { background-position: -3rem -12rem; } |
| 79 | ._icon-bower:before { background-position: -4rem -12rem; } | 79 | ._icon-bower:before { background-position: -4rem -12rem; } |
| 80 | %icon-search-white { background-position: 0 -13rem; } | ||
| 81 | %icon-dir-white { background-position: -1rem -13rem; } | ||
| 82 | %icon-link-white { background-position: -2.25rem -13.25rem; } | ||
| 83 | %icon-settings-white { background-position: -3rem -13rem; } | ||
| 84 | %icon-check-white { background-position: -4rem -13rem; } | ||
| 85 | %icon-light { background-position: 0 -14rem; } | ||
| 86 | %icon-light-white { background-position: -1rem -14rem; } | ||
| @@ -1,6 +1,8 @@ | |||
| 1 | $baseFont: 'Open Sans', Helvetica, Arial, sans-serif; | 1 | $baseFont: 'Open Sans', Helvetica, Arial, sans-serif; |
| 2 | $monoFont: 'Source Code Pro', 'Inconsolata-g', Consolas, Menlo, monospace; | 2 | $monoFont: 'Source Code Pro', 'Inconsolata-g', Consolas, Menlo, monospace; |
| 3 | 3 | ||
| 4 | $style: 'light'; | ||
| 5 | |||
| 4 | $headerHeight: 3rem; | 6 | $headerHeight: 3rem; |
| 5 | $sidebarWidth: 18rem; | 7 | $sidebarWidth: 18rem; |
| 6 | $sidebarMediumWidth: 16rem; | 8 | $sidebarMediumWidth: 16rem; |
| @@ -0,0 +1,82 @@ | |||
| 1 | $baseFont: 'Open Sans', Helvetica, Arial, sans-serif; | ||
| 2 | $monoFont: 'Source Code Pro', 'Inconsolata-g', Consolas, Menlo, monospace; | ||
| 3 | |||
| 4 | $style: 'dark'; | ||
| 5 | |||
| 6 | $headerHeight: 3rem; | ||
| 7 | $sidebarWidth: 18rem; | ||
| 8 | $sidebarMediumWidth: 16rem; | ||
| 9 | |||
| 10 | $contentBackground: #2d2d2d; | ||
| 11 | |||
| 12 | $textColor: #b4b3af; | ||
| 13 | $textColorLight: #7e7d7d; | ||
| 14 | $textColorLighter: #6a6868; | ||
| 15 | |||
| 16 | $inputFocusBorder: #444; | ||
| 17 | |||
| 18 | $focusBackground: #3d3d3e; | ||
| 19 | $focusBorder: #3d3d3e; | ||
| 20 | $focusText: #f7f2f2; | ||
| 21 | |||
| 22 | $loadingText: #616161; | ||
| 23 | $splashText: #616161; | ||
| 24 | $promoText: #616161; | ||
| 25 | |||
| 26 | $selectionBackground: #346fce; | ||
| 27 | $selectionBorder: #346fce; | ||
| 28 | $selectionText: #fff; | ||
| 29 | |||
| 30 | $highlightBackground: #3d4449; | ||
| 31 | |||
| 32 | $linkColor: #f7f2f2; | ||
| 33 | $linkColorHover: #fff; | ||
| 34 | |||
| 35 | $headerBackground: #1e1e1e; | ||
| 36 | $headerBorder: #1e1e1e; | ||
| 37 | |||
| 38 | $sidebarBackground: #262626; | ||
| 39 | $sidebarBorder: #262626; | ||
| 40 | |||
| 41 | $scrollbarColor: #515151; | ||
| 42 | $scrollbarColorHover: #888; | ||
| 43 | |||
| 44 | $pathBackground: $headerBackground; | ||
| 45 | $pathBorder: $headerBorder; | ||
| 46 | |||
| 47 | $noticeBackground: #1e1e1e; | ||
| 48 | $noticeBorder: #1e1e1e; | ||
| 49 | |||
| 50 | $boxBackground: #1e1e1e; | ||
| 51 | $boxBorder: #0a0a0a; | ||
| 52 | $boxBorderLight: #171717; | ||
| 53 | $boxHeaderBackground: #1e1e1e; | ||
| 54 | |||
| 55 | $noteBackground: #3a3e31; | ||
| 56 | $noteBorder: #1a1c17; | ||
| 57 | |||
| 58 | $noteGreenBackground: #283e2b; | ||
| 59 | $noteGreenBorder: #111b13; | ||
| 60 | |||
| 61 | $noteBlueBackground: #1f2f3e; | ||
| 62 | $noteBlueBorder: #101922; | ||
| 63 | |||
| 64 | $noteOrangeBackground: #3e271d; | ||
| 65 | $noteOrangeBorder: #1f1511; | ||
| 66 | |||
| 67 | $noteRedBackground: #3e1b1b; | ||
| 68 | $noteRedBorder: #1b0a0a; | ||
| 69 | |||
| 70 | $labelBackground: #38383a; | ||
| 71 | |||
| 72 | $notifBackground: rgba(#000, .85); | ||
| 73 | $notifColor: #fff; | ||
| 74 | $notifColorLight: #bbb; | ||
| 75 | |||
| 76 | $mediumScreen: '(max-width: 800px)'; | ||
| 77 | |||
| 78 | $contentZ: 1; | ||
| 79 | $sidebarZ: 2; | ||
| 80 | $headerZ: 3; | ||
| 81 | $noticeZ: 4; | ||
| 82 | $hoverZ: 5; | ||
| @@ -17,7 +17,7 @@ class App < Sinatra::Application · 16 unmodified lines | |||
| 17 | set :assets_prefix, 'assets' | 17 | set :assets_prefix, 'assets' |
| 18 | set :assets_path, -> { File.join(public_folder, assets_prefix) } | 18 | set :assets_path, -> { File.join(public_folder, assets_prefix) } |
| 19 | set :assets_manifest_path, -> { File.join(assets_path, 'manifest.json') } | 19 | set :assets_manifest_path, -> { File.join(assets_path, 'manifest.json') } |
| 20 | set :assets_compile, %w(*.png docs.js application.js application.css) | 20 | set :assets_compile, %w(*.png docs.js application.js application.css application-dark.css) |
| 21 | 21 | ||
| 22 | require 'yajl/json_gem' | 22 | require 'yajl/json_gem' |
| 23 | set :docs_prefix, 'docs' | 23 | set :docs_prefix, 'docs' |
| @@ -117,6 +117,21 @@ class App < Sinatra::Application · 93 unmodified lines | |||
| 117 | def query_string_for_redirection | 117 | def query_string_for_redirection |
| 118 | request.query_string.empty? ? nil : "?#{request.query_string}" | 118 | request.query_string.empty? ? nil : "?#{request.query_string}" |
| 119 | end | 119 | end |
| 120 | |||
| 121 | def main_stylesheet_path | ||
| 122 | stylesheet_paths[cookies[:dark].present? ? :dark : :default] | ||
| 123 | end | ||
| 124 | |||
| 125 | def alternate_stylesheet_path | ||
| 126 | stylesheet_paths[cookies[:dark].present? ? :default : :dark] | ||
| 127 | end | ||
| 128 | |||
| 129 | def stylesheet_paths | ||
| 130 | @stylesheet_paths ||= { | ||
| 131 | default: stylesheet_path('application'), | ||
| 132 | dark: stylesheet_path('application-dark') | ||
| 133 | } | ||
| 134 | end | ||
| 120 | end | 135 | end |
| 121 | 136 | ||
| 122 | before do | 137 | before do |
| @@ -0,0 +1 @@ | |||
| 1 | http://happytodesign.com/hicons/ | ||
Binary file not shown.
Binary file not shown.
| @@ -0,0 +1 @@ | |||
| 1 | http://gemicon.net/ | ||
Binary file not shown.
Binary file not shown.
| @@ -0,0 +1 @@ | |||
| 1 | http://www.entypo.com/ | ||
Binary file not shown.
Binary file not shown.
| @@ -0,0 +1 @@ | |||
| 1 | http://www.entypo.com/ | ||
Binary file not shown.
Binary file not shown.
| @@ -0,0 +1 @@ | |||
| 1 | http://www.entypo.com/ | ||
Binary file not shown.
Binary file not shown.
| @@ -0,0 +1 @@ | |||
| 1 | http://www.entypo.com/ | ||
Binary file not shown.
Binary file not shown.
| @@ -0,0 +1 @@ | |||
| 1 | http://gemicon.net/ | ||
Binary file not shown.
Binary file not shown.
| @@ -26,7 +26,7 @@ · 25 unmodified lines | |||
| 26 | <link rel="apple-touch-icon" sizes="144x144" href="http://maxcdn.devdocs.io/images/apple-icon-144.png"> | 26 | <link rel="apple-touch-icon" sizes="144x144" href="http://maxcdn.devdocs.io/images/apple-icon-144.png"> |
| 27 | <link rel="apple-touch-icon" sizes="152x152" href="http://maxcdn.devdocs.io/images/apple-icon-152.png"> | 27 | <link rel="apple-touch-icon" sizes="152x152" href="http://maxcdn.devdocs.io/images/apple-icon-152.png"> |
| 28 | <link rel="apple-touch-icon" sizes="160x160" href="http://maxcdn.devdocs.io/images/apple-icon-160.png"> | 28 | <link rel="apple-touch-icon" sizes="160x160" href="http://maxcdn.devdocs.io/images/apple-icon-160.png"> |
| 29 | <%= stylesheet_tag 'application' %> | 29 | <link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>"> |
| 30 | <%= javascript_tag 'application', asset_host: false %> | 30 | <%= javascript_tag 'application', asset_host: false %> |
| 31 | <%= javascript_tag 'docs' %><% unless App.production? %> | 31 | <%= javascript_tag 'docs' %><% unless App.production? %> |
| 32 | <%= javascript_tag 'debug' %><% end %> | 32 | <%= javascript_tag 'debug' %><% end %> |
| @@ -4,6 +4,7 @@ CACHE: · 3 unmodified lines | |||
| 4 | / | 4 | / |
| 5 | <%= javascript_path 'application', asset_host: false %> | 5 | <%= javascript_path 'application', asset_host: false %> |
| 6 | <%= stylesheet_path 'application' %> | 6 | <%= stylesheet_path 'application' %> |
| 7 | <%= stylesheet_path 'application-dark' %> | ||
| 7 | <%= image_path 'icons.png' %> | 8 | <%= image_path 'icons.png' %> |
| 8 | <%= image_path 'icons@2x.png' %> | 9 | <%= image_path 'icons@2x.png' %> |
| 9 | <%= image_path 'maxcdn.png' %> | 10 | <%= image_path 'maxcdn.png' %> |
| @@ -8,7 +8,7 @@ · 7 unmodified lines | |||
| 8 | <title>DevDocs<%= ": #{@doc['name']} API Documentation" if doc_index_page? %></title> | 8 | <title>DevDocs<%= ": #{@doc['name']} API Documentation" if doc_index_page? %></title> |
| 9 | <link rel="icon" type="image/x-icon" href="http://maxcdn.devdocs.io/favicon.ico"> | 9 | <link rel="icon" type="image/x-icon" href="http://maxcdn.devdocs.io/favicon.ico"> |
| 10 | <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Search DevDocs"> | 10 | <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Search DevDocs"> |
| 11 | <%= stylesheet_tag 'application' %> | 11 | <link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>"> |
| 12 | <%= javascript_tag 'application', asset_host: false %><% unless App.production? %> | 12 | <%= javascript_tag 'application', asset_host: false %><% unless App.production? %> |
| 13 | <%= javascript_tag 'debug' %><% end %> | 13 | <%= javascript_tag 'debug' %><% end %> |
| 14 | <script>app.DOC = <%= @doc.to_json %>;</script> | 14 | <script>app.DOC = <%= @doc.to_json %>;</script> |