WIP, introduce dark mode by updating bulma and dart-sass

ZeusWPI · Sep 26, 2024 · 0fbbc66 · 0fbbc66
1 parent 5e01774
commit 0fbbc66
Show file tree

Hide file tree

Showing 24 changed files with 326 additions and 113 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -3,3 +3,6 @@
 	#url = ssh://[email protected]: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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,30 +28,30 @@
                 position: absolute;
             }
         }
+
+        @include desktop {
+            border-bottom: 2px solid var(--bulma-body-background-color);
+            margin-bottom: -2px;
+            width: 124px;
+        }
     }
 
     .navbar-item {
         font-variant: small-caps;
         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
@@ -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
@@ -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