CSS refinement #3
@ -3,8 +3,8 @@
|
|||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
transition:
|
||||||
|
background-color 0.2s ease-in-out,
|
||||||
|
color 0.2s ease-in-out;
|
||||||
@apply bg-stone-100 dark:bg-gray-950 text-black dark:text-stone-100 text-center;
|
@apply bg-stone-100 dark:bg-gray-950 text-black dark:text-stone-100 text-center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1,20 +1,25 @@
|
|||||||
<script>
|
<script>
|
||||||
import { AccordionItem } from 'flowbite-svelte';
|
import { AccordionItem } from 'flowbite-svelte';
|
||||||
|
import { Heading, Secondary } from 'flowbite-svelte';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
export let isOpen = false;
|
export let index;
|
||||||
export let link;
|
export let link;
|
||||||
export let title;
|
export let title;
|
||||||
export let description;
|
export let description;
|
||||||
export let published;
|
export let published;
|
||||||
const pubAgo = moment(published).fromNow();
|
const pubAgo = moment(published).fromNow();
|
||||||
|
const open = index === 0;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AccordionItem {...isOpen ? { open: true } : {}}>
|
<AccordionItem {...open ? { open: true } : {}}>
|
||||||
<span slot="header">{@html title} - {pubAgo}</span>
|
<span slot="header" class="flex justify-between items-center w-full">
|
||||||
|
<span>{@html title}</span>
|
||||||
|
<p class="text-xs mr-2">{pubAgo}</p>
|
||||||
|
</span>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
{#if description}
|
{#if description}
|
||||||
<p>with the message:</p>
|
<p>with the message:</p>
|
||||||
<code>{@html description}</code>
|
<code class="overflow-x-clip">{@html description}</code>
|
||||||
{/if}
|
{/if}
|
||||||
<a class="hover:text-slate-100" href={link}>view commit for more details</a>
|
<a class="hover:text-slate-100" href={link}>view commit for more details</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -62,13 +62,9 @@
|
|||||||
<Spinner />
|
<Spinner />
|
||||||
{:else}
|
{:else}
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<Accordion>
|
<Accordion flush>
|
||||||
{#each feed.slice(0, 5) as commit, i}
|
{#each feed.slice(0, 5) as commit, i}
|
||||||
{#if i === 0}
|
<Commit {...commit} index={i} />
|
||||||
<Commit {...commit} isOpen={true} />
|
|
||||||
{:else}
|
|
||||||
<Commit {...commit} open={false} />
|
|
||||||
{/if}
|
|
||||||
{/each}
|
{/each}
|
||||||
</Accordion>
|
</Accordion>
|
||||||
</div>
|
</div>
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
import ThemeSwitch from '$lib/ThemeSwitch.svelte';
|
import ThemeSwitch from '$lib/ThemeSwitch.svelte';
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
|
import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
|
||||||
|
import { DarkMode } from 'flowbite-svelte';
|
||||||
|
|
||||||
// Navigation links are generated based on this object
|
// Navigation links are generated based on this object
|
||||||
const nav = [
|
const nav = [
|
||||||
@ -73,7 +74,7 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
{/key}
|
{/key}
|
||||||
<ThemeSwitch />
|
<DarkMode />
|
||||||
</nav>
|
</nav>
|
||||||
<div class="mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
|
<div class="mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
|
||||||
<slot />
|
<slot />
|
||||||
|
@ -7,7 +7,8 @@
|
|||||||
|
|
||||||
<div in:fade>
|
<div in:fade>
|
||||||
<h1 class="text-2xl">Svelte Portfolio Page</h1>
|
<h1 class="text-2xl">Svelte Portfolio Page</h1>
|
||||||
<p class="text-left">For this product i've used the following:</p>
|
<p class="text-left">For this project i've used the following:</p>
|
||||||
|
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
<a
|
<a
|
||||||
class="underline font-normal hover:text-slate-400"
|
class="underline font-normal hover:text-slate-400"
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
export default {
|
export default {
|
||||||
content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
|
content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
|
||||||
plugins: [require('flowbite/plugin')],
|
plugins: [require('flowbite/plugin')],
|
||||||
darkMode: 'selector',
|
darkMode: 'class',
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
|
Loading…
Reference in New Issue
Block a user