Skip to content

Improves the user interface for resource cards and makes them responsive #298

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 35 commits into from
Jul 2, 2024
Merged

Improves the user interface for resource cards and makes them responsive #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
e393351
implemented image-title-blurb structure in thumbnailbox
Murdock9803 Jun 28, 2024
9967b50
enhanced style of thumbnaillist for grid structure
Murdock9803 Jun 28, 2024
2c2a395
enhanced style of thumbnailbox for grid structure and temporary border
Murdock9803 Jun 28, 2024
3017f9b
shifted .thumbnail selector in style.css and enhanced aspect ratio of…
Murdock9803 Jun 28, 2024
18f2908
corrected the font family and color for .thumbnailtitle in style.css
Murdock9803 Jun 28, 2024
4602033
formatted the file with prettier
Murdock9803 Jun 28, 2024
f17d737
changed the .main-content div to <main> to accompany vocabulary and b…
Murdock9803 Jun 29, 2024
68cb707
In .thumbnailbox, converted divs to appropriate elements and removed …
Murdock9803 Jun 29, 2024
65ed9da
structured the .thumbnailbox div in listing.html
Murdock9803 Jun 29, 2024
edacec3
removed the display-flex property from body in style.css
Murdock9803 Jun 29, 2024
8233b2d
added styles for <main> in style.css
Murdock9803 Jun 29, 2024
df0cb91
removed the extra border from thumbnailbox in style.css
Murdock9803 Jun 29, 2024
55cdfc5
refactored style for thumbnailblurb and thumbnailtitle to align with …
Murdock9803 Jun 29, 2024
d24c3d0
formatted the style.css file with prettier
Murdock9803 Jun 29, 2024
fb6bbc7
some more structuring and documentation of style.css
Murdock9803 Jun 29, 2024
6d67e8b
added 100% width to header and box-sizing:borderbox to every element
Murdock9803 Jun 29, 2024
76a6385
enhanced padding and margin properties for thumbnaillist and main in …
Murdock9803 Jun 29, 2024
f3c4af0
Added grid-auto-rows property to thumbnaillist grid in style.css
Murdock9803 Jun 29, 2024
e189458
Added width:100% to footer in style.css
Murdock9803 Jun 29, 2024
0073a3b
formatted the style.css with prettier
Murdock9803 Jun 29, 2024
c8de9fe
added vertical gap to the thumbnaillist grid in style.css
Murdock9803 Jun 29, 2024
d41da54
improved the font size in thmbnailbox title and blurb
Murdock9803 Jun 29, 2024
e010ad6
added responsive for max-width 1024px in thumbnaillist
Murdock9803 Jun 29, 2024
7a74218
added responsive for max-width 600px and 480px in thumbnaillist
Murdock9803 Jun 29, 2024
dba772e
formatted the style.css file with prettier
Murdock9803 Jun 29, 2024
aedf112
improved the bottom padding in thumbnaillist and height in thumbnailbox
Murdock9803 Jun 29, 2024
956802e
Merge branch 'main' into listing-card
Murdock9803 Jul 1, 2024
1e8c7d5
removed the * selector from style.css
Murdock9803 Jul 2, 2024
ae1778d
added listing-page class to body in listing.html
Murdock9803 Jul 2, 2024
6b51a58
Added box-sizing:border-box to appropriate locations in style.css
Murdock9803 Jul 2, 2024
4acbeb7
improved the edges for the thumbnaillist according to site's page-fit…
Murdock9803 Jul 2, 2024
41644e3
replaced the <div> with <article> tags in listing.html for semantic code
Murdock9803 Jul 2, 2024
3ac8343
restructured the article>article as ul>li>article for thumbnaillist i…
Murdock9803 Jul 2, 2024
a24e654
formatted the code with prettier and left spaces wherever appropriate
Murdock9803 Jul 2, 2024
c7f1011
removed the listing-page class from listing.html and style.css
Murdock9803 Jul 2, 2024
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
167 changes: 123 additions & 44 deletions docs/_assets/css/style.css
View file
Open in desktop
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
Open in desktop
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