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

19
public/style.css
View File

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

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

@ -80,10 +80,13 @@
.project-header-img {
/* w-100 h5 bg-white-50 bg-center cover */
width: 100%;
height: var(--height-5);
/* TODO(redesign): Better placeholder */
background-color: rgba(255, 255, 255, 0.5);
background-size: cover;
@media screen and (min-width: 35em) {
height: var(--height-5);
}
}
.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 {
width: 100%;
max-width: var(--site-width-narrow);
@ -110,5 +122,7 @@
gap: var(--spacing-3);
overflow: hidden;
@media screen and (min-width: 35em) {
margin-top: -4rem;
}
}

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

@ -9,9 +9,9 @@
{{ define "content" }}
<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="flex justify-between pa3">
<div class="flex flex-column flex-row-ns pa2 pa3-ns">
<div class="flex g3">
{{ if .CanEdit }}
<div class="project-links">
@ -19,7 +19,8 @@
</div>
{{ end }}
</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 }}
<div class="project-links">
{{ range . }}
@ -105,7 +106,7 @@
</div>
</div>
{{ 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>
<hr class="mv3">
<div class="longdesc-content post-content maxh-5 overflow-hidden">
@ -121,8 +122,8 @@
</div>
{{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}
<div class="bg1 mt4 bt bb pv4">
<div class="m-center mw-site flex g3">
<div class="flex flex-column g3">
<div class="m-center mw-site flex g3 ph3 ph0-ns">
<div class="dn flex-ns flex-column g3">
<div class="bg3 pa3 w5 flex flex-column g2">
Filters
<div class="timeline-filters flex flex-column g1">