Basic styling for the Settings

ChrisSannar · May 25, 2020 · 058f9d8 · 058f9d8
1 parent c1ef67a
commit 058f9d8
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 21 deletions.
diff --git a/index.js b/index.js
@@ -5,7 +5,6 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const compression = require('compression');
 const helmet = require('helmet');
-const logger = require('morgan');
 const favicon = require('serve-favicon');
 const path = require('path');
 
@@ -32,6 +31,7 @@ app.use(favicon(`${__dirname}/favicon.ico`));
 
 // If we're in a development environement, use the logger
 if (process.env.NODE_ENV === 'development') {
+  const logger = require('morgan');
   app.use(logger('dev'));
 }
 

diff --git a/public/Settings-01.svg b/public/Settings-01.svg
diff --git a/public/css/style.css b/public/css/style.css
@@ -5,23 +5,44 @@ body {
   background: black;
   margin-top: 0;
 }
+
+/*
+  Header
+*/
 .header {
   background: #232323;
   color: #f5f5f5;
   margin: auto;
+  padding: 0.5em 1em;
   clear: both;
   width: 75%;
   display: flex;
+  justify-content: space-between;
   align-items: baseline;
   font-family: "Fira Sans", sans-serif;
   box-shadow: 0px 1px 0.5em #2f2f2f;
 }
-.header * {
-  margin: 0.7em 0.2em;
+
+.title {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.title * {
+  margin: 0;
 }
+
 .header-title {
-  margin-left: 0.5em;
+  margin-right: 0.5em;
 }
+
+.options {
+  display: flex;
+  justify-content: flex-end;
+}
+
 #lang-select {
   -webkit-appearance: none;
   margin-left: auto;
@@ -36,18 +57,37 @@ body {
   background: #0b0a09;
   color: #f5f5f5;
 }
-#wrap {
+
+.settings {
+  width: 2em;
+  height: 2em;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.settings:hover {
+  transform: rotate(60deg);
+}
+
+/*
+  Body
+*/
+
+/* #wrap {
   display: flex;
   width: 75%;
-}
+} */
 #editor {
   position: absolute;
   top: 4em;
   right: 0;
   bottom: 0;
   left: 13%;
   width: 50%;
+  /*
+  /* */
 }
+
 #side {
   position: absolute;
   background: #e3e3e3;
@@ -60,7 +100,19 @@ body {
   padding: 1.5em 1.5em;
   font-family: "Fira Sans", sans-serif;
   text-align: left;
+  /*
+  /* */
 }
+
+code {
+  padding: 0em 1em;
+  border-radius: 5px;
+  overflow-x: auto;
+}
+
+/*
+  Extra (modals)
+*/
 #feedbackButton {
   margin-bottom: 1.5em;
   padding: 0.5em 1em;
@@ -76,8 +128,3 @@ body {
   margin: 0.5em 0;
   resize: none;
 }
-code {
-  padding: 0em 1em;
-  border-radius: 5px;
-  overflow-x: auto;
-}
diff --git a/public/html/index.html b/public/html/index.html
@@ -13,16 +13,26 @@
   </head>
   <body>
     <div class="header">
-      <h3 class="header-title">Code Explainer</h3>
-      <p class="version">Beta</p>
-      <select
-        name="lang"
-        id="lang-select"
-        onchange="changeLanguage(this.value)"
-      >
-        <option value="javascript">Javascript</option>
-        <option value="python">Python</option>
-      </select>
+      <div class="title">
+        <h3 class="header-title">Code Explainer</h3>
+        <p class="version">Beta</p>
+      </div>
+      <div class="options">
+        <select
+          name="lang"
+          id="lang-select"
+          onchange="changeLanguage(this.value)"
+        >
+          <option value="javascript">Javascript</option>
+          <option value="python">Python</option>
+        </select>
+        <img
+          src="../Settings-01.svg"
+          alt="Settings"
+          class="settings"
+          onclick="openSettings()"
+        />
+      </div>
     </div>
 
     <div id="wrap">