Merge pull request #47 from ft-interactive/html-structure

Changed html structure on main page to be more semantic
ft-interactive · Dec 11, 2015 · e5cc031 · e5cc031
2 parents a38c062 + 8de45a3
commit e5cc031
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 34 deletions.
diff --git a/client/main-page.hbs b/client/main-page.hbs
@@ -15,9 +15,8 @@
      		<a href="../guffipedia-form" class="o-buttons o-buttons--standout">Suggest your own entry</a>
      	</div>
 
-		<ul class="guffs">
-			{{#each homewords}}
-			<li class="guff">
+		{{#each homewords}}
+			<div class="{{#if @first}}latest{{else}}random{{/if}}-guff">
 				<div class="paraHeads">{{#if @first}}Latest guff <span>added on {{formatteddate}}</span>{{else}}Random guff{{/if}}</div>
 				<a class="word" href="{{@key}}/">{{word}}&raquo;</a>
 				<div class="details">
@@ -34,14 +33,15 @@
 						</p>
 					{{/if}}
 				</div>
+			</div>
+		{{/each}}
+		<div class="paraHeads">All the guff</div>
+		<ul class="guffs">
+		{{#each words}}
+			<li class="guff">
+				<a class="word" href="{{@key}}/">{{word}}&raquo;</a>
 			</li>
-			{{/each}}
-			<div class="paraHeads">All the guff</div>
-			{{#each words}}
-				<ul class="listing">
-					<a class="word" href="{{@key}}/">{{word}}&raquo;</a>
-				</ul>
-			{{/each}}
+		{{/each}}
 		</ul>
     </main>
 {{> bottom }}
diff --git a/client/styles/main.scss b/client/styles/main.scss
@@ -197,25 +197,6 @@ main {
     }
     }
   }
-  .listing {
-    margin-top: 6px;
-    font-family: MetricWeb;
-    font-weight: 600;
-    text-align: left;
-    font-size: 0.7em;
-    line-height: 0.6em;
-    color: $dark-grey;
-    @include oGridRespondTo(S) {
-      font-size: 0.7em;
-      line-height: 0.7em;
-      margin-top: 6px;
-    }
-    span {
-      font-size: 0.9em;
-      font-weight: 600;
-      font-weight: normal;
-    }
-  }
 
   .intro {
     font-family: MetricWeb;
@@ -228,17 +209,37 @@ main {
     }
   }
 
-  .guffs {
+  .latest-guff {
     margin-top: 10px;
-    padding-left: 0;
     @include oGridRespondTo(S) {
       margin-top: 20px;
     }
 
   }
-  .guff {
-    list-style-type: none;
-    margin-bottom: 10px;
+
+  .guffs {
+    padding-left: 18px;
+    .guff {
+      list-style-type: none;
+      margin-bottom: 10px;
+      margin-top: 6px;
+      font-family: MetricWeb;
+      font-weight: 600;
+      text-align: left;
+      font-size: 0.7em;
+      line-height: 0.6em;
+      color: $dark-grey;
+      @include oGridRespondTo(S) {
+        font-size: 0.7em;
+        line-height: 0.7em;
+        margin-top: 6px;
+      }
+      span {
+        font-size: 0.9em;
+        font-weight: 600;
+        font-weight: normal;
+      }
+    }
   }
   @mixin word-style() {
     color: $dark-pink;