Updated style for application

Author: ijlee2

app/styles/app.css

@@ -0,0 +1,60 @@
+html {
+  font-size: 16px;
+  height: 100%;
+}
+
+body {
+  background-color: rgb(244, 246, 248);
+  color: rgb(66, 71, 79);
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0;
+  padding: 1.5rem 0 3rem 0;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 1.75rem;
+  font-weight: 400;
+  margin-bottom: 1.5rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+h4 {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+a {
+  color: rgb(207, 45, 32);
+}
+
+p {
+  line-height: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+p code {
+  background-color: #D0D0D0;
+  margin: 0 0.0625rem;
+  padding: 0.25rem 0.375rem;
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+  white-space: pre-wrap !important;
+}

app/styles/application.css

@@ -0,0 +1,25 @@
+.header,
+.main {
+  padding: 0 1rem;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto;
+  max-width: 14rem;
+}
+
+.locale-menu-container {
+  margin: 1.5rem 0;
+}
+
+.guide-section-container {
+  margin-top: 4rem;
+}
+
+@media screen and (min-width: 30rem) {
+  .header,
+  .main {
+    padding: 0 2rem;
+  }
+}

app/templates/application.hbs

@@ -1,24 +1,35 @@
 {{page-title "Ember.js Octane vs Classic Cheat Sheet"}}
 
-<header>
+<header local-class="header">
   <img
     alt={{t "layout.application.logo-alt-text"}}
-    class="header-logo"
+    local-class="logo"
     src="{{this.rootURL}}/assets/ember-octane_text-treatment.png"
   >
 
-  <LocaleMenu />
+  <div local-class="locale-menu-container">
+    <LocaleMenu />
+  </div>
 </header>
 
-<main>
-  <h1>{{t "layout.application.title"}}</h1>
+<main local-class="main">
+  <h1 local-class="title">
+    {{t "layout.application.title"}}
+  </h1>
 
-  <p class="intro">{{t "layout.application.description-1" htmlSafe=true}}</p>
-  <p class="intro">{{t "layout.application.description-2" htmlSafe=true}}</p>
+  <p>
+    {{t "layout.application.description-1" htmlSafe=true}}
+  </p>
+
+  <p>
+    {{t "layout.application.description-2" htmlSafe=true}}
+  </p>
 
   {{#each @model as |section|}}
-    <GuideSection
-      @section={{section}}
-    />
+    <div local-class="guide-section-container">
+      <GuideSection
+        @section={{section}}
+      />
+    </div>
   {{/each}}
 </main>