Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Narrative refactor #58

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
+901 −6
Draft

Narrative refactor #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e445c79
setup baseline placeholder items to model after
possumbilities Aug 14, 2024
3ee6ee7
Merge remote-tracking branch 'origin/main' into narrative-refactor
possumbilities Sep 20, 2024
29cf8e1
setup some baseline narrative resets to build from
possumbilities Sep 20, 2024
8832b3d
adjust spacing, link colors, baseliens
possumbilities Sep 20, 2024
117ce4b
adjust hover state, learn more button
possumbilities Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
352 changes: 352 additions & 0 deletions specimen/contexts/narrative-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,352 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Narrative Index</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" href="../vocabulary/favicon/favicon.ico" sizes="any">
<link rel="icon" href="../vocabulary/favicon/favicon.svg" type="image/svg+xml">
<link rel="manifest" href="../vocabulary/favicon/manifest.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="../vocabulary/favicon/apple-touch-icon.png" />

<link rel="stylesheet" media="all" href="../style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">

</head>

<body class="narrative-index">
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<header>
<div class="masthead">
<h1><a class="identity-logo" href="#">Vocabulary</a></h1>
<button class="expand-menu">Menu</button>
<nav class="primary-menu">
<ul>
<li><a href="">About Us</a></li>
<li><a href="">Programs</a></li>
<li><a href="">License & Tools</a></li>
<li><a href="">Blog</a></li>
<li><a href="" class="donate icon-attach fa-heart">Donate</a></li>
</ul>
</nav>
</div>

</header>

<!-- <article class="attention">
<p></p>
</article> -->

<span id="main-content-marker"></span>

<main>

<!-- <header>
<h1>Creative Commons, lorem ipsum dolor sit</h1>
</header> -->

<!-- <img src="../media/sharing-illustration.png" /> -->

<article class="topic-summary campaign">
<p><span class="first">you</span> make <span class="medium">music</span>.</p>
<p><span class="second">they</span> <span class="action">remix</span> it.</p>
<p class="third">We make it possible.</p>
<p class="fourth tagline">where our shared culture thrives</p></article>

<article class="topic-summary about">
<p><strong>Creative Commons</strong> is an international nonprofit organization that empowers people to grow and sustain the thriving commons of shared knowledge and culture we need to address the world's most pressing challenges and create a brighter future for all.</p>
<a class="learn-more" href="#">Learn more about what we do &rarr;</a>
</article>


<article class="topic-summary programs">
<h2>Progams</h2>
</article>

<article class="topic-summary licenses">
<h2>Licenses</h2>
</article>

<article class="posts">
<h2>Blog</h2>
</article>

<article class="posts">
<h2>News</h2>
</article>

<article class="posts">
<h2>Events</h2>
</article>

<article class="topic-summary future">
<h2>Looking Ahead</h2>
</article>


<article class="topic-summary support">
<h2>Support</h2>
</article>

<article class="topic-summary involvement">
<h2>Get Involved</h2>
</article>


<article class="topic-summary impact">
<h2>Impact Story</h2>
</article>

<article class="topic-summary newsletter">
<h2>Newsletter</h2>
</article>



<footer>
<article class="attribution-list">
<h2>Images Attribution</h2>
<!-- <p>Why does this matter?</p> -->
<button class="expand-attribution">view</button>
<ul class="attribution-panel">
<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>
<li>
<article>
<figure>
<img src="../imgs/image4.png" />
<span class="attribution"><span>"</span><a href="https://www.flickr.com/photos/47691521@N07/8249753855" target="_blank" rel="noopener noreferrer">Creative Commons a vessel ideas</a><span>" by&nbsp;</span><a href="https://www.flickr.com/photos/47691521@N07" target="_blank" rel="noopener noreferrer">opensourceway</a><span>&nbsp;is licensed under&nbsp;</span><a href="https://creativecommons.org/licenses/by-sa/2.0/?ref=openverse" target="_blank" rel="noopener noreferrer">CC BY-SA 2.0</a></span>
</figure>
</article>
</li>
<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>
<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>

<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>

<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>

<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>

<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>

<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>

<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>

<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>

<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>

<li>
<article>
<figure>
<img src="../imgs/image3.png" />
<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>
</article>
</li>
</ul>
</article>

</footer>



</main>

<footer>
<a class="identity-logo" href="#">Creative Commons</a>

<nav class="footer-menu">
<ul>
<li><a href="/about/contact">Contact</a></li>
<li><a href="https://mail.creativecommons.org/subscribe" target="_blank">Newsletter</a></li>
<li><a href="/privacy">Privacy</a></li>
<li><a href="/policies">Policies</a></li>
<li><a href="/terms">Terms</a></li>
</ul>
</nav>

<div class="contact">
<!-- this area lacks a heading? -->
<h2>Contact Us</h2>
<p>Creative Commons </br> PO Box 1866, Mountain View, CA 94042</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p><a href="tel:+14154296753">+1-415-429-6753</a></p>

<nav class="social-menu">
<ul>
<!-- <li><a class="icon-replace fa-instagram" href="#">Instagram</a></li> -->
<li><a class="icon-replace fa-twitter" href="https://twitter.com/creativecommons" target="_blank">Twitter</a></li>
<li><a class="icon-replace fa-mastodon" href="https://mastodon.social/@creativecommons" target="_blank">Mastodon</a></li>
<li><a class="icon-replace fa-facebook" href="https://www.facebook.com/creativecommons" target="_blank">Facebook</a></li>
<li><a class="icon-replace fa-linkedin" href="https://www.linkedin.com/company/creative-commons/" target="_blank">LinkedIn</a></li>
</ul>
</nav>
</div>

<div class="subscribe">
<h2>Subscribe to our Newsletter</h2>
<form action="https://creativecommons.us4.list-manage.com/subscribe/post?u=fd30364b6577b471373d6076c&amp;id=4603fe102a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate newsletter" target="_blank" novalidate="">
<input type="email" value="" name="EMAIL" class="email input" id="mce-EMAIL" placeholder="Your email" required="">
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px" aria-hidden="true">
<input type="text" name="b_fd30364b6577b471373d6076c_4603fe102a" tabindex="-1" value="">
</div>
<input type="submit" value="subscribe" id="mc-embedded-subscribe" class="button small">
</form>
</div>

<div class="donate">
<h2>Support Our Work</h2>
<p>Our work relies on you! Help us keep the Internet free and open.</p>
<a class="donate icon-attach cc-heart-filled" href="https://www.classy.org/give/313412/#!/donation/checkout?c_src=website&c_src2=top-of-page-banner" target="_blank">Donate Now</a>
</div>


<div class="license">
<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>
</svg>
<svg>
<use href="../../../src/svg/cc/icons/cc-icons.svg#cc-by"></use>
</svg>
</div>

</footer>

<script src="../../src/js/vocabulary.js"></script>
<script>
items = ['art','music','textbooks','photos', 'paintings', 'comics', 'movies', 'films', 'animations', 'research'];

var item = items[Math.floor(Math.random()*items.length)];

document.querySelector('.medium').innerHTML = item;


actions = ['remix','reshare','reuse'];

var action = actions[Math.floor(Math.random()*actions.length)];

document.querySelector('.action').innerHTML = action;


firsts = ['you','they'];

var first = firsts[Math.floor(Math.random()*firsts.length)];

document.querySelector('.first').innerHTML = first;




if (first == 'you') {
document.querySelector('.second').innerHTML = 'they';
}
else { document.querySelector('.second').innerHTML = 'you'; }



taglines = [
'where our shared culture thrives',
'where the whole is greater than the sum of its parts',
"You can't use up creativity. The more you use, the more you have &mdash; Maya Angelou"

];

var tagline = taglines[Math.floor(Math.random()*taglines.length)];

document.querySelector('.tagline').innerHTML = tagline;



</script>
</body>
</html>
Loading