Skip to content

Commit

Permalink
Merge pull request #304 from creativecommons/enhance-resource-page
Browse files Browse the repository at this point in the history 
refactored the html and css for resource page
  • Loading branch information
@possumbilities
possumbilities authored Jul 8, 2024
2 parents f666b16 + 644acd6 commit 986d81f
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 137 deletions.
75 changes: 45 additions & 30 deletions docs/_assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,49 +102,56 @@ h1 {
}

/* Styles For resource.html */
#preview {
width: 500px;
height: 375px;
.resource-page > main {
width: 60%;
margin: 0 auto;
background-image: url(/_assets/images/placeholder-500.gif);
border-radius: 25px;
}

#downloadbuttonholder {
height: 100px;
.resource-page main > header::before {
left: unset;
}

.topic-categories {
order: -1;
display: flex;
gap: 10px;
}

.resource-page main figure {
width: 100%;
margin: 0;
margin-bottom: 1em;
display: flex;
justify-content: center;
align-items: center;
margin: 10px auto;
}

#longdescription {
max-width: 500px;
margin: 0 auto;
border: 2px solid #c0c0c0;
border-radius: 25px;
padding: 10px;
}

.downloadbutton {
min-width: 150px;
width: max-content;
height: 70%;
padding: 0 5px;
border-radius: 8px;
background-color: #40ae49;
.resource-page iframe {
width: 100%;
}

.downloadlinks {
width: 100%;
background-color: var(--vocabulary-brand-color-soft-tomato);
padding: 2em;
box-sizing: border-box;
}

.downloadlinks a {
font-size: 1.2em;
--underline-background-color: var(--vocabulary-brand-color-soft-tomato);
margin-right: 1em;
}

.resource-license {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 4em;
}

.downloadbutton p {
height: 100%;
margin: 0;
font-size: 130%;
line-height: 75px;
color: white;
.resource-license p {
font-size: 1.1em;
}

/* Styles for submission.html */
Expand All @@ -165,6 +172,7 @@ footer .donate a {

/* Media Queries for responsiveness */
@media screen and (max-width: 1024px) {
/* For listing.html */
#thumbnaillist {
gap: 6vw 5%;
padding: 4em var(--vocabulary-page-edges-space) 8em;
Expand All @@ -184,6 +192,7 @@ footer .donate a {
}

@media screen and (max-width: 600px) {
/* For listing.html */
#thumbnaillist {
gap: 12vw 7%;
padding: 4em var(--vocabulary-page-edges-space) 8em;
Expand All @@ -201,12 +210,18 @@ footer .donate a {
font-size: 2.5vw;
}

/* For resource.html */
.resource-page > main {
width: 80%;
}

#resourcenavbar {
flex-direction: column;
}
}

@media screen and (max-width: 480px) {
/* For listing.html */
#thumbnaillist {
gap: 35vw 5%;
padding: 4em var(--vocabulary-page-edges-space) 8em;
Expand Down
225 changes: 118 additions & 107 deletions docs/_layouts/resource.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,127 +3,138 @@
<title>{{ page.title }} | Creative Commons</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/_assets/vocabulary/favicon/favicon.ico" sizes="any">
<link rel="icon" href="/_assets/vocabulary/favicon/favicon.svg" type="image/svg+xml">
<link rel="manifest" href="/_assets/vocabulary/favicon/manifest.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="/_assets/vocabulary/favicon/apple-touch-icon.png" />
<link
rel="icon"
href="/_assets/vocabulary/favicon/favicon.ico"
sizes="any"
/>
<link
rel="icon"
href="/_assets/vocabulary/favicon/favicon.svg"
type="image/svg+xml"
/>
<link
rel="manifest"
href="/_assets/vocabulary/favicon/manifest.webmanifest"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/_assets/vocabulary/favicon/apple-touch-icon.png"
/>
<link rel="stylesheet" type="text/css" href="/_assets/css/style.css" />
{% if page.downloadurl %} {% if page.repourl %}
<style>
#downloadbuttonholder {
width: 440px;
}
</style>
{% else %}
<style>
#downloadbuttonholder {
width: 220px;
}
</style>
{% endif %} {% elsif page.repourl %}
<style>
#downloadbuttonholder {
width: 220px;
}
</style>
{% endif %} {% if page.repourl contains 'layervault.com' %}
<style>
.downloadbutton.repository {
background-image: url("/images/layervault.png");
}
</style>
{% endif %} {% if page.repourl contains 'github.com' %}
<style>
.downloadbutton.repository {
background-image: url("/images/github.png");
}
</style>
{% endif %}
</head>
<body>
<body class="resource-page">
<!-- The standard CC header, located at docs/_includes/header.html -->
{% include header.html %}

<h2 style="text-align: center">{{ page.title }}</h2>
<main>
<!-- The main heading for the resource page -->
<header>
<h1>{{page.title}}</h1>
</header>

{% if page.embed %}
<div align="center">{{ page.embed }}</div>
{% else %} {% if page.image-full %}
<div id="preview" style="background-image: url({{page.image-full}})"></div>
{% else %}
<div id="preview"></div>
{% endif %} {% endif %} {% if page.downloadurl or page.repourl %}
<div id="downloadbuttonholder">
{% endif %} {% if page.downloadurl %}
<a href="{{ page.downloadurl }}" target="_blank">
<div class="downloadbutton">
{% if page.medium == "website" or page.medium == "course" %}
<p>Visit</p>
{% else %}
<p>View in Detail</p>
{% endif %}
</div>
</a>
{% endif %} {% if page.downloadurl or page.repourl %}
</div>
{% endif %}
<!-- If the resource containes embed property, then display the embedded video here -->
{% if page.embed %}
<figure>{{page.embed}}</figure>
{% else %}

<div style="clear: both"></div>
<!-- else, display the {image-full} image here -->
{% if page.image-full %}
<figure><img src="{{page.image-full}}" /></figure>
{% else %}

<div id="longdescription">{{content}}</div>
<!-- If the resource doesn't contain embed or image-full, display a placeholder here -->
<figure><img src="/_assets/images/placeholder-500.gif" /></figure>
{% endif %} {% endif %}

{% if page.license %} {% if page.license == 'CC0' %}
<p align="center">
<a rel="license" href="http://creativecommons.org/publicdomain/zero/1.0/"
><img
src="http://i.creativecommons.org/p/zero/1.0/88x31.png"
style="border-style: none"
alt="CC0"
/></a>
<br />
To the extent possible under law,
<span property="dct:publisher">{{ page.author }}</span> has waived all
copyright and related or neighboring rights to
<a href="{{ page.downloadurl}}" property="dct:title">{{ page.title }}</a>.
</p>
<!-- The links to download, view or visit the resource are present here -->
<article class="downloadlinks">
<!-- for pages containing download url -->
{% if page.downloadurl %}

{% else %}
<!-- If the page is website or a course, text should be "Visit" -->
{% if page.medium == "website" or page.medium == "course" %}
<a href="{{page.downloadurl}}">Visit</a>
{% else %}

<p align="center">
<a
rel="license"
href="http://creativecommons.org/licenses/{{ page.license | remove: 'CC ' | downcase | replace: ' ', '/' }}/"
><img
alt="Creative Commons License"
style="border-width: 0"
src="http://i.creativecommons.org/l/{{ page.license | remove: 'CC ' | downcase | replace: ' ', '/' }}/88x31.png" /></a
><br />
<!-- If the page is not a website or a course, text should be "View in detail" -->
<a href="{{page.downloadurl}}">View in detail</a>
{% endif %} {% endif %}

{% if page.downloadurl %}<a
href="{{ page.downloadurl }}"
rel="cc:attributionURL"
>{% endif %}<span
xmlns:dct="http://purl.org/dc/terms/"
property="dct:title"
>{{ page.title }}</span
>{% if page.downloadurl %}</a
>{% endif %}{% if page.author %} by
<span
xmlns:cc="http://creativecommons.org/ns#"
property="cc:attributionName"
>{{ page.author }}</span
>{% endif %} is licensed under
<a
rel="license"
href="http://creativecommons.org/licenses/{{ page.license | remove: 'CC ' | downcase | replace: ' ', '/' }}/"
>{{ page.license }}</a
>.
</p>
<!-- For pages containing repo url, text should View source -->
{% if page.repourl %}
<a href="{{page.repourl}}">View source</a>
{% endif %}
</article>

{% endif %} {% endif %}
<!-- All the content inside the pages following this layout will be present inside this <p>. -->
<p class="description">{{content}}</p>

<!-- Footer -->
{% include footer.html %}
<!-- If the page has a license specified -->
{% if page.license %}
<article class="resource-license">
<!-- If the page is licensed under CC0 -->
{% if page.license == 'CC0' %}
<a
rel="license"
href="http://creativecommons.org/publicdomain/zero/1.0/"
>
<img
src="http://i.creativecommons.org/p/zero/1.0/88x31.png"
alt="CC0"
/>
</a>
<p>
To the extent possible under law,
<span property="dct:publisher">{{ page.author }}</span> has waived all
copyright and related or neighboring rights to
<a href="{{ page.downloadurl}}" property="dct:title"
>{{ page.title }}</a
>.
</p>
{% else %}

<!-- If the page is licensed under another license format -->
<a
rel="license"
href="http://creativecommons.org/licenses/{{ page.license | remove: 'CC ' | downcase | replace: ' ', '/' }}/"
>
<img
alt="Creative Commons License"
src="http://i.creativecommons.org/l/{{ page.license | remove: 'CC ' | downcase | replace: ' ', '/' }}/88x31.png"
/>
</a>
<p>
{% if page.downloadurl %}
<a href="{{ page.downloadurl }}" rel="cc:attributionURL">
{% endif %}
<span xmlns:dct="http://purl.org/dc/terms/" property="dct:title"
>{{ page.title }}</span
>
{% if page.downloadurl %}
</a>
{% endif %}{% if page.author %} by
<span
xmlns:cc="http://creativecommons.org/ns#"
property="cc:attributionName"
>{{ page.author }}</span
>{% endif %} is licensed under
<a
rel="license"
href="http://creativecommons.org/licenses/{{ page.license | remove: 'CC ' | downcase | replace: ' ', '/' }}/"
>{{ page.license }}</a
>.
</p>

{% endif %}
</article>
{% endif %}
</main>

<!-- The standard CC footer, located at docs/_includes/footer.html -->
{% include footer.html %}
</body>
<!-- Including vocabulary.js from vocabulary directory -->
<script src="/_assets/vocabulary/js/vocabulary.js"></script>
</html>

0 comments on commit 986d81f

Please sign in to comment.