WIP – Added styleguide for more things

Kikobeats · Feb 26, 2015 · c939c1e · c939c1e
1 parent 04542c5
commit c939c1e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 29 deletions.
diff --git a/assets/css/uno.css b/assets/css/uno.css
diff --git a/assets/scss/components/_post.scss b/assets/scss/components/_post.scss
@@ -111,9 +111,9 @@ section.post {
 }
 #post-title {
   margin: 3rem 0 2.5rem;
+  transition: all $aside-animation-time;
 
   &:hover {
     color: $hover-color;
-    transition: all 400ms;
   }
 }
diff --git a/assets/scss/modules/_global.scss b/assets/scss/modules/_global.scss
@@ -15,6 +15,11 @@ body {
   font-family: $sans-font;
   color: $gray-darker;
 }
+
+mark {
+  background: saturate($primary-color, 60%);
+}
+
 ::selection {
   background: lighten($primary-color, 36%);
 }
@@ -29,10 +34,10 @@ a {
   position: relative;
   color: $link-color;
   text-decoration: none;
+  transition: all $aside-animation-time;
 
   &:hover {
     color: $hover-color;
-    transition: all $aside-animation-time;
   }
 }
 h1,
@@ -64,14 +69,24 @@ h4 {
   font-size: 1.05rem;
 }
 h5 {
-  font-size: 1.85rem;
+  font-size: .85rem;
 }
 h6 {
   font-size: .66rem;
 }
 p {
   margin-bottom: 1.3rem;
   line-height: 1.7rem;
+
+  > code {
+    border: 1px solid #D9D9D9;
+    border-radius: 3px;
+    padding: 0.09rem 0.2rem;
+    font-family: $code-font;
+    font-weight: $font-weight-normal;
+    font-size: .85rem;
+    color: $gray-dark;
+  }
 }
 strong {
   font-weight: bold;
@@ -80,21 +95,16 @@ em {
   font-style: italic;
 }
 blockquote {
-  padding: 2rem 0;
-  margin: 1rem 0;
-  font-family: $serif-font;
-  font-size: 1.3rem;
-  font-style: italic;
-  font-weight: lighter;
-  text-align: center;
-  background: $gray-lightest;
-  border: 1px solid $gray-lighter;
-  border-radius: $border-radius;
-
-  p {
-    &:last-child {
-      margin-bottom: 0;
-    }
+  > p {
+    line-height: 1.4;
+    text-align: center;
+    font-size: 1.8rem;
+    margin: 2.5rem -3rem;
+    font-family: $quote-font;
+    letter-spacing: .01rem;
+    font-style: italic;
+    word-wrap: break-word;
+    -webkit-font-smoothing: antialiased;
   }
 }
 // ------------------------------
@@ -120,33 +130,26 @@ ol {
 ul {
   list-style-type: disc;
 }
+
 pre {
   padding: 1rem 2.5%;
   margin-bottom: 1.3rem;
   font-family: $code-font;
   font-size: .9rem;
-  font-weight: 400;
+  font-weight: $font-weight-normal;
   line-height: 1.3rem;
   color: $gray-dark;
   word-wrap: break-word;
-  background: 0 0;
   border: 1px solid #d9d9d9;
   border-radius: 3px;
 
   > code {
-    padding: 0;
     font-family: $code-font;
     font-size: .85rem;
     color: $gray-dark;
-    text-shadow: none;
-    background: 0 0;
-    border: none;
-    border-radius: 3px;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
   }
 }
+
 code:hover,
 pre:hover {
   color: $gray-darkest;

diff --git a/assets/scss/modules/_variables.scss b/assets/scss/modules/_variables.scss
@@ -22,6 +22,7 @@ $hover-color        : $primary-color;
 $sans-font          : 'Raleway', sans-serif;
 $serif-font         : 'Roboto Slab', serif;
 $code-font          : Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+$quote-font         : "freight-text-pro", Georgia, Cambria, "Times New Roman", Times, serif;
 
 $cover-color-first  : rgba(14, 44, 71, .31);
 $cover-color-second : rgba(67, 148, 162, .51);