mirror of
https://github.com/LukeHagar/sveltesociety.dev.git
synced 2025-12-09 12:47:44 +00:00
look this over
This commit is contained in:
brittneypostma
@@ -43,7 +43,8 @@
|
||||
border-radius: 5px;
|
||||
}
|
||||
.card h3 {
|
||||
word-break: break-word;
|
||||
word-break: none;
|
||||
font-size: var(--font-300);
|
||||
}
|
||||
h3 a {
|
||||
text-decoration: none;
|
||||
|
||||
@@ -29,6 +29,9 @@
|
||||
</figure>
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
font-size: var(--font-300);
|
||||
}
|
||||
.event-tile {
|
||||
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
@@ -36,13 +39,16 @@
|
||||
padding: 2rem;
|
||||
margin-top: 3rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #f3f6f9;
|
||||
background: var(--white);
|
||||
display: grid;
|
||||
gap: var(--s-2);
|
||||
justify-items: flex-start;
|
||||
}
|
||||
.event-tile:hover {
|
||||
background: #e8f3fe;
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.past-event {
|
||||
background-color: #fcd34d;
|
||||
background-color: var(--caution);
|
||||
padding: 0.3rem;
|
||||
border-radius: 0.6rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@@ -4,11 +4,8 @@
|
||||
var year = date.getFullYear();
|
||||
</script>
|
||||
|
||||
<div class="w-full bg-basics-100">
|
||||
<footer class="container mx-auto p-8 md:p-12">
|
||||
<div
|
||||
class="mx-auto grid gap-2 md:gap-6 md:flex items-center justify-center text-center"
|
||||
>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<span>© {year} Svelte Society</span>
|
||||
<span>•</span>
|
||||
<a class="underline" href="/about">Code of Conduct</a>
|
||||
@@ -24,9 +21,30 @@
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background-color: var(--accent);
|
||||
color: var(--white);
|
||||
padding: var(--s-8);
|
||||
font-size: var(--font-100);
|
||||
}
|
||||
.container {
|
||||
display: grid;
|
||||
gap: var(--s-2);
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
footer {
|
||||
padding: var(--s-12);
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
gap: var(--s-6);
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
footer {
|
||||
display: none;
|
||||
|
||||
@@ -14,28 +14,24 @@
|
||||
];
|
||||
</script>
|
||||
|
||||
<header class="bg-basics-100 py-6 px-4">
|
||||
<div class="container mx-auto">
|
||||
<nav class="py-8">
|
||||
<ul class="grid gap-6 justify-center place-items-center font-bold xl:flex">
|
||||
<header>
|
||||
<div class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
{#each linksLeft as [path, name]}
|
||||
<Link {path} active={path === '/' ? $page.path === '/' : $page.path.includes(path)}
|
||||
>{name}</Link
|
||||
>
|
||||
<Link {path} active={path === '/' ? $page.path === '/' : $page.path.includes(path)}>
|
||||
{name}
|
||||
</Link>
|
||||
{/each}
|
||||
<li class="absolute right-4 top-4 xl:flex xl:relative xl:-inset-0 xl:items-center">
|
||||
<li>
|
||||
<a href="/">
|
||||
<img
|
||||
alt="Svelte Society Logo"
|
||||
src="/images/logo.svg"
|
||||
class="w-12 h-12 xl:w-32 xl:h-32"
|
||||
/>
|
||||
<img alt="Svelte Society Logo" src="/images/logo.svg" />
|
||||
</a>
|
||||
</li>
|
||||
{#each linksRight as [path, name]}
|
||||
<Link {path} active={path === '/' ? $page.path === '/' : $page.path.includes(path)}
|
||||
>{name}</Link
|
||||
>
|
||||
<Link {path} active={path === '/' ? $page.path === '/' : $page.path.includes(path)}>
|
||||
{name}
|
||||
</Link>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -43,15 +39,45 @@
|
||||
</header>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
header {
|
||||
background: var(--accent-color);
|
||||
color: var(--header-text-color);
|
||||
padding: 1.5rem 1rem;
|
||||
padding: var(--s-6) var(--s-4);
|
||||
}
|
||||
nav {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
ul {
|
||||
display: grid;
|
||||
gap: var(--s-6);
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
li {
|
||||
position: absolute;
|
||||
right: var(--s-4);
|
||||
top: var(--s-4);
|
||||
}
|
||||
img {
|
||||
width: var(--s-12);
|
||||
height: var(--s-12);
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
position: relative;
|
||||
inset: 0;
|
||||
align-items: center;
|
||||
}
|
||||
img {
|
||||
width: var(--s-32);
|
||||
height: var(--s-32);
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
header {
|
||||
|
||||
@@ -9,29 +9,24 @@
|
||||
</li>
|
||||
|
||||
<style>
|
||||
/* a {
|
||||
color: black;
|
||||
font-size: var(--font-100);
|
||||
text-decoration: none;
|
||||
border-bottom: 4px solid transparent;
|
||||
transition: border-bottom 0.2s;
|
||||
}
|
||||
li {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--inherit);
|
||||
transition: border-bottom .2s;
|
||||
font-size: var(--font-100);
|
||||
}
|
||||
|
||||
a.nav-item {
|
||||
letter-spacing: 0.05rem;
|
||||
font-weight: lighter;
|
||||
font-weight: 400;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
li a {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
border-bottom: 4px solid var(--color);
|
||||
} */
|
||||
border-bottom: 4px solid var(--primary);
|
||||
}
|
||||
.active {
|
||||
border-bottom: 4px solid var(--color);
|
||||
border-bottom: 4px solid var(--primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,29 +1,17 @@
|
||||
body {
|
||||
border-top: 6px solid var(--color);
|
||||
font-family: Inter;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: Overpass;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-5xl lg:text-7xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-top: 6px solid var(--primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--font-200);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
[href]:hover {
|
||||
text-decoration: none;
|
||||
blockquote {
|
||||
padding-left: var(--font-200);
|
||||
border-left: 5px solid;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@@ -33,24 +21,63 @@ figcaption {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: var(--font-200);
|
||||
border-left: 5px solid;
|
||||
font-style: italic;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.99);
|
||||
h1 {
|
||||
font-size: var(--font-700);
|
||||
}
|
||||
|
||||
.heading {
|
||||
text-align: center;
|
||||
margin: var(--space-600);
|
||||
max-width: 60ch;
|
||||
h2 {
|
||||
font-size: var(--font-600);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-500);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-400);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--font-300);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--font-200);
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* *******UTILITY CLASSES********* */
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: var(--max-width);
|
||||
}
|
||||
|
||||
.heading {
|
||||
text-align: center;
|
||||
margin: var(--s-6);
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
@@ -17,6 +17,8 @@ category: global
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* @docs
|
||||
|
||||
@@ -37,6 +37,9 @@
|
||||
--primary-color: var(--primary);
|
||||
--header-text-color: var(--white);
|
||||
|
||||
/* *******MAX WIDTH OF CONTENT******* */
|
||||
--max-width: 1024px;
|
||||
|
||||
/************FONTS***************/
|
||||
--font-heading: 'Overpass', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
@@ -51,13 +54,54 @@
|
||||
--font-600: clamp(2.4625rem, 1.9945rem + 2.3402vw, 3.6619rem);
|
||||
--font-700: clamp(2.955rem, 2.3218rem + 3.1659vw, 4.5775rem);
|
||||
|
||||
/************SCREEN SIZES***************/
|
||||
--mq-sm: '640px'
|
||||
--mq-md: '768px'
|
||||
--mq-lg: '1024px'
|
||||
--mq-xl: '1280px'
|
||||
--mq-2xl: '1536px'
|
||||
--mq-3xl: '2000px'
|
||||
/* ************SPACING AND SIZES************ */
|
||||
--s-0: 0px;
|
||||
--s-05: 0.125rem;
|
||||
--s-1: 0.25rem;
|
||||
--s-15: 0.375rem;
|
||||
--s-2: 0.5rem;
|
||||
--s-25: 0.625rem;
|
||||
--s-3: 0.75rem;
|
||||
--s-35: 0.875rem;
|
||||
--s-4: 1rem;
|
||||
--s-5: 1.25rem;
|
||||
--s-6: 1.5rem;
|
||||
--s-7: 1.75rem;
|
||||
--s-8: 2rem;
|
||||
--s-9: 2.25rem;
|
||||
--s-10: 2.5rem;
|
||||
--s-11: 2.75rem;
|
||||
--s-12: 3rem;
|
||||
--s-14: 3.5rem;
|
||||
--s-16: 4rem;
|
||||
--s-20: 5rem;
|
||||
--s-24: 6rem;
|
||||
--s-28: 7rem;
|
||||
--s-32: 8rem;
|
||||
--s-36: 9rem;
|
||||
--s-40: 10rem;
|
||||
--s-44: 11rem;
|
||||
--s-48: 12rem;
|
||||
--s-52: 13rem;
|
||||
--s-56: 14rem;
|
||||
--s-60: 15rem;
|
||||
--s-64: 16rem;
|
||||
--s-72: 18rem;
|
||||
--s-80: 20rem;
|
||||
--s-90: 24rem;
|
||||
|
||||
/************** WIDTHS **************/
|
||||
--s-auto: auto;
|
||||
--s-1fourth: 25%;
|
||||
--s-1third: 33.3333333%
|
||||
--s-1half: 50%;
|
||||
--s-2thirds: 66.666667%
|
||||
--s-3fourths: 75%;
|
||||
--s-full: 100%;
|
||||
--s-screen: 100vw;
|
||||
--s-min: min-content;
|
||||
--s-max: max-content;
|
||||
|
||||
|
||||
|
||||
/************BOX SHADOWS***************/
|
||||
|
||||
@@ -21,7 +21,19 @@
|
||||
</svelte:head>
|
||||
|
||||
<Header />
|
||||
<main class="container mx-auto py-10 px-5 lg:py-20">
|
||||
<main class="container">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
main {
|
||||
padding: var(--s-10) var(--s-5) var(--s-20);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
main {
|
||||
padding: var(--s-20) 0 var(--s-40);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,7 +8,7 @@
|
||||
export let doc = '';
|
||||
export let repl = '';
|
||||
let isCopied = false;
|
||||
function copy(): void {
|
||||
function copy() {
|
||||
const element = document.getElementById(title).firstChild;
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(element.innerText);
|
||||
@@ -42,7 +42,7 @@
|
||||
<style>
|
||||
.card {
|
||||
box-shadow: var(--shadow-dreamy);
|
||||
background: #f8f8f8;
|
||||
background: var(--white);
|
||||
width: fit-content;
|
||||
border-radius: 10px;
|
||||
margin-left: 10px;
|
||||
@@ -50,9 +50,9 @@
|
||||
flex: 1;
|
||||
}
|
||||
.title {
|
||||
background-color: firebrick;
|
||||
padding: var(--space-fixed-200);
|
||||
color: #ffffff;
|
||||
background-color: var(--secondary);
|
||||
padding: var(--s-4);
|
||||
color: var(--white);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -64,15 +64,15 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 1em;
|
||||
font-size: var(--font-200);
|
||||
}
|
||||
.circles {
|
||||
display: block;
|
||||
width: var(--space-fixed-300);
|
||||
height: var(--space-fixed-300);
|
||||
width: var(--s-5);
|
||||
height: var(--s-5);
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-red);
|
||||
box-shadow: 25px 0 0 0 var(--color-yellow), 50px 0 0 0 var(--color-green);
|
||||
background-color: var(--link-color);
|
||||
box-shadow: 25px 0 0 0 var(--caution), 50px 0 0 0 var(--success);
|
||||
margin-right: 50px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
@@ -81,7 +81,7 @@
|
||||
justify-content: flex-end;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
color: var(--color-red);
|
||||
color: var(--link-color);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.links > a {
|
||||
@@ -97,7 +97,7 @@
|
||||
}
|
||||
.card > .content {
|
||||
display: block;
|
||||
padding: 0 var(--space-fixed-200);
|
||||
padding: 0 var(--s-2);
|
||||
height: calc(100% - 48px);
|
||||
overflow-x: auto;
|
||||
font-size: 0.8rem;
|
||||
|
||||
@@ -12,9 +12,19 @@
|
||||
<svelte:head>
|
||||
<title>Cheatsheet - Svelte Society</title>
|
||||
</svelte:head>
|
||||
<h1 class="text-5xl mb-5">Cheat Sheet</h1>
|
||||
<main class="flex flex-wrap items-stretch gap-x-5 gap-y-10">
|
||||
<h1>Cheat Sheet</h1>
|
||||
<main>
|
||||
{#each cheatSheet as item}
|
||||
<CheatSheetCard {...item} />
|
||||
{/each}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-items: stretch;
|
||||
row-gap: var(--s-5);
|
||||
column-gap: var(--s-10);
|
||||
}
|
||||
</style>
|
||||
@@ -21,7 +21,7 @@
|
||||
<title>Events - Svelte Society</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="wrapper">
|
||||
<article class="wrapper">
|
||||
<section class="event-wrapper">
|
||||
{#each events.events as event}
|
||||
<EventListElement
|
||||
@@ -33,7 +33,7 @@
|
||||
{/each}
|
||||
</section>
|
||||
<Societies />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
|
||||
@@ -13,9 +13,9 @@
|
||||
<title>Home - Svelte Society</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="py-10 px-5 max-w-5xl mx-auto text-200 grid grid-cols-1 gap-10 lg:gap-20">
|
||||
<h1 class="text-center">Welcome to Svelte Society!</h1>
|
||||
<section class="grid gap-5">
|
||||
<h1 class="text-center">Welcome to Svelte Society!</h1>
|
||||
<article>
|
||||
<section>
|
||||
<p>
|
||||
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"
|
||||
@@ -28,7 +28,7 @@
|
||||
out the resources below:
|
||||
</p>
|
||||
</section>
|
||||
<ul class="flex flex-wrap gap-x-20 gap-y-6 justify-center">
|
||||
<ul>
|
||||
<Link path="https://discord.gg/svelte">
|
||||
<img src="images/discord.svg" alt="" />
|
||||
Discord
|
||||
@@ -42,7 +42,7 @@
|
||||
Twitter
|
||||
</Link>
|
||||
</ul>
|
||||
<ul class="flex flex-wrap gap-x-20 gap-y-6 justify-center">
|
||||
<ul>
|
||||
<Link path="https://svelte.substack.com/">
|
||||
<img src="images/newsletter.svg" alt="" />
|
||||
Newsletter
|
||||
@@ -56,8 +56,29 @@
|
||||
Podcast
|
||||
</Link>
|
||||
</ul>
|
||||
<p>
|
||||
We also run the <a href="https://sveltesummit.com/">Svelte Summit</a> conference and host
|
||||
<a href="https://www.svelteradio.com/">the Svelte Radio podcast</a>.
|
||||
<p class="text-center">
|
||||
We also run the <a href="https://sveltesummit.com/">Svelte Summit</a> conference.
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
article{
|
||||
display: grid;
|
||||
gap: var(--s-20);
|
||||
}
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user