LukeParke/sveltesociety.dev
1
0
Fork 0
mirror of https://github.com/LukeHagar/sveltesociety.dev.git synced 2025-12-06 04:21:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile responsiveness, more tailwind classes (#570)

Browse Source 
* More tailwind classes

* Add prettier-plugin-tailwindcss

* More class replacement

* Update Card.svelte

* Remove tags from card

* Update header link

* Run format
This commit is contained in:
Lachlan Collins
2024-01-02 08:59:47 +11:00
committed by GitHub
parent ee030c1fea
commit 199d2f5666
14 changed files with 111 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -36,6 +36,7 @@
"postcss": "8.4.32", "postcss": "8.4.32",
"prettier": "4.0.0-alpha.8", "prettier": "4.0.0-alpha.8",
"prettier-plugin-svelte": "3.1.2", "prettier-plugin-svelte": "3.1.2",
"prettier-plugin-tailwindcss": "0.5.10",
"publint": "0.2.7", "publint": "0.2.7",
"rehype-slug": "6.0.0", "rehype-slug": "6.0.0",
"svelte": "4.2.8", "svelte": "4.2.8",

56
pnpm-lock.yaml generated
View File

@@ -68,6 +68,9 @@ devDependencies:
prettier-plugin-svelte: prettier-plugin-svelte:
specifier: 3.1.2 specifier: 3.1.2
version: 3.1.2(prettier@4.0.0-alpha.8)(svelte@4.2.8) version: 3.1.2(prettier@4.0.0-alpha.8)(svelte@4.2.8)
prettier-plugin-tailwindcss:
specifier: 0.5.10
version: 0.5.10(prettier-plugin-svelte@3.1.2)(prettier@4.0.0-alpha.8)
publint: publint:
specifier: 0.2.7 specifier: 0.2.7
version: 0.2.7 version: 0.2.7
@@ -2437,6 +2440,59 @@ packages:
svelte: 4.2.8 svelte: 4.2.8
dev: true dev: true
/prettier-plugin-tailwindcss@0.5.10(prettier-plugin-svelte@3.1.2)(prettier@4.0.0-alpha.8):
resolution: {integrity: sha512-9UGSejqFxGG6brYjFfTYlJ8zs4L/lvZg1AngFfaC5Fs1otSskASv5IWKmjPu5MlABQUtTKtMArKyYr/hWpXSUg==}
engines: {node: '>=14.21.3'}
peerDependencies:
'@ianvs/prettier-plugin-sort-imports': '*'
'@prettier/plugin-pug': '*'
'@shopify/prettier-plugin-liquid': '*'
'@trivago/prettier-plugin-sort-imports': '*'
prettier: ^3.0
prettier-plugin-astro: '*'
prettier-plugin-css-order: '*'
prettier-plugin-import-sort: '*'
prettier-plugin-jsdoc: '*'
prettier-plugin-marko: '*'
prettier-plugin-organize-attributes: '*'
prettier-plugin-organize-imports: '*'
prettier-plugin-style-order: '*'
prettier-plugin-svelte: '*'
prettier-plugin-twig-melody: '*'
peerDependenciesMeta:
'@ianvs/prettier-plugin-sort-imports':
optional: true
'@prettier/plugin-pug':
optional: true
'@shopify/prettier-plugin-liquid':
optional: true
'@trivago/prettier-plugin-sort-imports':
optional: true
prettier-plugin-astro:
optional: true
prettier-plugin-css-order:
optional: true
prettier-plugin-import-sort:
optional: true
prettier-plugin-jsdoc:
optional: true
prettier-plugin-marko:
optional: true
prettier-plugin-organize-attributes:
optional: true
prettier-plugin-organize-imports:
optional: true
prettier-plugin-style-order:
optional: true
prettier-plugin-svelte:
optional: true
prettier-plugin-twig-melody:
optional: true
dependencies:
prettier: 4.0.0-alpha.8
prettier-plugin-svelte: 3.1.2(prettier@4.0.0-alpha.8)(svelte@4.2.8)
dev: true
/prettier@4.0.0-alpha.8: /prettier@4.0.0-alpha.8:
resolution: {integrity: sha512-7FFBkQb0Eg0wJRYzA7ucc31nqTjWgoSpmS0ey9OATHU6WiV0z53Uzo5hA3tZs/pbhhIG7YvOIBNmkRQ7Dr/k5A==} resolution: {integrity: sha512-7FFBkQb0Eg0wJRYzA7ucc31nqTjWgoSpmS0ey9OATHU6WiV0z53Uzo5hA3tZs/pbhhIG7YvOIBNmkRQ7Dr/k5A==}
engines: {node: '>=14'} engines: {node: '>=14'}

2
prettier.config.js
View File

@@ -6,7 +6,7 @@ const config = {
singleQuote: true, singleQuote: true,
trailingComma: 'none', trailingComma: 'none',
printWidth: 100, printWidth: 100,
plugins: ['prettier-plugin-svelte'], plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
overrides: [ overrides: [
{ files: '*.svelte', options: { parser: 'svelte' } }, { files: '*.svelte', options: { parser: 'svelte' } },
{ files: '*.svx', options: { parser: 'mdx' } } { files: '*.svx', options: { parser: 'mdx' } }

48
src/lib/SearchableJson.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import ComponentCard from '$lib/components/ComponentIndex/Card.svelte'; import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
import CardList from '$lib/components/ComponentIndex/CardList.svelte';
import Seo from '$lib/components/Seo.svelte'; import Seo from '$lib/components/Seo.svelte';
import Select from '$lib/components/Select.svelte'; import Select from '$lib/components/Select.svelte';
import { packageManager } from '$stores/packageManager'; import { packageManager } from '$stores/packageManager';
@@ -29,14 +28,14 @@
<TagFilters {tags} {selectedTags} /> <TagFilters {tags} {selectedTags} />
<br /> <br />
<section class="controls"> <section class="controls relative grid items-center justify-stretch gap-4">
<input <input
class="searchbar" class="searchbar"
type="text" type="text"
placeholder="Search for {displayTitle.toLowerCase()}..." placeholder="Search for {displayTitle.toLowerCase()}..."
bind:value={searchValue} bind:value={searchValue}
/> />
<div class="inputs"> <div class="grid gap-2 lg:grid-cols-2">
<Select <Select
items={sortableFields} items={sortableFields}
bind:value={sort} bind:value={sort}
@@ -66,35 +65,24 @@
> >
</section> </section>
<hr /> <hr />
<section> <section class="mx-auto mb-12 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
<CardList> {#each sortedData as entry (entry.title)}
{#each sortedData as entry (entry.title)} <ComponentCard
<ComponentCard title={entry.title}
title={entry.title} description={entry.description}
description={entry.description} repository={entry.repository}
repository={entry.repository} stars={entry.stars}
stars={entry.stars} tags={entry.tags}
tags={entry.tags} date={entry.date}
date={entry.date} npm={entry.npm}
npm={entry.npm} version={entry.version}
version={entry.version} />
/> {/each}
{/each}
</CardList>
</section> </section>
<style> <style>
.controls { .controls {
display: grid;
justify-content: stretch;
align-items: center;
gap: var(--s-4);
font-family: Overpass; font-family: Overpass;
position: relative;
}
.inputs {
display: grid;
gap: var(--s-2);
} }
.searchbar { .searchbar {
padding: 20.5px var(--s-2); padding: 20.5px var(--s-2);
@@ -114,10 +102,4 @@
top: calc(100% + 1rem); top: calc(100% + 1rem);
right: 0; right: 0;
} }
@media (min-width: 1024px) {
.inputs {
grid-template-columns: repeat(2, auto);
}
}
</style> </style>

9
src/lib/TagFilters.svelte
View File

@@ -6,7 +6,7 @@
export let selectedTags: string[]; export let selectedTags: string[];
</script> </script>
<div data-sveltekit-noscroll> <div class="flex flex-wrap items-center gap-2" data-sveltekit-noscroll>
{#each selectedTags as tag} {#each selectedTags as tag}
{@const newTags = selectedTags.filter((t) => t !== tag)} {@const newTags = selectedTags.filter((t) => t !== tag)}
{@const title = tag.replaceAll('-', ' ')} {@const title = tag.replaceAll('-', ' ')}
@@ -38,13 +38,6 @@
</div> </div>
<style> <style>
div {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
a { a {
text-decoration: none; text-decoration: none;
} }

83
src/lib/components/ComponentIndex/Card.svelte
View File

@@ -27,23 +27,32 @@
}; };
</script> </script>
<div class="card" id="component-{title}"> <div class="card flex flex-col rounded-md p-3 text-base lg:text-lg" id="component-{title}">
<div class="card__top"> <div class="flex justify-between align-top">
<div> <div>
<h3> <h3 class="text-xl">
<a href="#component-{title}">#</a> <a href="#component-{title}"># {title}</a>
{#if repository}<a href={repository}>{title}</a>{:else}<span>{title}</span>{/if}
</h3> </h3>
</div> </div>
<div> <div>
{#if repository.includes('github')} {#if repository.includes('github')}
<a class="repo" title="Go to the source code" target="_blank" href={repository} <a
><img style="display:inline" src="/images/github_logo.svg" alt="github logo" /></a class="repo box-border flex aspect-square rounded-full border-none"
title="Go to the source code"
target="_blank"
href={repository}
> >
<img style="display:inline" src="/images/github_logo.svg" alt="github logo" />
</a>
{:else if repository.includes('gitlab')} {:else if repository.includes('gitlab')}
<a class="repo" title="Go to the source code" target="_blank" href={repository} <a
><img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" /></a class="repo box-border flex aspect-square rounded-full border-none"
title="Go to the source code"
target="_blank"
href={repository}
> >
<img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" />
</a>
<!-- {:else} --> <!-- {:else} -->
{/if} {/if}
</div> </div>
@@ -56,83 +65,33 @@
title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${npm}`} title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${npm}`}
/> />
{/if} {/if}
<p class="flex-grow">{description}</p> <p class="flex-grow pb-6">{description}</p>
{#if tags} <div class="flex items-end justify-between">
<div class="flex flex-row flex-wrap mb-4">
{#each tags as tag}
<Tag title={tag} variant="blue" />
{/each}
</div>
{/if}
<div class="card__bottom">
<div> <div>
{#if typeof stars !== 'undefined'} {#if typeof stars !== 'undefined'}
&#9733; &#9733;
<code>{stars}</code> <code>{stars}</code>
{/if} {/if}
</div> </div>
{#if date && version}<span class="date">Updated {relativeDate(date)} ({version})</span>{/if} {#if date && version}<span class="text-sm">Updated {relativeDate(date)} ({version})</span>{/if}
</div> </div>
</div> </div>
<style> <style>
.card { .card {
display: flex;
flex-direction: column;
max-width: var(--width-card);
padding: 14px;
background: #f3f6f9; background: #f3f6f9;
border-radius: 5px;
}
.card h3 {
word-break: none;
font-size: var(--font-300);
} }
.card:hover { .card:hover {
background: #e8f3fe; background: #e8f3fe;
} }
.card__top {
display: flex;
justify-content: space-between;
align-items: top;
}
.card__bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.card__bottom > * {
white-space: nowrap;
}
.repo { .repo {
border-bottom: none;
aspect-ratio: 1/1;
display: flex;
min-height: 26px; min-height: 26px;
padding: 4px; padding: 4px;
border-radius: 50%;
margin: -4px; margin: -4px;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
transition: background-color 200ms ease-out; transition: background-color 200ms ease-out;
} }
.repo:hover { .repo:hover {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.date {
font-size: 14px;
}
.flex-grow {
flex-grow: 1;
}
@media screen and (max-width: 400px) {
.card {
font-size: 0.9rem;
}
.card h3 {
font-size: 24px;
}
}
</style> </style>

30
src/lib/components/ComponentIndex/CardList.svelte
View File

@@ -1,30 +0,0 @@
<div class="list">
<div class="grid">
<slot />
</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 25px;
}
.list {
margin-bottom: 5rem;
}
@media screen and (max-width: 1024px) {
.grid {
max-width: calc(var(--width-card) * 2 + 25px);
grid-template-columns: repeat(2, 1fr);
margin: 0 auto;
}
}
@media screen and (max-width: 700px) {
.grid {
max-width: var(--width-card);
grid-template-columns: 1fr;
margin: 0 auto;
}
}
</style>

15
src/lib/components/layout/Footer.svelte
View File

@@ -4,8 +4,8 @@
var year = date.getFullYear(); var year = date.getFullYear();
</script> </script>
<footer> <footer class="p-8 print:hidden md:p-12">
<div class="grid mx-auto gap-2 justify-items-center justify-center text-center md:flex md:gap-6"> <div class="mx-auto grid justify-center justify-items-center gap-2 text-center md:flex md:gap-6">
<span>&copy; {year} Svelte Society</span> <span>&copy; {year} Svelte Society</span>
<span>•</span> <span>•</span>
<a href="/about">Code of Conduct</a> <a href="/about">Code of Conduct</a>
@@ -23,17 +23,6 @@
footer { footer {
background-color: var(--accent); background-color: var(--accent);
color: var(--white); color: var(--white);
padding: var(--s-8);
font-size: var(--font-200); font-size: var(--font-200);
} }
@media (min-width: 768px) {
footer {
padding: var(--s-12);
}
}
@media print {
footer {
display: none;
}
}
</style> </style>

9
src/lib/components/layout/Header.svelte
View File

@@ -15,10 +15,10 @@
</script> </script>
<header class="px-6 py-4 print:hidden"> <header class="px-6 py-4 print:hidden">
<div class="w-full max-w-7xl mx-auto"> <div class="mx-auto w-full max-w-7xl">
<nav class="py-6"> <nav class="py-6">
<ul <ul
class="xl:flex xl:justify-between grid gap-6 justify-center place-items-center font-extrabold" class="grid place-items-center justify-center gap-6 font-extrabold xl:flex xl:justify-between"
> >
{#each linksLeft as [path, name]} {#each linksLeft as [path, name]}
<Link <Link
@@ -29,7 +29,7 @@
</Link> </Link>
{/each} {/each}
<li> <li>
<a href="/" class="logo"> <a href="/" class="border-none">
<img alt="Svelte Society Logo" src="/images/logo.svg" /> <img alt="Svelte Society Logo" src="/images/logo.svg" />
</a> </a>
</li> </li>
@@ -61,9 +61,6 @@
width: var(--s-12); width: var(--s-12);
height: var(--s-12); height: var(--s-12);
} }
.logo {
border-bottom: none;
}
@media (min-width: 1280px) { @media (min-width: 1280px) {
li { li {
display: flex; display: flex;

5
src/lib/components/layout/Link.svelte
View File

@@ -3,16 +3,13 @@
export let active = false; export let active = false;
</script> </script>
<li> <li class="uppercase">
<a href={path} class:active class="nav-item"> <a href={path} class:active class="nav-item">
<slot /> <slot />
</a> </a>
</li> </li>
<style> <style>
li {
text-transform: uppercase;
}
a { a {
text-decoration: none; text-decoration: none;
border-bottom: transparent; border-bottom: transparent;

14
src/routes/+layout.svelte
View File

@@ -12,9 +12,9 @@
<GlobalSearch bind:this={globalSearch} /> <GlobalSearch bind:this={globalSearch} />
<div class="flex flex-col h-screen justify-between"> <div class="flex h-screen flex-col justify-between">
<Header /> <Header />
<main class="grid mx-auto w-full max-w-7xl mb-auto"> <main class="mx-auto mb-auto grid w-full max-w-7xl px-5 py-10 xl:py-20">
<slot /> <slot />
</main> </main>
<Footer /> <Footer />
@@ -25,10 +25,6 @@
> >
<style> <style>
main {
padding: var(--s-10) var(--s-5) var(--s-20);
}
button { button {
position: fixed; position: fixed;
bottom: var(--s-2); bottom: var(--s-2);
@@ -49,10 +45,4 @@
button img { button img {
filter: grayscale(1) brightness(0) invert(1); filter: grayscale(1) brightness(0) invert(1);
} }
@media (min-width: 1280px) {
main {
padding: var(--s-20) var(--s-5);
}
}
</style> </style>

21
src/routes/+page.svelte
View File

@@ -8,8 +8,8 @@
description="Svelte Society is a community-driven effort to organise and promote SvelteJS." description="Svelte Society is a community-driven effort to organise and promote SvelteJS."
/> />
<article class="max-w-5xl gap-6 grid grid-cols-1 mx-auto w-full"> <article class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-5 xl:gap-10">
<h1 class="text-center">Welcome to Svelte Society!</h1> <h1 class="m-0 text-center">Welcome to Svelte Society!</h1>
<section> <section>
<p> <p>
We are a volunteer global network of Svelte fans that strive to promote Svelte and its We are a volunteer global network of Svelte fans that strive to promote Svelte and its
@@ -23,7 +23,7 @@
out the resources below: out the resources below:
</p> </p>
</section> </section>
<ul> <ul class="flex flex-wrap justify-around text-center">
<Link path="https://discord.gg/svelte"> <Link path="https://discord.gg/svelte">
<img src="images/discord.svg" alt="" /> <img src="images/discord.svg" alt="" />
Discord Discord
@@ -37,7 +37,7 @@
Twitter Twitter
</Link> </Link>
</ul> </ul>
<ul> <ul class="flex flex-wrap justify-around text-center">
<Link path="https://svelte.substack.com/"> <Link path="https://svelte.substack.com/">
<img src="images/newsletter.svg" alt="" /> <img src="images/newsletter.svg" alt="" />
Newsletter Newsletter
@@ -57,28 +57,15 @@
</article> </article>
<style> <style>
h1 {
margin: 0;
}
section { section {
display: grid; display: grid;
gap: var(--s-5); gap: var(--s-5);
} }
ul { ul {
display: flex;
flex-wrap: wrap;
column-gap: var(--s-20); column-gap: var(--s-20);
row-gap: var(--s-5); row-gap: var(--s-5);
justify-content: space-around;
text-align: center;
} }
img { img {
width: 128px; width: 128px;
} }
@media (min-width: 1280px) {
article {
gap: var(--s-20);
}
}
</style> </style>

2
src/routes/recipes/+layout.svelte
View File

@@ -7,7 +7,7 @@
categories.set(data.categories); categories.set(data.categories);
</script> </script>
<div class="grid grid-cols-1 mx-auto w-full max-w-7xl"> <div class="mx-auto grid w-full max-w-7xl grid-cols-1">
<slot /> <slot />
</div> </div>

4
tailwind.config.cjs
View File

@@ -4,7 +4,9 @@
const config = { const config = {
content: ['./src/**/*.{html,js,ts,svelte}'], content: ['./src/**/*.{html,js,ts,svelte}'],
theme: { theme: {
extend: {} container: {
center: true
}
}, },
plugins: [] plugins: []
}; };