2023年 RubyKaigi のデザインを当てる

Author: attsumi

app/assets/stylesheets/application.css.scss

@@ -75,5 +75,5 @@
 @import "modules/teammates";
 @import "modules/staff-website-page";
 
-// override for 2022
+// override for 2023
 @import "override/index";

app/assets/stylesheets/base/_variables.scss

@@ -923,23 +923,22 @@ $dl-horizontal-breakpoint:    $grid-float-breakpoint !default;
 $hr-border:                   $gray-lighter !default;
 
 /////////////////////////////////////////////////////
-// 2022
+// 2023
 // --------------------------------------------------
-
-$color-base: #F0E7E0;
+$color-base: #F8F8F8;
 $color-base-light: #F3EDE2;
-$color-main: #2C2C31;
+$color-main: #333333;
 $color-main-light: #606069;
-$color-accent: #BF4545;
-$color-link: #3E6199;
+$color-accent: #BA083D;
+$color-link: #1E4EC4;
 $color-link-hover: #2364C9;
 $color-light-gray: #D1BEAC;
 
 $brand-primary: $color-accent;
 $brand-info-alt:#4E6994;
 
 $headings-font-weight: 600;
-$font-family-sans-serif:  'Poppins', sans-serif;
+$font-family-sans-serif:  'Montserrat', sans-serif;
 
 $navbar-default-link-active-bg: $color-accent;
 $navbar-default-link-hover-color: $color-accent;

app/assets/stylesheets/override/_base.scss

@@ -1,8 +1,7 @@
 body {
-  background-image: url('background.png');
-  font-family: 'Poppins', sans-serif;
-  background-repeat: repeat;
-  background-position: center top;
+  font-family: $font-family-sans-serif;
+  background-color: $color-base;
+  color: $color-main;  
 }
 
 body[id*=staff_],

app/assets/stylesheets/override/_nav.scss

@@ -1,20 +1,21 @@
 .navbar-default {
-  background-color: #fcf9f6;
+  background-color: $color-base;
   border: none;
   box-shadow: 0 2px 1px rgba(black, .1);
 }
 
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
+  background-color: $color-main;
   border-radius: 4px;
 }
 
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  background-color: rgba($color-accent, .1);
-  color: $color-accent;
+  background-color: rgba($color-base, .1);
+  color: $color-base;
 }
 
 .navbar-nav > li:not(:first-child) {
@@ -46,19 +47,22 @@
 }
 
 .navbar-brand {
-  font-family: inherit;
+  color: $color-main;
+  font-family: $font-family-sans-serif;
+  font-weight: bold;
 }
 
 .navbar-fixed-top.program-subnav,
 .navbar-fixed-top.schedule-subnav {
   border: none;
   li.active {
     border-bottom: none;
+    color: $color-base;
   }
 }
 
 .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
-  background-color: $color-accent;
+  background-color: $color-base;
 }
 
 .subnavbar .subnavbar-inner {

app/views/layouts/_navbar.html.haml

@@ -6,7 +6,7 @@
         %span.icon-bar
         %span.icon-bar
       - if current_event
-        = link_to 'RubyKaigi 2022', event_path(current_event), class: 'navbar-brand'
+        = link_to 'RubyKaigi 2023', event_path(current_event), class: 'navbar-brand'
       - else
         = link_to "CFP App", events_path, class: 'navbar-brand'
 

docs/website_documentation.md

@@ -388,4 +388,3 @@ careful since this cannot be undone.
 ## Sponsors
 
 ## Themes
-