From 0fbbc661202f187fb7212ede17b39bd9c0e5cd97 Mon Sep 17 00:00:00 2001 From: Lorin Werthen-Brabants Date: Thu, 26 Sep 2024 09:08:55 +0200 Subject: [PATCH 01/29] WIP, introduce dark mode by updating bulma and dart-sass --- .gitmodules | 3 + Gemfile | 1 + Gemfile.lock | 12 ++ Rules | 7 +- content/assets/stylesheets/bulma | 1 + .../assets/stylesheets/includes/blogpost.scss | 3 +- .../stylesheets/includes/eventpage.scss | 7 +- .../assets/stylesheets/includes/events.scss | 10 +- .../assets/stylesheets/includes/general.scss | 16 +-- .../assets/stylesheets/includes/navbar.scss | 30 ++-- .../assets/stylesheets/includes/tiles.scss | 1 + content/assets/stylesheets/includes/toc.scss | 18 +-- .../stylesheets/includes/variables.scss | 38 ------ content/assets/stylesheets/main.scss | 52 ++++++- content/index.erb | 14 +- layouts/eventpost.erb | 10 +- layouts/events.erb | 4 +- layouts/partials/_events_tile.erb | 6 +- layouts/partials/_navbar.erb | 3 +- layouts/partials/_zeus_logo.erb | 31 +++++ lib/filters/dart_sass_custom.rb | 128 ++++++++++++++++++ lib/filters/sassc.rb | 4 - package.json | 6 +- yarn.lock | 34 ++++- 24 files changed, 326 insertions(+), 113 deletions(-) create mode 160000 content/assets/stylesheets/bulma delete mode 100644 content/assets/stylesheets/includes/variables.scss create mode 100644 layouts/partials/_zeus_logo.erb create mode 100644 lib/filters/dart_sass_custom.rb delete mode 100644 lib/filters/sassc.rb diff --git a/.gitmodules b/.gitmodules index 813c9210..971342bf 100644 --- a/.gitmodules +++ b/.gitmodules @@ -3,3 +3,6 @@ #url = ssh://git@git.zeus.gent:2222/bestuur/drive.git url = https://git.zeus.gent/zeuswpi/drive.git branch = master +[submodule "content/assets/stylesheets/bulma"] + path = content/assets/stylesheets/bulma + url = https://github.com/jgthms/bulma diff --git a/Gemfile b/Gemfile index baad1a9b..b4311147 100644 --- a/Gemfile +++ b/Gemfile @@ -50,6 +50,7 @@ end group :nanoc do gem 'guard-nanoc' + gem 'nanoc-dart-sass' end group :test do diff --git a/Gemfile.lock b/Gemfile.lock index 9134d457..8c1a0fcc 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -14,6 +14,7 @@ GEM rack-livereload (~> 0.3) autoprefixer-rails (10.4.15.0) execjs (~> 2) + bigdecimal (3.1.8) builder (3.2.4) coderay (1.1.3) colored (1.2) @@ -29,6 +30,9 @@ GEM execjs (2.9.1) ffi (1.15.5) formatador (1.1.0) + google-protobuf (4.28.2) + bigdecimal + rake (>= 13) guard (2.18.1) formatador (>= 0.2.4) listen (>= 2.7, < 4.0) @@ -101,6 +105,9 @@ GEM slow_enumerator_tools (~> 1.0) tty-platform (~> 0.2) zeitwerk (~> 2.1) + nanoc-dart-sass (1.0.3) + nanoc-core (~> 4.12) + sass-embedded (~> 1.56) nanoc-deploying (1.0.2) nanoc-checking (~> 1.0) nanoc-cli (~> 4.11, >= 4.11.15) @@ -142,12 +149,16 @@ GEM rack (>= 3) webrick (~> 1.8) rainpress (1.0.1) + rake (13.2.1) rb-fsevent (0.11.2) rb-inotify (0.10.1) ffi (~> 1.0) rbtree (0.4.6) rexml (3.2.6) rubypants (0.7.1) + sass-embedded (1.79.3) + google-protobuf (~> 4.27) + rake (>= 13) sassc (2.4.0) ffi (~> 1.9) set (1.0.1) @@ -199,6 +210,7 @@ DEPENDENCIES kramdown kramdown-math-katex nanoc + nanoc-dart-sass nanoc-live pandoc-ruby puma diff --git a/Rules b/Rules index a74b4ba7..7dbcc0b0 100644 --- a/Rules +++ b/Rules @@ -10,6 +10,7 @@ require 'kramdown-math-katex' # Important!!! # First ignore the node_modules, we do not need any of it on the site directly. ignore '/node_modules/**/*' +ignore '/assets/stylesheets/bulma/**/*' # # @@ -231,18 +232,18 @@ compile '/assets/scripts/**/*.js' do end ignore '/data/**/*' - ignore '/assets/stylesheets/includes/**/*' + compile '/assets/stylesheets/**/*.scss' do # This filter is necessary for the workaround present in main.scss and deals with out of date dependencies filter :erb sass_opts = { syntax: :scss, - load_paths: ['content/assets/stylesheets'] + load_paths: ['content/assets/stylesheets','node_modules/'], } sass_opts[:style] = :compressed if production? - filter :sassc, sass_opts + filter :dart_sass_custom, sass_opts filter :autoprefixer if production? write ext: 'css' diff --git a/content/assets/stylesheets/bulma b/content/assets/stylesheets/bulma new file mode 160000 index 00000000..3fd2f650 --- /dev/null +++ b/content/assets/stylesheets/bulma @@ -0,0 +1 @@ +Subproject commit 3fd2f6502678c09dc39d2fe37980b88c2c5bc534 diff --git a/content/assets/stylesheets/includes/blogpost.scss b/content/assets/stylesheets/includes/blogpost.scss index 4ecdbbba..21ed1fda 100644 --- a/content/assets/stylesheets/includes/blogpost.scss +++ b/content/assets/stylesheets/includes/blogpost.scss @@ -14,10 +14,11 @@ margin: auto; .title { + font-weight: bolder; + @include tablet { font-size: 4rem; } - font-weight: bolder; } .subtitle { diff --git a/content/assets/stylesheets/includes/eventpage.scss b/content/assets/stylesheets/includes/eventpage.scss index b3c85ee7..414c5fd4 100644 --- a/content/assets/stylesheets/includes/eventpage.scss +++ b/content/assets/stylesheets/includes/eventpage.scss @@ -25,6 +25,7 @@ &.light-background { background-color: rgba(0, 0, 0, 0.75); + color: var(--bulma-background); } } @@ -57,11 +58,11 @@ } .event-tile-image { + max-width:200px; + max-height:200px; + // For now, don't show the event tile image on mobile, takes too much space @include mobile { display: none; } - - max-width:200px; - max-height:200px; } diff --git a/content/assets/stylesheets/includes/events.scss b/content/assets/stylesheets/includes/events.scss index 251604dd..172fc276 100644 --- a/content/assets/stylesheets/includes/events.scss +++ b/content/assets/stylesheets/includes/events.scss @@ -1,3 +1,4 @@ + .box.event-preview { border-radius: 0px; display: flex; @@ -16,11 +17,7 @@ padding-top:0px; box-shadow : none; width: 60%; - //for better spacing on mobile - @include mobile { - width: 100%; - } .title { font-size: 1.7em; font-weight: 500; @@ -50,6 +47,11 @@ font-size: 1.6em; font-weight: 400; } + + //for better spacing on mobile + @include mobile { + width: 100%; + } } .main-event { diff --git a/content/assets/stylesheets/includes/general.scss b/content/assets/stylesheets/includes/general.scss index eb2656cc..174a37e9 100644 --- a/content/assets/stylesheets/includes/general.scss +++ b/content/assets/stylesheets/includes/general.scss @@ -40,23 +40,23 @@ a.box:hover { border-bottom: none; } - &:visited:hover { - color: $link-hover; - } + // &:visited:hover { + // color: $button-link-hover; + // } } } footer .content a { &:not(.button) { - color: $text-light; + color: $text-weak; &:visited { - color: $text-light; + color: $text-weak; } - &:hover { - color: $link-hover; - } + // &:hover { + // color: $button-link-hover; + // } } } diff --git a/content/assets/stylesheets/includes/navbar.scss b/content/assets/stylesheets/includes/navbar.scss index 0bb05e1f..7ddc2136 100644 --- a/content/assets/stylesheets/includes/navbar.scss +++ b/content/assets/stylesheets/includes/navbar.scss @@ -18,13 +18,6 @@ } .navbar:not(.is-transparent) #logo-link { - @include desktop { - border-bottom: 2px solid $body-background; - margin-bottom: -2px; - width: 124px; - } - - #logo { @include desktop { max-width: none; @@ -35,6 +28,12 @@ position: absolute; } } + + @include desktop { + border-bottom: 2px solid var(--bulma-body-background-color); + margin-bottom: -2px; + width: 124px; + } } .navbar-item { @@ -42,23 +41,17 @@ font-size: 1.15em; } - @include touch { - .navbar-menu { - position: absolute; - width: 100%; - } - } - .navbar:not(.is-transparent) { .navbar-item { &:not(.is-active) { - color: #7a7a7a; + color: var(--bulma-text-title-l); } &.is-active { color: $primary; border-bottom: 2px solid; margin-bottom: -2px; + background-color: transparent; } } } @@ -70,4 +63,11 @@ transform: rotate(10deg); } } + + @include touch { + .navbar-menu { + position: absolute; + width: 100%; + } + } } diff --git a/content/assets/stylesheets/includes/tiles.scss b/content/assets/stylesheets/includes/tiles.scss index b34c3cfd..002e55bc 100644 --- a/content/assets/stylesheets/includes/tiles.scss +++ b/content/assets/stylesheets/includes/tiles.scss @@ -83,6 +83,7 @@ $top_coder_size: 80px; justify-content: center; table { + width: 100%; position: relative; tr:first-child { diff --git a/content/assets/stylesheets/includes/toc.scss b/content/assets/stylesheets/includes/toc.scss index 252f50da..a86518cd 100644 --- a/content/assets/stylesheets/includes/toc.scss +++ b/content/assets/stylesheets/includes/toc.scss @@ -1,15 +1,6 @@ // CSS related to the TOC #table-of-contents { - @include tablet { - position: absolute; - left: 100%; - } - - @include mobile { - text-align: center; - } - #markdown-toc { @extend .menu-list; @@ -18,6 +9,15 @@ list-style: none; } } + + @include tablet { + position: absolute; + left: 100%; + } + + @include mobile { + text-align: center; + } } $sel: ''; diff --git a/content/assets/stylesheets/includes/variables.scss b/content/assets/stylesheets/includes/variables.scss deleted file mode 100644 index 058be26c..00000000 --- a/content/assets/stylesheets/includes/variables.scss +++ /dev/null @@ -1,38 +0,0 @@ -// Colours -$zeus-orange: #ff7f00; -$zeus-blue: #00c4ff; - -$body-background: #fff; -$body-size: 1rem; - -$tile-orange: $zeus-orange; - -$navbar-border-color: #ccc; -$event-border-color: #ddd; - -$orange: $zeus-orange; -$blue: $zeus-blue; -$turquoise: #30d1b2; - -$link: $orange; -$link-visited: $link; - -$border-hover: $blue; - -$box-colour: #eee; -$highlighted-box-colour: $zeus-orange; -$highlighted-text-colour: #fff; -$highlighted-link-colour: #222324; - -$cammie-controls-color: rgba(0, 0, 0, .60); - -$event-padding: 10px; - -$primary: $orange; -$secondary: $zeus-blue; -$tertiary: $box-colour; - -// Let's trust the font the user chose -$family-sans-serif: sans-serif; - -$timeline-content-padding: 0.55em 0 0 2em; diff --git a/content/assets/stylesheets/main.scss b/content/assets/stylesheets/main.scss index 1e3dc90a..b5b782d1 100644 --- a/content/assets/stylesheets/main.scss +++ b/content/assets/stylesheets/main.scss @@ -3,10 +3,56 @@ // <% @items.find_all('/assets/stylesheets/includes/*').each {|e| e.raw_content } %> /* KEEP THIS ^^^^ */ -@import "includes/variables"; -@import "node_modules/bulma/bulma"; -@import "node_modules/bulma-timeline/src/sass/index.sass"; +// Colours +$zeus-orange: #ff7f00; +$zeus-blue: #00c4ff; + +$body-background: #fff; +$body-size: 1rem; + +$tile-orange: $zeus-orange; + +$navbar-border-color: #ccc; +$event-border-color: #ddd; + +$orange: $zeus-orange; +$blue: $zeus-blue; +$turquoise: #30d1b2; + +$link: $orange; +$link-visited: $link; + +$border-hover: $blue; + +$box-colour: #eee; +$highlighted-box-colour: $zeus-orange; +$highlighted-text-colour: #fff; +$highlighted-link-colour: #222324; + +$cammie-controls-color: rgba(0, 0, 0, .60); + +$event-padding: 10px; + +$primary: $orange; +$secondary: $zeus-blue; +$tertiary: $box-colour; + +// Let's trust the font the user chose +$family-sans-serif: sans-serif; + +$timeline-content-padding: 0.55em 0 0 2em; + +@use "bulma/sass" with ( + $primary: $zeus-orange, + $link: $zeus-orange +); + + +// @import "bulma/bulma"; +@import "bulma/sass/utilities/mixins"; +@import "bulma/sass/utilities/_index"; +// @import "node_modules/bulma-timeline/src/sass/index.sass"; // Sticky footer body { diff --git a/content/index.erb b/content/index.erb index 0e65ab93..268001aa 100644 --- a/content/index.erb +++ b/content/index.erb @@ -22,7 +22,7 @@
- + Upcoming Events @@ -46,7 +46,7 @@
- + Top Coders @@ -69,7 +69,7 @@
- + Previous Events @@ -85,7 +85,7 @@

- + About Zeus WPI

@@ -101,7 +101,7 @@
- + Blogpost @@ -124,7 +124,7 @@
- + Sponsoring members @@ -152,7 +152,7 @@
- + Sponsors diff --git a/layouts/eventpost.erb b/layouts/eventpost.erb index 8227989a..841ab248 100644 --- a/layouts/eventpost.erb +++ b/layouts/eventpost.erb @@ -17,16 +17,16 @@
<% if item[:banner] %> -
+