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",
"prettier": "4.0.0-alpha.8",
"prettier-plugin-svelte": "3.1.2",
"prettier-plugin-tailwindcss": "0.5.10",
"publint": "0.2.7",
"rehype-slug": "6.0.0",
"svelte": "4.2.8",

56
pnpm-lock.yaml generated
View File

@@ -68,6 +68,9 @@ devDependencies:
prettier-plugin-svelte:
specifier: 3.1.2
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:
specifier: 0.2.7
version: 0.2.7
@@ -2437,6 +2440,59 @@ packages:
svelte: 4.2.8
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:
resolution: {integrity: sha512-7FFBkQb0Eg0wJRYzA7ucc31nqTjWgoSpmS0ey9OATHU6WiV0z53Uzo5hA3tZs/pbhhIG7YvOIBNmkRQ7Dr/k5A==}
engines: {node: '>=14'}

2
prettier.config.js
View File

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

24
src/lib/SearchableJson.svelte
View File

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

9
src/lib/TagFilters.svelte
View File

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

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

@@ -27,23 +27,32 @@
};
</script>
<div class="card" id="component-{title}">
<div class="card__top">
<div class="card flex flex-col rounded-md p-3 text-base lg:text-lg" id="component-{title}">
<div class="flex justify-between align-top">
<div>
<h3>
<a href="#component-{title}">#</a>
{#if repository}<a href={repository}>{title}</a>{:else}<span>{title}</span>{/if}
<h3 class="text-xl">
<a href="#component-{title}"># {title}</a>
</h3>
</div>
<div>
{#if repository.includes('github')}
<a class="repo" title="Go to the source code" target="_blank" href={repository}
><img style="display:inline" src="/images/github_logo.svg" alt="github logo" /></a
<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')}
<a class="repo" title="Go to the source code" target="_blank" href={repository}
><img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" /></a
<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} -->
{/if}
</div>
@@ -56,83 +65,33 @@
title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${npm}`}
/>
{/if}
<p class="flex-grow">{description}</p>
{#if tags}
<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">
<p class="flex-grow pb-6">{description}</p>
<div class="flex items-end justify-between">
<div>
{#if typeof stars !== 'undefined'}
&#9733;
<code>{stars}</code>
{/if}
</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>
<style>
.card {
display: flex;
flex-direction: column;
max-width: var(--width-card);
padding: 14px;
background: #f3f6f9;
border-radius: 5px;
}
.card h3 {
word-break: none;
font-size: var(--font-300);
}
.card:hover {
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 {
border-bottom: none;
aspect-ratio: 1/1;
display: flex;
min-height: 26px;
padding: 4px;
border-radius: 50%;
margin: -4px;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0);
transition: background-color 200ms ease-out;
}
.repo:hover {
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>

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

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

@@ -15,10 +15,10 @@
</script>
<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">
<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]}
<Link
@@ -29,7 +29,7 @@
</Link>
{/each}
<li>
<a href="/" class="logo">
<a href="/" class="border-none">
<img alt="Svelte Society Logo" src="/images/logo.svg" />
</a>
</li>
@@ -61,9 +61,6 @@
width: var(--s-12);
height: var(--s-12);
}
.logo {
border-bottom: none;
}
@media (min-width: 1280px) {
li {
display: flex;

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

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

14
src/routes/+layout.svelte
View File

@@ -12,9 +12,9 @@
<GlobalSearch bind:this={globalSearch} />
<div class="flex flex-col h-screen justify-between">
<div class="flex h-screen flex-col justify-between">
<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 />
</main>
<Footer />
@@ -25,10 +25,6 @@
>
<style>
main {
padding: var(--s-10) var(--s-5) var(--s-20);
}
button {
position: fixed;
bottom: var(--s-2);
@@ -49,10 +45,4 @@
button img {
filter: grayscale(1) brightness(0) invert(1);
}
@media (min-width: 1280px) {
main {
padding: var(--s-20) var(--s-5);
}
}
</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."
/>
<article class="max-w-5xl gap-6 grid grid-cols-1 mx-auto w-full">
<h1 class="text-center">Welcome to Svelte Society!</h1>
<article class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-5 xl:gap-10">
<h1 class="m-0 text-center">Welcome to Svelte Society!</h1>
<section>
<p>
We are a volunteer global network of Svelte fans that strive to promote Svelte and its
@@ -23,7 +23,7 @@
out the resources below:
</p>
</section>
<ul>
<ul class="flex flex-wrap justify-around text-center">
<Link path="https://discord.gg/svelte">
<img src="images/discord.svg" alt="" />
Discord
@@ -37,7 +37,7 @@
Twitter
</Link>
</ul>
<ul>
<ul class="flex flex-wrap justify-around text-center">
<Link path="https://svelte.substack.com/">
<img src="images/newsletter.svg" alt="" />
Newsletter
@@ -57,28 +57,15 @@
</article>
<style>
h1 {
margin: 0;
}
section {
display: grid;
gap: var(--s-5);
}
ul {
display: flex;
flex-wrap: wrap;
column-gap: var(--s-20);
row-gap: var(--s-5);
justify-content: space-around;
text-align: center;
}
img {
width: 128px;
}
@media (min-width: 1280px) {
article {
gap: var(--s-20);
}
}
</style>

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

@@ -7,7 +7,7 @@
categories.set(data.categories);
</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 />
</div>

4
tailwind.config.cjs
View File

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