Merge pull request #559 from creativecommons/semantic-marking

add semantic markup with remaining placeholders for "marking your work" and "help areas, add inline icons to recommended `license` title, set some baseline CSS positioning

Author: possumbilities

src/index.html

@@ -315,6 +315,14 @@ <h2>Recommended License</h2>
 
                 <header>
                     <h3>CC-BY 4.0</h3>
+                    <span class="license-icons">
+                        <svg>
+                            <use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
+                        </svg>
+                        <svg>
+                            <use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use>
+                        </svg>
+                    </span>
                     <h4>Creative Commons Attribution 4.0 International</h4>
                 </header>
 
@@ -332,8 +340,68 @@ <h4>Creative Commons Attribution 4.0 International</h4>
             </article>
         </div>
 
-        <div id="attribution-information">
-            <p>[attribution info here]</p>
+        <div id="mark-your-work">
+            <header>
+                <h2>Mark Your Work</h2>
+                <p>Choose the kind of work to get appropriate license code or public domain marking.</p>
+            </header>
+
+            <h3>Website</h3>
+            <p>If you are licensing or marking one work, paste the code next to it. If you are licensing or marking the whole page or blog, you can paste the code at the bottom of the page.</p>
+
+            <h4>Rich Text</h4>
+            <p>[contextually formatted mark here]</p>
+
+            <h4>HTML</h4>
+            <p>[contextually formatted mark here]</p>
+
+            <h4>XMP</h4>
+            <p>[contextually formatted mark here]</p>
+
+            <h3>Print Work or Media</h3>
+            <p>Copy the text below and paste it on the title and/or copyright page of your print work or presentation, or in the credits of your media.</p>
+
+            <h4>Plain Text</h4>
+            <p>[contextually formatted mark here]</p>
+
+            <footer>
+                <p>[toggle: (license abbreviation) | (full license name)]</p>
+                <button>Copy</button>
+                <button>Download</button>
+            </footer>
+
+        </div>
+
+        <div class="help">
+            <h2>Confused? Need Help?</h2>
+
+            <h3>What are Creative Commons licenses?</h3>
+            <p>Creative Commons licenses are legal tools that help you grant copyright permissions to the general public. Our CC legal tools include <a href="https://creativecommons.org/licenses/" target="_blank" rel="noopener noreferrer">six different licenses</a> and <a href="https://creativecommons.org/share-your-work/public-domain/cc0/" target="_blank" rel="noopener noreferrer">one public domain dedication tool</a>. It is important to specify which one of the 7 legal tools you are applying to your material. The license chooser can help you decide which license is right for you.</p> 
+            <p>CC licenses may be applied to any type of copyrightable work. The only types of works for which CC does not recommend its licenses are computer software and hardware, where we recommend a standard free software license instead. For works that are already in the public domain we recommend that you mark them with the <a href="https://creativecommons.org/about/pdm" target="_blank" rel="noopener noreferrer">Public Domain Mark</a>. If you hold the rights to a work but would like to place it into the public domain, you can use the Chooser to select CC0.</p>
+
+
+            <h3>How to apply a Creative Commons license</h3>
+            <p>You can license your work by marking it with the specific CC license you choose. This marking can be as simple as a bit of text stating the license in a copyright notice, or as complex as embedding the license information on your website using the HTML code associated with the particular license. We strongly recommend including a link to the applicable license (e.g., <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">https://creativecommons.org/licenses/by/4.0/</a>).</p>
+    
+
+            <h3>What should I consider?</h3>
+            <p>As a creator licensing a work, among <a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensors" target="_blank" rel="noopener noreferrer">other considerations</a>, you should:</p>
+            <ul>
+                <li><a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Remember_the_license_may_not_be_revoked." target="_blank" rel="noopener noreferrer">Remember that once you have applied a CC license, you cannot revoke it</a>.</li>
+                <li><a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Think_about_how_you_want_the_material_to_be_used." target="_blank" rel="noopener noreferrer">Choose your license based on how you want the material to be used</a>.</li>
+                <li><a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Specify_attribution_information_if_desired." target="_blank" rel="noopener noreferrer">Let people know how to credit you (or whether you want credit at all)</a>.</li>
+            </ul>
+
+
+            <h3>What do the icons mean?</h3>
+            <p> The icons represent key features of the different CC license options: </p>
+            <p>[grid of icons and defintions here]</p>
+    
+
+            <h3>What if I have other questions?</h3>
+            <p>You can find a full list of our <a href="https://creativecommons.org/faq/" target="_blank" rel="noopener noreferrer">frequently asked questions</a> on our site. If your questions or concerns are not answered there, you can email us at <a href="mailto:legal@creativecommons.org" target="_blank" rel="noopener noreferrer">legal@creativecommons.org</a>.</p>
+    
+            </ul>        
         </div>
     </aside>
 

src/style.css

@@ -65,3 +65,33 @@
 dt, dd {
     display: inline-block;
 }
+
+dt:after {
+    content: ':';
+}
+
+dd {
+    margin-left: .2em;
+}
+
+
+.license header {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.license header > h4 {
+    width: 100%;
+}
+
+.license header > .license-icons {
+    order: -1;
+    margin: 1.8em 1em 0 0;
+}
+
+.license .license-icons svg {
+    display: inline;
+    width: 1.9em;
+    height: 1.9em;
+    margin-right: .3em;
+}