New media query section in _theme.scss.

desiredpersona · Oct 7, 2017 · 1b7fd14 · 1b7fd14
1 parent 4f8c5ed
commit 1b7fd14
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 07-10-2017
+- Created a section for media queries in _theme.scss
+- Decreased footnotes fontsize and added color variable.
+
+
 ## 04-10-2017
 - Released theme version 0.2.1
 - Updated gemspec.

diff --git a/_sass/_theme.scss b/_sass/_theme.scss
@@ -334,12 +334,6 @@ blockquote {
   margin: 4rem 0 4rem 0;
   color: $blockquote-color;
   border-left: .25rem solid $blockquote-border-color;
-
-  @media (min-width: 30em) {
-    font-size: 1.5rem;
-    padding-left: 1.5rem;
-  }
-
 }
 
 blockquote cite {
@@ -350,6 +344,12 @@ blockquote cite {
 
 }
 
+// Footnotes
+.footnotes {
+  font-size: .875rem;
+  color: $footnotes-color;
+}
+
 // Override Tachyons
 figure {
   margin: .25rem 0; // Removes Tachyons default 40px left/right margins on codeblocks
@@ -498,33 +498,54 @@ p > code {
 .bg-lighten-25 { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
 .bg-lighten-50 { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
 .bg-lighten-75 { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
+
+/* 
+
+    MEDIA QUERIES
+
+*/
+
+// medium and larger specific style
 @media screen and (min-width: 30em) {
- .bg-darken-0-ns { box-shadow: none; }
- .bg-darken-25-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
- .bg-darken-50-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
- .bg-darken-75-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
- .bg-lighten-0-ns { box-shadow: none; }
- .bg-lighten-25-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
- .bg-lighten-50-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
- .bg-lighten-75-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
+  blockquote {
+    font-size: 1.5rem;
+    padding-left: 1.5rem;
+  }
+
+  .footnotes {
+    font-size: 1rem;
+  }
+
+  .bg-darken-0-ns { box-shadow: none; }
+  .bg-darken-25-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
+  .bg-darken-50-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
+  .bg-darken-75-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
+  .bg-lighten-0-ns { box-shadow: none; }
+  .bg-lighten-25-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
+  .bg-lighten-50-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
+  .bg-lighten-75-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
 }
+
+// medium screen specific style
 @media screen and (min-width: 30em) and (max-width: 60em) {
- .bg-darken-0-m { box-shadow: none; }
- .bg-darken-25-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
- .bg-darken-50-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
- .bg-darken-75-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
- .bg-lighten-0-m { box-shadow: none; }
- .bg-lighten-25-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
- .bg-lighten-50-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
- .bg-lighten-75-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
+  .bg-darken-0-m { box-shadow: none; }
+  .bg-darken-25-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
+  .bg-darken-50-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
+  .bg-darken-75-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
+  .bg-lighten-0-m { box-shadow: none; }
+  .bg-lighten-25-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
+  .bg-lighten-50-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
+  .bg-lighten-75-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
 }
+
+// large and larger screen specific style
 @media screen and (min-width: 60em) {
- .bg-darken-0-l { box-shadow: none; }
- .bg-darken-25-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
- .bg-darken-50-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
- .bg-darken-75-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
- .bg-lighten-0-l { box-shadow: none; }
- .bg-lighten-25-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
- .bg-lighten-50-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
- .bg-lighten-75-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
-}
+  .bg-darken-0-l { box-shadow: none; }
+  .bg-darken-25-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
+  .bg-darken-50-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
+  .bg-darken-75-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
+  .bg-lighten-0-l { box-shadow: none; }
+  .bg-lighten-25-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
+  .bg-lighten-50-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
+  .bg-lighten-75-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
+}
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -52,6 +52,9 @@ $gutter-background-color: $light-gray;
 $blockquote-border-color: $black;
 $blockquote-color: $black;
 
+// Footnotes
+$footnotes-color: $black-80;
+
 // Horizontal rule
 $hr-color: $light-gray;