Skip to content

Essays left, tools right on desktop so both are visible from the jump #7

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

Open
Korede-TA wants to merge 1 commit into
base: main
Choose a base branch
from
+96 −65
Open

Essays left, tools right on desktop so both are visible from the jump #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 11 additions & 0 deletions components/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,15 @@ export const layoutDefaultClasses: StyleClasses = {
settingsBlockAction: "link dim ph3 pv2 hide",
settingsBlockDropdown: "link dim ph3 pv2 underline",
postDescription: "f7 pv1 gray",

// The intro promises "essays and visualizations", so on desktop the two sit
// side by side and both land above the fold. Below -l they stack back into
// source order: essays, then tools.
splitSections: "flex-l flex-row-l items-start-l mb4",
essaysSection: "w-100 w-60-l pr4-l",
toolsSection: "w-100 w-40-l",
toolsList: "f5 list pl2 pl0-l flex flex-row flex-wrap w-100",
// full width inside the narrow desktop column, two-up on tablet
toolCard: "pa1 flex flex-column w-100 w-50-ns w-100-l mb1 mt1",
toolThumb: "tool-thumb",
};
126 changes: 61 additions & 65 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,28 @@ const homePageText = [
];
const textVersion = 0;

const tools = [
{
title: "African Artifacts Index",
url: "https://artifacts-index.surulere.dev",
image: "/artifacts-index-preview.png",
description:
"Cross-cultural index of museum collections for discovery and comparative analysis",
},
{
title: "Archive 3D",
url: "https://archive-3d.surulere.dev",
image: "/archive-3d-preview.jpeg",
description: "Visualize and explore vector-similar archives in 3D",
},
{
title: "Map Tool",
url: "https://map-tool.surulere.dev",
image: "/map-tool-preview.png",
description: "Simple tool to view and share maps on the web.",
},
];

interface HomePageContentProps extends types.PageProps {
substackHandle?: string;
substackEssays?: SubstackEssay[];
Expand Down Expand Up @@ -110,25 +132,26 @@ export const HomePageContent: React.FC<HomePageContentProps> = ({

return (
<div id="content" className={classes.content}>
<div id="about pb5">
<div id="about">
<p className={classes.tagline}>{homePageText[textVersion].tagline}</p>

<p className={classes.description}>
{homePageText[textVersion].description}
</p>
</div>

<b className={classes.postsTitle}>ESSAYS</b>
<a
href={`https://${substackHandle}.substack.com/`}
target="_blank"
rel="noopener noreferrer"
className={classes.postDescription}
style={{ display: "inline-block", marginBottom: "1rem", opacity: 0.7, marginLeft: "10px" }}
>
Read on Substack <ExternalLinkIcon />
</a>
<>
<div className={classes.splitSections}>
<section id="essays" className={classes.essaysSection}>
<b className={classes.postsTitle}>ESSAYS</b>
<a
href={`https://${substackHandle}.substack.com/`}
target="_blank"
rel="noopener noreferrer"
className={classes.postDescription}
style={{ display: "inline-block", marginBottom: "1rem", opacity: 0.7, marginLeft: "10px" }}
>
Read on Substack <ExternalLinkIcon />
</a>
{allItems.length > 0 && (
<ul className={classes.postsList} style={{ listStyle: "none", padding: 0 }}>
{allItems.map((item: any, i) => (
Expand Down Expand Up @@ -173,61 +196,34 @@ export const HomePageContent: React.FC<HomePageContentProps> = ({
scrolling="no"
/>
)}
</>
<br />
</section>

<b className={classes.postsTitle}>TOOLS</b>
<ul className={"f5 pl2 flex flex-row gap-2 flex-wrap w-100"}>
{[
{
title: "African Artifacts Index",
url: "https://artifacts-index.surulere.dev",
image: "/artifacts-index-preview.png",
description: "Cross-cultural index of museum collections for discovery and comparative analysis",
},
{
title: "Archive 3D",
url: "https://archive-3d.surulere.dev",
image: "/archive-3d-preview.jpeg",
description: "Visualize and explore vector-similar archives in 3D",
},
{
title: "Map Tool",
url: "https://map-tool.surulere.dev",
image: "/map-tool-preview.png",
description: "Simple tool to view and share maps on the web.",
},
].map((tool, i) => (
<div
key={i}
className={`pa1 flex flex-column w-50-ns w-100 mb1 mt1 pr4-l`}
>
<a
className={classes.postLink + " flex flex-column gap-2 pa1"}
href={tool.url}
target="_blank"
>
<div
style={{ width: "100%", height: "175px", overflow: "hidden" }}
>
<img
src={tool.image}
alt={tool.title}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
/>
</div>
<span className={classes.postLink}>{tool.title}</span>
</a>
<section id="tools" className={classes.toolsSection}>
<b className={classes.postsTitle}>TOOLS</b>
<ul className={classes.toolsList}>
{tools.map((tool, i) => (
<li key={i} className={classes.toolCard}>
<a
className={classes.postLink + " flex flex-column pa1"}
href={tool.url}
target="_blank"
>
<div className={classes.toolThumb}>
<img src={tool.image} alt={tool.title} />
</div>
<span className={classes.postLink}>{tool.title}</span>
</a>

<span className={classes.postDescription}>
{tool.description?.length > 200
? tool.description?.substring(0, 197) + "..."
: tool.description}
</span>
</div>
))}
</ul>
<br />
<span className={classes.postDescription}>
{tool.description?.length > 200
? tool.description?.substring(0, 197) + "..."
: tool.description}
</span>
</li>
))}
</ul>
</section>
</div>

<b className={classes.postsTitle}>ARCHIVES</b>
<p className={classes.postDescription}>
Expand Down
24 changes: 24 additions & 0 deletions styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,30 @@ body.DARK {
border-color: var(--border-color),
}

/*
* home page tool cards
*/

.tool-thumb {
width: 100%;
height: 175px;
overflow: hidden;
}

.tool-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* at -l the cards share a row with the essays list, so they get a shorter crop
to keep all three in view without scrolling */
@media screen and (min-width: 60em) {
.tool-thumb {
height: 140px;
}
}

.horizontal-scroll-shadow{
background-image: linear-gradient(to right, transparent, transparent), linear-gradient(to right, transparent, transparent), linear-gradient(to right, rgba(0, 0, 20, .10), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 20, .10), rgba(255, 255, 255, 0));
/* Shadows */
Expand Down
Loading