Skip to content
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

More clean-up #104

Merged
merged 3 commits into from
Jan 24, 2024
+93 −75
Merged

More clean-up #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e3eede4
refactor to use text-secondary
tjheffner Jan 24, 2024
4a3ab9e
update footer icons, gallery warning
tjheffner Jan 24, 2024
2680188
update styles slightly, blog page mostly
tjheffner Jan 24, 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
1 change: 1 addition & 0 deletions .github/ISSUE_TEMPLATE/new-gallery-post.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ date: 2022-01-16 00:00:00
description: "will show underneath title on list page"
image: upload cover image here
alt: image alt text
warn: true
***

post content goes here, underneath
78 changes: 42 additions & 36 deletions src/lib/components/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script>
import Icon from '$lib/components/Icon.svelte'
import NavLink from '$lib/components/NavLink.svelte'
import { MY_TWITTER_HANDLE, LASTFM_ID, LETTERBOXD_ID, GH_USER } from '$lib/siteConfig'
import { TWITTER_ID, LASTFM_ID, LETTERBOXD_ID, GH_USER } from '$lib/siteConfig'

let isDark = false
if (typeof localStorage !== 'undefined') {
Expand All @@ -23,15 +23,15 @@
<div
class="grid grid-cols-4 gap-4 md:mx-4 md:gap-8 lg:mx-12 lg:gap-12 xl:gap-16"
>
<div class="col-span-3 md:col-span-2">
<div class="col-span-2 md:col-span-2">
<NavLink href="/blog">Posts</NavLink>
<NavLink href="/gallery">Gallery</NavLink>
<NavLink href="/work">Work</NavLink>
<NavLink href="/about">About</NavLink>
<NavLink href="/blogroll">Blogroll</NavLink>
</div>

<div class="col-span-1 text-right md:col-span-2 md:col-start-4">
<div class="col-span-2 text-right md:col-start-4">
<Icon href={`/rss.xml`} label="RSS">
<svg viewBox="0 0 256 256" class="h-12 w-12 p-1" fill="currentColor">
<circle cx="68" cy="189" r="24"/>
Expand All @@ -40,47 +40,19 @@
</svg>
</Icon>

<Icon href={`https://twitter.com/${MY_TWITTER_HANDLE}`} label="Twitter">
<Icon href={`https://twitter.com/${TWITTER_ID}`} label="Twitter">
<svg viewBox="0 0 512 512" class="h-12 w-12 p-1" fill="currentColor">
<path
d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"
/>
</svg>
</Icon>

<Icon href={`https://www.last.fm/user/${LASTFM_ID}`} label="last.fm">
<svg viewBox="0 0 256 256" class="h-12 w-12 p-1" fill="currentColor">
<path d="M102.9,158.4c-4.9,4.4-14.4,13.3-30.3,13.3C54,171.8,36,155.4,36,129.3c0-33.5,21.5-44.3,38-44.3c23.8,0,29,14.4,35.5,34.2l8.7,27.2c8.6,26.4,24.9,47.7,71.6,47.7c33.5,0,56.2-10.4,56.2-37.6c0-22.1-12.5-33.5-35.7-39l-17.3-3.8c-11.9-2.7-15.4-7.6-15.4-15.8c0-9.3,7.3-14.7,19.2-14.7c13,0,20,4.9,21.1,16.6l27-3.3C242.7,72,226,61.9,198.4,61.9c-24.3,0-48.1,9.3-48.1,39c0,18.5,8.9,30.2,31.4,35.7l18.4,4.4c13.8,3.3,18.4,9,18.4,16.9c0,10.1-9.7,14.2-28.1,14.2c-27.3,0-41-14.4-47.5-34.3l-8.9-27.2C122.5,75,109.1,61.9,73.2,61.9C41.1,61.9,10,87.3,10,130.3c0,41.4,29.9,63.8,61.3,63.8c22.7,0,34.2-8,39.9-12.1L102.9,158.4z"/>
<!-- <Icon href={`https://instagram.com/${TWITTER_ID}`} label="Instagram">
<svg class="h-12 w-12 p-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6ZM6 4C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9ZM7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12ZM17.5 8C18.3284 8 19 7.32843 19 6.5C19 5.67157 18.3284 5 17.5 5C16.6716 5 16 5.67157 16 6.5C16 7.32843 16.6716 8 17.5 8Z" fill="currentColor"/>
</svg>
</Icon>

<Icon href={`https://letterboxd.com/${LETTERBOXD_ID}/`} label="Letterboxd">
<svg viewBox="0 0 500 500" class="h-12 w-12 p-1" fill="currentColor">
<defs>
<rect id="path-1" x="0" y="0" width="129.847328" height="141.443299"></rect>
<rect id="path-3" x="0" y="0" width="129.847328" height="141.443299"></rect>
</defs>
<g id="letterboxd-decal-dots-neg-mono" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dots" transform="translate(61.000000, 180.000000)">
<ellipse id="Green" fill="currentColor" cx="189" cy="70" rx="70.0786517" ry="70"></ellipse>
<g id="Blue" transform="translate(248.152672, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Mask"></g>
<ellipse fill="currentcolor" mask="url(#mask-2)" cx="59.7686766" cy="70" rx="70.0786517" ry="70"></ellipse>
</g>
<g id="Orange">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Mask"></g>
<ellipse fill="currentColor" mask="url(#mask-4)" cx="70.0786517" cy="70" rx="70.0786517" ry="70"></ellipse>
</g>
</g>
</g>
</svg>
</Icon>
</Icon> -->

<Icon href={`https://github.com/${GH_USER}`} label="Github">
<svg
Expand Down Expand Up @@ -117,6 +89,40 @@
/>
</svg>
</Icon>

<Icon href={`https://www.last.fm/user/${LASTFM_ID}`} label="last.fm">
<svg viewBox="0 0 256 256" class="h-12 w-12 p-1" fill="currentColor">
<path d="M102.9,158.4c-4.9,4.4-14.4,13.3-30.3,13.3C54,171.8,36,155.4,36,129.3c0-33.5,21.5-44.3,38-44.3c23.8,0,29,14.4,35.5,34.2l8.7,27.2c8.6,26.4,24.9,47.7,71.6,47.7c33.5,0,56.2-10.4,56.2-37.6c0-22.1-12.5-33.5-35.7-39l-17.3-3.8c-11.9-2.7-15.4-7.6-15.4-15.8c0-9.3,7.3-14.7,19.2-14.7c13,0,20,4.9,21.1,16.6l27-3.3C242.7,72,226,61.9,198.4,61.9c-24.3,0-48.1,9.3-48.1,39c0,18.5,8.9,30.2,31.4,35.7l18.4,4.4c13.8,3.3,18.4,9,18.4,16.9c0,10.1-9.7,14.2-28.1,14.2c-27.3,0-41-14.4-47.5-34.3l-8.9-27.2C122.5,75,109.1,61.9,73.2,61.9C41.1,61.9,10,87.3,10,130.3c0,41.4,29.9,63.8,61.3,63.8c22.7,0,34.2-8,39.9-12.1L102.9,158.4z"/>
</svg>
</Icon>

<Icon href={`https://letterboxd.com/${LETTERBOXD_ID}/`} label="Letterboxd">
<svg viewBox="0 0 500 500" class="h-12 w-12 p-1" fill="currentColor">
<defs>
<rect id="path-1" x="0" y="0" width="129.847328" height="141.443299"></rect>
<rect id="path-3" x="0" y="0" width="129.847328" height="141.443299"></rect>
</defs>
<g id="letterboxd-decal-dots-neg-mono" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dots" transform="translate(61.000000, 180.000000)">
<ellipse id="Green" fill="currentColor" cx="189" cy="70" rx="70.0786517" ry="70"></ellipse>
<g id="Blue" transform="translate(248.152672, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Mask"></g>
<ellipse fill="currentcolor" mask="url(#mask-2)" cx="59.7686766" cy="70" rx="70.0786517" ry="70"></ellipse>
</g>
<g id="Orange">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Mask"></g>
<ellipse fill="currentColor" mask="url(#mask-4)" cx="70.0786517" cy="70" rx="70.0786517" ry="70"></ellipse>
</g>
</g>
</g>
</svg>
</Icon>
</div>
</div>
</footer>
2 changes: 1 addition & 1 deletion src/lib/components/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
class="flex mr-3 h-9 w-9 items-center justify-center rounded-lg"
>
<svg
class="absolute h-5 w-5 text-red-600 dark:text-yellow-400"
class="absolute h-5 w-5 text-secondary"
width="20"
height="20"
viewBox="0 0 20 20"
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/Icon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
transition-all duration-200
ease-in-out hover:ring-2
bg-transparent
text-red-600 ring-red-600
dark:text-yellow-400 dark:ring-yellow-400"
text-secondary
ring-red-600 dark:ring-yellow-400"
{href}
aria-label={label}
>
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/PostItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
<span
class="
w-fit rounded-full
bg-orange-300 px-2
bg-alternate dark:bg-secondary px-2
py-1 text-xs font-bold
text-red-600 text-white md:px-4 dark:bg-lime-600 dark:text-gray-900
text-red-600 text-white md:px-4 dark:text-gray-900
">
{item.category}
</span>
Expand All @@ -40,7 +40,7 @@
<style>
.post:hover {
& h2 {
@apply text-orange-600 dark:text-yellow-400;
@apply text-secondary;
}
}
</style>
2 changes: 1 addition & 1 deletion src/lib/components/ProjectItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<style>
.project:hover {
& p {
@apply text-red-600 dark:text-yellow-400;
@apply text-secondary;
}
}
</style>
11 changes: 3 additions & 8 deletions src/lib/components/Slice.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
export let date = false
export let prose = true
export let full = false

export let warn = false

let sliceClasses = "slice mb-6 grid w-full grid-cols-4 gap-4 py-8 md:mb-8 md:gap-8 md:py-12 lg:gap-12 xl:gap-16"
let slotWrapperClasses = 'w-full md:w-2/3 md:ml-4 lg:ml-12'
Expand All @@ -23,13 +23,9 @@
<div class={sliceClasses}>
{#if title}
<div class="col-span-4 md:col-span-1">
<h2
class="sticky top-4 mb-2 text-xl font-bold
text-black md:ml-4 md:text-2xl lg:ml-12 dark:text-blue-300
"
>
<h2 class="sticky top-4 mb-2 text-xl font-bold text-black md:ml-4 md:text-2xl lg:ml-12 dark:text-blue-300">
<a href="#{title}" class="slice-title">
{title}
{title}{#if warn}<a href="#warning" class="text-secondary">*</a>{/if}
</a>
{#if date}
<span class="text-unshadow text-base text-slate-500 dark:text-gray-600">
Expand All @@ -41,7 +37,6 @@
{/if}
<div class={title ? 'col-span-4 md:col-span-3 xl:col-span-2' : 'col-span-4'}>
<p class={slotWrapperClasses}>
<!-- <p class="{title ? 'prose prose-lg prose-slate dark:prose-invert' : 'w-full md:w-2/3 md:ml-4 lg:ml-12'}"> -->
<slot />
</p>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/lib/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,8 @@ function parseIssue(issue, label) {
type: 'gallery',
...base,
alt: data.alt,
images: data.images
images: data.images,
warn: data.warn || false
}
break
case 'Published':
Expand Down
4 changes: 2 additions & 2 deletions src/lib/siteConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ export const SITE_TITLE = 'heffner.dev'
export const SITE_DESCRIPTION = 'personal site of tanner heffner'
export const DEFAULT_OG_IMAGE = 'https://heffner.dev/og?message=heffner.dev'

export const MY_TWITTER_HANDLE = 'foodpyramids'
export const TWITTER_ID = 'foodpyramids'
export const LETTERBOXD_ID = 'tjheffner'
export const LASTFM_ID = 'lob_'
export const STEAM_ID = ''
// export const STEAM_ID = ''

export const APPROVED_POSTERS_GH_USERNAME = ['tjheffner']
export const GH_PUBLISHED_TAGS = ['Published']
Expand Down
4 changes: 2 additions & 2 deletions src/routes/(main)/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
SITE_TITLE,
SITE_DESCRIPTION,
DEFAULT_OG_IMAGE,
MY_TWITTER_HANDLE,
TWITTER_ID,
} from '$lib/siteConfig'
</script>

Expand All @@ -26,7 +26,7 @@
<meta property="og:description" content={SITE_DESCRIPTION} />
<meta property="og:image" content={DEFAULT_OG_IMAGE} />
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
<meta name="twitter:creator" content={'@' + TWITTER_ID} />
<meta name="twitter:title" content={SITE_TITLE} />
<meta name="twitter:description" content={SITE_DESCRIPTION} />
<meta name="twitter:image" content={DEFAULT_OG_IMAGE} />
Expand Down
4 changes: 2 additions & 2 deletions src/routes/(main)/[slug=string]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script>
import { page } from '$app/stores'
import { MY_TWITTER_HANDLE, SITE_URL } from '$lib/siteConfig'
import { TWITTER_ID, SITE_URL } from '$lib/siteConfig'
import Comments from '$lib/components/Comments.svelte'
import 'prism-themes/themes/prism-shades-of-purple.min.css'

Expand All @@ -23,7 +23,7 @@
<meta property="og:title" content={json.title} />
<meta name="Description" content={json.description} />
<meta property="og:description" content={json.description} />
<meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
<meta name="twitter:creator" content={'@' + TWITTER_ID} />
<meta name="twitter:title" content={json.title} />
<meta name="twitter:description" content={json.description} />
{#if json.image}
Expand Down
18 changes: 13 additions & 5 deletions src/routes/(main)/gallery/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,33 @@

<section class="mx-auto flex w-full flex-col items-start px-4 sm:p-0">
<Slice>
<h1 class="mb-6 text-3xl font-bold tracking-tight text-accent md:text-5xl">
<h1 class="mb-6 text-3xl font-bold tracking-tight text-shadow md:text-5xl">
Gallery
</h1>
<p class="text-xl font-semibold text-accent">
details, photos<sup>*</sup>, etc. from past adventures
details, photos<sup class="text-secondary">*</sup>, etc. from past adventures
</p>
<p class="text-sm text-accent mt-2">
<sup>*</sup>advance warning many of the pages are very image heavy
<p class="text-sm text-secondary mt-2">
* advance warning many of the pages are very image heavy
</p>
</Slice>

{#each items as trip}
<Slice title={trip.title} date={trip.date}>
<Slice title={trip.title} date={trip.date} warn={trip.warn}>
<a href="/gallery/{trip.slug}" style="display: inline-block" class="not-prose w-full">
<img src={trip.image} alt={trip.alt} class="gallery-image" loading="lazy" />
{'>> ' + trip.description + ' <<'}
</a>

{#if trip.title === 'Japan'}
<p class="text-secondary font-bold text-xs">The above link has <strong>>150 MB</strong> worth of images. Please be on wifi.</p>
{/if}
</Slice>
{/each}

<p id="warning" class="text-sm text-secondary my-12 mx-0 md:mx-4 lg:mx-12">
* seriously, this page has at least <span class="text-secondary">40 MB</span> worth of images.
</p>
</section>

<style>
Expand Down
4 changes: 2 additions & 2 deletions src/routes/(main)/gallery/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script>
import { page } from '$app/stores'
import { MY_TWITTER_HANDLE, SITE_URL } from '$lib/siteConfig'
import { TWITTER_ID, SITE_URL } from '$lib/siteConfig'
import Comments from '$lib/components/Comments.svelte'
import 'prism-themes/themes/prism-shades-of-purple.min.css'

Expand All @@ -23,7 +23,7 @@
<meta property="og:title" content={json.title} />
<meta name="Description" content={json.description} />
<meta property="og:description" content={json.description} />
<meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
<meta name="twitter:creator" content={'@' + TWITTER_ID} />
<meta name="twitter:title" content={json.title} />
<meta name="twitter:description" content={json.description} />
{#if json.image}
Expand Down
2 changes: 1 addition & 1 deletion src/routes/(main)/work/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

<section class="mx-auto flex w-full flex-col items-start px-4 sm:p-0">
<Slice>
<h1 class="mb-6 text-3xl font-bold tracking-tight text-accent md:text-5xl">
<h1 class="mb-6 text-3xl font-bold tracking-tight text-shadow md:text-5xl">
Past work
</h1>
<p class="text-xl font-semibold text-accent">
Expand Down
4 changes: 2 additions & 2 deletions src/routes/(main)/work/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

const { content, name, date, description, image, url } = data

import { MY_TWITTER_HANDLE, SITE_URL } from '$lib/siteConfig'
import { TWITTER_ID, SITE_URL } from '$lib/siteConfig'
import GetInTouch from '$lib/components/GetInTouch.svelte'
</script>

Expand All @@ -17,7 +17,7 @@
<meta name="Description" content={description} />
<meta property="og:description" content={description} />
<meta name="twitter:card" content={'summary'} />
<meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
<meta name="twitter:creator" content={'@' + TWITTER_ID} />
<meta name="twitter:title" content={name} />
<meta name="twitter:description" content={description} />
{#if image}
Expand Down
Loading
Loading