mirror of
https://github.com/LukeHagar/sveltesociety.dev.git
synced 2025-12-06 04:21:38 +00:00
Styling cleanup
This commit is contained in:
Ben McCann
1784
package-lock.json
generated
1784
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
@@ -10,28 +10,28 @@
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-static": "^1.0.0-next.13",
|
||||
"@sveltejs/adapter-static": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"@typescript-eslint/eslint-plugin": "^4.19.0",
|
||||
"@typescript-eslint/parser": "^4.19.0",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"cssnano": "^5.0.1",
|
||||
"autoprefixer": "^10.3.1",
|
||||
"cssnano": "^5.0.6",
|
||||
"eslint": "^7.22.0",
|
||||
"eslint-config-prettier": "^8.1.0",
|
||||
"eslint-plugin-svelte3": "^3.2.0",
|
||||
"mdsvex": "^0.9.3",
|
||||
"postcss": "^8.2.10",
|
||||
"postcss-load-config": "^3.0.1",
|
||||
"postcss": "^8.3.5",
|
||||
"postcss-load-config": "^3.1.0",
|
||||
"prettier": "~2.2.1",
|
||||
"prettier-plugin-svelte": "^2.2.0",
|
||||
"svelte": "^3.38.2",
|
||||
"svelte-preprocess": "^4.7.1",
|
||||
"svelte-preprocess": "^4.7.4",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^4.0.0",
|
||||
"vite": "^2.2.3"
|
||||
"tailwindcss": "^2.2.4"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"svelte-highlight": "^2.0.0"
|
||||
"svelte-highlight": "^3.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
const tailwindcss = require("tailwindcss");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const cssnano = require("cssnano");
|
||||
|
||||
const mode = process.env.NODE_ENV;
|
||||
const dev = mode === "development";
|
||||
|
||||
module.exports = {
|
||||
const config = {
|
||||
plugins: [
|
||||
autoprefixer,
|
||||
|
||||
//Some plugins, like postcss-nested, need to run before Tailwind,
|
||||
tailwindcss(),
|
||||
//But others, like autoprefixer, need to run after,
|
||||
autoprefixer(),
|
||||
!dev && cssnano({
|
||||
preset: "default",
|
||||
}),
|
||||
})
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
|
||||
103
src/app.postcss
103
src/app.postcss
@@ -1,59 +1,7 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
ul[role='list'],
|
||||
ol[role='list'] {
|
||||
list-style: none;
|
||||
}
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
min-height: 100vh;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html:focus-within {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
@tailwind base;
|
||||
/* Write your global styles here, in PostCSS syntax */
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
@@ -136,48 +84,12 @@ select {
|
||||
|
||||
body {
|
||||
border-top: 6px solid var(--color);
|
||||
color: black;
|
||||
font-family: Inter;
|
||||
font-size: var(--font-200);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
h1, h2, h3, h4 {
|
||||
font-family: Overpass;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-700);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-500);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-400);
|
||||
}
|
||||
|
||||
/**
|
||||
* WRAPPER
|
||||
* Sets a max width, adds a consistent gutter and horizontally
|
||||
* centers the contents
|
||||
*/
|
||||
.wrapper {
|
||||
width: clamp(16rem, 90vw, 70rem);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -188,13 +100,8 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: min(55rem, 100%);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: var(--font-100);
|
||||
|
||||
font-style: italic;
|
||||
margin-top: 1rem;
|
||||
margin-left: 1rem;
|
||||
|
||||
@@ -77,10 +77,10 @@
|
||||
|
||||
<div class="card" class:active id="component-{escape(title)}">
|
||||
<h3>
|
||||
<a href={url}>{title}</a>
|
||||
<a href="#component-{escape(title)}">#</a> <a href={url}>{title}</a>
|
||||
{#if npm}<Tag click={() => copyToClipboard(`npm install ${npm}`)} variant="copy" title={clipboardCopy ? 'copied!' : `npm install ${npm}`}/>{/if}
|
||||
</h3>
|
||||
<p class="flex-grow"><a href="#component-{escape(title)}">#</a> {description}</p>
|
||||
<p class="flex-grow">{description}</p>
|
||||
<div class="card__tags">
|
||||
{#each tags as tag}
|
||||
<Tag title={tag} variant='blue' />
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
font-weight: 600;
|
||||
line-height: 150%;
|
||||
margin-bottom: 1rem;
|
||||
@apply text-4xl;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</script>
|
||||
|
||||
<div class="shaded">
|
||||
<footer class="wrapper">
|
||||
<footer class="container mx-auto">
|
||||
<div class="centered">© {year} Svelte Society
|
||||
•
|
||||
<a href="/about">Code of Conduct</a>
|
||||
|
||||
@@ -15,8 +15,8 @@
|
||||
</script>
|
||||
|
||||
<div class="shaded" id="title">
|
||||
<header class="wrapper">
|
||||
<nav>
|
||||
<header class="container mx-auto">
|
||||
<nav class="pt-8 pb-8">
|
||||
<ul>
|
||||
{#each linksLeft as [path, name]}
|
||||
<Link {path} active={path === '/' ? $page.path === '/' : $page.path.includes(path)}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<script>
|
||||
import Header from './_Header/Header.svelte';
|
||||
import Footer from './_Footer.svelte';
|
||||
import metatags from '$lib/stores/metatags';
|
||||
import '../app.postcss';
|
||||
import "../app.postcss";
|
||||
import Header from './_Header/Header.svelte';
|
||||
import Footer from './_Footer.svelte';
|
||||
import metatags from '$lib/stores/metatags';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{#each Object.entries($metatags) as [property, content]}
|
||||
{#if content}
|
||||
{#if ['title', 'description', 'image'].includes(property)}
|
||||
<meta name={property} {content} />
|
||||
<meta name="{property}" {content} />
|
||||
{:else}
|
||||
<meta {property} {content} />
|
||||
{/if}
|
||||
@@ -17,23 +17,17 @@
|
||||
{/each}
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<Header />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<Header />
|
||||
<div class="container mx-auto">
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
div {
|
||||
min-height: calc(100vh - 6px);
|
||||
display: grid;
|
||||
grid-template-rows: 0fr 1fr 0fr;
|
||||
}
|
||||
.container main {
|
||||
padding-left: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -43,6 +43,10 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
@apply text-5xl;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -42,7 +42,11 @@
|
||||
$: categories = Array.from(new Set(dataToDisplay.map(item => item.category)))
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style>
|
||||
h1 {
|
||||
@apply text-5xl;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -14,20 +14,19 @@
|
||||
<title>Home - Svelte Society</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="wrapper">
|
||||
<h1>Welcome to Svelte Society!</h1>
|
||||
<p>
|
||||
<div class="text-2xl">
|
||||
<h1 class="text-7xl mt-20 mb-10">Welcome to Svelte Society!</h1>
|
||||
<p class="mb-4">
|
||||
We are a volunteer global network of Svelte fans that strive to promote Svelte and its
|
||||
ecosystem. As a service to the community, this site is a central index of <a href="/events"
|
||||
>events</a
|
||||
>, a <a href="/components">components directory</a>, as well as <a href="/receipes">recipes</a> and
|
||||
ecosystem. As a service to the community, this site is a central index of <a href="/events">events</a>,
|
||||
a <a href="/components">components directory</a>, as well as <a href="/receipes">recipes</a> and
|
||||
other useful resources. Join us or help us out!
|
||||
</p>
|
||||
<p>
|
||||
<p class="mb-4">
|
||||
If you want to reach out to us or find like-minded people from around the world you can check
|
||||
out the resources below:
|
||||
</p>
|
||||
<ul>
|
||||
<ul class="mt-10 mb-14 ml-40 mr-40">
|
||||
<Link path="https://youtube.com/SvelteSociety" image="images/youtube.svg" alt="YouTube icon"
|
||||
>YouTube</Link
|
||||
>
|
||||
@@ -44,7 +43,7 @@
|
||||
>Podcast</Link
|
||||
>
|
||||
</ul>
|
||||
<p>
|
||||
<p class="mb-4">
|
||||
We also run the biannual <a href="https://sveltesummit.com/">Svelte Summit</a> conference and
|
||||
host <a href="https://www.svelteradio.com/">the Svelte Radio podcast</a>.
|
||||
</p>
|
||||
@@ -53,20 +52,18 @@
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-300);
|
||||
}
|
||||
p {
|
||||
margin: 0 auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 1.6;
|
||||
max-width: 60ch;
|
||||
margin-bottom: var(--space-300);
|
||||
}
|
||||
ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
grid-gap: var(--space-600);
|
||||
list-style-type: none;
|
||||
margin: calc(var(--space-600) * 3) 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
<div class="content-wrap">
|
||||
<div class="my-1">
|
||||
<h1>Cookbook</h1>
|
||||
<h1 class="text-5xl mt-6 mb-4">Cookbook</h1>
|
||||
<p class="intro">
|
||||
This cookbook serves shows users how best-in-practice code is written in
|
||||
Svelte. You’ll learn how to import third-party libraries, external scripts
|
||||
|
||||
@@ -5,18 +5,43 @@
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
<style global>
|
||||
.wrapper {
|
||||
max-width: 65ch;
|
||||
}
|
||||
.wrapper :global(h2), .wrapper :global(h3) {
|
||||
margin-top: 2rem;
|
||||
|
||||
.wrapper p {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.wrapper :global(p) {
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
.wrapper ul {
|
||||
@apply list-disc;
|
||||
@apply list-inside;
|
||||
}
|
||||
.wrapper :global(li) {
|
||||
.wrapper li {
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
.wrapper ul ul {
|
||||
@apply mt-4;
|
||||
@apply ml-4;
|
||||
}
|
||||
|
||||
.wrapper h1 {
|
||||
font-weight: 700;
|
||||
@apply text-6xl;
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.wrapper h2 {
|
||||
font-weight: 700;
|
||||
@apply text-4xl;
|
||||
@apply mt-6;
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.wrapper h3 {
|
||||
font-weight: 600;
|
||||
@apply text-2xl;
|
||||
@apply mb-2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,8 +8,7 @@
|
||||
- [esbuild-svelte](https://github.com/EMH333/esbuild-svelte)
|
||||
- esbuild plugin
|
||||
- [rollup-plugin-svelte-hot](https://github.com/rixo/rollup-plugin-svelte-hot)
|
||||
- Rollup plugin
|
||||
- HMR
|
||||
- Rollup plugin with HMR support
|
||||
- [parcel-plugin-svelte](https://github.com/DeMoorJasper/parcel-plugin-svelte)
|
||||
- Parcel plugin
|
||||
- [sveltify](https://github.com/tehshrike/sveltify)
|
||||
|
||||
@@ -7,7 +7,9 @@ const extensions = [`.svelte`, '.md', `.mdx`, '.svx'];
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
preprocess: [
|
||||
preprocess(),
|
||||
preprocess({
|
||||
"postcss": true
|
||||
}),
|
||||
mdsvex({
|
||||
extensions: extensions,
|
||||
layout: {
|
||||
@@ -21,7 +23,14 @@ const config = {
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
// hydrate the <div id="svelte"> element in src/app.html
|
||||
target: '#svelte'
|
||||
target: '#svelte',
|
||||
vite: {
|
||||
optimizeDeps: {
|
||||
// workaround Vite issue to fix highlighting on cheatsheet
|
||||
// https://github.com/metonym/svelte-highlight/issues/158
|
||||
include: ["highlight.js/lib/core"],
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
12
tailwind.config.cjs
Normal file
12
tailwind.config.cjs
Normal file
@@ -0,0 +1,12 @@
|
||||
const config = {
|
||||
mode: "jit",
|
||||
purge: [
|
||||
"./src/**/*.{html,js,svelte,ts}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
Reference in New Issue
Block a user