Finish basic styling of major components

index.html

@@ -15,9 +15,21 @@
 
   <main>
     <aside id="sideColumn">
-      <form id="wordForm">
+      <form id="wordForm" onsubmit="function(e){e.preventDefault();return false;}">
         <label>Word<br>
-          <input id="word">
+          <input id="wordName">
+        </label>
+        <label>Pronunciation<a class="label-button">IPA Chart</a><br>
+          <input id="wordPronunciation">
+        </label>
+        <label>Part of Speech<br>
+          <select id="wordPartOfSpeech"></select>
+        </label>
+        <label>Definition<br>
+          <input id="wordDefinition">
+        </label>
+        <label>Details<a class="label-button">Maximize</a><br>
+          <textarea id="wordDetails"></textarea>
         </label>
       </form>
     </aside>
@@ -27,9 +39,7 @@
         <h2>Dictionary Name</h2>
         <nav>
           <ul>
-            <li>Description</li>
+            <li id="toggleDescription">Description</li><li id="toggleDetails">Details</li><li id="toggleStats" class="active">Stats</li><li id="showEdit" onclick="document.getElementById('editModal').style.display='block'">Edit</li>
-            <li>Details</li>
-            <li>Stats</li>
           </ul>
         </nav>
         <article id="detailsPanel">
@@ -55,8 +65,28 @@
     </section>
   </main>
 
-  <footer>
+  <footer id="bottom">
     Lexiconga Footer Links
+    <a class="button">Support</a>
+    <a class="button">Blog</a>
+    <a class="button">Issues</a>
+    <a class="button">Updates</a>
+    |
+    <a class="button">Help</a>
+    <a class="button">Terms</a>
+    <a class="button">Privacy</a>
   </footer>
+
+  <section id="editModal" class="modal" style="display:none;">
+    <div class="modal-background" onclick="this.parentElement.style.display='none';"></div>
+    <div class="modal-content">
+      <a class="close-button" onclick="this.parentElement.parentElement.style.display='none';">&times;&#xFE0E;</a>
+      <nav class="tabs">
+        <ul>
+          <li class="active">Description</li><li>Details</li><li>Settings</li><li>Actions</li>
+        </ul>
+      </nav>
+    </div>
+  </section>
 </body>
 </html>

src/main.scss

@@ -3,11 +3,12 @@
 @import '../node_modules/normalize.css/normalize.css';
 
 @import 'styles/containers';
+@import 'styles/structure';
 @import 'styles/elements';
 
 html, body {
   font-family: $font;
-  
+
   * {
     box-sizing: border-box;
   }

src/styles/_containers.scss

@@ -1,7 +1,7 @@
 header {
   display: block;
   padding: 5px 20px;
-  border-bottom: 1px solid #dedede;
+  border-bottom: 1px solid $mid;
   margin: 0 0 5px;
 
   &#top {
@@ -12,6 +12,7 @@ header {
 main {
   display: block;
   width: 90%;
+  min-height: 400px;
   margin: 0 auto;
 
   #sideColumn,
@@ -32,8 +33,8 @@ main {
 
   article {
     width: 95%;
-    margin: 5px auto;
+    margin: 10px auto;
-    border: 1px solid #dedede;
+    border: $border;
 
     dl {
       padding: 0 20px;
@@ -43,7 +44,7 @@ main {
 
 footer {
   display: block;
-  padding: 5px 20px;
+  padding: 20px;
-  border-top: 1px solid #dedede;
+  border-top: 1px solid $mid;
   margin: 5px 0 0;
 }

src/styles/_elements.scss

@@ -1,15 +1,60 @@
-#top {
+.button {
-  #title {
+  cursor: pointer;
-    display: inline-block;
+  padding: 3px 9px;
-    margin: 3px 20px 3px 0;
+  border: $border;
+  border-radius: 3px;
+  background-color: $light;
+}
+
+.modal {
+  .modal-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #000000;
+    opacity: 0.5;
   }
 
-  #searchButton {
+  .modal-content {
-    cursor: pointer;
+    position: fixed;
+    top: 10%;
+    left: 20%;
+    bottom: 10%;
+    right: 20%;
+    background-color: $white;
+    border: $border;
+    border-radius: 5px;
+
+    .close-button {
+      font-size: 200%;
+      float: right;
+      margin: 10px 20px;
+      cursor: pointer;
+    }
   }
 }
 
-#wordForm {
+.tabs {
-  position: fixed;
+  ul {
-  top: $header-height;
+    border-bottom: $border;
+  }
+  li {
+    display: inline-block;
+    list-style: none;
+    margin: 0 2px -1px;
+    padding: 10px 20px;
+    border-top: $border;
+    border-left: $border;
+    border-right: $border;
+    border-radius: 5px 5px 0 0;
+    background-color: $mid;
+    cursor: pointer;
+
+    &.active {
+      background-color: $white;
+      border-bottom: 1px solid $white;
+    }
+  }
 }

src/styles/_structure.scss

@@ -0,0 +1,96 @@
+#top {
+  #title {
+    display: inline-block;
+    margin: 3px 20px 3px 0;
+  }
+
+  #searchButton {
+    cursor: pointer;
+  }
+}
+
+#wordForm {
+  position: fixed;
+  top: $header-height;
+  width: 24%;
+  padding: 10px;
+  background-color: $light;
+  border: $border;
+  border-radius: 5px;
+
+  label {
+    display: block;
+    font-weight: bold;
+
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+
+    input, select, textarea {
+      font-weight: normal;
+      width: 100%;
+    }
+
+    .label-button {
+      font-size: 80%;
+      float: right;
+      cursor: pointer;
+    }
+  }
+}
+
+#detailsSection {
+  padding: 20px;
+  background-color: $white;
+  border: $border;
+  border-radius: 5px;
+
+  nav li {
+    display: inline-block;
+    list-style: none;
+    margin: 0;
+    padding: 10px 20px;
+    border: $border;
+    background-color: $light;
+    cursor: pointer;
+    
+    &:first-child {
+      border-radius: 5px 0 0 5px;
+    }
+    &:last-child {
+      border-radius: 0 5px 5px 0;
+    }
+    &:not(:first-child) {
+      border-left: none;
+    }
+
+    &.active {
+      background-color: #bababa;
+    }
+  }
+
+  #detailsPanel {
+    background-color: $white;
+    padding: 20px;
+  }
+}
+
+
+.entry {
+  background-color: $light;
+  
+  .word {
+    display: inline-block;
+    margin: 3px 0;
+  }
+
+  .pronunciation {
+    margin: 0 20px;
+  }
+
+  .part-of-speech {
+    font-weight: bold;
+    font-style: italic;
+    font-size: 70%;
+  }
+}

src/styles/_variables.scss

@@ -1,3 +1,10 @@
 $font: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 
-$header-height: 60px;
+$header-height: 60px;
+
+$dark: #bababa;
+$mid: #dedede;
+$light: #efefef;
+$white: #ffffff;
+
+$border: 1px solid $dark;