2 files changed, 29 insertions(+), 22 deletions(-)

M sass/style.scss
M sass/templates/_header.scss

@@ 44,31 44,14 @@ body {
 }
 
 main {
-  background: $background;
-  border: 3px solid $highlight;
   display: flex;
   flex-direction: column;
   flex: 1 1 0%;
   margin-right: auto;
-  margin: 1.6rem;
   max-width: 60ch;
-  padding: 1.6rem;
+  padding: 1.2rem;
   position: relative;
-  
-  &::before {
-    background-image: radial-gradient($gray 0.3rem, transparent 0.3rem);
-    background-size: 1.8rem 1.8rem;
-    content: '';
-    display: block;
-    height: 100%;
-    left: 1rem;
-    position: absolute;
-    top: 0;
-    transform: rotate(3deg);
-    width: calc(100% + 3rem);
-    z-index: -1;
-  }
-  
+
   @media screen and (max-width: 700px) {
     border: none;
     border-top: 3px solid $highlight;

@@ 1,9 1,26 @@
 header {
-  background: $background;
-  border-right: 3px solid $highlight;
+  align-self: flex-start;
+  border: 2px solid $highlight;
   display: flex;
   flex-direction: column;
   flex: 0 0 16rem;
+  margin: 1.2rem;
+  position: relative;
+
+  &::before {
+    background-color: $background;
+    background-size: 1.8rem 1.8rem;
+    content: '';
+    display: block;
+    height: calc(100% + 1.8rem);
+    left: -1rem;
+    position: absolute;
+    top: -0.6rem;
+    transform: rotate(3deg);
+    width: calc(100% + 1.8rem);
+    z-index: -1;
+  }
+  
   
   .header__title {
     border-bottom: 2px solid $highlight;


@@ 30,6 47,13 @@ header {
   }
   
   @media screen and (max-width: 700px) {
-    border-right: none;
+    background: $background;
+    border: none;
+    margin: 0;
+    width: 100%;
+
+    &::before {
+      display: none;
+    }
   }
 }