v2

style.scss

@@ -0,0 +1,168 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+@import "nord.scss";
+* { box-sizing: border-box;}
+
+$primaryColor: deeppink;
+$dkBg: #303947;
+$itemBg: #6788a7;
+$itemBgOdd: darken(#6788a7,15%);
+
+html, body {
+  font-family: "Roboto", sans-serif;
+  background: $nord6;
+  padding: 80px 30px 30px;
+  color: #444;
+  height: 100%;
+}
+
+ol, ul {
+  margin: 0 0 50px 0;
+}
+
+ul {
+  position: relative;
+  width: 75%;
+  margin: 100px auto 0;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+ul li {
+  display: flex;
+  background: red;
+}
+
+h1 {
+   color: $nord0;
+   font-size: 48px;
+}   
+
+h2 {
+  color: $nord0;
+  font-size: 28px;
+}
+
+p {
+  line-height: 1.6em;
+  margin-bottom: 10px;
+  font-size: 20px;
+  padding: 0;
+  &:last-child {
+    margin-bottom: 40px;
+  }
+}
+
+code {
+  background: #f8f8f8;
+  color: #d64f9b;
+  border: 1px solid #eee;
+  padding: 2px;
+  border-radius: 3px;
+}
+
+a {
+  font-size: 22px;
+  font-weight: bold;
+  color: $nord8; 
+  text-decoration: none;
+  transition: all 200ms;
+  &:hover,
+  &:focus{
+    color: $nord13;
+  }
+}
+
+article {
+  margin-bottom: 50px;
+  .margin {
+    margin-bottom: 100vh;
+  }
+}
+
+nav {
+  display: flex;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background: $nord1;
+  position: fixed;
+  padding: 30px;
+  a {
+    display: inline-flex;
+    padding: 20px 30px;
+    color: $nord6;
+    text-decoration: none;
+    &:hover,
+    &:focus {
+      color: $nord13;
+    }
+    &.active {
+      color: $nord8;
+    }
+  }
+}
+
+.tut_box {
+  border: 2px solid $nord1;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  padding: 5px;
+
+  &:hover {
+    background-color: $nord1;
+    color: $nord6;
+    a {
+      color: $nord13;
+    }
+    .out_link{
+      color: $nord7;
+    }
+  }
+  p {
+    padding: 0px;
+    margin: 0px;
+  }
+
+  .tut_date {
+    float: right;
+    position: relative;
+    top: 0px;
+    right: 0px;
+    text-align: right;
+  }
+}
+
+.tutName {
+  font-weight: bold;
+  color: $nord7;
+  font-size: 22px;
+  &:hover {
+    color: $nord13;
+  }
+}
+
+.out_link {
+  font-weight: bold;
+  color: $nord3;
+  text-decoration: none;
+  padding: 5px, 5px;
+  font-size: 19px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+