diff --git a/Gemfile b/Gemfile index be2d4d61..12be6c4f 100644 --- a/Gemfile +++ b/Gemfile @@ -20,10 +20,11 @@ group :app do gem 'rack-ssl-enforcer' gem 'rack' gem 'rss' - gem 'sassc' + gem 'sass' gem 'sinatra-contrib' gem 'sinatra' gem 'sprockets-helpers' + gem 'sprockets-sass' gem 'sprockets' gem 'thin' end diff --git a/Gemfile.lock b/Gemfile.lock index 75a2cfc6..7d944545 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -78,13 +78,15 @@ GEM pry (>= 0.13, < 0.15) racc (1.6.2) rack (2.2.8) - rack-protection (3.2.0) - base64 (>= 0.1.0) + rack-protection (3.1.0) rack (~> 2.2, >= 2.2.4) rack-ssl-enforcer (0.2.9) rack-test (2.1.0) rack (>= 1.3) - rake (13.1.0) + rake (13.0.6) + rb-fsevent (0.11.2) + rb-inotify (0.10.1) + ffi (~> 1.0) redcarpet (3.6.0) rexml (3.2.6) rouge (1.11.1) @@ -92,24 +94,29 @@ GEM rss (0.3.0) rexml ruby2_keywords (0.0.5) - sassc (2.4.0) - ffi (~> 1.9) - sinatra (3.2.0) + sass (3.7.4) + sass-listen (~> 4.0.0) + sass-listen (4.0.0) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + sinatra (3.1.0) mustermann (~> 3.0) rack (~> 2.2, >= 2.2.4) - rack-protection (= 3.2.0) + rack-protection (= 3.1.0) tilt (~> 2.0) - sinatra-contrib (3.2.0) - multi_json (>= 0.0.2) + sinatra-contrib (3.1.0) + multi_json mustermann (~> 3.0) - rack-protection (= 3.2.0) - sinatra (= 3.2.0) + rack-protection (= 3.1.0) + sinatra (= 3.1.0) tilt (~> 2.0) - sprockets (4.2.1) + sprockets (3.7.2) concurrent-ruby (~> 1.0) - rack (>= 2.2.4, < 4) + rack (> 1, < 3) sprockets-helpers (1.4.0) sprockets (>= 2.2) + sprockets-sass (2.0.0.beta2) + sprockets (>= 2.0, < 4.0) strings (0.2.1) strings-ansi (~> 0.2) unicode-display_width (>= 1.5, < 3.0) @@ -124,7 +131,7 @@ GEM eventmachine (~> 1.0, >= 1.0.4) rack (>= 1, < 3) thor (1.3.0) - tilt (2.3.0) + tilt (2.2.0) tty-pager (0.14.0) strings (~> 0.2.0) tty-screen (~> 0.8) @@ -163,11 +170,12 @@ DEPENDENCIES redcarpet rr rss - sassc + sass sinatra sinatra-contrib sprockets sprockets-helpers + sprockets-sass terminal-table terser thin @@ -181,4 +189,4 @@ RUBY VERSION ruby 3.3.0p0 BUNDLED WITH - 2.5.4 + 2.4.6 diff --git a/assets/stylesheets/application.css.scss.erb b/assets/stylesheets/application.css.scss similarity index 73% rename from assets/stylesheets/application.css.scss.erb rename to assets/stylesheets/application.css.scss index 11adbdaa..dc2ee648 100644 --- a/assets/stylesheets/application.css.scss.erb +++ b/assets/stylesheets/application.css.scss @@ -10,61 +10,11 @@ * http://mozilla.org/MPL/2.0/ */ -/* https://github.com/rails/sass-rails/issues/139 */ - -<% manifest = JSON.parse(File.read('assets/images/sprites/docs.json')) %> - -%svg-icon { - display: inline-block; - vertical-align: top; - width: 1rem; - height: 1rem; - pointer-events: none; - fill: currentColor; -} - -%doc-icon { - content: ''; - display: block; - width: 1rem; - height: 1rem; - background-image: image-url('sprites/docs.png'); - background-size: <%= manifest['icons_per_row'] %>rem <%= manifest['icons_per_row'] %>rem; -} - -@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { - %doc-icon { background-image: image-url('sprites/docs@2x.png'); } -} - -html._theme-dark { - %darkIconFix { - filter: invert(100%) grayscale(100%); - -webkit-filter: invert(100%) grayscale(100%); - } -} - -<%= - items = [] - - manifest['items'].each do |item| - rules = [] - rules << "background-position: -#{item['col']}rem -#{item['row']}rem;" - rules << "@extend %darkIconFix !optional;" if item['dark_icon_fix'] - items << "._icon-#{item['type']}:before { #{rules.join(' ')} }" - end - - items.join('') - %> - -._hide-in-development { - <%= App.environment != :production ? 'display: none;' : '' %> -} - - @import 'global/variables-light', 'global/variables-dark', 'global/variables', 'global/mixins', + 'global/icons', 'global/classes', 'global/base'; @@ -79,8 +29,8 @@ html._theme-dark { 'components/path', 'components/notice', 'components/prism', - 'components/mobile'; - + 'components/mobile', + 'components/environment'; @import 'pages/simple', 'pages/angular', diff --git a/assets/stylesheets/components/_environment.scss.erb b/assets/stylesheets/components/_environment.scss.erb new file mode 100644 index 00000000..5e2201c3 --- /dev/null +++ b/assets/stylesheets/components/_environment.scss.erb @@ -0,0 +1,3 @@ +._hide-in-development { + <%= App.environment != :production ? 'display: none;' : '' %> +} diff --git a/assets/stylesheets/global/_icons.scss.erb b/assets/stylesheets/global/_icons.scss.erb new file mode 100644 index 00000000..b2b22c22 --- /dev/null +++ b/assets/stylesheets/global/_icons.scss.erb @@ -0,0 +1,43 @@ +<% manifest = JSON.parse(File.read('assets/images/sprites/docs.json')) %> + +%svg-icon { + display: inline-block; + vertical-align: top; + width: 1rem; + height: 1rem; + pointer-events: none; + fill: currentColor; +} + +%doc-icon { + content: ''; + display: block; + width: 1rem; + height: 1rem; + background-image: image-url('sprites/docs.png'); + background-size: <%= manifest['icons_per_row'] %>rem <%= manifest['icons_per_row'] %>rem; +} + +@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { + %doc-icon { background-image: image-url('sprites/docs@2x.png'); } +} + +html._theme-dark { + %darkIconFix { + filter: invert(100%) grayscale(100%); + -webkit-filter: invert(100%) grayscale(100%); + } +} + +<%= + items = [] + + manifest['items'].each do |item| + rules = [] + rules << "background-position: -#{item['col']}rem -#{item['row']}rem;" + rules << "@extend %darkIconFix !optional;" if item['dark_icon_fix'] + items << "._icon-#{item['type']}:before { #{rules.join(' ')} }" + end + + items.join('') + %> diff --git a/lib/app.rb b/lib/app.rb index 158de64f..e23b241c 100644 --- a/lib/app.rb +++ b/lib/app.rb @@ -94,7 +94,7 @@ class App < Sinatra::Application ] sprockets.js_compressor = Terser.new - sprockets.css_compressor = :sassc + sprockets.css_compressor = :sass Sprockets::Helpers.configure do |config| config.digest = true