Most pages are now styled.

Small changes to existing pages.
Changes to base layout style.

resources/assets/sass/abstracts/_mixin.scss

@@ -1,5 +1,9 @@
 @use "variables" as *;
 
+@mixin container {
+  max-width: 1170px;
+  margin: 0 auto;
+}
 @mixin reset-list {
   margin: 0;
   padding: 0;

resources/assets/sass/base/_base.scss

@@ -3,4 +3,8 @@
 @use "container";
 @use "../components/button";
 
-@use "../layout";
+@use "../layout";
+
+.mejs__overlay-button {
+  border: none;
+}

resources/assets/sass/base/_container.scss

@@ -1,9 +1,26 @@
+@use "../abstracts/mixin" as *;
+
+body {
+  margin: 0;
+  padding: 0;
+}
 .site_container  {
-  max-width: 1440px;
-  margin: 0 auto;
+
 }
 .body_container {
-  padding: 67px 135px;
+  @include container;
+  padding: 67px 0;
   background-color: #f9f9f9;
-  margin: 0;
-}
+}
+.header_container  {
+  @include container;
+}
+.grey_background {
+  background-color: #f9f9f9;
+}
+.content_container {
+  padding-right: 50px;
+}
+.sidebar {
+  width: CALC(300px + var(--bs-gutter-x));
+}

resources/assets/sass/components/_box.scss

@@ -9,7 +9,19 @@
     text-transform: uppercase;
     height: 30px;
   }
+  &.extra_small span {
+    font-size: 12px;
+  }
+
+  &.small span {
+    font-size: 14px;
+  }
+
+  &.medium span {
+    font-size: 18px;
+  }
   border-bottom: 1px solid #efefef;
+  padding-right: 20px;
 }
 .box {
   display: inline-block;
@@ -42,7 +54,7 @@
       padding-bottom: 3px;
     }
 
-    &.extra-small span {
+    &.extra_small span {
       font-size: 12px;
     }
 
@@ -65,6 +77,7 @@
 }
 .tab_content {
   display: none;
+  padding: 20px 23px 20px 20px;
   &.active {
     display: block;
   }

resources/assets/sass/components/_footer.scss

@@ -9,13 +9,16 @@
   color: #fff;
 
   .footer_menu {
-    padding: 61px 135px 38px 134px;
     background-image: linear-gradient(to right, #0102b0, #4090e3);
 
+    .row {
+      @include container;
+    }
+
     .row:first-child {
       padding-bottom: 70px;
       margin-bottom: 34px;
-      border-bottom: 1px solid #fff;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     }
 
     a {
@@ -31,7 +34,7 @@
     }
 
     .box_header {
-      border-bottom: 1px solid #fff;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 
       span {
         border-bottom: 3px solid #fff;

resources/assets/sass/components/_header.scss

@@ -2,8 +2,8 @@
   height: 110px;
 }
 .header .logo {
-  margin-left: 135px;
   float: left;
+  margin-top: 18px;
 }
 .header .logo img {
   height: 75px;

resources/assets/sass/components/_main_news.scss

@@ -17,7 +17,7 @@
       width: 100%;
       height: 100%;
       object-fit: cover;
-      filter: brightness(50%);
+      filter: brightness(70%);
     }
 
     &.small {

resources/assets/sass/components/_menu.scss

@@ -6,12 +6,24 @@
   margin-bottom: 20px;
   background-image: linear-gradient(to right, #0102b0, #4090e3);
 
+  nav {
+    display: flex;
+    > div {
+      height: 30px;
+      background: white;
+      flex-grow: 1;
+      border: 1px solid white;
+    }
+  }
+
   .menu {
     @include reset-list;
     overflow: hidden;
     position: relative;
     z-index: 0;
     margin: 0px -1px;
+    width: 1170px;
+    margin: 0 auto;
 
     > li {
       float: left;
@@ -35,6 +47,7 @@
         padding: 5px 20px 5px 40px;
         text-decoration: none;
         background: white;
+        text-transform: uppercase
       }
 
       &.selected a, &:hover a, &.hover a {
@@ -67,13 +80,6 @@
         }
       }
 
-      &:first-child {
-        width: 135px;
-        display: block;
-        background: white;
-        height: 29px;
-      }
-
       &:last-child {
         margin-left: 10px;
 
@@ -93,6 +99,7 @@
 }
 .top_menu_container {
   height: 50px;
+  @include container;
 
   ul {
     float: right;
@@ -108,6 +115,10 @@
         border: none;
       }
 
+      &:nth-child(2) {
+        padding: 0 19px;
+      }
+
       a {
         float: left;
         font-family: Nunito, serif;
@@ -129,8 +140,26 @@
       .search_form {
         float: left;
         overflow: hidden;
-        height: 21px;
+        height: 34px;
         margin-right: 10px;
+
+        .search_input {
+          border: 1px solid #efefef;
+          border-radius: 5px;
+          background-color: #fff;
+          height: 29px;
+          font-family: Montserrat, serif;
+          font-size: 16px;
+          line-height: 1.25;
+          color: #1a1a1a;
+        }
+        .search_submit {
+          float: right;
+          margin: 6px;
+        }
+      }
+      .search_button {
+        margin-top: 6px;
       }
     }
   }
@@ -155,6 +184,7 @@
       text-decoration: none;
       padding: 15px 0;
       border-bottom: 1px solid #f8f8f8;
+      text-transform: uppercase;
     }
   }
 

resources/assets/sass/components/_now-playing.scss

@@ -5,7 +5,6 @@
   font-size: 16pt;
   font-family: 'Roboto Condensed', serif;
   font-weight: 300;
-  /* background: #F6F6F6; */
   background: rgba(246, 246, 246, 0.4);
   width: 728px;
   color: #787878;
@@ -56,3 +55,9 @@
     }
   }
 }
+.player {
+  font-size: 14pt;
+  font-family: 'Roboto Condensed', serif;
+  font-weight: 300;
+  color: #787878;
+}

resources/assets/sass/components/_page.scss

@@ -1,10 +1,10 @@
+@use "../abstracts/mixin" as *;
+
 .page_container {
+  @include container;
   background-color: #fff;
   width: CALC(100% - 270px);
   padding: 32px 135px;
-  &.grey-background {
-    background-color: #f9f9f9;
-  }
 }
 .page_body {
   font-family: Nunito, serif;
@@ -15,4 +15,9 @@
 .action_button {
   text-decoration: none;
   color: #282828;
+  margin-right: 20px;
+
+  .fa {
+    margin-right: 10px;
+  }
 }

resources/assets/sass/components/_post.scss

@@ -1,13 +1,12 @@
 @use "../abstracts/mixin" as *;
 
 .post_container {
-  padding: 40px 135px;
-  background-color: #f9f9f9;
-  margin: 0;
+  @include container;
+  padding: 32px 0;
 
   > .col-8 {
-    width: CALC(66.66666667% - 50px);
-    margin-right: 50px;
+    width: CALC(66.66666667% - 20px);
+    margin-right: 20px;
   }
 
   .bread_crumb {