Merge pull request #122 from olgark/master

Add footer example

dist/dark.css

@@ -16,6 +16,7 @@
 
   --text-main: #dbdbdb;
   --text-bright: #ffffff;
+  --text-muted: #717880;
 
   --links: #41adff;
   --focus: #0096bfab;
@@ -47,6 +48,7 @@
 
   --text-main: #363636;
   --text-bright: #000000;
+  --text-muted: #999999;
 
   --links: #0076d1;
   --focus: #0096bfab;
@@ -143,8 +145,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {
@@ -312,7 +314,7 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
-:-ms-input-placeholder {
+::-moz-placeholder {
   color: var(--form-placeholder);
 }
 
@@ -561,4 +563,11 @@ summary::-webkit-details-marker {
   color: var(--text-main);
 }
 
+footer {
+  border-top: 1px solid var(--background);
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: var(--text-muted);
+}
+
 /*# sourceMappingURL=dark.css.map */

dist/dark.standalone.css

@@ -13,6 +13,7 @@
 
   --text-main: #dbdbdb;
   --text-bright: #ffffff;
+  --text-muted: #717880;
 
   --links: #41adff;
   --focus: #0096bfab;
@@ -108,8 +109,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {
@@ -277,7 +278,7 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
-:-ms-input-placeholder {
+::-moz-placeholder {
   color: var(--form-placeholder);
 }
 
@@ -526,4 +527,11 @@ summary::-webkit-details-marker {
   color: var(--text-main);
 }
 
+footer {
+  border-top: 1px solid var(--background);
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: var(--text-muted);
+}
+
 /*# sourceMappingURL=dark.standalone.css.map */

dist/light-legacy.standalone.css

@@ -119,8 +119,8 @@ q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {
@@ -616,4 +616,11 @@ summary::-webkit-details-marker {
   color: #363636;
 }
 
+footer {
+  border-top: 1px solid #efefef;
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: #999999;
+}
+
 /*# sourceMappingURL=light-legacy.standalone.css.map */

dist/light.css

@@ -16,6 +16,7 @@
 
   --text-main: #363636;
   --text-bright: #000000;
+  --text-muted: #999999;
 
   --links: #0076d1;
   --focus: #0096bfab;
@@ -47,6 +48,7 @@
 
   --text-main: #dbdbdb;
   --text-bright: #ffffff;
+  --text-muted: #717880;
 
   --links: #41adff;
   --focus: #0096bfab;
@@ -143,8 +145,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {
@@ -312,7 +314,7 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
-:-ms-input-placeholder {
+::-moz-placeholder {
   color: var(--form-placeholder);
 }
 
@@ -560,4 +562,11 @@ details > :not(summary) {
 summary::-webkit-details-marker {
   color: var(--text-main);
 }
+
+footer {
+  border-top: 1px solid var(--background);
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: var(--text-muted);
+}
 /*# sourceMappingURL=light.css.map */

dist/light.standalone.css

@@ -13,6 +13,7 @@
 
   --text-main: #363636;
   --text-bright: #000000;
+  --text-muted: #999999;
 
   --links: #0076d1;
   --focus: #0096bfab;
@@ -108,8 +109,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {
@@ -277,7 +278,7 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
-:-ms-input-placeholder {
+::-moz-placeholder {
   color: var(--form-placeholder);
 }
 
@@ -526,4 +527,11 @@ summary::-webkit-details-marker {
   color: var(--text-main);
 }
 
+footer {
+  border-top: 1px solid var(--background);
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: var(--text-muted);
+}
+
 /*# sourceMappingURL=light.standalone.css.map */

index.html

@@ -314,6 +314,10 @@
       <p>The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.</p>
     </details>
 
+    <footer>
+      Here is an example of a footer! Maybe you want to put some links here. <a href='#'>Privacy Policy</a> | <a href='https://github.com/kognise/water.css'>Contribute</a>
+    </footer>
+
     <script src='https://unpkg.com/favicon-mode-switcher@^1.0.0' defer></script>
     <script src='script.js' defer></script>
   </body>

src/parts/_misc.css

@@ -92,3 +92,10 @@ details > :not(summary) {
 summary::-webkit-details-marker {
   color: var(--text-main);
 }
+
+footer {
+  border-top: 1px solid var(--background);
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: var(--text-muted);
+}

src/parts/_typography.css

@@ -50,8 +50,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {

src/variables-dark.css

@@ -7,6 +7,7 @@
 
   --text-main: #dbdbdb;
   --text-bright: #ffffff;
+  --text-muted: #717880;
 
   --links: #41adff;
   --focus: #0096bfab;

src/variables-light.css

@@ -7,6 +7,7 @@
 
   --text-main: #363636;
   --text-bright: #000000;
+  --text-muted: #999999;
 
   --links: #0076d1;
   --focus: #0096bfab;

yarn.lock

@@ -2784,9 +2784,9 @@ lodash.uniq@^4.5.0:
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
 lodash@^4.17.10:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
 lru-queue@0.1:
   version "0.1.0"