Skip to content

Commit

Permalink
Adjust typography and colors. Fix #14 #15
Browse files Browse the repository at this point in the history
  • Loading branch information
@terotik
terotik committed Aug 16, 2017
1 parent dc6cb3d commit ab3888a
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 43 deletions.
12 changes: 8 additions & 4 deletions src/sass/_application-variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,14 @@ $dark-gray: #525a65;
$medium-gray: #abb2bd;
$black: #000000;

$theme-success: $hel-tram;
$theme-info: $hel-fog;
$theme-warning: $hel-summer;
$theme-danger: $hel-metro;
$theme-success: $hel-tram;
$theme-success-light: $hel-copper;
$theme-info: $hel-coat;
$theme-info-light: $hel-fog;
$theme-warning: $hel-summer;
$theme-warning-light: $hel-engel;
$theme-danger: $hel-metro;
$theme-danger-light: $hel-suomenlinna;

$icon-font-path: "../fonts/bootstrap/";

Expand Down
62 changes: 31 additions & 31 deletions src/sass/_theme-bootstrap-variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,18 +53,18 @@ $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !def
$font-family-base: $font-family-sans-serif !default;

$font-size-base: 16px;
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px

$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-h5: $font-size-base !default;
$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
$font-size-h1: 42px ; // ~42px
$font-size-h2: 36px ; // ~34px
$font-size-h3: 28px ; // ~28px
$font-size-h4: 24px ; // ~24px
$font-size-h5: 20px ; // ~20px
$font-size-h6: 16px ; // ~16px

//** Unit-less `line-height` for use in components like buttons.
$line-height-base: 1.428571429 !default; // 20/14
$line-height-base: 1.5 !default; // 16/24
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px

Expand Down Expand Up @@ -152,13 +152,13 @@ $table-border-color: #ddd !default;

$btn-font-weight: 500;

$btn-default-color: $theme-primary-dark;
$btn-default-color: $black;
$btn-default-bg: transparent;
$btn-default-border: $theme-primary-dark;
$btn-default-border: $black;

$btn-primary-color: #fff !default;
$btn-primary-bg: $theme-primary-dark;
$btn-primary-border: $theme-primary-dark;
$btn-primary-bg: $black;
$btn-primary-border: $black;

$btn-success-color: $brand-success;
$btn-success-bg: transparent;
Expand Down Expand Up @@ -372,39 +372,39 @@ $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
$navbar-collapse-max-height: 340px !default;

$navbar-default-color: $theme-primary-dark;
$navbar-default-color: $black;
$navbar-default-bg: $white;
$navbar-default-border: transparent;

// Navbar links
$navbar-default-link-color: $theme-primary-dark;
$navbar-default-link-hover-color: $theme-highlight-dark;
$navbar-default-link-color: $black;
$navbar-default-link-hover-color: $black;
$navbar-default-link-hover-bg: transparent !default;
$navbar-default-link-active-color: $theme-primary-dark;
$navbar-default-link-active-color: $black;
$navbar-default-link-active-bg: transparent;
$navbar-default-link-disabled-color: $gray;
$navbar-default-link-disabled-bg: transparent !default;

// Navbar brand label
$navbar-default-brand-color: $navbar-default-link-color !default;
$navbar-default-brand-hover-color: $theme-highlight-dark;
$navbar-default-brand-hover-color: $black;
$navbar-default-brand-hover-bg: transparent !default;

// Navbar toggle
$navbar-default-toggle-hover-bg: transparent;
$navbar-default-toggle-icon-bar-bg: $theme-primary-dark;
$navbar-default-toggle-icon-bar-bg: $black;
$navbar-default-toggle-border-color: transparent;


//=== Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-color: $white;
$navbar-inverse-bg: $theme-primary-dark;
$navbar-inverse-bg: $black;
$navbar-inverse-border: transparent;

// Inverted navbar links
$navbar-inverse-link-color: $white;
$navbar-inverse-link-hover-color: $theme-highlight-light;
$navbar-inverse-link-hover-color: $white;
$navbar-inverse-link-hover-bg: transparent !default;
$navbar-inverse-link-active-color: $white;
$navbar-inverse-link-active-bg: transparent;
Expand All @@ -413,7 +413,7 @@ $navbar-inverse-link-disabled-bg: transparent !default;

// Inverted navbar brand label
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
$navbar-inverse-brand-hover-color: $theme-highlight-light;
$navbar-inverse-brand-hover-color: $white;
$navbar-inverse-brand-hover-bg: transparent !default;

// Inverted navbar toggle
Expand Down Expand Up @@ -505,19 +505,19 @@ $jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default;
//## Define colors for form feedback states and, by default, alerts.

$state-success-text: $black;
$state-success-bg: $brand-success;
$state-success-bg: $theme-success-light;
$state-success-border: transparent;

$state-info-text: $black;
$state-info-bg: $brand-info;
$state-info-bg: $theme-info-light;
$state-info-border: transparent;

$state-warning-text: $black;
$state-warning-bg: $brand-warning;
$state-warning-bg: $theme-warning-light;
$state-warning-border: transparent;

$state-danger-text: $white;
$state-danger-bg: $brand-danger;
$state-danger-text: $black;
$state-danger-bg: $theme-danger-light;
$state-danger-border: transparent;


Expand Down Expand Up @@ -577,13 +577,13 @@ $label-default-bg: $gray-light !default;
//** Primary label background color
$label-primary-bg: $theme-primary-light;
//** Success label background color
$label-success-bg: $brand-success !default;
$label-success-bg: $theme-success-light;
//** Info label background color
$label-info-bg: $brand-info !default;
$label-info-bg: $theme-info-light;
//** Warning label background color
$label-warning-bg: $brand-warning !default;
$label-warning-bg: $theme-warning-light;
//** Danger label background color
$label-danger-bg: $brand-danger !default;
$label-danger-bg: $theme-danger-light;

//** Default label text color
$label-color: $black;
Expand Down
45 changes: 37 additions & 8 deletions src/sass/_theme-custom-styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,12 +171,34 @@

// Styles when navbar is not collapsed
@media (min-width: $screen-md-min) {
.navbar-default .navbar-nav > .active > a {
border-bottom: solid 3px $theme-primary-dark;
.navbar-nav > li > a {
position: relative;
padding-left: 0;
padding-right: 0;
margin-right: 15px;
margin-left: 15px;
font-weight: 500;
font-size: 15px;
}

.navbar-inverse .navbar-nav > .active > a {
border-bottom: solid 3px $theme-highlight-light;
.navbar-nav > .active > a, .navbar-nav > li > a:hover {
&:after {
content: "";
border-bottom: solid 3px $black;
position: absolute;
bottom: 12px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
}

.navbar-inverse .navbar-nav > .active > a , .navbar-inverse .navbar-nav > li > a:hover {

&:after {
border-bottom: solid 3px $white;
}
}
}

Expand All @@ -193,8 +215,9 @@
.navbar-nav > .active > a {
font-weight: bold;

&:after {
content: "\000A0 \02022";
&:before {
content: "\000A0";
border-left: 3px solid $black;
}
}
}
Expand All @@ -213,15 +236,15 @@
}

.navbar-default {
border-bottom: 1px solid $theme-primary-dark;
//border-bottom: 1px solid $theme-primary-dark;

.navbar-collapse {
border-top-color: $gray-lighter;
}
}

.navbar-brand {
font-weight: bold;
font-weight: 700;
font-size: $font-size-base;
}

Expand Down Expand Up @@ -326,4 +349,10 @@ input[type="color"]:focus,
border-color: $input-border;
border-bottom-color: $black;
box-shadow: none;
}

// Panels

.panel {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

0 comments on commit ab3888a

Please sign in to comment.