From 1c7cdb24e47665b587b56b52b21afd11e0b81efc Mon Sep 17 00:00:00 2001
From: southerntofu <southerntofu@squat.net>
Date: Wed, 20 Feb 2019 12:48:07 +0000
Subject: [PATCH] Merged _new.scss into _leap.scss
Fixed regression: navigation menu now has active tab again
Removed unused variables tabs-small-size and tabs-small-padding
---
amber/layouts/_masthead.html.haml | 2 +-
pages/assets/_leap.scss | 82 +++++++++++++------------------
pages/assets/_new.scss | 62 -----------------------
pages/assets/style.scss | 53 +++++++++++---------
4 files changed, 63 insertions(+), 136 deletions(-)
delete mode 100644 pages/assets/_new.scss
diff --git a/amber/layouts/_masthead.html.haml b/amber/layouts/_masthead.html.haml
index 18f746e..af86d84 100644
--- a/amber/layouts/_masthead.html.haml
+++ b/amber/layouts/_masthead.html.haml
@@ -5,4 +5,4 @@
%h1 LEAP Encryption Access Project
%nav.nav-menu{:role => "navigation"}
- top_navigation_items(include_home:true) do |item|
- %a.nav-item{:href => item[:href]}= item[:label]
+ %a.nav-item{:href => item[:href], :class => item[:class]}= item[:label]
diff --git a/pages/assets/_leap.scss b/pages/assets/_leap.scss
index 7b961fe..866d79c 100644
--- a/pages/assets/_leap.scss
+++ b/pages/assets/_leap.scss
@@ -6,61 +6,44 @@ a:visited {
// MASTHEAD
//
-#masthead {
- width: 100%;
- margin: 0;
- background-color: $masthead-bg-color;
- border-bottom: $masthead-border;
-
- @include gradient-vertical(lighten($masthead-bg-color,8%),$masthead-bg-color);
- box-shadow: inset 0 0 8px 1px darken($masthead-bg-color, 8%);
- box-shadow-top: 0;
-
- .masthead-inner {
- height: $masthead-height;
- @include cutout-menu(
- $ul-id: top-menu,
- $active-bg: $cutout-color,
- $left-indent: $masthead-text-left-margin,
- $small-left-indent: $masthead-small-text-left-margin,
- $small-screen: $small-screen);
- @media (max-width: $small-screen) {
- height: $masthead-small-height;
+header {
+ grid-area: header;
+ padding: $header-padding;
+ background-color: $header-bg-color;
+ text-align: center;
+
+ @include gradient-vertical(lighten($header-bg-color,8%),$header-bg-color);
+ box-shadow: inset 0 0 8px 1px darken($header-bg-color, 8%);
+ box-shadow-top: 0;
+
+ > h1 {
+ color: $header-color;
+ font-weight: bold;
+ margin: $header-title-margin;
}
- }
-
- .logo {
- background: $masthead-bg;
- @media (max-width: $small-screen) {
- background: $masthead-small-bg;
- }
- }
-
- h1 {
- font-weight: bold;
- white-space: nowrap;
- margin: 0;
- color: $masthead-color;
+}
- line-height: $masthead-height;
- font-size: $masthead-text-size;
- padding-left: $masthead-text-left-margin - 2px;
+.nav-menu {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
@media (max-width: $small-screen) {
- line-height: $masthead-small-height;
- font-size: $masthead-small-text-size;
- padding-left: $masthead-small-text-left-margin - 2px;
+ flex-direction: $nav-small-direction;
}
- }
+}
- #top-menu a.tab {
+// If we don't add the "a" here, on hover styles won't be affected
+a.nav-item {
+ font-size: $nav-item-size;
+ padding: $nav-item-padding;
+ color: $nav-color;
+ background-color: $nav-bg-color;
font-weight: bold;
- color: white;
- background: rgba(0,0,0,0.5);
- &.active {
- color: black;
- }
- }
+}
+a.active {
+ background-color: $nav-color;
+ color: $nav-bg-color;
}
//
@@ -256,4 +239,5 @@ article.page-summary {
img.left {
float:left;
margin: 7px 14px 0px 0px;
-}
\ No newline at end of file
+}
+
diff --git a/pages/assets/_new.scss b/pages/assets/_new.scss
deleted file mode 100644
index 7add150..0000000
--- a/pages/assets/_new.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-// Variables
-
-$main-v-spacing: 1rem;
-
-// Header variables
-
-// Free one line at the top of the page
-$header-padding: $main-v-spacing 0 0 0;
-$header-bg-color: #555;
-$header-color: #fff;
-$header-title-margin: 1rem 0;
-$header-title-size: inherit;
-
-// Navigation menu variables
-
-$nav-color: $header-color;
-$nav-bg-color: $header-bg-color;
-$nav-item-size: 1.5rem;
-$nav-item-padding: 0.6rem 1.2rem;
-// On smaller screen, choose between horizontal (row) and vertical (column) menu
-$nav-small-direction: column;
-
-// Nav menu
-
-header {
- grid-area: header;
- padding: $header-padding;
- background-color: $header-bg-color;
- text-align: center;
-
- @include gradient-vertical(lighten($header-bg-color,8%),$header-bg-color);
- box-shadow: inset 0 0 8px 1px darken($header-bg-color, 8%);
- box-shadow-top: 0;
-
- > h1 {
- color: $header-color;
- font-weight: bold;
- margin: $header-title-margin;
- }
-}
-
-.nav-menu {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- @media (max-width: $small-screen) {
- flex-direction: $nav-small-direction;
- }
-}
-
-// If we don't add the "a" here, on hover styles won't be affected
-a.nav-item {
- font-size: $nav-item-size;
- padding: $nav-item-padding;
- color: $nav-color;
- background-color: $nav-bg-color;
- font-weight: bold;
- &:first-child {
- background-color: $nav-color;
- color: $nav-bg-color;
- }
-}
diff --git a/pages/assets/style.scss b/pages/assets/style.scss
index cce3fd9..1e398a8 100644
--- a/pages/assets/style.scss
+++ b/pages/assets/style.scss
@@ -21,25 +21,34 @@ $link-visited-color: darken($link-color, 15%);
$background-color: #fff;
-$masthead-border-color: black;
-$masthead-border: 1px solid $masthead-border-color;
-$masthead-bg-color: #555;
-$masthead-color: #fff;
-
-$masthead-height: 128px;
-$masthead-bg: url(/img/leap180.png) 0px 50% no-repeat;
-$masthead-text-left-margin: 175px;
-$masthead-text-top-margin: 45px;
-$masthead-text-size: 36px;
-
-$masthead-small-height: 96px;
-$masthead-small-bg: url(/img/leap128.png) 0px 50% no-repeat;
-$masthead-small-text-left-margin: 96px;
-$masthead-small-text-top-margin: 20px;
-$masthead-small-text-size: 24px;
-
-//$tabs-small-size:
-//$tabs-small-padding:
+// Used for spacing between blocks
+$main-v-spacing: 1rem;
+
+//
+// HEADER VARIABLES
+//
+
+// Free one line at the top of the page
+$header-padding: $main-v-spacing 0 0 0;
+$header-bg-color: #555;
+$header-color: #fff;
+$header-title-margin: 1rem 0;
+$header-title-size: inherit;
+
+//
+// NAVIGATION MENU VARIABLES
+//
+
+$nav-color: $header-color;
+$nav-bg-color: $header-bg-color;
+$nav-item-size: 1.5rem;
+$nav-item-padding: 0.6rem 1.2rem;
+// On smaller screen, choose between horizontal (row) and vertical (column) menu
+$nav-small-direction: column;
+
+//
+// OTHER VARIABLES
+//
$cutout-color: darken($background-color,11%);
$background-color-start: darken($background-color,17%);
@@ -47,7 +56,7 @@ $background-color-start: darken($background-color,17%);
$side-column-bg-color: #d0d0d0; // rgba(0,0,0,0.05); // #e3e3e3
$side-column-border-color: #aaa; // rgba(0,0,0,0.2);
$side-column-active-bg-color: #000;
-$side-column-active-color: $masthead_color;
+$side-column-active-color: $header-color;
$side-column-text-color: #000;
$side-column-indent: 15px;
@@ -56,7 +65,3 @@ $well-border-color: #555;
@import "mixins";
@import "leap";
-
-// Trying not to break stuff, we just add things for now
-// Then we'll merge _new.scss into _leap.scss
-@import "new";
--
GitLab