Merge pull request #557 from creativecommons/semantic-results

correct `h1` to "Chooser", build out semantic html for "results" area

Author: possumbilities

src/index.html

@@ -19,7 +19,7 @@
 
 <header>
     <div class="masthead">
-        <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
+        <h1><a class="identity-logo product" href="#">Chooser</a></h1>
         <button class="expand-menu">Menu</button>
         <nav class="primary-menu" aria-label="Primary navigation">
             <ul>
@@ -309,9 +309,32 @@ <h1>Choose a License for Your Work</h1>
 
     <aside>
         <div id="license-recommendation">
-            <p>[license recommendation info here]</p>
+            <h2>Recommended License</h2>
+
+            <article class="license">
+
+                <header>
+                    <h3>CC-BY 4.0</h3>
+                    <h4>Creative Commons Attribution 4.0 International</h4>
+                </header>
+
+                <div class="description">
+                    <p>This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes.</p>
+                </div>
+
+                <dl class="conditions-definitions">
+                    <dt class="icon-attach cc-by">BY</dt>
+                    <dd>Credit must be given to you, the creator.</dd>
+                </dl>
+
+            <a href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v2">See the License Deed</a>
+
+            </article>
+        </div>
+
+        <div id="attribution-information">
+            <p>[attribution info here]</p>
         </div>
-        <p>[attribution info here]</p>
     </aside>
 
 </div>
@@ -371,10 +394,10 @@ <h2>Support Our Work</h2>
         <p>Except where otherwise <a href="/policies/#license">noted</a>, content on this site is licensed under a <a href="/licenses/by/4.0/">Creative Commons Attribution 4.0 International license</a>. Icons by <a href="https://fontawesome.com/" target="_blank">Font Awesome</a>.</p>
 
         <svg>
-            <use href="../../src/svg/cc/icons/cc-icons.svg#cc-logo"></use>
+            <use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
         </svg>
         <svg>
-            <use href="../../src/svg/cc/icons/cc-icons.svg#cc-by"></use>
+            <use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use>
         </svg>
     </div>
 
@@ -383,5 +406,10 @@ <h2>Support Our Work</h2>
 <script src="vocabulary/js/vocabulary.js"></script>
 <script src="scripts.js"></script>
 
+
+<template id="license">
+    <!-- placeholder for swapping out content later with JS -->
+</template>
+
 </body>
 </html>

src/style.css

@@ -1 +1,67 @@
 @import 'vocabulary/css/vocabulary.css' layer(vocabulary);
+
+
+:root {
+
+    /* localized cc sprite names */
+    --cc-by: url('/vocabulary/svg/cc/icons/cc-icons.svg#cc-by');
+    --cc-nc: url('/vocabulary/svg/cc/icons/cc-icons.svg#cc-nc');
+    --cc-nd: url('/vocabulary/svg/cc/icons/cc-icons.svg#cc-nd');
+    --cc-pd: url('/vocabulary/svg/cc/icons/cc-icons.svg#cc-pd');
+    --cc-pdm: url('/vocabulary/svg/cc/icons/cc-icons.svg#cc-pdm');
+    --cc-sa: url('/vocabulary/svg/cc/icons/cc-icons.svg#cc-sa');
+    --cc-zero: url('/vocabulary/svg/cc/icons/cc-icons.svg#cc-zero');
+}
+
+.icon-attach.cc-by:before {
+    --icon-sprite: var(--cc-by);
+    /* --icon-sprite-size: 2em; */
+    margin-right: .2em;
+    margin-bottom: -.125em;
+}
+
+.icon-attach.cc-nc:before {
+    --icon-sprite: var(--cc-nc);
+    /* --icon-sprite-size: 2em; */
+    margin-right: .2em;
+    margin-bottom: -.125em;
+}
+
+.icon-attach.cc-nd:before {
+    --icon-sprite: var(--cc-nd);
+    /* --icon-sprite-size: 2em; */
+    margin-right: .2em;
+    margin-bottom: -.125em;
+}
+
+.icon-attach.cc-pd:before {
+    --icon-sprite: var(--cc-pd);
+    /* --icon-sprite-size: 2em; */
+    margin-right: .2em;
+    margin-bottom: -.125em;
+}
+
+.icon-attach.cc-pdm:before {
+    --icon-sprite: var(--cc-pdm);
+    /* --icon-sprite-size: 2em; */
+    margin-right: .2em;
+    margin-bottom: -.125em;
+}
+
+.icon-attach.cc-sa:before {
+    --icon-sprite: var(--cc-sa);
+    /* --icon-sprite-size: 2em; */
+    margin-right: .2em;
+    margin-bottom: -.125em;
+}
+
+.icon-attach.cc-zero:before {
+    --icon-sprite: var(--cc-zero);
+    /* --icon-sprite-size: 2em; */
+    margin-right: .2em;
+    margin-bottom: -.125em;
+}
+
+dt, dd {
+    display: inline-block;
+}