Adjust blockquote and q styling

mmistakes · Feb 1, 2018 · bf775bf · bf775bf
1 parent 1c2a6f2
commit bf775bf
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 15 deletions.
diff --git a/_sass/so-simple/_base.scss b/_sass/so-simple/_base.scss
@@ -14,13 +14,10 @@ body {
 
 blockquote,
 q {
-  color: tint($text-color, 40%);
-  font-style: italic;
 
-  cite {
+  footer {
     font-size: 80%;
     font-style: normal;
-    font-weight: bold;
 
     &::before {
       padding-right: 0.25rem;

diff --git a/_sass/so-simple/_global.scss b/_sass/so-simple/_global.scss
@@ -229,22 +229,22 @@
       display: block;
       margin-bottom: 0.25em;
       padding: 0.5em 1em;
-      color: $text-color;
+      color: mix(#000, $border-color, 25%);
       font-size: 14px;
       font-weight: bold;
       line-height: 1.5;
       text-align: center;
       text-decoration: none;
-      border: 1px solid $text-color;
+      border: 1px solid $border-color;
       border-radius: 0;
 
       &.current,
       &.current.disabled {
-        @include yiq-contrasted($text-color);
+        @include yiq-contrasted(mix(#000, $border-color, 25%));
       }
 
       &.disabled {
-        color: lighten($text-color, 50%);
+        color: $border-color;
         pointer-events: none;
         cursor: not-allowed;
       }

diff --git a/_sass/so-simple/_reset.scss b/_sass/so-simple/_reset.scss
@@ -223,8 +223,9 @@ small {
 blockquote {
   margin-right: 0;
   margin-left: 0;
-  padding: 0 1rem;
-  border-left: solid 0.25rem;
+  padding: 2em 3em;
+  background-color: mix(#fff, $accent-color, 95%);
+  border-left: solid 0.5em $accent-color;
 
   *:last-child {
     margin-bottom: 0;

diff --git a/_sass/so-simple/_variables.scss b/_sass/so-simple/_variables.scss
@@ -54,7 +54,7 @@ $entry-title-weight: bold !default;
 /* Colors */
 $base-color: #000 !default;
 $text-color: #000 !default;
-$accent-color: #de1e1e !default;
+$accent-color: #34374C !default;
 $nav-color: #fff !default;
 $background-color: #fff !default;
 $nav-background-color: #000 !default;

diff --git a/example/_posts/2013-01-11-markup-html-elements-and-formatting.md b/example/_posts/2013-01-11-markup-html-elements-and-formatting.md
@@ -9,7 +9,7 @@ elements:
   - formatting
   - html
   - markup
-last_modified_at: 2017-03-09T10:55:59-05:00
+last_modified_at: 2018-02-01T10:16:49-05:00
 ---
 
 A variety of common HTML elements to demonstrate the theme's stylesheet and verify they have been styled appropriately.
@@ -35,14 +35,17 @@ Single line blockquote:
 Multi line blockquote with a cite reference:
 
 > People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.
+>
+> <footer><strong>Steve Jobs</strong> &mdash; Apple Worldwide Developers' Conference, 1997</footer>
 
-<cite>Steve Jobs</cite> --- Apple Worldwide Developers' Conference, 1997
-{: .small}
+Quoted text inline using `<q>` element:
+
+<p>Luke continued, <q>And then she called him a <q>scruffy-looking nerf-herder</q>! I think I’ve got a chance!</q> The poor naive fool&hellip;</p>
 
 ## Tables
 
 | Employee         | Salary |                                                              |
-| --------         | ------ | ------------------------------------------------------------ |
+|------------------|--------|--------------------------------------------------------------|
 | [John Doe](#)    | $1     | Because that's all Steve Jobs needed for a salary.           |
 | [Jane Doe](#)    | $100K  | For all the blogging she does.                               |
 | [Fred Bloggs](#) | $100M  | Pictures are worth a thousand words, right? So Jane × 1,000. |