Parcourir la source

some basic css

lawlerblader il y a 9 ans
Parent
commit
e4ce44137f
2 fichiers modifiés avec 50 ajouts et 2 suppressions
  1. 22 1
      components/Layout/Layout.scss
  2. 28 1
      components/Navigation/Navigation.scss

+ 22 - 1
components/Layout/Layout.scss

@@ -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) {
+  .Layout {
+    width: 970px;
+  }
+}
+@media (min-width: 1200px) {
+  .Layout {
+    width: 1170px;
+  }
+}
 
+.Layout {
+  margin: 0 auto;
 }

+ 28 - 1
components/Navigation/Navigation.scss

@@ -4,6 +4,33 @@
  * Copyright (c) Konstantin Tarkus (@koistya) | MIT license
  */
 
-.Navigation {
+$mint: #21CE99;
+$darkgray: #333;
 
+.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 {
+       color: $darkgray;
+       border-bottom: 3px solid $mint;
+     }
+     &:visited {
+       color: $mint;
+       &:hover {
+         color: $darkgray;
+       }
+     }
+   }
+ }
 }