Skip to content

Commit

Permalink
Merge pull request #116 from vinternet-pds/master
Browse files Browse the repository at this point in the history 
[WEBSITE-789] [WEBSITE-791] Refactored Pugin CSS and static html page updates
  • Loading branch information
@vinternet-pds
vinternet-pds authored Mar 17, 2017
2 parents 5244241 + f868c1a commit 1a6668a
Show file tree
Hide file tree
Showing 14 changed files with 152 additions and 156 deletions.
27 changes: 19 additions & 8 deletions src/stylesheets/components/_content-slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,33 @@
padding-bottom: 0;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: $grey-4;
border-bottom-color: $dividers;
}

.slider-link {
display: block;
position: relative;
padding-top: $base-spacing-unit-small;
padding-top: $base-spacing-unit;
padding-bottom: $base-spacing-unit-small;
border-top-width: 1px;
border-top-style: solid;
border-top-color: $grey-4;
color: $grey-1;
border-top-color: $dividers;
color: $headings;
text-decoration: none;
@include fontsize(28, 36);
@include media($mobile) {
@include fontsize(24, 32);
}
}

.slider-content {
padding-bottom: $base-spacing-unit-tiny;
& > h3 {
padding-bottom: $base-spacing-unit-small;
@include fontsize(24, 32);
@include media($mobile) {
@include fontsize(20, 28);
}
}
& > p {
padding-bottom: $base-spacing-unit-small;
Expand All @@ -36,15 +44,18 @@
.has-js {
.slider-link {
padding-right: $base-spacing-unit-large;
color: $links;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
color: $headings;
//color: $links;
//font-weight: bold;
//text-decoration: underline;
//cursor: pointer;
/*
&:hover,
&:active,
&:focus {
text-decoration: none;
}
*/
& > span.open,
& > span.close {
display:block;
Expand Down
2 changes: 1 addition & 1 deletion src/stylesheets/components/_highlight-box.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
& + .highlight__box--caution {
margin-bottom: 0;
}
@include media($tablet) {
@include media($desktop) {
padding-right: $base-spacing-unit-medium;
padding-left: $base-spacing-unit-medium;
}
Expand Down
16 changes: 4 additions & 12 deletions src/stylesheets/components/_list-styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
margin: 0;
list-style: none;
}
h2,h3,h4,h5,h6 {
h2, h3, h4, h5, h6 {
font-size: inherit;
line-height: inherit;
font-weight: bold;
Expand All @@ -24,12 +24,12 @@
@extend .list;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: $grey-4;
color: $grey-2;
border-bottom-color: $dividers;
color: $paragraph;
&:first-of-type {
border-top-width: 1px;
border-top-style: solid;
border-top-color: $grey-4;
border-top-color: $dividers;
}
}

Expand All @@ -51,14 +51,6 @@
clear: left;
padding-right: $base-spacing-unit-tiny;
}
& dt, dd, dd > a {
@include fontsize(16, 26, false);
}
@include media($desktop) {
dt, dd, dd > a {
@include fontsize(18, 36, false);
}
}
}

// Definition List - Nested Within Normal List
Expand Down
14 changes: 12 additions & 2 deletions src/stylesheets/elements/_body.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,20 @@ html {
}
// Variables inherited from 'settings/_fonts.scss'
body {
direction: ltr;
margin-bottom: 165px; // equal to footer height
padding: 0;
background-color: $main-background;
direction: ltr;
color: $paragraph;
font-family: $base-font-stack;
color: $grey-1;
// Baseline Typography Settings (pixels)
@include fontsize(18, 30);
// Mobile Typography Settings (pixels)
@include media($mobile) {
@include fontsize(16, 25);
}
// Desktop Typography Settings (pixels)
@include media($desktop) {
@include fontsize(18, 30);
}
}
38 changes: 0 additions & 38 deletions src/stylesheets/elements/_lists.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,47 +11,9 @@ li {
margin: 0;
}

// Non-Media Query Browsers and Tablet dimensions (pixels)
li {
@include fontsize(18, 30);
}

// Mobile List Item Size (pixels)
@include media($mobile) {
li {
@include fontsize(16, 26);
}
}

// Desktop List Item Size (pixels)
@include media($desktop) {
li {
@include fontsize(18, 30);
}
}

// DEFINITION LISTS

dl, dt, dd {
margin: 0;
padding: 0;
}

// Non-Media Query Browsers and Tablet dimensions (pixels)
dt, dd {
@include fontsize(18, 30);
}

// Mobile Definition List Sizes (pixels)
@include media($mobile) {
dt, dd {
@include fontsize(16, 26);
}
}

// Desktop Definition List Sizes (pixels)
@include media($desktop) {
dt, dd {
@include fontsize(18, 30);
}
}
60 changes: 34 additions & 26 deletions src/stylesheets/elements/_typography.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Base Typography Resets
h1, h2, h3, h4, h5, h6, p {
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
// font-smoothing - anti aliasing
Expand All @@ -8,106 +8,114 @@ h1, h2, h3, h4, h5, h6, p {
// font-feature-settings - vertically aligned typeface
// https://developer.mozilla.org/en/docs/Web/CSS/font-feature-settings
font-feature-settings: 'pnum';
}

// Font Colors
h1, h2, h3, h4, h5, h6 {
color: $headings;
}

p {
color: $paragraph;
p, a, ol, ul, dl {
// Baseline Typography Settings (pixels)
@include fontmargin(18, 30);
// Mobile Typography Settings (pixels)
@include media($mobile) {
@include fontmargin(16, 25);
}
// Desktop Typography Settings (pixels)
@include media($desktop) {
@include fontmargin(18, 30);
}
}

// Fontsize Mixin Creates 'font-size' & 'line-height' in REM with PX fallback

// Base Typography Settings - Non-Media Query Browsers and Tablet dimensions (pixels)
h1 {
@include fontsize(36, 44);
@include fontmargin(36, 44);
}
h2 {
@include fontsize(32, 40);
@include fontmargin(32, 40);
}
h3 {
@include fontsize(26, 34);
@include fontmargin(26, 34);
}
h4 {
@include fontsize(22, 30);
@include fontmargin(22, 30);
}
h5 {
@include fontsize(20, 28);
@include fontmargin(20, 28);
}
h6 {
@include fontsize(18, 26);
}
p,a {
@include fontsize(18, 30);
@include fontmargin(18, 26);
}
.lead {
@include fontsize(21, 33);
}
.lead > a {
@include fontsize(21, 33);
@include fontmargin(21, 33);
}

// Mobile Typography Settings (pixels)
@include media($mobile) {
h1 {
@include fontsize(32, 40);
@include fontmargin(32, 40);
}
h2 {
@include fontsize(28, 36);
@include fontmargin(28, 36);
}
h3 {
@include fontsize(24, 32);
@include fontmargin(24, 32);
}
h4 {
@include fontsize(21, 32);
@include fontmargin(21, 32);
}
h5 {
@include fontsize(18, 26);
@include fontmargin(18, 26);
}
h6 {
@include fontsize(16, 23);
}
p,a {
@include fontsize(16, 25);
@include fontmargin(16, 23);
}
.lead {
@include fontsize(18, 27);
}
.lead > a {
@include fontsize(18, 27);
@include fontmargin(18, 27);
}
}

// Desktop Typography Settings (pixels)
@include media($desktop) {
h1 {
@include fontsize(36, 44);
@include fontsize(36, 44);
@include fontmargin(36, 44);
}
h2 {
@include fontsize(32, 40);
@include fontmargin(32, 40);
}
h3 {
@include fontsize(26, 34);
@include fontmargin(26, 34);
}
h4 {
@include fontsize(22, 30);
@include fontmargin(22, 30);
}
h5 {
@include fontsize(20, 28);
@include fontmargin(20, 28);
}
h6 {
@include fontsize(18, 26);
}
p,a {
@include fontsize(18, 30);
@include fontmargin(18, 26);
}
.lead {
@include fontsize(21, 33);
}
.lead > a {
@include fontsize(21, 33);
@include fontmargin(21, 33);
}
}
1 change: 1 addition & 0 deletions src/stylesheets/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

// Import tools & mixins
@import 'tools/mixins/border-radius';
@import 'tools/mixins/font-margin';
@import 'tools/mixins/font-size';
@import 'tools/mixins/screenreader';

Expand Down
8 changes: 1 addition & 7 deletions src/stylesheets/objects/_grid-layouts.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
// Container - Full Grid Width
.container--full-grid {
//@include outer-container;
max-width: 768px;
margin-left:auto;
margin-right:auto;
@include media($mobile) {
max-width:100%;
}
@include outer-container;
}

// Container - Full Screen
Expand Down
12 changes: 5 additions & 7 deletions src/stylesheets/objects/_grid-settings.scss
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
// Base Page Dimensions
$max-width: 1280px;
$max-width: 768px;
$min-width: 320px;

// Base Grid Settings
$column: 85px;
$gutter: 20px;
$grid-columns: 12;
$column: 80px;
$gutter: 16px;
$grid-columns: 8;

// Breakpoints
$widescreen: new-breakpoint(min-width $max-width 12);
$desktop: new-breakpoint(min-width 960px 12);
$tablet: new-breakpoint(min-width 768px 10);
$desktop: new-breakpoint(min-width 768px 8);
$mobile: new-breakpoint(max-width 767px 4);

// Visualise Grid
Expand Down
15 changes: 8 additions & 7 deletions src/stylesheets/settings/_spacing.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
// Create uniform spacing value by setting it equal to line height set in the fonts.scss file
$base-spacing-unit-calc: $base-font-size * $base-line-height;
$base-spacing-unit: ($base-spacing-unit-calc * 0.75) + 0px;
$base-spacing-unit-calc: $base-font-size * $base-line-height; // 24px
$base-spacing-unit: ($base-spacing-unit-calc * 0.75) + 0px; // 18px

// Using base spacing value create consistent spacing variations
$base-spacing-unit-tiny: round($base-spacing-unit / 3);
$base-spacing-unit-small: round($base-spacing-unit / 2);
$base-spacing-unit-medium: round($base-spacing-unit);
$base-spacing-unit-large: round($base-spacing-unit * 1.25);
$base-spacing-unit-extra-large: round($base-spacing-unit * 1.5);
$base-spacing-unit-tiny: round($base-spacing-unit / 3); // 6px
$base-spacing-unit-small: round($base-spacing-unit-tiny * 2); // 12px
$base-spacing-unit-medium: round($base-spacing-unit); // 18px
$base-spacing-unit-large: round($base-spacing-unit + $base-spacing-unit-tiny); // 24px
$base-spacing-unit-extra-large: round($base-spacing-unit + $base-spacing-unit-small); // 30px
Loading

0 comments on commit 1a6668a

Please sign in to comment.