-
-
-->
-
CC License Chooser
-
+
+
+
CC License Chooser
+
Tip: You can click any 
icons you see to get more information!
-
icons you see to get more information!
- +
-
+
+
Have a work you want to license with the Creative Commons plaform,
but not sure which one is right for you? Use our license chooser!
+
-
-
+
Your License!
+
+
-
- +
![]()
-
+
Your License!
{{chooser.selected_license}}-
{{chooser.selected_license_short}}
- +
{{chooser.selected_license_short}}
+
-
Confused? Need Help?
+Confused? Need Help?
You can click the buttons below to get answers to the questions on them!
- What Are Creative Commons Licenses?
+ + +
- How do the Licenses Work?
+ + +
- Want Public Domain Instead?
+
+
+
+ + +
+
diff --git a/src/scripts/page-controls.js b/src/scripts/page-controls.js
index eb664de40..4d3a19534 100644
--- a/src/scripts/page-controls.js
+++ b/src/scripts/page-controls.js
@@ -26,4 +26,19 @@ function destroy_modal(modal_id) {
function copy_text_to_clipboard() {
+}
+
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+ coll[i].addEventListener("click", function() {
+ this.classList.toggle("active");
+ var content = this.nextElementSibling;
+ if (content.style.display === "block") {
+ content.style.display = "none";
+ } else {
+ content.style.display = "block";
+ }
+ });
}
\ No newline at end of file
diff --git a/src/styles/sass/bulma-mods.scss b/src/styles/sass/bulma-mods.scss
index 1037d8b8b..7564716cf 100644
--- a/src/styles/sass/bulma-mods.scss
+++ b/src/styles/sass/bulma-mods.scss
@@ -1,5 +1,10 @@
-@charset "utf-8";
+/* Helpful Links
+scss mixin syntax example: https://github.com/jgthms/bulma/issues/351
+https://github.com/jgthms/bulma/issues/1818
+*/
+@charset "utf-8";
+@import "../../../node_modules/bulma/sass/utilities/mixins.sass";
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C600%2C700%7CRoboto+Condensed&ver=4.9.8");
$cc-orange: #ef9421;
@@ -9,6 +14,7 @@ $dark-grey: hsl(0, 0%, 0%);
$primary: $cc-orange;
$default: $cc-orange;
+
// Import only what you need from Bulma
@import "../../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../../node_modules/bulma/sass/base/_all.sass";
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 242beee3e..4f41eb526 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -43,6 +43,11 @@ header {
background: #ef9421;
}
+.site-title {
+ font-size: 50px;
+ margin-bottom: 1%;
+}
+
h1 {
text-align: center;
}
@@ -55,6 +60,14 @@ h3 {
text-align: center;
}
+.onmobile-hide {
+ display: block;
+}
+
+.choosercontrol-switch {
+ margin-bottom: 1%;
+}
+
.generated-icons img {
vertical-align: middle;
width: 25px;
@@ -68,14 +81,91 @@ h3 {
opacity: 1;
filter: alpha(opacity=100); /* msie */
}
-/*
-input[type="checkbox"] {
- background: #ef9421;
- text-align: center;
+
+/* Style the button that is used to open and close the collapsible content */
+.collapsible {
+ margin-left: 20%;
+ margin-bottom: 1.5%;
+ cursor: pointer;
+ width: 60%;
+ border: none;
+ border-width: 2px;
+ border-style: solid;
+ padding: 1.5%;
}
-input[type="checkbox"]:checked {
- background: #ef9421;
- content: "\2713";
- text-align: center;
-}*/
\ No newline at end of file
+.collapsible p {
+ font-size: 32px;
+ font-weight: 450;
+}
+
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.active, .collapsible:hover {
+ background-color: #ccc;
+}
+
+/* Style the collapsible content. Note: hidden by default */
+.content {
+ padding: 0 18px;
+ display: none;
+ overflow: hidden;
+}
+
+.selected-license {
+ margin-top: 2%
+}
+
+.selected-license-icons {
+ margin-top: 2%
+}
+
+@media only screen and (max-width: 600px) {
+ .site-container {
+ margin-left: 1.4%;
+ margin-right: 1.4%
+ }
+
+ .site-title {
+ font-size: 35px;
+ }
+
+ .choosercontrol-switch {
+ margin-bottom: 5%;
+ }
+
+ .onmobile-hide {
+ display: none;
+ }
+
+ .edu-icons-section-heading {
+ margin: auto;
+ width: 60%;
+ margin-bottom: 1%;
+ }
+
+ .button-text {
+ font-size: 18px;
+ font-weight: 500;
+ }
+
+ .modal-card {
+ margin-left: 10%;
+ margin-right: 10%
+ }
+
+ .collapsible {
+ margin-left: 1%;
+ margin-bottom: 4%;
+ cursor: pointer;
+ width: 98%;
+ border: none;
+ border-width: 2px;
+ border-style: solid;
+ padding: 3%;
+ }
+
+ .collapsible p {
+ font-size: 16px;
+ font-weight: 500;
+ }
+}
\ No newline at end of file
+ + +
@@ -281,7 +286,11 @@
Confused? Need Help?
+ + +
@@ -335,7 +344,11 @@
Confused? Need Help?
@@ -361,7 +374,11 @@
Confused? Need Help?
- Considerations Before Licensing
+ + +
- How do I Formally License my Work?
+ + +
- The Six CC Licenses
+
+
+
+ + +
@@ -393,7 +410,11 @@
Confused? Need Help?
+ + +
@@ -441,7 +462,11 @@
Confused? Need Help?
@@ -513,50 +538,63 @@
Confused? Need Help?
-
- Attribution (BY)
-
+
- Attribution (BY) -
You must attribute the work in the manner specified by the author or licensor.
+
+
+ Attribution (BY)
+
+
+ Attribution (BY)
+ You must attribute the work in the manner specified by the author or licensor.
- 
- NoDerivatives (ND)
+
+ not derivative works based on it.
- NoDerivatives (ND)
+
+
+ NoDerivatives (ND)
+
+ NoDerivatives (ND)
+ You may not create derivatives of the licensed work.
The licensor permits others to copy, distribute and transmit only unaltered copies of the work -- - not derivative works based on it.
+ not derivative works based on it.
- 
- ShareAlike (SA)
+
+ license or one compatible with the one that governs the licensor's work.
- ShareAlike (SA)
+
+
+ ShareAlike (SA)
+
+ ShareAlike (SA)
+ You may create and distribute derivative works, but only under the same or a compatible license.
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.
+ license or one compatible with the one that governs the licensor's work.
-
- NonCommercial (NC)
+
+ licensor's permission.
- NonCommercial (NC)
+
+
+ NonCommercial (NC)
+
+ NonCommercial (NC)
+ 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.
+ licensor's permission.
+ + +