Skip to content

Commit

Permalink
Merge pull request #298 from creativecommons/listing-card
Browse files Browse the repository at this point in the history 
Improves the user interface for resource cards and makes them responsive
  • Loading branch information
@possumbilities
possumbilities authored Jul 2, 2024
2 parents d88e8b6 + c7f1011 commit f25f12e
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 76 deletions.
167 changes: 123 additions & 44 deletions docs/_assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,23 @@
body {
font-family: sans-serif;
margin: 0;
display: flex;
flex-direction: column;
width: 100%;
padding: 0 0 0;
}

/* Styles for listing.html and submission.html*/
.main-content a {
color: #40ae49;
header {
width: 100%;
}

/* Styles common for all the pages*/
main {
width: 100%;
padding: 0 0;
}

main a {
cursor: pointer;
height: fit-content;
}

h1 {
Expand All @@ -22,38 +30,71 @@ h1 {

/* Styles for listing.html resource thumbnail cards */
#thumbnaillist {
max-width: 900px;
min-width: 250px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
margin: 4em 0 0;
padding: 4em var(--vocabulary-page-edges-space) 16em;
gap: 10% 5%;
box-sizing: border-box;
width: 100%;
height: fit-content;
background: var(--vocabulary-neutral-color-lighter-gray);
grid-auto-rows: minmax(100px, auto);
list-style: none;
}

.thumbnailbox {
width: 200px;
float: left;
display: block;
border-radius: 25px;
border: 2px solid #c0c0c0;
margin: 5px;
grid-column: span 3;
height: fit-content;
}

.thumbnailLink {
text-decoration: none;
--underline-background-color: var(--vocabulary-neutral-color-lighter-gray);
}

.thumbnail {
width: 100%;
aspect-ratio: 200/150;
margin: 0 auto;
}

.thumbnailtitle {
text-align: center;
height: 75px;
font-family: "Roboto Condensed";
font-style: normal;
font-weight: 700;
font-size: 1.6vw;
}

.thumbnailblurb {
height: 100px;
padding: 5px;
color: #000;
font-size: 1.3vw;
font-family: "Source Sans Pro";
font-style: normal;
font-weight: 400;
}

.thumbnail {
/* Styles For index.html and all.html */
#resourcenavbar {
height: fit-content;
margin: 0 auto 100px;
display: flex;
justify-content: center;
}

.resourcenav {
width: 200px;
height: 150px;
margin: 0 auto;
height: fit-content;
display: none;
}

.resourcenav.resourcenavstatic {
display: block;
}

#bannercc {
width: 210px;
height: 50px;
margin-left: 100px;
}

/* Styles For resource.html */
Expand Down Expand Up @@ -102,31 +143,14 @@ h1 {
color: white;
}

/* Styles For index.html and all.html */
#resourcenavbar {
height: fit-content;
margin: 0 auto 100px;
display: flex;
justify-content: center;
}

.resourcenav {
width: 200px;
height: fit-content;
display: none;
}
/* Styles for submission.html */

.resourcenav.resourcenavstatic {
display: block;
}

#bannercc {
width: 210px;
height: 50px;
margin-left: 100px;
/* Styles For footer.html */
footer {
box-sizing: border-box;
width: 100%;
}

/* Styles For footer.html */
footer a {
color: var(--vocabulary-brand-color-turquoise);
}
Expand All @@ -136,8 +160,63 @@ footer .donate a {
}

/* Media Queries for responsiveness */
@media screen and (max-width: 1024px) {
#thumbnaillist {
gap: 6vw 5%;
padding: 4em var(--vocabulary-page-edges-space) 8em;
}

.thumbnailbox {
grid-column: span 4;
}

.thumbnailtitle {
font-size: 2.4vw;
}

.thumbnailblurb {
font-size: 1.7vw;
}
}

@media screen and (max-width: 600px) {
#thumbnaillist {
gap: 12vw 7%;
padding: 4em var(--vocabulary-page-edges-space) 8em;
}

.thumbnailbox {
grid-column: span 6;
}

.thumbnailtitle {
font-size: 3.5vw;
}

.thumbnailblurb {
font-size: 2.5vw;
}

#resourcenavbar {
flex-direction: column;
}
}

@media screen and (max-width: 480px) {
#thumbnaillist {
gap: 35vw 5%;
padding: 4em var(--vocabulary-page-edges-space) 8em;
}

.thumbnailbox {
grid-column: span 12;
}

.thumbnailtitle {
font-size: 6.5vw;
}

.thumbnailblurb {
font-size: 5vw;
}
}
54 changes: 22 additions & 32 deletions docs/_layouts/listing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,52 +79,42 @@
<body>
{% include header.html %}

<div class="main-content">
<main>
{{content}}

<p style="text-align: center; padding: 1em">
<a href="/submit/">Submit a resource</a>
</p>

<div id="thumbnaillist">
<ul id="thumbnaillist">
{% for i in (1..16) %} {% for page in site.pages %} {% if page.layout ==
'resource' %} {% if page.featured == i %}
<div
class="thumbnailbox {{ page.topic }} {{ page.medium }} {{page.language}}"
>
<a class="thumbnailLink" href="{{ page.permalink }}">
<div class="thumbnailtitle"><h3>{{ page.title }}</h3></div>
<div
class="thumbnail"
style="background-image: url({{ page.image-thumb }});"
></div>
<div class="thumbnailblurb" style="color: rgb(0, 0, 0)">
{{ page.blurb }}
</div>
</a>
</div>
<li class="thumbnailbox {{ page.topic }} {{ page.medium }} {{page.language}}">
<article>

<img class="thumbnail" src="{{page.image-thumb}}"></img>
<h3 class="thumbnailtitle"><a class="thumbnailLink" href="{{ page.permalink }}">{{ page.title }}</a></h3>
<p class="thumbnailblurb">{{ page.blurb }}</p>

</article>
</li>
{% endif %} {% endif %} {% endfor %} {% endfor %} {% unless page.title
== 'Home' %} {% for i in (1..4) %} {% for page in site.pages %} {% if
page.layout == 'resource' %} {% if page.weight == i %} {% unless
page.featured %} {% if page.paramfilter == page.paramvalue %}
<div
class="thumbnailbox {{ page.topic }} {{ page.medium }} {{page.language}}"
>
<a class="thumbnailLink" href="{{ page.permalink }}">
<div class="thumbnailtitle"><h3>{{ page.title }}</h3></div>
<div
class="thumbnail"
style="background-image: url('{{ page.image-thumb }}'); "
></div>
<div class="thumbnailblurb" style="color: rgb(0, 0, 0)">
{{ page.blurb }}
</div>
</a>
</div>
<li class="thumbnailbox {{ page.topic }} {{ page.medium }} {{page.language}}">
<article>

<img class="thumbnail" src="{{page.image-thumb}}"></img>
<h3 class="thumbnailtitle"><a class="thumbnailLink" href="{{ page.permalink }}">{{ page.title }}</a></h3>
<p class="thumbnailblurb">{{ page.blurb }}</p>

</article>
</li>
{% endif %} {% endunless %} {% endif %} {% endif %} {% endfor %} {%
endfor %} {% endunless %}
</div>
</div>
</ul>
</main>

<!-- Footer -->
{% include footer.html %}
Expand Down

0 comments on commit f25f12e

Please sign in to comment.