Skip to content

Commit

Permalink
post cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@benrbray
benrbray committed Aug 12, 2024
1 parent b321578 commit 29ae0e0
Show file tree
Hide file tree
Showing 8 changed files with 104 additions and 66 deletions.
144 changes: 87 additions & 57 deletions src/components/content/PostSummary.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,65 +17,123 @@ const isProject = post.data.kind === "project";


<div class:list={[
"post-summary-box",
"post-summary",
`priority-${post.data.priority}`,
`kind-${post.data.kind === "project" ? "project" : "post"}`,
]}>
<!-- summary -->
<div class="post-desc">
<div class="summary-header">
<!-- title -->
<div class="post-title">
<a href={postUrl}
class:list={[{ unpublished: !postIsPublished(post) }]}
set:html={postDisplayTitle}
/>
<div class="header-title">
<div class="title">
<a href={postUrl}
class:list={[{ unpublished: !postIsPublished(post) }]}
set:html={postDisplayTitle}
/>
</div>
<div class="year"><FormattedDate date={post.data.datePublished} /></div>
</div>
<div class="post-subtitle">
<span class="post-year"><FormattedDate date={post.data.datePublished} /></span>
<div class="header-subtitle">
<PostTags tags={post.data.tags || []} tools={post.data.tools || []} />
</div>
{!isLowPriority && isProject && <div class="post-summary" set:html={post.data.summary} />}
</div>
<div class="summary-body">
<!-- summary -->
{
!isLowPriority && isProject &&
<div class="summary" set:html={post.data.summary} />
}
<!-- thumbnail -->
{
!isLowPriority && post.data.imageThumbnail &&
(<div class="post-thumb">
(<div class="thumb">
<img alt="" src={post.data.imageThumbnail} />
</div>)
}
</div>
</div>

<style>
.post-summary-box {
.post-summary {
margin: var(--gap-1) 0;
}

.post-summary {
padding: var(--gap-1);
border-radius: 0.2em;
border: .075rem solid #bfbfbf;

--shadow-distance: 0.2rem;
--shadow-color: #eaeaea;
box-shadow:
calc(-1 * var(--shadow-distance)) var(--shadow-distance) 0 0 var(--shadow-color);
}

.post-summary:hover {
/* --shadow-distance: 0.3rem;
--shadow-color: #e0e0e0;
border-width: 0.01rem;
border-color: #666; */

/* --shadow-distance-1: 0.2rem;
--shadow-distance-2: 0rem;
--shadow-color-1: rgba(0, 0, 0, 0.06);
--shadow-color-2: rgba(0, 0, 0, 0.05);
box-shadow:
calc(-0.5 * var(--shadow-distance-1)) var(--shadow-distance-1) 0 0 var(--shadow-color-1),
calc(-0.5 * var(--shadow-distance-2)) var(--shadow-distance-2) 0.4em 0em var(--shadow-color-2); */
}

.post-summary.kind-post { }
.post-summary.kind-project { }

/* header */

.summary-header {

}


.summary-header .header-title {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1.0rem;
gap: var(--gap-1);
margin-bottom: var(--gap-0);
font-size: var(--font-size-larger);
font-weight: var(--font-title-weight);

width: 100%;
margin: 1.0rem 0;
text-wrap: pretty;
}

@media (max-width: 52rem) {
.post-summary-box {
flex-direction: column;
}
.header-title .title { flex: 1; }
.header-title .year { flex: 0; }

.header-title .title a {
color: unset;
}

.post-summary-box.kind-project {
background-color: #ddf7ff;
padding: var(--gap-1);
.header-title .year {
font-weight: var(--font-normal-weight);
font-size: var(--font-size-large);
color: gray;
white-space: nowrap;
}

.post-summary-box.kind-post {
padding: 0 var(--gap-1);
/* body */

.summary-body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.0rem;

margin-top: var(--gap-0);
}

.post-summary-box .post-desc {
.summary-body .summary {
flex: 1;
}

.post-summary-box .post-thumb {
.summary-body .thumb {
flex-basis: 40%;
max-height: 8em;

Expand All @@ -85,37 +143,9 @@ const isProject = post.data.kind === "project";
overflow: hidden;
}

.post-summary-box .post-thumb img {
.summary-body .thumb img {
display: block;
min-width: 100%;
}

.post-summary-box .post-title {
/* display: flex; */
justify-content: space-between;

margin-bottom: var(--gap-0);
font-size: var(--font-size-large);
font-weight: var(--font-title-weight);
}

.post-summary-box .post-subtitle,
.post-summary-box .post-subtitle {
margin: var(--gap-0) 0;
text-overflow: hidden;
overflow: hidden;
}

.post-summary-box .post-summary p:first-child,
.post-summary-box .post-summary p:first-child {
margin-top: 0;
}

.post-summary-box .post-year,
.post-summary-box .post-year {
color: gray;
white-space: nowrap;
}

.post-summary-box .post-title a { color: unset; }
</style>
8 changes: 5 additions & 3 deletions src/components/content/PostTags.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,18 @@ const { tags, tools } = Astro.props;

<style>
.post-tags {

font-family: var(--sans-font);
}

.post-tags .tag,
.post-tags .tool {
display: inline-block;
margin: 0 0.1em;
padding: 0 0.3em;
padding: 0.1em 0.4em;
border-radius: 0.1em;
white-space: nowrap;
font-size: var(--font-size-small);
border: 1px solid;
border-radius: 0.2em;
}

.post-tags .tag {
Expand Down
6 changes: 6 additions & 0 deletions src/components/content/SeriesSummary.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,12 @@ const posts = await getSeriesPosts(series);
border-radius: var(--gap-1);
padding: var(--gap-1);
margin: var(--gap-1) 0;

border: 1px solid rgb(92, 153, 92);
--shadow-distance: 0.2rem;
--shadow-color: rgba(92, 153, 92, 0.25);
box-shadow:
calc(-1 * var(--shadow-distance)) var(--shadow-distance) 0 var(--shadow-color);
}

.series {
Expand Down
1 change: 0 additions & 1 deletion src/components/content/SeriesSummaryEntry.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ const label = series.isAppendix ?

.series .post-title {
display: inline-block;
font-size: var(--font-size-normal);
margin-bottom: 0.2em;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/structure/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import HeaderLink from './HeaderLink.astro';
<!-- <li class="header-button"><HeaderLink href="/series">Series</a></li> -->
<!-- <li class="header-button"><HeaderLink href="/favorites">Favorites</a></li> -->
<li class="header-button"><HeaderLink href="https://github.com/benrbray">GitHub</a></li>
<li class="header-button"><HeaderLink href="/resume-pdf">Resume</a></li>
<li class="header-button"><HeaderLink href="/resume">Resume</a></li>
<!-- <li class="header-button"><HeaderLink href="/sitemap">Sitemap</a></li> -->
</ul>
</nav>
Expand Down
2 changes: 1 addition & 1 deletion src/content/pages/resume.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ While I find my training in mathematics to be a source of both clarity & delight

I thrive in interdisciplinary spaces. I've never found it easy to categorize myself strictly as frontend/backend, researcher/engineer, high-level/low-level. I love working on projects that cross traditional boundaries, and value every opportunity to learn from experts in other fields.

I originally learned to program by making Flash games and uploading them to Newgrounds. There, I found a vibrant community of artists, musicians, and programmers with an infectious enthusiasm for game development.
I originally learned to code by making Flash games and uploading them to Newgrounds. There, I found a vibrant community of artists, musicians, and programmers with an infectious enthusiasm for game development.



Expand Down
2 changes: 1 addition & 1 deletion src/content/snippets/about-me.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ These days, I'm most interested in working on:
* Interactive editors for composing **rich text documents**.
* Numerical methods for graphics and simulation.

I most often reach for **TypeScript**, **Haskell**, or **Scala** when starting a new project. Recently I've also been exploring **Rust**.
I most often reach for **TypeScript** or **Haskell** when starting a new project. Recently I've also been learning **Rust**.

{/* My ambition is to design software which makes **formal verification** more accessible to developers. I'm particularly interested in improving the user experience of **dependently-typed programming**. */}

Expand Down
5 changes: 3 additions & 2 deletions src/styles/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@

/* font sizes */
--font-size-small: 0.8rem;
--font-size-normal: 0.95rem;
--font-size-normal: 1.0rem;
--font-size-large: 1.1rem;
--font-size-larger: 1.3rem;
--font-size-largest: 1.4rem;
Expand All @@ -52,7 +52,8 @@
/* fonts */
--code-font: "Droid Sans Mono", "Ubuntu Mono", "Consolas", monospace;
--serif-font: "Lora", Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
--sans-font: "Roboto", system-ui, sans-serif;
/* --sans-font: "Roboto", system-ui, sans-serif; */
--sans-font: system-ui, sans-serif;

/* font: normal */
--font-normal-family: var(--serif-font);
Expand Down

0 comments on commit 29ae0e0

Please sign in to comment.