Merge pull request #41 from code4lib/apply-theme

jscaffrey · web-flow · commit 478ae4d8ee58 · 2020-11-23T12:17:38.000-05:00
add theme vars and apply initial changes
diff --git a/assets/_scss/_clip-circles.scss b/assets/_scss/_clip-circles.scss
@@ -8,8 +8,8 @@
   width: 79px;
   border-radius: 50%;
   margin: 0 auto .2em;
-  background: $clip-circle-border;
-  border: 13px solid $clip-circle-border;
+  background: $icosahedron-color;
+  border: 13px solid $icosahedron-color;
   box-sizing: content-box;
 }
 
diff --git a/assets/_scss/_footer.scss b/assets/_scss/_footer.scss
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .footer {
-  background-color: #464745;
+  background-color: $footer-bg;
   bottom: 0;
   box-sizing: border-box;
   color: $footer-color;
diff --git a/assets/_scss/_global.scss b/assets/_scss/_global.scss
@@ -9,7 +9,7 @@ html {
 
 body {
   /* Margin bottom by footer height */
-  color: $gray-base;
+  color: $cultured-white;
   font-family: $font-family-sans-serif;
   font-weight: 300;
   margin-bottom: 20.3125em;
diff --git a/assets/_scss/_goingon.scss b/assets/_scss/_goingon.scss
@@ -26,3 +26,14 @@
     @include link-styles-states;
   }
 }
+
+.going-on a.btn {
+  background-color: $btn-bg-color-mid;
+  color: $btn-color-mid;
+  border-color: $btn-border-color-mid;
+  border: 1px solid;
+    &:hover {
+        border: 1px solid $btn-border-hover;
+        //outline-offset: -2px;
+    }
+}
diff --git a/assets/_scss/_homepage.scss b/assets/_scss/_homepage.scss
@@ -10,7 +10,7 @@
 }
 
 #conferenceInfo {
-  background-color: $primary;
+  background-color: $hero-transition;
 
   h1 {
     background-color: fade-out($primary-light, .35);
@@ -55,12 +55,12 @@
    ========================================================================== */
 
 #heroImageAttribution {
-  background-color: $accent;
+  background-color: $hero-transition;
   color: $primary-dark;
   font-size: .9em;
 
   a {
-    color: $primary-dark;
+    color: $cultured-white;
   }
 }
 
@@ -134,6 +134,9 @@
 }
 
 // "Welcome to..." section of the home page
+.welcome {
+  background-color: $oxford-blue;
+}
 .welcome a {
   @include link-styles;
 
diff --git a/assets/_scss/_links.scss b/assets/_scss/_links.scss
@@ -1,11 +1,12 @@
 @mixin link-styles {
   border-bottom: 1px dotted;
-  color: $primary-dark;
+  color: $turquoise;
   text-decoration: none;
 }
 
 @mixin link-styles-states {
-  background-color: $accent;
+  //background-color: $accent;
+  color: $link-color-light;
   border-bottom: 2px solid;
   text-decoration: none;
 }
diff --git a/assets/_scss/_presentations-workshops.scss b/assets/_scss/_presentations-workshops.scss
@@ -139,4 +139,26 @@
       @include link-styles-states;
     }
   }
+}
+
+#prepared-talks a.btn {
+  background-color: $btn-bg-color-mid;
+  color: $btn-color-mid;
+  border-color: $btn-border-color-mid;
+  border: 1px solid;
+    &:hover {
+        border: 1px solid $btn-border-hover;
+        //outline-offset: -2px;
+    }
+}
+
+#postconference a.btn {
+  background-color: $btn-bg-color-mid;
+  color: $btn-color-mid;
+  border-color: $btn-border-color-mid;
+  border: 1px solid;
+    &:hover {
+        border: 1px solid $btn-border-hover;
+        //outline-offset: -2px;
+    }
 }
diff --git a/assets/_scss/_secondary-nav.scss b/assets/_scss/_secondary-nav.scss
@@ -6,17 +6,25 @@ ul.secondarynav > li:not(.active):hover {
   border-left: solid 3px $accent;
 }
 
+ul.secondarynav > li:not(.active) > a:hover {
+  color: $link-color-light;
+}
+
 ul.secondarynav > li.active > ul > li {
   list-style-type: none;
   padding: 5px 0px;
 }
 
+ul.secondarynav > li.active > ul > li > a:hover {
+    color: $link-color-light;
+}
+
 ul.secondarynav > li.active > a,
 ul.secondarynav > li.active > a:hover,
 ul.secondarynav > li.active > a:focus {
   background-color: transparent;
   font-weight: 700;
-  color: $primary;
+  color: $link-color-light;
 }
 
 ul.secondarynav > li.active > a > .secondnav-item,
@@ -26,5 +34,5 @@ ul.secondarynav > li.active > a:focus > .secondnav-item {
   text-decoration: none;
   border-bottom: 3px solid $accent;
   margin-bottom: -1px;
-  color: $primary-dark;
+  color: $link-color-light;
 }
diff --git a/assets/_scss/_sections.scss b/assets/_scss/_sections.scss
@@ -5,6 +5,9 @@
 section {
   min-height: 200px;
   padding: 2em 0;
+  &.welcome {
+    min-height: 0px;
+  }
 }
 
 section:nth-of-type(3n+1) {
@@ -13,7 +16,8 @@ section:nth-of-type(3n+1) {
 }
 
 section:nth-of-type(3n+2) {
-  border-top: 2px solid $gray-light;
+  border-top: 2px solid $crayola-ink;
+  border-bottom: 2px solid $crayola-ink;
 }
 
 section:nth-of-type(3n+3) {
@@ -37,7 +41,7 @@ section:nth-of-type(3n+3) {
 
 section .general-info {
   background: none;
-  color: $gray-base;
+  //color: $gray-base;
 }
 
 section .general-info a {
diff --git a/assets/_scss/_speakers.scss b/assets/_scss/_speakers.scss
@@ -14,7 +14,10 @@
 }
 
 a.speaker-info-toggle {
-  color: $primary-light;
+  color: $turquoise;
+  &:hover {
+    color: $link-color-light;
+  }
 }
 
 p.speaker-title,
@@ -143,10 +146,11 @@ p.speaker-inst {
   background-color: $speaker-selected-bg;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
+  outline: $speaker-selected-outline;
 }
 
 .speaker-box.selected a {
-  color: $white;
+  color: $speaker-selected-color;
 
   &:active,
   &:focus,
@@ -163,7 +167,7 @@ p.speaker-inst {
 .arrow-down {
   border-left: 140px solid transparent;
   border-right: 140px solid transparent;
-  border-top: 15px solid $speaker-selected-bg;
+  border-top: 15px solid $speaker-selected-arrow;
   height: 0;
   margin-top: 15px;
   opacity: 0;
diff --git a/assets/_scss/_variables.scss b/assets/_scss/_variables.scss
@@ -1,4 +1,30 @@
 $bootstrap-sass-asset-helper: true !default;
+
+// --------------------------------------------------
+// 2021 Variables
+// --------------------------------------------------
+
+// Background
+$oxford-blue: #061A40;
+$jungle-green: #041F1E;
+
+// Foreground
+$cultured-white: #F5F5F5;
+$turquoise: #00D5C0;
+$crayola-ink: #FA62F0;
+
+// Buttons
+$btn-bg-color-mid: #495057; //$gray-700
+$btn-color-mid: $cultured-white;
+$btn-border-color-mid: #8e908c; //$gray-600
+$btn-border-hover: $crayola-ink;
+
+// Random Utils
+$transparent: transparent !important;
+$icosahedron-color: #2692b2;
+$hero-transition: #770681;
+
+
 //
 // Variables
 // --------------------------------------------------
@@ -28,23 +54,23 @@ $gray-light:             $gray-400 !default; // #777
 $gray-lighter:           $gray-200 !default; // #eee
 //End fo gray setting
 
-$primary:                 #27251f;
+$primary:                 $jungle-green;
 $primary-dark:            darken($primary, 10%) !default;
 $primary-light:           lighten($primary, 10%) !default;
 
-$accent:                  #fdb827;
+$accent:                  $crayola-ink;
 $accent-dark:             darken($accent, 10%) !default;
 $accent-light:            lighten($accent, 10%);
 $accent-darker:           darken($accent, 20%);
 $accent-lighter:          lighten($accent, 20%);
 
-$brand-primary:           $accent !default; // #337ab7
+$brand-primary:           $jungle-green !default; // #337ab7
 $brand-success:           #5cb85c !default;
 $brand-info:              #5bc0de !default;
-$brand-warning:           #f0ad4e !default;
+$brand-warning:           $gray-600 !default;
 $brand-danger:            #d9534f !default;
 
-$accent-link-primary:    #fdb771 !default;
+$accent-link-primary:    $gray-600 !default;
 $accent-primary-hover:   lighten($accent-link-primary, 10%) !default;
 
 // General
@@ -56,23 +82,23 @@ $tab-focus-color: rgba(0, 103, 244, 0.43);
 //## Unique Code4Lib conference site components
 
 // Sections
-$section-2-bg:            $primary;
+$section-2-bg:            $cultured-white;
 $section-2-color:         color-contrast($primary);
 $section-2-link:          $accent-dark;
 $section-2-hover:         $accent-lighter;
 
-$section-3-bg:            $primary-dark;
+$section-3-bg:            $jungle-green;
 $section-3-color:         $gray-lighter;
 $section-3-link:          $accent-dark;
 $section-3-hover:         darken($accent-light, 6.5%);
 
-$footer-bg:               $gray-darker;
+$footer-bg:               $black;
 $footer-color:            $gray-lighter;
 $footer-link:             lighten($accent-light, 30%);
 $footer-hover:            darken($footer-link, 6.5%);
 
 // Clip circle
-$clip-circle-border:      $accent-light;
+$clip-circle-border:      $transparent;
 
 // Sponsor Badges
 $sponsor-badge-primary:   $accent;
@@ -82,8 +108,10 @@ $sponsor-badge-ribbon:    $accent-light;
 $sponsor-badge-bg:        $gray-lighter;
 
 // Speaker Box
-$speaker-selected-bg:     $primary;
-$speaker-selected-color:  $gray-lighter;
+$speaker-selected-bg:     $oxford-blue;
+$speaker-selected-color:  $turquoise;
+$speaker-selected-outline:  2px solid $crayola-ink;
+$speaker-selected-arrow:  $crayola-ink;
 $speaker-info-bg:         $gray-light;
 $speaker-info-color:      $gray-base;
 
@@ -106,8 +134,8 @@ $timeline-content-bg:     $gray-lighter;
 $timeline-content-shadow: $gray;
 
 // Testimonials
-$testimonial-bg:          $accent;
-$testimonial-border:      $gray-base;
+$testimonial-bg:          $gray-light;
+$testimonial-border:      $accent;
 $testimonial-color:       $primary-dark;
 
 // Presentation Info Box
@@ -132,12 +160,14 @@ $night-event:             $primary-dark;
 //## Settings for some of the most global styles.
 
 //** Background color for `<body>`.
-$body-bg:               $gray-lighter !default;
+$body-bg:               $jungle-green !default;
 //** Global text color on `<body>`.
-$text-color:            $gray-base !default;
+$text-color:            $cultured-white !default;
 
 //** Global textual link color.
-$link-color:            $primary !default;
+$link-color:            $turquoise !default;
+$link-color-light:      lighten($turquoise, 10%);
+$link-color-dark:       darken($turquoise, 10%);
 $link-decoration:       none !default;
 $link-hover-color:      $primary-dark !default;
 $link-hover-decoration: underline !default;
diff --git a/index.html b/index.html
@@ -33,9 +33,11 @@ <h2>The conference for people who code for libraries.</h2>
             </div>
             <div class="col-sm-10">
                 <h2>Welcome to {{site.data.conf.location}}</h2>
+                {% if site.data.conf.venue.name != '' %}
                 <p>
                 The conference will take place at the <a href="{{site.data.conf.venue.website}}">{{site.data.conf.venue.name}}</a>, right in downtown {{ site.data.conf.location }}.
                 </p>
+                {% endif %}
             </div>
         </div>
     </div>

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,12 @@`
`1`	`1`	`@mixin link-styles {`
`2`	`2`	`border-bottom: 1px dotted;`
`3`		`- color: $primary-dark;`
	`3`	`+ color: $turquoise;`
`4`	`4`	`text-decoration: none;`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`@mixin link-styles-states {`
`8`		`- background-color: $accent;`
	`8`	`+ //background-color: $accent;`
	`9`	`+ color: $link-color-light;`
`9`	`10`	`border-bottom: 2px solid;`
`10`	`11`	`text-decoration: none;`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,9 @@`
`5`	`5`	`section {`
`6`	`6`	`min-height: 200px;`
`7`	`7`	`padding: 2em 0;`
	`8`	`+ &.welcome {`
	`9`	`+ min-height: 0px;`
	`10`	`+ }`
`8`	`11`	`}`
`9`	`12`
`10`	`13`	`section:nth-of-type(3n+1) {`
`@@ -13,7 +16,8 @@ section:nth-of-type(3n+1) {`
`13`	`16`	`}`
`14`	`17`
`15`	`18`	`section:nth-of-type(3n+2) {`
`16`		`- border-top: 2px solid $gray-light;`
	`19`	`+ border-top: 2px solid $crayola-ink;`
	`20`	`+ border-bottom: 2px solid $crayola-ink;`
`17`	`21`	`}`
`18`	`22`
`19`	`23`	`section:nth-of-type(3n+3) {`
`@@ -37,7 +41,7 @@ section:nth-of-type(3n+3) {`
`37`	`41`
`38`	`42`	`section .general-info {`
`39`	`43`	`background: none;`
`40`		`- color: $gray-base;`
	`44`	`+ //color: $gray-base;`
`41`	`45`	`}`
`42`	`46`
`43`	`47`	`section .general-info a {`