WIP Website redesign

app/components/api-index-filter.js

@@ -1,13 +1,10 @@
 /* eslint-disable ember/no-computed-properties-in-native-classes */
-import { classNames } from '@ember-decorators/component';
 import { computed } from '@ember/object';
 import Component from '@ember/component';
 import sortBy from 'lodash.sortby';
 
 const filterDataComputedParams =
   'filterData.{showInherited,showProtected,showPrivate,showDeprecated}';
-
-@classNames('api-index-filter')
 export default class ApiIndexFilter extends Component {
   @computed('model.methods.[]', filterDataComputedParams)
   get filteredMethods() {

app/components/import-example.hbs

@@ -1,4 +1,4 @@
-<div class='highlight javascript'>
+<div class='highlight javascript my-3'>
   <div class='ribbon'></div>
   {{#if (is-clipboard-supported)}}
     <div class='import-copy'>

app/components/table-of-contents.hbs

@@ -1,12 +1,12 @@
-<ol class='toc-level-0'>
-  <li class='toc-level-0'>
+<ol class='toc-level-0 link-underline-override'>
+  <li class='toc-level-0 large list-unstyled link-underline-override'>
     <a {{action 'toggle' 'modules'}} href='#' data-test-toc-title='packages'>Packages</a>
-    <ol class='toc-level-1 modules selected'>
+    <ol class='toc-level-1 modules selected medium regular list-unstyled'>
       {{#each @moduleIDs as |moduleID|}}
 
         {{#if (not-eq moduleID '@ember/object/computed')}}
-          <li class='toc-level-1' data-test-module={{moduleID}}>
-            <LinkTo @route='project-version.modules.module' @models={{array @version moduleID}}>{{moduleID}}</LinkTo>
+          <li class='toc-level-1 medium regular pl-2 list-unstyle link-underline-override' data-test-module={{moduleID}}>
+            <LinkTo class='link-underline-override' @route='project-version.modules.module' @models={{array @version moduleID}}>{{moduleID}}</LinkTo>
           </li>
         {{/if}}
 
@@ -17,21 +17,21 @@
   {{#if @isShowingNamespaces}}
     <li class='toc-level-0'>
       <a {{action 'toggle' 'namespaces'}} href='#' data-test-toc-title='namespaces'>Namespaces</a>
-      <ol class='toc-level-1 namespaces selected'>
+      <ol class='toc-level-1 namespaces selected medium regular'>
         {{#each @namespaceIDs as |namespaceID|}}
-          <li class='toc-level-1' data-test-namespace={{namespaceID}}>
+          <li class='toc-level-1 medium regular pl-2 list-unstyled' data-test-namespace={{namespaceID}}>
             <LinkTo @route='project-version.namespaces.namespace' @models={{array @version namespaceID}}>{{namespaceID}}</LinkTo>
           </li>
         {{/each}}
       </ol>
     </li>
   {{/if}}
 
-  <li class='toc-level-0'>
+  <li class='toc-level-0 large list-unstyled"'>
     <a {{action 'toggle' 'classes'}} href='#' data-test-toc-title='classes'>Classes</a>
-    <ol class='toc-level-1 classes selected'>
+    <ol class='toc-level-1 classes selected medium regular'>
       {{#each @classesIDs as |classID|}}
-        <li class='toc-level-1' data-test-class={{classID}}>
+        <li class='toc-level-1 medium regular pl-2 list-unstyled link-underline-override' data-test-class={{classID}}>
           <LinkTo @route='project-version.classes.class' @models={{array @version classID}}>{{classID}}</LinkTo>
         </li>
       {{/each}}

app/styles/_class.scss

@@ -1,6 +1,6 @@
 article.chapter {
   h1.module-name {
-    display: inline;
+    margin-top: 0;
   }
 
   .heading__link__edit {
@@ -10,7 +10,7 @@ article.chapter {
     display: block;
     position: relative;
 
-    @media (min-width: $mobile-portrait-screen + 1){
+    @media (min-width: ($mobile-portrait-screen + 1)){
       &::before, &::after {
         transition: 0.2s opacity, 0.2s transform;
       }
@@ -85,14 +85,10 @@ article.chapter {
 }
 
 .attributes {
-  margin: 10px 0;
 
   .attribute-label {
     display: inline-block;
     width: 120px;
-    color: $black;
-    font-weight: bold;
-    text-transform: uppercase;
 
     @media (max-width: $mobile-portrait-screen){
       display: block;

app/styles/app.scss

@@ -1,47 +1,7 @@
 @charset "utf-8";
-
 @import "normalize";
 @import "bourbon";
 @import "./base/base";
-@import "neat";
 @import "./components/all";
 @import "class";
-
-body {
-  margin: 0;
-  width: 100%;
-}
-
-@include media($large-screen-up) {
-  .header {
-    top: 0;
-    width: 100%;
-  }
-
-  main.container {
-    width: 100%;
-    min-height: calc(100vh - 18rem);
-  }
-
-  main.container .content {
-    position: relative;
-    margin-right: 0;
-    margin-bottom: 0;
-    overflow:auto;
-    padding: $base-spacing;
-    min-width: auto;
-    &::after {
-      clear: both;
-      display: table;
-    }
-
-  }
-
-  main.container .content .chapter {
-    width: 800px;
-    max-width: 100%;
-  }
-}
-
-
 @import "ember-power-select";

app/styles/base/_base.scss

@@ -1,11 +1,5 @@
-// Bitters 1.0.0
-// http://bitters.bourbon.io
-// Copyright 2013-2015 thoughtbot, inc.
-// MIT License
-
 @import "variables";
 @import "grid-settings";
-@import "buttons";
 @import "forms";
 @import "lists";
 @import "tables";

app/styles/base/_forms.scss

@@ -11,8 +11,6 @@ input,
 label,
 select {
   display: block;
-  font-family: $base-font-family;
-  font-size: $base-font-size;
 }
 
 .ember-power-select-trigger {
@@ -21,8 +19,6 @@ select {
   max-width: 100%;
   width: auto;
   display: block;
-  font-family: $base-font-family;
-  font-size: $base-font-size;
   background-color: $base-background-color;
   transition: border-color;
   appearance: none;
@@ -48,8 +44,6 @@ textarea {
   border-radius: $base-border-radius;
   box-shadow: $form-box-shadow;
   box-sizing: border-box;
-  font-family: $base-font-family;
-  font-size: $base-font-size;
   margin-bottom: math.div($base-spacing, 2);
   padding: math.div($base-spacing, 3);
   transition: border-color;

app/styles/base/_grid-settings.scss

@@ -1,13 +1,6 @@
-@import "neat-helpers"; // or "../neat/neat-helpers" when not in Rails
-// Neat Overrides
-// $column: 90px;
-// $gutter: 30px;
-// $grid-columns: 12;
-// $max-width: 1088px;
-// Neat Breakpoints
 $mobile-portrait-screen: 30em; // 480px
 $medium-screen: 40em; // 640px
 $large-screen: 54em; // 864px
 $medium-screen-up: new-breakpoint(min-width $medium-screen 4);
 $medium-large-screen-up: new-breakpoint(min-width $medium-screen 8);
-$large-screen-up: new-breakpoint(min-width $large-screen 8);
+$large-screen-up: new-breakpoint(min-width $large-screen 8);

app/styles/base/_lists.scss

@@ -1,11 +1,9 @@
 ul,
 ol {
-  list-style-type: none;
   margin: 0;
   padding: 0;
 
   &%default-ul {
-    list-style-type: disc;
     margin-bottom: $small-spacing;
     padding-left: $base-spacing;
 
@@ -15,11 +13,9 @@ ol {
   }
 
   &%default-ol {
-    list-style-type: none;
     margin-bottom: $base-spacing;
 
     > li {
-      counter-increment: customlistcounter;
       clear: both;
       padding: $small-spacing 0 $small-spacing 2em;
       position: relative;
@@ -28,33 +24,17 @@ ol {
       &::before {
         @include position(absolute, ($small-spacing + 0.5em) null null 0);
         @include size(2em);
-        content: counter(customlistcounter) " ";
-        border: 2px solid $base-border-color;
+        border: 2px solid #74B0CE;
         border-radius: 50%;
-        color: $light-brown;
         float: left;
-        font-size: $small-font-size;
         line-height: calc(2em - 4px);
         overflow: hidden;
         text-align: center;
       }
     }
-
-    &:first-child {
-      counter-reset: customlistcounter;
-    }
   }
 }
 
-dl {
-  margin-bottom: $small-spacing;
-
-  dt {
-    font-weight: bold;
-    margin-top: $small-spacing;
-  }
-
-  dd {
-    margin: 0;
-  }
+dd {
+  margin: 0;
 }

app/styles/base/_typography.scss

@@ -1,54 +1,18 @@
 @import "mixins/hidpi";
 @import "mixins/text-adjust";
 
-body {
-  font-feature-settings: "kern", "liga", "pnum";
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: $base-font-color;
-  font-family: $base-font-family;
-  font-size: $base-font-size;
-  line-height: $base-line-height;
-}
-
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  font-family: $heading-font-family;
-  font-size: $base-font-size;
-  line-height: $heading-line-height;
-  margin: 0 0 $small-spacing;
-  font-weight: bold;
-
   code {
     text-transform: none;
   }
 }
 
-@each $i in 0, 1, 2, 3, 4 {
-  h#{$i + 1} {
-    font-size: modular-scale(-$i, 2em, 1.2);
-  }
-}
-
-h1 {
-  color: $ember-orange;
-}
-
-h2 {
-  color: $brown;
-}
-
-p {
-  margin: 1.5em 0 $small-spacing;
-  line-height: 1.5em;
-}
-
 a {
-  color: $action-color;
   text-decoration: none;
   transition: color 0.1s linear;
 
@@ -64,7 +28,7 @@ a {
 }
 
 hr {
-  border-bottom: $base-border;
+  border-bottom: 1px solid #e6e4e3;
   border-left: none;
   border-right: none;
   border-top: none;

app/styles/base/_variables.scss

@@ -1,15 +1,7 @@
 @use "sass:math";
 
 // Typography
-$base-font-family: 'Source Sans Pro', sans-serif;
-$heading-font-family: $base-font-family;
 $monospace-font-family: Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
-$footer-font-family: proxima-nova, sans-serif;
-
-// Font Sizes
-$base-font-size: 1rem;
-$small-font-size: 0.75rem;
-$large-font-size: 1.5rem;
 
 // Line height
 $base-line-height: 1.5;
@@ -24,8 +16,6 @@ $top-spacing: $base-spacing * 3.333; // 80px
 
 // Colors
 $ember-orange: #dd6a58;
-$light-brown: #b67d47;
-$brown: #865931;
 $medium-gray: #999;
 $dark-gray: #444545;
 $tan: #fffdf9;
@@ -65,7 +55,6 @@ $highlight-colors: (
 // Font Colors
 $base-font-color: $near-black;
 $dark-font-color: $dark-gray;
-$light-font-color: $light-brown;
 $action-color: $ember-orange;
 
 // Border

app/styles/colors.scss

@@ -1,2 +1,2 @@
-$ember-orange: #dd6a58;
+$ember-orange: #e04e39;
 

app/styles/components/_all.scss

@@ -1,4 +1,3 @@
-@import "header";
 @import "layout";
 @import "sidebar";
 @import "article";