Several responsive style tweaks

Relates to #5
svef · May 18, 2016 · 5fd812f · 5fd812f
1 parent 391cbab
commit 5fd812f
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 7 deletions.
diff --git a/src/styles/_config.scss b/src/styles/_config.scss
@@ -1,6 +1,8 @@
 
 // Font
 $font-size: 18px;
+$font-size-small: 16px;
+$font-size-large: 22px;
 
 // SVEF colors
 $color-svef: #E7792B;

diff --git a/src/styles/components/header/_index.scss b/src/styles/components/header/_index.scss
@@ -43,7 +43,7 @@ header {
     z-index: 3;
 
     margin: auto;
-    width: 110px;
+    width: 120px;
 
     animation-duration: 1.25s;
     animation-iteration-count: 1;
@@ -74,7 +74,7 @@ header {
     bottom: 0;
     z-index: 2;
 
-    padding-right: 110px;
+    padding-right: 120px;
 
     opacity: 1;
     transition: opacity 500ms ease 500ms;

diff --git a/src/styles/components/html/_index.scss b/src/styles/components/html/_index.scss
@@ -15,10 +15,18 @@ html {
 
 body {
   margin: 0;
-  padding: 0;
+  padding: $spacing/2 0 0;
 
   width: 100%;
   height: 100%;
+
+  @include respond-to(small) {
+    padding: $spacing/2 $spacing/2 0;
+  }
+
+  @include respond-to(medium) {
+    padding: $spacing $spacing 0;
+  }
 }
 
 // Default box-sizing to border-box, except for images and hr

diff --git a/src/styles/components/main/_index.scss b/src/styles/components/main/_index.scss
@@ -6,14 +6,18 @@ main {
   z-index: 1;
 
   margin: 0 auto;
-  padding: 0 0 ($footer-height + $spacing);
+  padding: 0 0 $spacing;
 
   max-width: $page-max-width;
   min-width: $page-min-width;
   min-height: 100vh;
 
   color: $color-gray;
 
+  @include respond-to(medium) {
+    padding-bottom: $footer-height + $spacing;
+  }
+
   > .inner{
     position: relative;
     z-index: 1;

diff --git a/src/styles/components/typography/_index.scss b/src/styles/components/typography/_index.scss
@@ -83,16 +83,20 @@ hgroup {
 p {
   margin: 0 auto $spacing;
   font-size: $font-size;
-  font-weight: 300;
+  font-weight: 400;
   line-height: 1.875;
 }
 
+b, strong {
+  font-weight: 700;
+}
+
 a {
   color: inherit;
 }
 
-.text-small { font-size: $font-size * 0.75; }
-.text-large { font-size: $font-size * 1.125; }
+.text-small { font-size: $font-size-small; }
+.text-large { font-size: $font-size-large; }
 
 .text-center { text-align: center; }
 .text-left { text-align: left; }