diff --git a/docs/index.html b/docs/index.html
index d9ec359..2d9028b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -71,9 +71,22 @@
{ element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
])
+
+
Water.css
@@ -163,14 +176,14 @@
Version info
Goals
-
+
- Responsive
- Good code quality
- Good browser support
- Small size (< 2kb)
- Beautiful
- No classes
-
+
Is it responsive?
@@ -328,11 +341,11 @@
Typography
-
+
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
-
+
- Ordered list item 1
- Ordered list item 2
diff --git a/docs/style.css b/docs/style.css
index a0c3fc9..d19ea5b 100755
--- a/docs/style.css
+++ b/docs/style.css
@@ -63,3 +63,98 @@ body > footer {
align-items: center;
justify-content: space-between;
}
+
+ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background-color: #bf24e1;
+}
+
+li {
+ float: left;
+}
+
+li a {
+ display: block;
+ color: white;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+}
+
+li a:hover:not(.active) {
+ background-color: #633aea;
+}
+
+.active {
+ background-color: #04AA6D;
+}
+ .switch {
+ position: relative;
+ display: inline-block;
+ width: 55px;
+ height: 28px;
+ margin-left: 30px;
+ margin-top:10px;
+ }
+
+ .switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ }
+
+ .slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ .slider:before {
+ position: absolute;
+ content: "";
+ height: 20px;
+ width: 20px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ input:checked + .slider {
+ background-color: #2196F3;
+ }
+
+ input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+ }
+
+ input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+ }
+
+ /* Rounded sliders */
+ .slider.round {
+ border-radius: 34px;
+ }
+
+ .slider.round:before {
+ border-radius: 50%;
+ }
+ .dark-mode {
+ background-color: black;
+ color: white;
+ }
+
+