Skip to content

Commit 89504bf

Browse files
kgodeykgodey
authored
Merge pull request creativecommons#96 from creativecommons/homepage_redesign
Redesigned homepage to have cards with clear calls to action.
2 parents 173ae21 + a2d49b4 commit 89504bf

10 files changed

+116
-68
lines changed

‎content/comments-solid.png

6.16 KB
Loading

‎content/contents.lr

+88-32
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,93 @@
11
_model: page
22
---
3-
title: Technology at Creative Commons
3+
title: Open Source at CC
44
---
55
body:
66

7-
**[Creative Commons](https://creativecommons.org/)** has been building free software for over a decade to support our mission of maximizing digital creativity, sharing, and innovation. Our projects come in all sizes and shapes, from simple static websites to building fast and relevant search interfaces to the 1.6 billion+ Creative Commons works currently available on the internet. Our engineering team is fairly small and spread thin, so we're really appreciative of volunteers who help us build or test our software.
8-
9-
## Getting Involved
10-
11-
You can contribute to CC's software in a few different ways.
12-
13-
### Finding bugs and suggesting features
14-
15-
Using our software (such as [the new version of CC Search](http://search.creativecommons.org/)) and letting us know how it's working for you is very helpful. General suggestions, bug reports, a request to build a new feature – any form of feedback is excellent, no matter how small.
16-
17-
You can send us feedback in a few different ways. If you have a GitHub account, [creating a GitHub issue](https://help.github.com/articles/creating-an-issue/) is easiest for us because that's where we track our work. If you know which GitHub repository (see [a full list here](/projects)) corresponds to the software about which you'd like to give us feedback, then please create an issue attached to that repository. If you're not sure what that means or you don't know the correct repository, please create an issue [on the creativecommons.org repository](https://github.com/creativecommons/creativecommons.org/issues). You can also send us feedback in the `#cc-usability` channel [on the CC Slack community](http://creativecommons.github.io/community/#slack) or via email at `software@creativecommons.org`.
18-
19-
### Contributing code
20-
21-
Please see [Contributing Code](/contributing-code).
22-
23-
### Writing a technical blog post
24-
25-
Please see [Write a Blog Post](/community/write-a-blog-post).
26-
27-
### Integrating CC license metadata into your app
28-
29-
Please see [the "Integrate" page on the CC wiki](https://wiki.creativecommons.org/wiki/Integrate).
30-
31-
### Helping translate our content
32-
33-
Please see [the "Translate" page on the CC wiki](https://wiki.creativecommons.org/wiki/Translate).
34-
35-
### Contributing design
36-
37-
If you'd like to improve the design of one of our tools or products, please propose your change in [one of our community forums](/community) and collaborate with a CC staff member if requested to before making any changes.
7+
**[Creative Commons](https://creativecommons.org/)** has been building free software for over a decade to support our mission of maximizing digital creativity, sharing, and innovation. We work on products that, among other things, make applying CC licenses to content easier, help users find CC licensed content easily, promote and educate users about CC licenses and copyright, and connect the global CC community. Our projects come in all sizes and shapes, from several simple static websites to making the 1.6 billion+ Creative Commons works currently available on the internet [searchable](https://search.creativecommons.org/).
8+
9+
## Get Involved
10+
11+
So if you're looking to integrate CC licenses or CC licensed works into your application or you'd like to help us build our products, you're in the right place! We really appreciate community contributions and feedback (we're a small team and spread thin) and we especially love seeing what you build using CC's tools.
12+
13+
<div class="card-deck">
14+
<div class="card get-involved-card border-dark mb-4">
15+
<h5 class="card-title text-center"><strong>Join the Community</strong></h5>
16+
<div class="card-img-top">
17+
<img class="mx-auto d-block" src="/comments-solid.png" alt="Community icon"/>
18+
</div>
19+
<div class="card-body" align="center">
20+
<p class="card-text text-center">Join the CC developer chat and mailing list communities to sconnect with other developers working with CC tools.</p>
21+
<a href="/community" class="btn btn-sm btn-outline-primary">Chat and list information</a>
22+
</div>
23+
</div>
24+
25+
<div class="card get-involved-card border-dark mb-4">
26+
<h5 class="card-title text-center"><strong>Contribute Code</strong></h5>
27+
<div class="card-img-top">
28+
<img class="mx-auto d-block" src="/laptop-code-solid.png" alt="Code icon"/>
29+
</div>
30+
<div class="card-body" align="center">
31+
<p class="card-text text-center">Look through our open issues or suggest features that you'd like to use. All skill levels are welcome.</p>
32+
<a href="/contributing-code" class="btn btn-sm btn-outline-primary">Guidelines</a>
33+
<a href="https://github.com/creativecommons" class="btn btn-sm btn-outline-primary">"Help Wanted" issues</a>
34+
</div>
35+
</div>
36+
37+
<div class="card get-involved-card border-dark mb-4">
38+
<h5 class="card-title text-center"><strong>Integrate with CC Tools</strong></h5>
39+
<div class="card-img-top">
40+
<img class="mx-auto d-block" src="/creative-commons-remix-brands.png" alt="CC remix icon"/>
41+
</div>
42+
<div class="card-body" align="center">
43+
<p class="card-text text-center">Use CC-licensed works in your application or (coming soon!) use our WordPress plugin to license your content.</p>
44+
<a href="https://api.creativecommons.engineering/" class="btn btn-sm btn-outline-primary">Catalog API</a>
45+
</div>
46+
</div>
47+
48+
<div class="card get-involved-card border-dark mb-4">
49+
<h5 class="card-title text-center"><strong>Show Off Your Work</strong></h5>
50+
<div class="card-img-top">
51+
<img class="mx-auto d-block" src="/keyboard-solid.png" alt="Keyboard icon icon"/>
52+
</div>
53+
<div class="card-body" align="center">
54+
<p class="card-text text-center">If you've worked on software that uses CC licenses or tools, tell the community about it on <a href="/blog">our tech blog</a>.</p>
55+
<a href="/community/write-a-blog-post/" class="btn btn-sm btn-outline-primary">Write a blog post</a>
56+
</div>
57+
</div>
58+
59+
<div class="card get-involved-card border-dark mb-4">
60+
<h5 class="card-title text-center"><strong>Test our Software</strong></h5>
61+
<div class="card-img-top">
62+
<img class="mx-auto d-block" src="/vials-solid.png" alt="Test tubes icon"/>
63+
</div>
64+
<div class="card-body" align="center">
65+
<p class="card-text text-center">Let us know how our tools are working for you! All projects in the page below that have a website URL are fair game.</p>
66+
<a href="/projects" class="btn btn-sm btn-outline-primary">All active projects</a>
67+
</div>
68+
</div>
69+
70+
<div class="card get-involved-card border-dark mb-4">
71+
<h5 class="card-title text-center"><strong>Translate our Content</strong></h5>
72+
<div class="card-img-top">
73+
<img class="mx-auto d-block" src="/language-solid.png" alt="Translation icon"/>
74+
</div>
75+
<div class="card-body" align="center">
76+
<p class="card-text text-center">Translate our content into your language. Contact us if you'd like to write code to make this process easier for new tools.</p>
77+
<a href="https://wiki.creativecommons.org/wiki/Translate" class="btn btn-sm btn-outline-primary">Translation information</a>
78+
</div>
79+
</div>
80+
81+
<div class="card get-involved-card border-dark mb-4">
82+
<h5 class="card-title text-center"><strong>Contribute Design</strong></h5>
83+
<div class="card-img-top">
84+
<img class="mx-auto d-block" src="/pencil-ruler-solid.png" alt="Pencil and ruler icon"/>
85+
</div>
86+
<div class="card-body" align="center">
87+
<p class="card-text text-center">Contribute to our brand new set of standard UI components and help us apply it to all existing projects.</p>
88+
<a href="https://github.com/creativecommons/cc-vocabulary" class="btn btn-sm btn-outline-primary">CC Vocabulary</a>
89+
</div>
90+
</div>
91+
</div>
92+
93+
<p class="small muted"><em>All icons are from <a href="https://fontawesome.com/">Font Awesome</a>, licensed under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</em></p>

‎content/creative-commons-remix-brands.png

8.02 KB
Loading

‎content/keyboard-solid.png

3.06 KB
Loading

‎content/language-solid.png

6.79 KB
Loading

‎content/laptop-code-solid.png

3.85 KB
Loading

‎content/pencil-ruler-solid.png

5.02 KB
Loading

‎content/vials-solid.png

3.11 KB
Loading

‎webpack/package-lock.json

+11-30
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎webpack/sass/main.scss

+17-6
Original file line numberDiff line numberDiff line change
@@ -74,23 +74,34 @@ h2 {
7474
color: $text-color;
7575
}
7676

77-
@mixin style {
77+
@mixin large-border-style {
7878
background-color: $white;
79+
padding-left: 0px;
80+
}
81+
82+
.featured-project-card {
83+
@include large-border-style();
7984
border: {
8085
left-color: $project-card-theme !important;
8186
left-width: 10px;
8287
}
83-
padding-left: 0px;
88+
min-width: 20rem;
89+
max-width: 20rem;
8490
}
8591

86-
.featured-project-card {
87-
@include style();
88-
min-width: 20rem;
92+
.get-involved-card {
93+
min-width: 16rem;
8994
max-width: 20rem;
95+
border: 0;
96+
padding: 0.5rem 0rem;
9097
}
9198

9299
.project-idea-header {
93-
@include style();
100+
@include large-border-style();
101+
border: {
102+
bottom-color: $project-card-theme !important;
103+
bottom-width: 10px;
104+
}
94105
font-size: 1.5em;
95106
}
96107

0 commit comments

Comments
 (0)