hmn
/
hmn
Archived
4
Fork 10
Code Issues 60 Pull Requests Releases Activity

Project homepage tweaks

This commit is contained in:
Ben Visness 2024-07-05 12:58:59 -05:00
parent ffcaf6c463
commit d16670360e
3 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/style.css
View File

@ -8563,10 +8563,14 @@ span.icon-rss::before {
} }
.project-header-img { .project-header-img {
width: 100%; width: 100%;
height: var(--height-5);
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
background-size: cover; background-size: cover;
} }
@media screen and (min-width: 35em) {
.project-header-img {
height: var(--height-5);
}
}
.project-links { .project-links {
background-color: var(--c-transparent-background); background-color: var(--c-transparent-background);
display: flex; display: flex;
@ -8578,6 +8582,15 @@ span.icon-rss::before {
content: "\200b"; content: "\200b";
padding: var(--spacing-2) 0; padding: var(--spacing-2) 0;
} }
.project-links-spacer {
height: var(--height-4);
}
@media screen and (min-width: 35em) {
.project-links-spacer {
height: auto;
flex-grow: 1;
}
}
.project-homepage-card { .project-homepage-card {
width: 100%; width: 100%;
max-width: var(--site-width-narrow); max-width: var(--site-width-narrow);
@ -8587,7 +8600,11 @@ span.icon-rss::before {
display: flex; display: flex;
gap: var(--spacing-3); gap: var(--spacing-3);
overflow: hidden; overflow: hidden;
margin-top: -4rem; }
@media screen and (min-width: 35em) {
.project-homepage-card {
margin-top: -4rem;
}
} }
/* src/rawdata/scss/showcase.css */ /* src/rawdata/scss/showcase.css */

18
src/rawdata/scss/projects.css
View File

@ -80,10 +80,13 @@
.project-header-img { .project-header-img {
/* w-100 h5 bg-white-50 bg-center cover */ /* w-100 h5 bg-white-50 bg-center cover */
width: 100%; width: 100%;
height: var(--height-5);
/* TODO(redesign): Better placeholder */ /* TODO(redesign): Better placeholder */
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
background-size: cover; background-size: cover;
@media screen and (min-width: 35em) {
height: var(--height-5);
}
} }
.project-links { .project-links {
@ -100,6 +103,15 @@
} }
} }
.project-links-spacer {
height: var(--height-4);
@media screen and (min-width: 35em) {
height: auto;
flex-grow: 1;
}
}
.project-homepage-card { .project-homepage-card {
width: 100%; width: 100%;
max-width: var(--site-width-narrow); max-width: var(--site-width-narrow);
@ -110,5 +122,7 @@
gap: var(--spacing-3); gap: var(--spacing-3);
overflow: hidden; overflow: hidden;
margin-top: -4rem; @media screen and (min-width: 35em) {
margin-top: -4rem;
}
} }

13
src/templates/src/project_homepage.html
View File

@ -9,9 +9,9 @@
{{ define "content" }} {{ define "content" }}
<div class="flex justify-center"> <div class="flex justify-center">
<div class="flex-grow-1 flex flex-column items-center mw-site pt4"> <div class="flex-grow-1 flex flex-column items-center mw-site pt4-ns">
<div class="project-header-img" style="background-image: url('{{ .Project.HeaderImage }}')"> <div class="project-header-img" style="background-image: url('{{ .Project.HeaderImage }}')">
<div class="flex justify-between pa3"> <div class="flex flex-column flex-row-ns pa2 pa3-ns">
<div class="flex g3"> <div class="flex g3">
{{ if .CanEdit }} {{ if .CanEdit }}
<div class="project-links"> <div class="project-links">
@ -19,7 +19,8 @@
</div> </div>
{{ end }} {{ end }}
</div> </div>
<div class="flex g3"> <div class="project-links-spacer"></div>
<div class="flex flex-column flex-row-ns items-end g2 g3-ns">
{{ with .PrimaryLinks }} {{ with .PrimaryLinks }}
<div class="project-links"> <div class="project-links">
{{ range . }} {{ range . }}
@ -105,7 +106,7 @@
</div> </div>
</div> </div>
{{ if .Project.ParsedDescription }} {{ if .Project.ParsedDescription }}
<div id="longdesc" class="description w-100 mw-site-narrow pt4"> <div id="longdesc" class="description w-100 ph3 ph0-ns mw-site-narrow pt4">
<h3 class="f4">About {{ .Project.Name }}</h3> <h3 class="f4">About {{ .Project.Name }}</h3>
<hr class="mv3"> <hr class="mv3">
<div class="longdesc-content post-content maxh-5 overflow-hidden"> <div class="longdesc-content post-content maxh-5 overflow-hidden">
@ -121,8 +122,8 @@
</div> </div>
{{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }} {{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}
<div class="bg1 mt4 bt bb pv4"> <div class="bg1 mt4 bt bb pv4">
<div class="m-center mw-site flex g3"> <div class="m-center mw-site flex g3 ph3 ph0-ns">
<div class="flex flex-column g3"> <div class="dn flex-ns flex-column g3">
<div class="bg3 pa3 w5 flex flex-column g2"> <div class="bg3 pa3 w5 flex flex-column g2">
Filters Filters
<div class="timeline-filters flex flex-column g1"> <div class="timeline-filters flex flex-column g1">