@@ -4,12 +4,33 @@
* Copyright (c) Konstantin Tarkus (@koistya) | MIT license
*/
+$darkgray: #333;
+$lightgray: #f7f7f7;
+
html, body {
font-family: 'Roboto', 'Helvetica', sans-serif;
margin: 0;
padding: 0;
+ color: $darkgray;
+ background-color: $lightgray;
}
-.Layout {
+@media (min-width: 768px) {
+ .Layout {
+ width: 750px;
+ }
+}
+@media (min-width: 992px) {
+ width: 970px;
+@media (min-width: 1200px) {
+ width: 1170px;
+.Layout {
+ margin: 0 auto;
@@ -4,6 +4,33 @@
-.Navigation {
+$mint: #21CE99;
+.Navigation {
+ list-style: none;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ margin: 2em 0 5em 0;
+ li {
+ padding: 0 2em;
+ a {
+ padding: 0.5em 1em;
+ text-transform: uppercase;
+ text-decoration: none;
+ cursor: pointer;
+ color: $mint;
+ &:hover {
+ border-bottom: 3px solid $mint;
+ &:visited {