light7734/dazzle
1
1
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages Wiki Activity Actions

feat: quick hack for flow & no header support

Browse source
This commit is contained in:
light7734 2025-08-01 18:27:43 +03:30
parent ed8c3b800e
commit c5ad078320
No known key found for this signature in database
GPG key ID: 800DB1F0F077F28E
1 changed files with 86 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
src/routes/articles/Note.svelte
View file

@ -1,75 +1,106 @@
<script lang="ts"> <script lang="ts">
import { Info, BookCopy, Eye, Network, Sigma, Image, Quote } from '@lucide/svelte'; import { Info, BookCopy, Eye, Network, Sigma, Image, Quote } from '@lucide/svelte';
let { title = '', type = 'info' } = $props(); let { title = '', type = 'info', flow = false } = $props();
</script> </script>
<div class="note"> <div>
{#if type == 'none'}
<div class="note_no_margin">
<div class="head"> <div class="head">
<div class="icon"> {#if type != 'none'}
{#if type == 'info'} <div class="icon">
<Info /> {#if type == 'info'}
{:else if type == 'image'} <Info />
<Image /> {:else if type == 'image'}
{:else if type == 'diagram'} <Image />
<Network /> {:else if type == 'diagram'}
{:else if type == 'quote'} <Network />
<Quote /> {:else if type == 'quote'}
{:else if type == 'math'} <Quote />
<Sigma /> {:else if type == 'math'}
{:else if type == 'review'} <Sigma />
<Eye /> {:else if type == 'review'}
{:else if type == 'resource'} <Eye />
<BookCopy /> {:else if type == 'resource'}
{/if} <BookCopy />
</div> {/if}
</div>
{/if}
{#if type == 'info'} {#if flow == false}
<div class="horiz_line" style:background-color="#8ec07c"></div> <div class="horiz_line" style:background-color="#fabd2f"></div>
{:else if type == 'diagram'} {:else if title != ''}
<div class="horiz_line" style:background-color="#d3869b"></div> <p class="title">{title}</p>
{:else if type == 'quote'}
<div class="horiz_line" style:background-color="#d3869b"></div>
{:else if type == 'image'}
<div class="horiz_line" style:background-color="#d3869b"></div>
{:else if type == 'math'}
<div class="horiz_line" style:background-color="#fe8019"></div>
{:else if type == 'review'}
<div class="horiz_line" style:background-color="#cc241d"></div>
{:else if type == 'resource'}
<div class="horiz_line" style:background-color="#458588"></div>
{/if} {/if}
</div> </div>
<div class="content"> <div class="content">
{#if type == 'info'} <div class="line" style:background-color="#fabd2f"></div>
<div class="line" style:background-color="#8ec07c"></div>
{:else if type == 'diagram'}
<div class="line" style:background-color="#d3869b"></div>
{:else if type == 'quote'}
<div class="line" style:background-color="#d3869b"></div>
{:else if type == 'image'}
<div class="line" style:background-color="#d3869b"></div>
{:else if type == 'math'}
<div class="line" style:background-color="#fe8019"></div>
{:else if type == 'review'}
<div class="line" style:background-color="#cc241d"></div>
{:else if type == 'resource'}
<div class="line" style:background-color="#458588"></div>
{/if}
<div class="slot"> <div class="slot">
{#if title != ''} {#if title != ''}
<p class="title">{title}</p> {#if flow == false}
<p>{title}</p>
{/if}
{/if} {/if}
<slot /> <slot />
</div> </div>
</div> </div>
</div> </div>
{:else if type != 'none'}
<div class="note">
<div class="head">
{#if type != 'none'}
<div class="icon">
{#if type == 'info'}
<Info />
{:else if type == 'image'}
<Image />
{:else if type == 'diagram'}
<Network />
{:else if type == 'quote'}
<Quote />
{:else if type == 'math'}
<Sigma />
{:else if type == 'review'}
<Eye />
{:else if type == 'resource'}
<BookCopy />
{/if}
</div>
{/if}
{#if flow == false}
<div class="horiz_line" style:background-color="#fabd2f"></div>
{:else if title != ''}
<p class="title">{title}</p>
{/if}
</div>
<div class="content">
<div class="line" style:background-color="#fabd2f"></div>
<div class="slot">
{#if title != ''}
{#if flow == false}
<p>{title}</p>
{/if}
{/if}
<slot />
</div>
</div>
</div>
{/if}
</div>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
.title { .title {
margin: 0;
margin-left: 1em;
margin-top: 4px;
font-weight: bolder;
} }
.note { .note {
@ -78,6 +109,12 @@
border-radius: 2px; border-radius: 2px;
} }
.note_no_margin {
display: block;
border-radius: 2px;
}
.head { .head {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;