Styles

Author: slowcheetah

website/src/index.html

@@ -89,7 +89,10 @@
 
 <footer>
     <div class="footer">
-        <div class="copyright">© CoreJS Company</div>
+        <div class="copyright">
+            <div class="footer-logo"><img src="images/core-js.png" alt="core-js"></div>
+            © CoreJS Company
+        </div>
         <div class="resources">
             <div class="resource-item title">Resources</div>
             <div class="resource-item"><a href="./blog/">Blog</a></div>
@@ -103,6 +106,7 @@
             <div class="resource-item title">Community</div>
             <div class="community-item"><a href="https://github.com/zloirock/core-js/" target="_blank">GitHub</a></div>
             <div class="community-item"><a href="https://x.com/zloirock" target="_blank">X</a></div>
+            <div class="community-item"><a href="#" target="_blank">Discord</a></div>
         </div>
     </div>
 </footer>

website/src/playground.html

@@ -1,16 +1,23 @@
-<h1>Playground</h1>
-<div class="playground-navigation">
-    <div class="back-link">
-        <a href="#">
+<div class="playground-menu">
+    <div class="title">
+        <div class="back-link">
+            <a href="#">
             <span class="icon">
                 <svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"></path>
                 </svg>
             </span> Back
-        </a>
+            </a>
+        </div>
+        <h1>Playground</h1>
     </div>
     <div class="playground-versions">{versions-menu}</div>
+    <div class="playground-controls">
+        <button class="run-button">Run</button>
+        <button class="link-button">Link</button>
+    </div>
 </div>
+
 <div class="sandbox-wrapper">
     <div class="editor">
         <textarea id="code-input" class="input" spellcheck="false"></textarea>
@@ -26,8 +33,4 @@ <h1>Playground</h1>
     </div>
     <div class="result"></div>
 </div>
-<div class="controls-static">
-    <button class="run-button">Run</button>
-    <button class="link-button">Link</button>
-</div>
 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

website/src/scss/includes/forms.scss

@@ -11,17 +11,16 @@ button {
     font-weight: 600;
 
     @include themify($themes) {
-        background-color: themed('button-color');
-        border: 1px solid themed('button-color');
-        color: themed('font-color-dark');
+        background-color: themed('box-color');
+        border: 1px solid themed('link-color');
+        color: themed('link-color');
     }
 
     &:focus,
     &:hover {
         @include themify($themes) {
             background-color: themed('button-color-hover');
-            border: 1px solid themed('font-color');
-            color: themed('font-color');
+            color: themed('link-color-hover');
         }
     }
 

website/src/scss/includes/themes.scss

@@ -12,7 +12,7 @@ $themes: (
     'font-warning': dark.$orange,
     'font-error': dark.$red,
 
-    'button-color': dark.$foreground,
+    'button-color': dark.$bg,
     'button-color-hover': dark.$selection,
     'box-color': dark.$bg,
     'box-light': dark.$selection,

website/src/scss/parts/footer.scss

@@ -24,6 +24,10 @@ footer {
       flex-direction: row;
     }
 
+    .footer-logo {
+      width: 144px;
+    }
+
     .title {
       font-size: 1.125rem;
       font-weight: 600;
@@ -38,7 +42,6 @@ footer {
 
       @include media('min', 'sm') {
         order: unset;
-        align-self: center;
         margin-top: 0;
       }
     }

website/src/scss/parts/header.scss

@@ -6,7 +6,6 @@
 header {
     display: flex;
     justify-content: center;
-    height: 87px;
 
     @include themify($themes) {
         background-color: themed('background-color');
@@ -21,15 +20,15 @@ nav {
     justify-content: space-between;
     align-items: center;
 
-    padding: 0.5rem 1rem;
+    padding: 1rem 1rem;
 
     @include wrapper;
 
     .logo {
         max-width: 60%;
 
         @include media('min', 'sm') {
-            width: 300px;
+            width: 360px;
             max-width: unset;
         }
 
@@ -77,7 +76,7 @@ nav {
             }
 
             a {
-                font-size: 1.25rem;
+                font-size: 1.5rem;
                 display: block;
                 overflow-wrap: break-word;
                 @include themify($themes) {
@@ -90,6 +89,11 @@ nav {
                         color: themed('link-color-hover');
                     }
                 }
+
+                .icon {
+                    width: 26px;
+                    height: 26px;
+                }
             }
 
             .mobile-docs-menu {

website/src/scss/parts/playground.scss

@@ -4,7 +4,7 @@
 @use "../includes/themify" as *;
 
 .sandbox-wrapper {
-  margin: 2rem 0;
+  margin: 1rem 0;
 
   @include media("min", "lg") {
     display: flex;
@@ -131,50 +131,57 @@
   }
 }
 
-.controls-static {
-  display: none;
-
-  @include media("min", "lg") {
-    display: block;
-  }
-}
-
-.playground-navigation {
+.playground-menu {
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 1rem;
 
   @include media("min", "md") {
     flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
+    gap: 2rem;
   }
-}
 
-.playground-versions {
-  min-width: 200px;
-  width: 100%;
+  .title {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
 
-  @include media("min", "md") {
-    max-width: 200px;
-    margin-left: auto;
-  }
+    .back-link {
+      display: none;
 
-  .dropdown .dropdown-wrapper > a:after {
-    top: 8px;
-  }
+      a {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+    }
 
-  .backdrop {
-    z-index: 3;
+    h1 {
+      border-bottom: 0;
+      margin: 0;
+    }
   }
-}
 
-.back-link {
-  display: none;
+  .playground-versions {
+    min-width: 200px;
+    width: 100%;
 
-  a {
+    @include media("min", "md") {
+      max-width: 200px;
+    }
+
+    .dropdown .dropdown-wrapper > a:after {
+      top: 8px;
+    }
+
+    .backdrop {
+      z-index: 3;
+    }
+  }
+
+  .playground-controls {
     display: flex;
-    align-items: center;
-    gap: 0.5rem;
+    gap: 1rem;
   }
 }