Skip to content

Update Educational Section Layout, Update Page Layout #11

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

Merged
merged 4 commits into from
Jun 25, 2019
Merged

Update Educational Section Layout, Update Page Layout #11

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d1cb185
Switch around edu section layout, add a license icon <-> name example
Jun 23, 2019
9de1026
Switch buttons and icon explanations
Jun 23, 2019
6d436c8
Move chooser to top of page, education section to middle.
Jun 23, 2019
c074f72
Small cleanup
Jun 23, 2019
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
Prev Previous commit
Next Next commit
Switch buttons and icon explanations
  • Loading branch information
Ari committed Jun 23, 2019
commit 9de102611b16915e93c0d2dd993e8331cbf9b659
147 changes: 75 additions & 72 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,74 +29,9 @@
<div class="container site-container" id="chooser-app">
<br>
<div class="container" id="education-content">
<h1 class="title is-1">[Some Title]</h1>
<div class="columns">
<div class="column is-one-third" id="icons-explanation">
<p>
Creative Commons licenses can be represented by their names, their
associated icons, or both. For example, a cc-by-nc license, which
requires attribution, and prohibits commercial use could be represented its:
<br><br>
<ul>
<li>
<span>
<b>&nbsp;&nbsp;&nbsp;&nbsp; - Name: </b> CC-BY-NC, or Attribution-NonCommercial
</span>
</li>
<li>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OR</p>
</li>
<li>
<span>
<b>&nbsp;&nbsp;&nbsp;&nbsp; - Icons: </b>
<span class="generated-icons">
<img src="assets/cc.svg">
<img src="assets/license-icons/cc-by_icon.svg">
<img src="assets/license-icons/cc-nc_icon.svg">
</span>
</span>
</li>
</ul>
</p> <br>
</div>
<div class="column is-one-third">
<div class="edu-icons-section">
<img src="assets/license-icons/cc-by_icon.svg">
Attribution (BY) <br>
<p>You must attribute the work in the manner specified by the author or licensor.</p> <br>
</div>
<div class="edu-icons-section">
<img src="assets/license-icons/cc-nd_icon.svg">
No Derivatives (ND)
<p>
You may not create derivatives of the licensed work.
</p>
<p hidden>
The licensor permits others to copy, distribute and transmit only unaltered copies of the work --
not derivative works based on it.</p><br>
</div>
</div>
<div class="column is-one-third">
<div class="edu-icons-section">
<img src="assets/license-icons/cc-sa_icon.svg">
Share-Alike (SA)
<p>
You may create and distribute derivative works, but only under the same or a compatible license.
</p>
<p hidden>
The licensor permits others to distribute derivative works, only under the same
license or one compatible with the one that governs the licensor's work.</p><br>
</div>
<div class="edu-icons-section">
<img src="assets/license-icons/cc-nc_icon.svg">
Non-Commercial (NC)
<p>
The licensor permits others to copy, distribute and transmit the work. In return,
licensees may not use the work for commercial purposes -- unless they get the
licensor's permission.</p><br>
</div>
</div>
</div>
<h1 class="title is-1">CC License Chooser</h1>
<p align="center">You can click the buttons below to get answers to the questions on them!</p>
<br>
<div class="columns" id="questions-buttons">
<div class="column is-one-half">
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q1')">What Are Creative Commons Licenses?</a><br>
Expand Down Expand Up @@ -324,6 +259,74 @@ <h1 class="title is-1">[Some Title]</h1>
</div>
</div>
</div>
<br>
<div class="columns">
<div class="column is-one-third" id="icons-explanation">
<p>
Creative Commons licenses can be represented by their names, their
associated icons, or both. For example, a cc-by-nc license, which
requires attribution, and prohibits commercial use could be represented its:
<br><br>
<ul>
<li>
<span>
<b>&nbsp;&nbsp;&nbsp;&nbsp; - Name: </b> CC-BY-NC, or Attribution-NonCommercial
</span>
</li>
<li>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OR</p>
</li>
<li>
<span>
<b>&nbsp;&nbsp;&nbsp;&nbsp; - Icons: </b>
<span class="generated-icons">
<img src="assets/cc.svg" title="The CC Logo">
<img src="assets/license-icons/cc-by_icon.svg" title="Attribution (BY)">
<img src="assets/license-icons/cc-nc_icon.svg" title="NonCommercial (NC)">
</span>
</span>
</li>
</ul>
</p> <br>
</div>
<div class="column is-one-third">
<div class="edu-icons-section">
<img src="assets/license-icons/cc-by_icon.svg">
Attribution (BY) <br>
<p>You must attribute the work in the manner specified by the author or licensor.</p> <br>
</div>
<div class="edu-icons-section">
<img src="assets/license-icons/cc-nd_icon.svg">
NoDerivatives (ND)
<p>
You may not create derivatives of the licensed work.
</p>
<p hidden>
The licensor permits others to copy, distribute and transmit only unaltered copies of the work --
not derivative works based on it.</p><br>
</div>
</div>
<div class="column is-one-third">
<div class="edu-icons-section">
<img src="assets/license-icons/cc-sa_icon.svg">
ShareAlike (SA)
<p>
You may create and distribute derivative works, but only under the same or a compatible license.
</p>
<p hidden>
The licensor permits others to distribute derivative works, only under the same
license or one compatible with the one that governs the licensor's work.</p><br>
</div>
<div class="edu-icons-section">
<img src="assets/license-icons/cc-nc_icon.svg">
NonCommercial (NC)
<p>
The licensor permits others to copy, distribute and transmit the work. In return,
licensees may not use the work for commercial purposes -- unless they get the
licensor's permission.</p><br>
</div>
</div>
</div>
<div align="center">
<b>Tip:</b> You can click any <img class="modal-icon" src="assets/info-icon.svg" title="Except this one ;)">
icons you see to get more information!
Expand Down Expand Up @@ -551,10 +554,10 @@ <h1 class="title is-1">This is the dropdown click area</h1>
<h1 class="title is-2">Have a web page? Embed your license info!</h1>
<span id="html-generator-generated-richtext-container">
[Work] by [Author] is licenced under <a>CC BY NC 4.0</a>
<span id="html-generator-richtext-container-icons">
<img src="assets/license-icons/cc_icon.svg" style="width: 20px;">
<img src="assets/license-icons/cc-by_icon.svg" style="width: 20px;">
<img src="assets/license-icons/cc-nc_icon.svg" style="width: 20px;">
<span id="html-generator-richtext-container-icons" class="generated-icons">
<img src="assets/license-icons/cc_icon.svg">
<img src="assets/license-icons/cc-by_icon.svg">
<img src="assets/license-icons/cc-nc_icon.svg">
</span>
</span> <br>
<a class="button is-link generator-copy-button">Copy Rich Text</a>
Expand Down
1 change: 1 addition & 0 deletions src/styles/sass/bulma-mods.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

$cc-orange: #ef9421;
$light-grey: #a7a9ac;
$dark-grey: hsl(0, 0%, 0%);

$primary: $cc-orange;
$default: $cc-orange;
Expand Down