Add table variables

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b6815fcb9e193fcb0379560bce21d36c0413ceef..4e2559f6838cb7dcaccc665c1ebcb5c33af05358 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Bulma Changelog
 
+## 0.2.0
+
+* Added: new branding
+* Added: modularity
+* Added: grid folder
+* Added: .github folder
+
 ## 0.1.1
 
 * Remove `flex: 1` shorthand

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index 3752f6023ac658509fa7af4e11037482e9619059..f0590133485f2960a898db8b97fcff5d4ded6be0 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -113,6 +113,22 @@ $twitter: #55acee
     opacity: 0
     transform: scale(1)
 
+@keyframes slideDown
+  0%
+    opacity: 0
+    transform: translateY(-10px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes slideUp
+  0%
+    opacity: 0
+    transform: translateY(10px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
 $curve: cubic-bezier(0, 0.71, 0.29, 1)
 
 #b
@@ -161,7 +177,17 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
     height: 120px
     width: 120px
 
+#bulma
+  animation: slideDown 500ms both
+  animation-delay: 1s
+
+#modern-framework
+  animation: slideUp 500ms both
+  animation-delay: 1.2s
+
 #npm
+  animation: fadeIn 500ms both
+  animation-delay: 1.4s
   background: none
   margin: -10px 0 20px
   code
@@ -171,6 +197,18 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
     font-size: 16px
     padding: 16px 32px
 
+#ghbtns
+  animation: slideDown 500ms both
+  animation-delay: 1.6s
+
+#carbon
+  animation: slideUp 500ms both
+  animation-delay: 1.8s
+
+#download
+  animation: fadeIn 500ms both
+  animation-delay: 2s
+
 #grid
   .notification
     padding-left: 0

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 43375d492f84697dbfc589af3e0a56dd5b125008..fd7b9480f8cf851d218cbb4ea36ce7d9ebd98285 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -130,7 +130,7 @@ pre {
 }
 
 body {
-  color: #7a7a7a;
+  color: #4a4a4a;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.428571428571429;
@@ -144,7 +144,7 @@ a {
 }
 
 a:hover {
-  color: #242424;
+  color: #363636;
 }
 
 code {
@@ -182,20 +182,20 @@ span {
 }
 
 strong {
-  color: #242424;
+  color: #363636;
   font-weight: 700;
 }
 
 pre {
   background-color: whitesmoke;
-  color: #7a7a7a;
+  color: #4a4a4a;
   white-space: pre;
   word-wrap: normal;
 }
 
 pre code {
   background-color: whitesmoke;
-  color: #7a7a7a;
+  color: #4a4a4a;
   display: block;
   overflow-x: auto;
   padding: 16px 20px;
@@ -212,7 +212,7 @@ table th {
 }
 
 table th {
-  color: #242424;
+  color: #363636;
 }
 
 @keyframes spin-around {
@@ -561,7 +561,7 @@ table th {
 .box {
   background-color: white;
   border-radius: 5px;
-  box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1), 0 0 0 1px rgba(18, 18, 18, 0.1);
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   display: block;
   padding: 20px;
 }
@@ -571,11 +571,11 @@ table th {
 }
 
 a.box:hover, a.box:focus {
-  box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1), 0 0 0 1px #11e4c4;
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #11e4c4;
 }
 
 a.box:active {
-  box-shadow: inset 0 1px 2px rgba(18, 18, 18, 0.2), 0 0 0 1px #11e4c4;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #11e4c4;
 }
 
 @keyframes spin-around {
@@ -594,7 +594,7 @@ a.box:active {
   background-color: white;
   border: 1px solid #dbdbdb;
   border-radius: 3px;
-  color: #242424;
+  color: #363636;
   display: inline-flex;
   font-size: 14px;
   height: 32px;
@@ -634,19 +634,19 @@ a.box:active {
 }
 
 .button[disabled]::-moz-placeholder, .button.is-disabled::-moz-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .button[disabled]::-webkit-input-placeholder, .button.is-disabled::-webkit-input-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .button[disabled]:-moz-placeholder, .button.is-disabled:-moz-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .button[disabled]:-ms-input-placeholder, .button.is-disabled:-ms-input-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .button strong {
@@ -673,73 +673,66 @@ a.box:active {
 }
 
 .button:hover, .button:focus, .button.is-active {
-  color: #242424;
+  color: #363636;
 }
 
 .button:active {
-  box-shadow: inset 0 1px 2px rgba(18, 18, 18, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
 }
 
 .button.is-white {
   background-color: white;
-  border-color: transparent;
-  color: #121212;
+  border-width: 0;
+  color: #0a0a0a;
 }
 
 .button.is-white:hover, .button.is-white:focus, .button.is-white.is-active {
   background-color: #f2f2f2;
   border-color: transparent;
-  color: #121212;
-}
-
-.button.is-white:active {
-  border-color: transparent;
+  color: #0a0a0a;
 }
 
 .button.is-white.is-inverted {
-  background-color: #121212;
+  background-color: #0a0a0a;
   color: white;
 }
 
 .button.is-white.is-inverted:hover {
-  background-color: #050505;
+  background-color: black;
 }
 
 .button.is-white.is-loading:after {
-  border-color: transparent transparent #121212 #121212 !important;
+  border-color: transparent transparent #0a0a0a #0a0a0a !important;
 }
 
 .button.is-white.is-outlined {
   background-color: transparent;
   border-color: white;
+  border-width: 1px;
   color: white;
 }
 
 .button.is-white.is-outlined:hover, .button.is-white.is-outlined:focus {
   background-color: white;
   border-color: white;
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .button.is-black {
-  background-color: #121212;
-  border-color: transparent;
+  background-color: #0a0a0a;
+  border-width: 0;
   color: white;
 }
 
 .button.is-black:hover, .button.is-black:focus, .button.is-black.is-active {
-  background-color: #050505;
+  background-color: black;
   border-color: transparent;
   color: white;
 }
 
-.button.is-black:active {
-  border-color: transparent;
-}
-
 .button.is-black.is-inverted {
   background-color: white;
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .button.is-black.is-inverted:hover {
@@ -752,76 +745,70 @@ a.box:active {
 
 .button.is-black.is-outlined {
   background-color: transparent;
-  border-color: #121212;
-  color: #121212;
+  border-color: #0a0a0a;
+  border-width: 1px;
+  color: #0a0a0a;
 }
 
 .button.is-black.is-outlined:hover, .button.is-black.is-outlined:focus {
-  background-color: #121212;
-  border-color: #121212;
+  background-color: #0a0a0a;
+  border-color: #0a0a0a;
   color: white;
 }
 
 .button.is-light {
   background-color: whitesmoke;
-  border-color: transparent;
-  color: #7a7a7a;
+  border-width: 0;
+  color: #363636;
 }
 
 .button.is-light:hover, .button.is-light:focus, .button.is-light.is-active {
   background-color: #e8e8e8;
   border-color: transparent;
-  color: #7a7a7a;
-}
-
-.button.is-light:active {
-  border-color: transparent;
+  color: #363636;
 }
 
 .button.is-light.is-inverted {
-  background-color: #7a7a7a;
+  background-color: #363636;
   color: whitesmoke;
 }
 
 .button.is-light.is-inverted:hover {
-  background-color: #6e6e6e;
+  background-color: #292929;
 }
 
 .button.is-light.is-loading:after {
-  border-color: transparent transparent #7a7a7a #7a7a7a !important;
+  border-color: transparent transparent #363636 #363636 !important;
 }
 
 .button.is-light.is-outlined {
   background-color: transparent;
   border-color: whitesmoke;
+  border-width: 1px;
   color: whitesmoke;
 }
 
 .button.is-light.is-outlined:hover, .button.is-light.is-outlined:focus {
   background-color: whitesmoke;
   border-color: whitesmoke;
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .button.is-dark {
-  background-color: #7a7a7a;
-  border-color: transparent;
+  background-color: #363636;
+  border-width: 0;
   color: whitesmoke;
 }
 
 .button.is-dark:hover, .button.is-dark:focus, .button.is-dark.is-active {
-  background-color: #6e6e6e;
+  background-color: #292929;
   border-color: transparent;
   color: whitesmoke;
 }
 
-.button.is-dark:active {
-  border-color: transparent;
-}
-
 .button.is-dark.is-inverted {
   background-color: whitesmoke;
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .button.is-dark.is-inverted:hover {
@@ -834,19 +821,20 @@ a.box:active {
 
 .button.is-dark.is-outlined {
   background-color: transparent;
-  border-color: #7a7a7a;
-  color: #7a7a7a;
+  border-color: #363636;
+  border-width: 1px;
+  color: #363636;
 }
 
 .button.is-dark.is-outlined:hover, .button.is-dark.is-outlined:focus {
-  background-color: #7a7a7a;
-  border-color: #7a7a7a;
+  background-color: #363636;
+  border-color: #363636;
   color: whitesmoke;
 }
 
 .button.is-primary {
   background-color: #11e4c4;
-  border-color: transparent;
+  border-width: 0;
   color: white;
 }
 
@@ -856,10 +844,6 @@ a.box:active {
   color: white;
 }
 
-.button.is-primary:active {
-  border-color: transparent;
-}
-
 .button.is-primary.is-inverted {
   background-color: white;
   color: #11e4c4;
@@ -876,6 +860,7 @@ a.box:active {
 .button.is-primary.is-outlined {
   background-color: transparent;
   border-color: #11e4c4;
+  border-width: 1px;
   color: #11e4c4;
 }
 
@@ -887,7 +872,7 @@ a.box:active {
 
 .button.is-info {
   background-color: #0f6bff;
-  border-color: transparent;
+  border-width: 0;
   color: white;
 }
 
@@ -897,10 +882,6 @@ a.box:active {
   color: white;
 }
 
-.button.is-info:active {
-  border-color: transparent;
-}
-
 .button.is-info.is-inverted {
   background-color: white;
   color: #0f6bff;
@@ -917,6 +898,7 @@ a.box:active {
 .button.is-info.is-outlined {
   background-color: transparent;
   border-color: #0f6bff;
+  border-width: 1px;
   color: #0f6bff;
 }
 
@@ -928,7 +910,7 @@ a.box:active {
 
 .button.is-success {
   background-color: #20ee68;
-  border-color: transparent;
+  border-width: 0;
   color: white;
 }
 
@@ -938,10 +920,6 @@ a.box:active {
   color: white;
 }
 
-.button.is-success:active {
-  border-color: transparent;
-}
-
 .button.is-success.is-inverted {
   background-color: white;
   color: #20ee68;
@@ -958,6 +936,7 @@ a.box:active {
 .button.is-success.is-outlined {
   background-color: transparent;
   border-color: #20ee68;
+  border-width: 1px;
   color: #20ee68;
 }
 
@@ -969,7 +948,7 @@ a.box:active {
 
 .button.is-warning {
   background-color: #ffcf0f;
-  border-color: transparent;
+  border-width: 0;
   color: rgba(0, 0, 0, 0.7);
 }
 
@@ -979,10 +958,6 @@ a.box:active {
   color: rgba(0, 0, 0, 0.7);
 }
 
-.button.is-warning:active {
-  border-color: transparent;
-}
-
 .button.is-warning.is-inverted {
   background-color: rgba(0, 0, 0, 0.7);
   color: #ffcf0f;
@@ -999,6 +974,7 @@ a.box:active {
 .button.is-warning.is-outlined {
   background-color: transparent;
   border-color: #ffcf0f;
+  border-width: 1px;
   color: #ffcf0f;
 }
 
@@ -1010,7 +986,7 @@ a.box:active {
 
 .button.is-danger {
   background-color: #ff0f3f;
-  border-color: transparent;
+  border-width: 0;
   color: white;
 }
 
@@ -1020,10 +996,6 @@ a.box:active {
   color: white;
 }
 
-.button.is-danger:active {
-  border-color: transparent;
-}
-
 .button.is-danger.is-inverted {
   background-color: white;
   color: #ff0f3f;
@@ -1040,6 +1012,7 @@ a.box:active {
 .button.is-danger.is-outlined {
   background-color: transparent;
   border-color: #ff0f3f;
+  border-width: 1px;
   color: #ff0f3f;
 }
 
@@ -1051,14 +1024,14 @@ a.box:active {
 
 .button.is-link {
   background-color: transparent;
-  border-color: transparent;
-  color: #7a7a7a;
+  border-width: 0;
+  color: #4a4a4a;
   text-decoration: underline;
 }
 
 .button.is-link:hover, .button.is-link:focus {
-  background-color: #dbdbdb;
-  color: #242424;
+  background-color: whitesmoke;
+  color: #363636;
 }
 
 .button.is-small {
@@ -1118,7 +1091,7 @@ a.box:active {
 }
 
 .content {
-  color: #7a7a7a;
+  color: #4a4a4a;
 }
 
 .content:not(:last-child) {
@@ -1154,7 +1127,7 @@ a.box:active {
 .content h4,
 .content h5,
 .content h6 {
-  color: #242424;
+  color: #363636;
   font-weight: 300;
   line-height: 1.125;
   margin-bottom: 20px;
@@ -1261,7 +1234,7 @@ a.box:active {
   background-color: white;
   border: 1px solid #dbdbdb;
   border-radius: 3px;
-  color: #242424;
+  color: #363636;
   display: inline-flex;
   font-size: 14px;
   height: 32px;
@@ -1271,7 +1244,7 @@ a.box:active {
   padding-right: 8px;
   position: relative;
   vertical-align: top;
-  box-shadow: inset 0 1px 2px rgba(18, 18, 18, 0.1);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
   max-width: 100%;
   width: 100%;
 }
@@ -1301,25 +1274,25 @@ a.box:active {
 .input[disabled]::-moz-placeholder, .input.is-disabled::-moz-placeholder,
 .textarea[disabled]::-moz-placeholder,
 .textarea.is-disabled::-moz-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .input[disabled]::-webkit-input-placeholder, .input.is-disabled::-webkit-input-placeholder,
 .textarea[disabled]::-webkit-input-placeholder,
 .textarea.is-disabled::-webkit-input-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .input[disabled]:-moz-placeholder, .input.is-disabled:-moz-placeholder,
 .textarea[disabled]:-moz-placeholder,
 .textarea.is-disabled:-moz-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .input[disabled]:-ms-input-placeholder, .input.is-disabled:-ms-input-placeholder,
 .textarea[disabled]:-ms-input-placeholder,
 .textarea.is-disabled:-ms-input-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .input.is-white,
@@ -1329,7 +1302,7 @@ a.box:active {
 
 .input.is-black,
 .textarea.is-black {
-  border-color: #121212;
+  border-color: #0a0a0a;
 }
 
 .input.is-light,
@@ -1339,7 +1312,7 @@ a.box:active {
 
 .input.is-dark,
 .textarea.is-dark {
-  border-color: #7a7a7a;
+  border-color: #363636;
 }
 
 .input.is-primary,
@@ -1439,12 +1412,12 @@ a.box:active {
 
 .checkbox:hover,
 .radio:hover {
-  color: #242424;
+  color: #363636;
 }
 
 .checkbox.is-disabled,
 .radio.is-disabled {
-  color: #b5b5b5;
+  color: #dbdbdb;
   pointer-events: none;
 }
 
@@ -1471,7 +1444,7 @@ a.box:active {
   background-color: white;
   border: 1px solid #dbdbdb;
   border-radius: 3px;
-  color: #242424;
+  color: #363636;
   display: inline-flex;
   font-size: 14px;
   height: 32px;
@@ -1504,19 +1477,19 @@ a.box:active {
 }
 
 .select select[disabled]::-moz-placeholder, .select select.is-disabled::-moz-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .select select[disabled]::-webkit-input-placeholder, .select select.is-disabled::-webkit-input-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .select select[disabled]:-moz-placeholder, .select select.is-disabled:-moz-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .select select[disabled]:-ms-input-placeholder, .select select.is-disabled:-ms-input-placeholder {
-  color: rgba(36, 36, 36, 0.3);
+  color: rgba(54, 54, 54, 0.3);
 }
 
 .select select.is-white {
@@ -1524,7 +1497,7 @@ a.box:active {
 }
 
 .select select.is-black {
-  border-color: #121212;
+  border-color: #0a0a0a;
 }
 
 .select select.is-light {
@@ -1532,7 +1505,7 @@ a.box:active {
 }
 
 .select select.is-dark {
-  border-color: #7a7a7a;
+  border-color: #363636;
 }
 
 .select select.is-primary {
@@ -1588,7 +1561,7 @@ a.box:active {
 }
 
 .select:hover:after {
-  border-color: #242424;
+  border-color: #363636;
 }
 
 .select.is-small {
@@ -1632,7 +1605,7 @@ a.box:active {
 }
 
 .label {
-  color: #242424;
+  color: #363636;
   display: block;
   font-weight: bold;
 }
@@ -1652,7 +1625,7 @@ a.box:active {
 }
 
 .help.is-black {
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .help.is-light {
@@ -1660,7 +1633,7 @@ a.box:active {
 }
 
 .help.is-dark {
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .help.is-primary {
@@ -1790,7 +1763,7 @@ a.box:active {
   text-align: center;
   vertical-align: top;
   width: 24px;
-  color: #b5b5b5;
+  color: #dbdbdb;
   pointer-events: none;
   position: absolute;
   top: 4px;
@@ -1798,7 +1771,7 @@ a.box:active {
 }
 
 .control.has-icon .input:focus + .fa {
-  color: #242424;
+  color: #b5b5b5;
 }
 
 .control.has-icon .input.is-small + .fa {
@@ -2056,21 +2029,21 @@ a.box:active {
 
 .notification.is-white {
   background-color: white;
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .notification.is-black {
-  background-color: #121212;
+  background-color: #0a0a0a;
   color: white;
 }
 
 .notification.is-light {
   background-color: whitesmoke;
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .notification.is-dark {
-  background-color: #7a7a7a;
+  background-color: #363636;
   color: whitesmoke;
 }
 
@@ -2120,11 +2093,11 @@ a.box:active {
 }
 
 .progress::-webkit-progress-value {
-  background-color: #7a7a7a;
+  background-color: #4a4a4a;
 }
 
 .progress::-moz-progress-bar {
-  background-color: #7a7a7a;
+  background-color: #4a4a4a;
 }
 
 .progress.is-white::-webkit-progress-value {
@@ -2136,11 +2109,11 @@ a.box:active {
 }
 
 .progress.is-black::-webkit-progress-value {
-  background-color: #121212;
+  background-color: #0a0a0a;
 }
 
 .progress.is-black::-moz-progress-bar {
-  background-color: #121212;
+  background-color: #0a0a0a;
 }
 
 .progress.is-light::-webkit-progress-value {
@@ -2152,11 +2125,11 @@ a.box:active {
 }
 
 .progress.is-dark::-webkit-progress-value {
-  background-color: #7a7a7a;
+  background-color: #363636;
 }
 
 .progress.is-dark::-moz-progress-bar {
-  background-color: #7a7a7a;
+  background-color: #363636;
 }
 
 .progress.is-primary::-webkit-progress-value {
@@ -2222,7 +2195,7 @@ a.box:active {
 
 .table {
   background-color: white;
-  color: #242424;
+  color: #363636;
   margin-bottom: 20px;
   width: 100%;
 }
@@ -2288,19 +2261,18 @@ a.box:active {
 }
 
 .table th {
-  color: #242424;
+  color: #363636;
   text-align: left;
 }
 
 .table tr:hover {
   background-color: whitesmoke;
-  color: #242424;
 }
 
 .table thead td,
 .table thead th {
   border-width: 0 0 2px;
-  color: #b5b5b5;
+  color: #7a7a7a;
 }
 
 .table tbody tr:last-child td,
@@ -2311,7 +2283,7 @@ a.box:active {
 .table tfoot td,
 .table tfoot th {
   border-width: 2px 0 0;
-  color: #b5b5b5;
+  color: #7a7a7a;
 }
 
 .table.is-bordered td,
@@ -2354,18 +2326,14 @@ a.box:active {
   padding: 5px 10px;
 }
 
-.table.is-striped tbody tr:hover {
-  background-color: #f0f0f0;
+.table.is-striped tbody tr:nth-child(even) {
+  background-color: #fafafa;
 }
 
-.table.is-striped tbody tr:nth-child(2n) {
+.table.is-striped tbody tr:nth-child(even):hover {
   background-color: whitesmoke;
 }
 
-.table.is-striped tbody tr:nth-child(2n):hover {
-  background-color: #f0f0f0;
-}
-
 @keyframes spin-around {
   from {
     transform: rotate(0deg);
@@ -2409,7 +2377,7 @@ a.box:active {
 }
 
 .title {
-  color: #242424;
+  color: #363636;
   font-size: 28px;
   line-height: 1;
 }
@@ -2494,7 +2462,7 @@ a.box:active {
 }
 
 .subtitle {
-  color: #7a7a7a;
+  color: #4a4a4a;
   font-size: 18px;
   line-height: 1.125;
 }
@@ -2508,7 +2476,7 @@ a.box:active {
 }
 
 .subtitle strong {
-  color: #242424;
+  color: #363636;
 }
 
 .subtitle + .title {
@@ -2613,7 +2581,7 @@ a.box:active {
   user-select: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(10, 10, 10, 0.1);
   border: none;
   border-radius: 290486px;
   cursor: pointer;
@@ -2647,7 +2615,7 @@ a.box:active {
 }
 
 .delete:hover {
-  background-color: rgba(18, 18, 18, 0.2);
+  background-color: rgba(10, 10, 10, 0.2);
 }
 
 .delete.is-small {
@@ -2671,63 +2639,6 @@ a.box:active {
   vertical-align: top;
 }
 
-.hamburger {
-  cursor: pointer;
-  display: block;
-  height: 50px;
-  position: relative;
-  width: 50px;
-}
-
-.hamburger span {
-  background-color: #7a7a7a;
-  display: block;
-  height: 1px;
-  left: 50%;
-  margin-left: -7px;
-  position: absolute;
-  top: 50%;
-  transition: none 86ms ease-out;
-  transition-property: background, left, opacity, transform;
-  width: 15px;
-}
-
-.hamburger span:nth-child(1) {
-  margin-top: -6px;
-}
-
-.hamburger span:nth-child(2) {
-  margin-top: -1px;
-}
-
-.hamburger span:nth-child(3) {
-  margin-top: 4px;
-}
-
-.hamburger:hover {
-  background-color: whitesmoke;
-}
-
-.hamburger.is-active span {
-  background-color: #11e4c4;
-}
-
-.hamburger.is-active span:nth-child(1) {
-  margin-left: -5px;
-  transform: rotate(45deg);
-  transform-origin: left top;
-}
-
-.hamburger.is-active span:nth-child(2) {
-  opacity: 0;
-}
-
-.hamburger.is-active span:nth-child(3) {
-  margin-left: -5px;
-  transform: rotate(-45deg);
-  transform-origin: left bottom;
-}
-
 .icon {
   display: inline-block;
   font-size: 21px;
@@ -2823,7 +2734,7 @@ a.box:active {
   align-items: center;
   background-color: whitesmoke;
   border-radius: 290486px;
-  color: #7a7a7a;
+  color: #4a4a4a;
   display: inline-flex;
   font-size: 12px;
   height: 24px;
@@ -2842,21 +2753,21 @@ a.box:active {
 
 .tag.is-white {
   background-color: white;
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .tag.is-black {
-  background-color: #121212;
+  background-color: #0a0a0a;
   color: white;
 }
 
 .tag.is-light {
   background-color: whitesmoke;
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .tag.is-dark {
-  background-color: #7a7a7a;
+  background-color: #363636;
   color: whitesmoke;
 }
 
@@ -2914,14 +2825,14 @@ a.box:active {
 
 .card-header {
   align-items: stretch;
-  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.1);
+  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1);
   display: flex;
   min-height: 40px;
 }
 
 .card-header-title {
   align-items: flex-start;
-  color: #242424;
+  color: #363636;
   display: flex;
   flex-grow: 1;
   font-weight: bold;
@@ -2969,8 +2880,8 @@ a.box:active {
 
 .card {
   background-color: white;
-  box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1), 0 0 0 1px rgba(18, 18, 18, 0.1);
-  color: #7a7a7a;
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  color: #4a4a4a;
   max-width: 100%;
   position: relative;
   width: 300px;
@@ -3404,7 +3315,7 @@ a.box:active {
 
 .menu-list a {
   border-radius: 2px;
-  color: #7a7a7a;
+  color: #4a4a4a;
   display: block;
   padding: 5px 10px;
 }
@@ -3426,7 +3337,7 @@ a.box:active {
 }
 
 .menu-label {
-  color: #b5b5b5;
+  color: #7a7a7a;
   font-size: 11px;
   letter-spacing: 1px;
   margin-bottom: 5px;
@@ -3448,7 +3359,7 @@ a.box:active {
 }
 
 .message-header {
-  background-color: #7a7a7a;
+  background-color: #4a4a4a;
   border-radius: 3px 3px 0 0;
   color: white;
   padding: 7px 10px;
@@ -3478,7 +3389,7 @@ a.box:active {
 
 .message.is-white .message-header {
   background-color: white;
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .message.is-white .message-body {
@@ -3491,12 +3402,12 @@ a.box:active {
 }
 
 .message.is-black .message-header {
-  background-color: #121212;
+  background-color: #0a0a0a;
   color: white;
 }
 
 .message.is-black .message-body {
-  border-color: #121212;
+  border-color: #0a0a0a;
   color: gray;
 }
 
@@ -3506,7 +3417,7 @@ a.box:active {
 
 .message.is-light .message-header {
   background-color: whitesmoke;
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .message.is-light .message-body {
@@ -3519,12 +3430,12 @@ a.box:active {
 }
 
 .message.is-dark .message-header {
-  background-color: #7a7a7a;
+  background-color: #363636;
   color: whitesmoke;
 }
 
 .message.is-dark .message-body {
-  border-color: #7a7a7a;
+  border-color: #363636;
   color: gray;
 }
 
@@ -3613,7 +3524,7 @@ a.box:active {
   position: absolute;
   right: 0;
   top: 0;
-  background-color: rgba(18, 18, 18, 0.86);
+  background-color: rgba(10, 10, 10, 0.86);
 }
 
 .modal-content,
@@ -3642,7 +3553,7 @@ a.box:active {
   user-select: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(10, 10, 10, 0.1);
   border: none;
   border-radius: 290486px;
   cursor: pointer;
@@ -3682,7 +3593,7 @@ a.box:active {
 }
 
 .modal-close:hover {
-  background-color: rgba(18, 18, 18, 0.2);
+  background-color: rgba(10, 10, 10, 0.2);
 }
 
 .modal-close.is-small {
@@ -3725,7 +3636,7 @@ a.box:active {
 }
 
 .modal-card-title {
-  color: #242424;
+  color: #363636;
   flex-grow: 1;
   flex-shrink: 0;
   font-size: 24px;
@@ -3786,7 +3697,7 @@ a.box:active {
 }
 
 .nav-toggle span {
-  background-color: #7a7a7a;
+  background-color: #4a4a4a;
   display: block;
   height: 1px;
   left: 50%;
@@ -3876,17 +3787,17 @@ a.box:active {
 
 .nav-item a,
 a.nav-item {
-  color: #7a7a7a;
+  color: #4a4a4a;
 }
 
 .nav-item a:hover,
 a.nav-item:hover {
-  color: #242424;
+  color: #363636;
 }
 
 .nav-item a.is-active,
 a.nav-item.is-active {
-  color: #242424;
+  color: #363636;
 }
 
 .nav-item a.is-tab,
@@ -3913,7 +3824,7 @@ a.nav-item.is-tab.is-active {
 @media screen and (max-width: 768px) {
   .nav-menu {
     background-color: white;
-    box-shadow: 0 4px 7px rgba(18, 18, 18, 0.1);
+    box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
     left: 0;
     display: none;
     right: 0;
@@ -4000,7 +3911,7 @@ a.nav-item.is-tab.is-active {
 }
 
 .nav.has-shadow {
-  box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1);
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
 }
 
 @media screen and (max-width: 979px) {
@@ -4033,7 +3944,7 @@ a.nav-item.is-tab.is-active {
 }
 
 .pagination span {
-  color: #b5b5b5;
+  color: #7a7a7a;
   display: block;
   margin: 0 4px;
 }
@@ -4092,7 +4003,7 @@ a.nav-item.is-tab.is-active {
   text-align: center;
   vertical-align: top;
   width: 16px;
-  color: #b5b5b5;
+  color: #7a7a7a;
   float: left;
   margin: 0 4px 0 -2px;
 }
@@ -4106,14 +4017,14 @@ a.nav-item.is-tab.is-active {
   background-color: whitesmoke;
   border-bottom: 1px solid #dbdbdb;
   border-radius: 4px 4px 0 0;
-  color: #242424;
+  color: #363636;
   font-size: 18px;
   font-weight: 300;
   padding: 10px;
 }
 
 .panel-list a {
-  color: #7a7a7a;
+  color: #4a4a4a;
 }
 
 .panel-list a:hover {
@@ -4134,8 +4045,8 @@ a.nav-item.is-tab.is-active {
 }
 
 .panel-tabs a.is-active {
-  border-bottom-color: #242424;
-  color: #242424;
+  border-bottom-color: #363636;
+  color: #363636;
 }
 
 .panel-tabs:not(:last-child) {
@@ -4143,7 +4054,7 @@ a.nav-item.is-tab.is-active {
 }
 
 .panel-block {
-  color: #242424;
+  color: #363636;
   display: block;
   line-height: 16px;
   padding: 10px;
@@ -4197,7 +4108,7 @@ a.panel-block:hover {
 .tabs a {
   align-items: center;
   border-bottom: 1px solid #dbdbdb;
-  color: #7a7a7a;
+  color: #4a4a4a;
   display: flex;
   justify-content: center;
   margin-bottom: -1px;
@@ -4206,8 +4117,8 @@ a.panel-block:hover {
 }
 
 .tabs a:hover {
-  border-bottom-color: #242424;
-  color: #242424;
+  border-bottom-color: #363636;
+  color: #363636;
 }
 
 .tabs li {
@@ -5328,11 +5239,11 @@ a.panel-block:hover {
 
 .hero.is-white {
   background-color: white;
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .hero.is-white .title {
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .hero.is-white .title a,
@@ -5341,16 +5252,16 @@ a.panel-block:hover {
 }
 
 .hero.is-white .subtitle {
-  color: rgba(18, 18, 18, 0.9);
+  color: rgba(10, 10, 10, 0.9);
 }
 
 .hero.is-white .subtitle a,
 .hero.is-white .subtitle strong {
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .hero.is-white .nav {
-  box-shadow: 0 1px 0 rgba(18, 18, 18, 0.2);
+  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -5361,17 +5272,17 @@ a.panel-block:hover {
 
 .hero.is-white a.nav-item,
 .hero.is-white .nav-item a:not(.button) {
-  color: rgba(18, 18, 18, 0.7);
+  color: rgba(10, 10, 10, 0.7);
 }
 
 .hero.is-white a.nav-item:hover, .hero.is-white a.nav-item.is-active,
 .hero.is-white .nav-item a:not(.button):hover,
 .hero.is-white .nav-item a:not(.button).is-active {
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .hero.is-white .tabs a {
-  color: #121212;
+  color: #0a0a0a;
   opacity: 0.9;
 }
 
@@ -5384,16 +5295,16 @@ a.panel-block:hover {
 }
 
 .hero.is-white .tabs.is-boxed a, .hero.is-white .tabs.is-toggle a {
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .hero.is-white .tabs.is-boxed a:hover, .hero.is-white .tabs.is-toggle a:hover {
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(10, 10, 10, 0.1);
 }
 
 .hero.is-white .tabs.is-boxed li.is-active a, .hero.is-white .tabs.is-boxed li.is-active a:hover, .hero.is-white .tabs.is-toggle li.is-active a, .hero.is-white .tabs.is-toggle li.is-active a:hover {
-  background-color: #121212;
-  border-color: #121212;
+  background-color: #0a0a0a;
+  border-color: #0a0a0a;
   color: white;
 }
 
@@ -5403,21 +5314,21 @@ a.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero.is-white .nav-toggle span {
-    background-color: #121212;
+    background-color: #0a0a0a;
   }
   .hero.is-white .nav-toggle:hover {
-    background-color: rgba(18, 18, 18, 0.1);
+    background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-white .nav-toggle.is-active span {
-    background-color: #121212;
+    background-color: #0a0a0a;
   }
   .hero.is-white .nav-menu .nav-item {
-    border-top-color: rgba(18, 18, 18, 0.2);
+    border-top-color: rgba(10, 10, 10, 0.2);
   }
 }
 
 .hero.is-black {
-  background-color: #121212;
+  background-color: #0a0a0a;
   color: white;
 }
 
@@ -5445,7 +5356,7 @@ a.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero.is-black .nav-menu {
-    background-color: #121212;
+    background-color: #0a0a0a;
   }
 }
 
@@ -5478,17 +5389,17 @@ a.panel-block:hover {
 }
 
 .hero.is-black .tabs.is-boxed a:hover, .hero.is-black .tabs.is-toggle a:hover {
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(10, 10, 10, 0.1);
 }
 
 .hero.is-black .tabs.is-boxed li.is-active a, .hero.is-black .tabs.is-boxed li.is-active a:hover, .hero.is-black .tabs.is-toggle li.is-active a, .hero.is-black .tabs.is-toggle li.is-active a:hover {
   background-color: white;
   border-color: white;
-  color: #121212;
+  color: #0a0a0a;
 }
 
 .hero.is-black.is-bold {
-  background-image: linear-gradient(141deg, black 0%, #121212 71%, #201d1d 100%);
+  background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%);
 }
 
 @media screen and (max-width: 768px) {
@@ -5496,7 +5407,7 @@ a.panel-block:hover {
     background-color: white;
   }
   .hero.is-black .nav-toggle:hover {
-    background-color: rgba(18, 18, 18, 0.1);
+    background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-black .nav-toggle.is-active span {
     background-color: white;
@@ -5508,11 +5419,11 @@ a.panel-block:hover {
 
 .hero.is-light {
   background-color: whitesmoke;
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .hero.is-light .title {
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .hero.is-light .title a,
@@ -5521,16 +5432,16 @@ a.panel-block:hover {
 }
 
 .hero.is-light .subtitle {
-  color: rgba(122, 122, 122, 0.9);
+  color: rgba(54, 54, 54, 0.9);
 }
 
 .hero.is-light .subtitle a,
 .hero.is-light .subtitle strong {
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .hero.is-light .nav {
-  box-shadow: 0 1px 0 rgba(122, 122, 122, 0.2);
+  box-shadow: 0 1px 0 rgba(54, 54, 54, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -5541,17 +5452,17 @@ a.panel-block:hover {
 
 .hero.is-light a.nav-item,
 .hero.is-light .nav-item a:not(.button) {
-  color: rgba(122, 122, 122, 0.7);
+  color: rgba(54, 54, 54, 0.7);
 }
 
 .hero.is-light a.nav-item:hover, .hero.is-light a.nav-item.is-active,
 .hero.is-light .nav-item a:not(.button):hover,
 .hero.is-light .nav-item a:not(.button).is-active {
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .hero.is-light .tabs a {
-  color: #7a7a7a;
+  color: #363636;
   opacity: 0.9;
 }
 
@@ -5564,16 +5475,16 @@ a.panel-block:hover {
 }
 
 .hero.is-light .tabs.is-boxed a, .hero.is-light .tabs.is-toggle a {
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .hero.is-light .tabs.is-boxed a:hover, .hero.is-light .tabs.is-toggle a:hover {
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(10, 10, 10, 0.1);
 }
 
 .hero.is-light .tabs.is-boxed li.is-active a, .hero.is-light .tabs.is-boxed li.is-active a:hover, .hero.is-light .tabs.is-toggle li.is-active a, .hero.is-light .tabs.is-toggle li.is-active a:hover {
-  background-color: #7a7a7a;
-  border-color: #7a7a7a;
+  background-color: #363636;
+  border-color: #363636;
   color: whitesmoke;
 }
 
@@ -5583,21 +5494,21 @@ a.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero.is-light .nav-toggle span {
-    background-color: #7a7a7a;
+    background-color: #363636;
   }
   .hero.is-light .nav-toggle:hover {
-    background-color: rgba(18, 18, 18, 0.1);
+    background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-light .nav-toggle.is-active span {
-    background-color: #7a7a7a;
+    background-color: #363636;
   }
   .hero.is-light .nav-menu .nav-item {
-    border-top-color: rgba(122, 122, 122, 0.2);
+    border-top-color: rgba(54, 54, 54, 0.2);
   }
 }
 
 .hero.is-dark {
-  background-color: #7a7a7a;
+  background-color: #363636;
   color: whitesmoke;
 }
 
@@ -5625,7 +5536,7 @@ a.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero.is-dark .nav-menu {
-    background-color: #7a7a7a;
+    background-color: #363636;
   }
 }
 
@@ -5658,17 +5569,17 @@ a.panel-block:hover {
 }
 
 .hero.is-dark .tabs.is-boxed a:hover, .hero.is-dark .tabs.is-toggle a:hover {
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(10, 10, 10, 0.1);
 }
 
 .hero.is-dark .tabs.is-boxed li.is-active a, .hero.is-dark .tabs.is-boxed li.is-active a:hover, .hero.is-dark .tabs.is-toggle li.is-active a, .hero.is-dark .tabs.is-toggle li.is-active a:hover {
   background-color: whitesmoke;
   border-color: whitesmoke;
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .hero.is-dark.is-bold {
-  background-image: linear-gradient(141deg, #6b5757 0%, #7a7a7a 71%, #8d8181 100%);
+  background-image: linear-gradient(141deg, #1f1919 0%, #363636 71%, #463f3f 100%);
 }
 
 @media screen and (max-width: 768px) {
@@ -5676,7 +5587,7 @@ a.panel-block:hover {
     background-color: whitesmoke;
   }
   .hero.is-dark .nav-toggle:hover {
-    background-color: rgba(18, 18, 18, 0.1);
+    background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-dark .nav-toggle.is-active span {
     background-color: whitesmoke;
@@ -5748,7 +5659,7 @@ a.panel-block:hover {
 }
 
 .hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover {
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(10, 10, 10, 0.1);
 }
 
 .hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover {
@@ -5766,7 +5677,7 @@ a.panel-block:hover {
     background-color: white;
   }
   .hero.is-primary .nav-toggle:hover {
-    background-color: rgba(18, 18, 18, 0.1);
+    background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-primary .nav-toggle.is-active span {
     background-color: white;
@@ -5838,7 +5749,7 @@ a.panel-block:hover {
 }
 
 .hero.is-info .tabs.is-boxed a:hover, .hero.is-info .tabs.is-toggle a:hover {
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(10, 10, 10, 0.1);
 }
 
 .hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover {
@@ -5856,7 +5767,7 @@ a.panel-block:hover {
     background-color: white;
   }
   .hero.is-info .nav-toggle:hover {
-    background-color: rgba(18, 18, 18, 0.1);
+    background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-info .nav-toggle.is-active span {
     background-color: white;
@@ -5928,7 +5839,7 @@ a.panel-block:hover {
 }
 
 .hero.is-success .tabs.is-boxed a:hover, .hero.is-success .tabs.is-toggle a:hover {
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(10, 10, 10, 0.1);
 }
 
 .hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover {
@@ -5946,7 +5857,7 @@ a.panel-block:hover {
     background-color: white;
   }
   .hero.is-success .nav-toggle:hover {
-    background-color: rgba(18, 18, 18, 0.1);
+    background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-success .nav-toggle.is-active span {
     background-color: white;
@@ -6018,7 +5929,7 @@ a.panel-block:hover {
 }
 
 .hero.is-warning .tabs.is-boxed a:hover, .hero.is-warning .tabs.is-toggle a:hover {
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(10, 10, 10, 0.1);
 }
 
 .hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, .hero.is-warning .tabs.is-toggle li.is-active a:hover {
@@ -6036,7 +5947,7 @@ a.panel-block:hover {
     background-color: rgba(0, 0, 0, 0.7);
   }
   .hero.is-warning .nav-toggle:hover {
-    background-color: rgba(18, 18, 18, 0.1);
+    background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-warning .nav-toggle.is-active span {
     background-color: rgba(0, 0, 0, 0.7);
@@ -6108,7 +6019,7 @@ a.panel-block:hover {
 }
 
 .hero.is-danger .tabs.is-boxed a:hover, .hero.is-danger .tabs.is-toggle a:hover {
-  background-color: rgba(18, 18, 18, 0.1);
+  background-color: rgba(10, 10, 10, 0.1);
 }
 
 .hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover {
@@ -6126,7 +6037,7 @@ a.panel-block:hover {
     background-color: white;
   }
   .hero.is-danger .nav-toggle:hover {
-    background-color: rgba(18, 18, 18, 0.1);
+    background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-danger .nav-toggle.is-active span {
     background-color: white;
@@ -6193,11 +6104,11 @@ a.panel-block:hover {
 }
 
 .footer a, .footer a:visited {
-  color: #7a7a7a;
+  color: #4a4a4a;
 }
 
 .footer a:hover, .footer a:visited:hover {
-  color: #242424;
+  color: #363636;
 }
 
 .footer a:not(.icon), .footer a:visited:not(.icon) {
@@ -6219,7 +6130,7 @@ a.panel-block:hover {
 
 @media screen and (min-width: 769px) {
   .button small {
-    color: #7a7a7a;
+    color: #4a4a4a;
     left: 0;
     margin-top: 10px;
     position: absolute;
@@ -6279,7 +6190,7 @@ body.page-grid .column > .notification {
 
 #carbonads .carbon-text {
   display: block;
-  color: #242424;
+  color: #363636;
   margin-left: 145px;
 }
 
@@ -6312,15 +6223,15 @@ body.page-grid .column > .notification {
 
 @keyframes floatUp {
   0% {
-    box-shadow: 0 0 0 rgba(18, 18, 18, 0), 0 0 0 rgba(18, 18, 18, 0), 0 0 0 rgba(18, 18, 18, 0);
+    box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
     transform: scale(0.86);
   }
   67% {
-    box-shadow: 0 0 0 rgba(18, 18, 18, 0), 0 5px 10px rgba(18, 18, 18, 0.1), 0 1px 1px rgba(18, 18, 18, 0.2);
+    box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
     transform: scale(1);
   }
   100% {
-    box-shadow: 0 20px 60px rgba(18, 18, 18, 0.05), 0 5px 10px rgba(18, 18, 18, 0.1), 0 1px 1px rgba(18, 18, 18, 0.2);
+    box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
     transform: scale(1);
   }
 }
@@ -6360,6 +6271,28 @@ body.page-grid .column > .notification {
   }
 }
 
+@keyframes slideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 #b {
   animation-delay: 1s;
   animation-duration: 1.5s;
@@ -6424,7 +6357,19 @@ body.page-grid .column > .notification {
   }
 }
 
+#bulma {
+  animation: slideDown 500ms both;
+  animation-delay: 1s;
+}
+
+#modern-framework {
+  animation: slideUp 500ms both;
+  animation-delay: 1.2s;
+}
+
 #npm {
+  animation: fadeIn 500ms both;
+  animation-delay: 1.4s;
   background: none;
   margin: -10px 0 20px;
 }
@@ -6437,6 +6382,21 @@ body.page-grid .column > .notification {
   padding: 16px 32px;
 }
 
+#ghbtns {
+  animation: slideDown 500ms both;
+  animation-delay: 1.6s;
+}
+
+#carbon {
+  animation: slideUp 500ms both;
+  animation-delay: 1.8s;
+}
+
+#download {
+  animation: fadeIn 500ms both;
+  animation-delay: 2s;
+}
+
 #grid .notification {
   padding-left: 0;
   padding-right: 0;
@@ -6449,7 +6409,7 @@ body.page-grid .column > .notification {
 #tweet {
   background: white;
   border-radius: 5px;
-  box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1), 0 0 0 1px rgba(18, 18, 18, 0.1);
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   padding: 20px;
 }
 
@@ -6574,7 +6534,7 @@ body.page-grid .column > .notification {
   position: absolute;
   right: 0;
   top: 0;
-  background: rgba(18, 18, 18, 0.7);
+  background: rgba(10, 10, 10, 0.7);
   background: whitesmoke;
   border: 1px solid #dbdbdb;
   content: "";
@@ -6622,7 +6582,7 @@ body.page-grid .column > .notification {
   background: white;
   border: solid #dbdbdb;
   border-width: 0 0 1px 1px;
-  color: #b5b5b5;
+  color: #7a7a7a;
   cursor: pointer;
   outline: none;
   position: absolute;

diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html
index 414ccde6bae8091ec07fe983bf610287942368ea..8842d1baab3153e81470a553a5d12a9a35963d6a 100644 (file)
--- a/docs/documentation/overview/variables.html
+++ b/docs/documentation/overview/variables.html
@@ -189,12 +189,6 @@ doc-subtab: variables
 <tr><td><code>$desktop</code></td><td>980px</td></tr>
 <tr><td><code>$widescreen</code></td><td>1180px</td></tr>
 
-<tr><th colspan="2">Dimensions</th></tr>
-
-<tr><td><code>$column-gap</code></td><td>20px</td></tr>
-
-<tr><td><code>$nav-height</code></td><td>50px</td></tr>
-
 <tr><th colspan="2">Miscellaneous</th></tr>
 
 <tr><td><code>$easing</code></td><td>ease-out</td></tr>

diff --git a/docs/index.html b/docs/index.html
index 2b5368e963d3e5ec54328000eb19d885594e4518..609a6927fbceba153a98090024ac22b127ed55e1 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,19 +16,19 @@ route: index
         {% include svg/bulma-icon.svg %}
         {% include svg/bulma-icon.svg %}
       </p>
-      <h1 class="title">
+      <h1 id="bulma" class="title">
         Bulma
       </h1>
-      <h2 class="subtitle">
+      <h2 id="modern-framework" class="subtitle">
         A <strong>modern</strong> CSS framework based on <strong>Flexbox</strong>
       </h2>
       <pre id="npm"><code>npm install bulma</code></pre>
-      <div class="block">
+      <div id="ghbtns" class="block">
         <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
         <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
       </div>
       {% include carbon.html %}
-      <p class="hero-buttons">
+      <p id="download" class="hero-buttons">
         <a class="button is-primary is-large" href="{{ site.download }}">
           <span class="icon">
             <i class="fa fa-download"></i>

diff --git a/sass/base/generic.sass b/sass/base/generic.sass
index d0198f82bb9557eed347aa8f5f6e69cb9599a098..1918118b3cf72777966486dab08e7141e282ee0c 100644 (file)
--- a/sass/base/generic.sass
+++ b/sass/base/generic.sass
@@ -1,6 +1,8 @@
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
+$body-background: $white-ter !default
+
 html
   background-color: $body-background
   font-size: $size-normal

diff --git a/sass/components/nav.sass b/sass/components/nav.sass
index 932f859158b6019c90d774079cc4b8d50f631a16..287040e3145048f898084976c0edd25609a6be8e 100644 (file)
--- a/sass/components/nav.sass
+++ b/sass/components/nav.sass
@@ -1,10 +1,12 @@
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
+$nav-height: 50px !default
+
 // Components
 
 .nav-toggle
-  +hamburger
+  +hamburger($nav-height)
   // Responsiveness
   +tablet
     display: none

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 5bded0d25cba0a6ad6cb684e20c95a6c9e133e1a..0dcee483d9c410a05f95f9e2d9fab79a6656c5b5 100644 (file)
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -55,7 +55,7 @@
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background-color: $color
-      border-color: transparent
+      border-width: 0
       color: $color-invert
       &:hover,
       &:focus,
@@ -63,8 +63,6 @@
         background-color: darken($color, 5%)
         border-color: transparent
         color: $color-invert
-      &:active
-        border-color: transparent
       &.is-inverted
         background-color: $color-invert
         color: $color
@@ -76,6 +74,7 @@
       &.is-outlined
         background-color: transparent
         border-color: $color
+        border-width: 1px
         color: $color
         &:hover,
         &:focus
@@ -84,12 +83,12 @@
           color: $color-invert
   &.is-link
     background-color: transparent
-    border-color: transparent
+    border-width: 0
     color: $text
     text-decoration: underline
     &:hover,
     &:focus
-      background-color: $border
+      background-color: $background
       color: $text-strong
   // Sizes
   &.is-small

diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index b0c3d7b08ff221b1ae1bf2bc2f1f24c9de07c2c7..c82de5c7f5b7d830232ad12a8ddf92701d752831 100644 (file)
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -53,7 +53,7 @@
   &:hover
     color: $control-hover
   &.is-disabled
-    color: $text-light
+    color: $control-disabled
     pointer-events: none
     input
       pointer-events: none
@@ -82,13 +82,13 @@
     select
       width: 100%
   &:after
-    +arrow($link)
+    +arrow($control-active)
     margin-top: -6px
     right: 16px
     top: 50%
   &:hover
     &:after
-      border-color: $link-hover
+      border-color: $control-hover
   &.is-small
     height: 24px
     select
@@ -106,7 +106,7 @@
       padding-right: 52px
 
 .label
-  color: $text-strong
+  color: $control
   display: block
   font-weight: bold
   &:not(:last-child)
@@ -114,7 +114,7 @@
 
 .help
   display: block
-  font-size: $size-small
+  font-size: $control-size-small
   margin-top: 5px
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -155,13 +155,13 @@
       &:focus
         z-index: 3
       &:first-child
-        border-radius: $radius 0 0 $radius
+        border-radius: $control-radius 0 0 $control-radius
         select
-          border-radius: $radius 0 0 $radius
+          border-radius: $control-radius 0 0 $control-radius
       &:last-child
-        border-radius: 0 $radius $radius 0
+        border-radius: 0 $control-radius $control-radius 0
         select
-          border-radius: 0 $radius $radius 0
+          border-radius: 0 $control-radius $control-radius 0
       &.is-expanded
         flex-grow: 1
         flex-shrink: 0
@@ -178,14 +178,14 @@
   &.has-icon
     & > .fa
       +fa(14px, 24px)
-      color: $text-light
+      color: $control-icon
       pointer-events: none
       position: absolute
       top: 4px
       z-index: 4
     .input
       &:focus + .fa
-        color: $text-strong
+        color: $control-icon-active
       &.is-small + .fa
         font-size: 10.5px
         top: 0

diff --git a/sass/elements/other.sass b/sass/elements/other.sass
index d5f769f48401c9cbb2335accd88ca8018e4d3a68..06967d7f193b66eac5376fb3c212332da24b5b7c 100644 (file)
--- a/sass/elements/other.sass
+++ b/sass/elements/other.sass
@@ -24,9 +24,6 @@
   text-align: center
   vertical-align: top
 
-.hamburger
-  +hamburger
-
 .icon
   +fa(21px, 24px)
   .fa

diff --git a/sass/elements/table.sass b/sass/elements/table.sass
index a130abfa5eaf940b571bfcd5c1ff2cbcb4c13761..8ce4eb4b449e295f3c2c1c75ff007b2e7b60c273 100644 (file)
--- a/sass/elements/table.sass
+++ b/sass/elements/table.sass
@@ -1,14 +1,23 @@
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
+$table: $text-strong !default
+$table-background: $white !default
+$table-border: $border !default
+
+$table-head: $text-light !default
+
+$table-row-hover-background: $white-ter !default
+$table-row-even-background: $white-bis !default
+
 .table
-  background-color: $white
-  color: $text-strong
+  background-color: $table-background
+  color: $table
   margin-bottom: 20px
   width: 100%
   td,
   th
-    border: 1px solid $border
+    border: 1px solid $table-border
     border-width: 0 0 1px
     padding: 8px 10px
     vertical-align: top
@@ -40,13 +49,12 @@
     text-align: left
   tr
     &:hover
-      background-color: $background
-      color: $text-strong
+      background-color: $table-row-hover-background
   thead
     td,
     th
       border-width: 0 0 2px
-      color: $text-light
+      color: $table-head
   tbody
     tr
       &:last-child
@@ -57,7 +65,7 @@
     td,
     th
       border-width: 2px 0 0
-      color: $text-light
+      color: $table-head
   // Modifiers
   &.is-bordered
     td,
@@ -86,9 +94,7 @@
   &.is-striped
     tbody
       tr
-        &:hover
-          background-color: darken($background, 2%)
-        &:nth-child(2n)
-          background-color: $background
+        &:nth-child(even)
+          background-color: $table-row-even-background
           &:hover
-            background-color: darken($background, 2%)
+            background-color: $table-row-hover-background

diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass
index 8e42e2e6e74dea93dc6830fd245ab8720fa9f641..5d2385056ce5891a054858bf0c5f67dd74a39a6b 100644 (file)
--- a/sass/utilities/controls.sass
+++ b/sass/utilities/controls.sass
@@ -1,16 +1,39 @@
 @import "./mixins.sass"
 @import "./variables.sass"
 
+$control: $text-strong !default
+$control-background: $text-invert !default
+$control-border: $border !default
+
+$control-hover: $link-hover !default
+$control-hover-border: $border-hover !default
+
+$control-active: $link !default
+$control-active-background: $link !default
+$control-active-background-invert: $link-invert !default
+$control-active-border: $link !default
+
+$control-disabled: $border !default
+$control-disabled-background: $background !default
+
+$control-radius: $radius !default
+$control-radius-small: $radius-small !default
+$control-size: $size-normal !default
+$control-size-small: $size-small !default
+
+$control-icon: $grey-lighter !default
+$control-icon-active: $grey-light !default
+
 =control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
   background-color: $control-background
   border: 1px solid $control-border
-  border-radius: $radius
+  border-radius: $control-radius
   color: $control
   display: inline-flex
-  font-size: $size-normal
+  font-size: $control-size
   height: 32px
   justify-content: flex-start
   line-height: 24px
@@ -27,15 +50,15 @@
     outline: none
   &[disabled],
   &.is-disabled
-    background-color: $background
-    border-color: $control-border
+    background-color: $control-disabled-background
+    border-color: $control-disabled
     cursor: not-allowed
     pointer-events: none
     +placeholder
       color: rgba($control, 0.3)
 
 =control-small
-  border-radius: $radius-small
+  border-radius: $control-radius-small
   font-size: 11px
   height: 24px
   line-height: 16px

diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index 46b9c8457607b736ffc283b6fb0723fb6ae5fd5b..b986e44ce6accd67bc6f4c6a40860bd2015a204f 100644 (file)
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -82,12 +82,12 @@
   vertical-align: top
   width: $dimensions
 
-=hamburger
+=hamburger($dimensions)
   cursor: pointer
   display: block
-  height: $nav-height
+  height: $dimensions
   position: relative
-  width: $nav-height
+  width: $dimensions
   span
     background-color: $text
     display: block

diff --git a/sass/utilities/variables.sass b/sass/utilities/variables.sass
index bb419848c0a00050aafb97c9ab3944f70dd8fd2f..e89b34612f36576c5d18b50adfa788699025542c 100644 (file)
--- a/sass/utilities/variables.sass
+++ b/sass/utilities/variables.sass
@@ -1,27 +1,33 @@
 @import "./functions.sass"
 
+////////////////////////////////////////////////
+////////////////////////////////////////////////
 // 1. Initial variables
 
 // Colors
-
-$black:        hsl(0, 0%, 7%) !default
-$grey-darker:  hsl(0, 0%, 14%) !default
-$grey-dark:    hsl(0, 0%, 48%) !default
-$grey:         hsl(0, 0%, 71%) !default
-$grey-light:   hsl(0, 0%, 86%) !default
-$grey-lighter: hsl(0, 0%, 96%) !default
+$black:        hsl(0, 0%, 4%) !default
+$black-bis:    hsl(0, 0%, 7%) !default
+$black-ter:    hsl(0, 0%, 14%) !default
+
+$grey-darker:  hsl(0, 0%, 21%) !default
+$grey-dark:    hsl(0, 0%, 29%) !default
+$grey:         hsl(0, 0%, 48%) !default
+$grey-light:   hsl(0, 0%, 71%) !default
+$grey-lighter: hsl(0, 0%, 86%) !default
+
+$white-ter:    hsl(0, 0%, 96%) !default
+$white-bis:    hsl(0, 0%, 98%) !default
 $white:        hsl(0, 0%, 100%) !default
 
-$orange:    hsl(14,  100%, 53%) !default
-$yellow:    hsl(48,  100%, 53%) !default
-$green:     hsl(141, 86%,  53%) !default
-$turquoise: hsl(171, 86%,  48%) !default
-$blue:      hsl(217, 100%, 53%) !default
-$purple:    hsl(271, 100%, 71%) !default
-$red:       hsl(348, 100%, 53%) !default
+$orange:       hsl(14,  100%, 53%) !default
+$yellow:       hsl(48,  100%, 53%) !default
+$green:        hsl(141, 86%,  53%) !default
+$turquoise:    hsl(171, 86%,  48%) !default
+$blue:         hsl(217, 100%, 53%) !default
+$purple:       hsl(271, 100%, 71%) !default
+$red:          hsl(348, 100%, 53%) !default
 
 // Typography
-
 $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
 $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
 
@@ -39,20 +45,15 @@ $weight-bold: 700 !default
 $weight-title-normal: 300 !default
 $weight-title-bold: 500 !default
 
-// Dimensions
-
-$column-gap: 20px !default
-
-$nav-height: 50px !default
-
 // Miscellaneous
-
 $easing: ease-out !default
 $radius-small: 2px !default
 $radius: 3px !default
 $radius-large: 5px !default
 $speed: 86ms !default
 
+////////////////////////////////////////////////
+////////////////////////////////////////////////
 // 2. Primary colors
 
 $primary: $turquoise !default
@@ -62,15 +63,14 @@ $success: $green !default
 $warning: $yellow !default
 $danger: $red !default
 
-$light: $grey-lighter !default
-$dark: $grey-dark !default
-
-$text: $grey-dark !default
+$light: $white-ter !default
+$dark: $grey-darker !default
 
-// 3. Generated variables
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 3. Applied variables
 
 // Invert colors
-
 $primary-invert: findColorInvert($primary) !default
 
 $info-invert: findColorInvert($info) !default
@@ -82,22 +82,20 @@ $light-invert: $dark !default
 $dark-invert: $light !default
 
 // General colors
+$body-background: $white-ter !default
 
-$body-background: $grey-lighter !default
-
-$background: $grey-lighter !default
+$background: $white-ter !default
 
-$border: $grey-light !default
-$border-hover: $grey !default
+$border: $grey-lighter !default
+$border-hover: $grey-light !default
 
 // Text colors
-
+$text: $grey-dark !default
 $text-invert: findColorInvert($text) !default
 $text-light: $grey !default
 $text-strong: $grey-darker !default
 
 // Code colors
-
 $code: $red !default
 $code-background: $background !default
 
@@ -105,34 +103,18 @@ $pre: $text !default
 $pre-background: $background !default
 
 // Link colors
-
 $link: $primary !default
 $link-invert: $primary-invert !default
 $link-visited: $purple !default
 
 $link-hover: $grey-darker !default
-$link-hover-background: $grey-lighter !default
+$link-hover-background: $white-ter !default
 $link-hover-border: $grey-darker !default
 
 $link-active: $grey-darker !default
 $link-active-border: $grey-darker !default
 
-// Control colors
-
-$control: $text-strong !default
-$control-background: $text-invert !default
-$control-border: $border !default
-
-$control-hover: $link-hover !default
-$control-hover-border: $border-hover !default
-
-$control-active: $link !default
-$control-active-background: $link !default
-$control-active-background-invert: $link-invert !default
-$control-active-border: $link !default
-
 // Typography
-
 $family-primary: $family-sans-serif !default
 $family-code: $family-monospace !default
 
@@ -142,6 +124,8 @@ $size-medium: $size-5 !default
 $size-large: $size-3 !default
 $size-huge: $size-1 !default
 
+////////////////////////////////////////////////
+////////////////////////////////////////////////
 // 4. Lists and maps
 
 $colors: (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default