DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

There's complexity in simplicity:

Browse source
This commit is contained in:
BOTAlex 2024-12-31 05:04:13 +01:00
parent 73c366e0f0
commit 5f78e8bf04
95 changed files with 9624 additions and 10843 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/comps/Utils/HorizonalStack.svelte
View file

@ -1,12 +1,12 @@
<div {...$$restProps}>
<slot></slot>
</div>
<style>
.centralize{
display: grid;
justify-content: center;
padding: 0;
}
<div {...$$restProps}>
<slot></slot>
</div>
<style>
.centralize{
display: grid;
justify-content: center;
padding: 0;
}
</style>

6
src/comps/Utils/VerticalStack.svelte
View file

@ -1,4 +1,4 @@
<!-- Just used for ease of read -->
<div style="padding: 0;">
<slot></slot>
<!-- Just used for ease of read -->
<div style="padding: 0;">
<slot></slot>
</div>

14
src/comps/Utils/ZSpacer.svelte
View file

@ -1,8 +1,8 @@
<div class="grow" />
<style>
.grow{
display: flex;
flex-grow: 1;
}
<div class="grow" />
<style>
.grow{
display: flex;
flex-grow: 1;
}
</style>

28
src/comps/timeline/timeline.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts">
import HorizonalStack from "../Utils/HorizonalStack.svelte";
import TimelineItem from "./timelineItem.svelte";
</script>
<HorizonalStack {...$$restProps}>
<slot/>
</HorizonalStack>
<style>
:global(.JustifyStart){
display: flex;
justify-content: start;
}
<script lang="ts">
import HorizonalStack from "../Utils/HorizonalStack.svelte";
import TimelineItem from "./timelineItem.svelte";
</script>
<HorizonalStack {...$$restProps}>
<slot/>
</HorizonalStack>
<style>
:global(.JustifyStart){
display: flex;
justify-content: start;
}
</style>

197
src/comps/timeline/timelineItem.svelte
View file

@ -1,100 +1,99 @@
<script lang="ts">
import HorizonalStack from "../Utils/HorizonalStack.svelte";
import Img from '@zerodevx/svelte-img'
import VerticalStack from "../Utils/VerticalStack.svelte";
import ZSpacer from "../Utils/ZSpacer.svelte";
import MediaQuery from 'svelte-media-queries';
// Set these when using the component
export let date: string = "null";
export let imagePath: string = "null";
export let title: string = "null";
export let desc: string = "null";
const timelineCollapseThreshhold : string = '1000px';
let timelineCollaped: boolean = false;
</script>
<MediaQuery query='(max-width: {timelineCollapseThreshhold})' bind:matches={timelineCollaped} />
<div class="flexStart timelineItemContainer" style="overflow: auto;">
<div style="padding-top: 10px;">
{#if imagePath !== "null"}
<div class="imageContainer">
<img src={imagePath} class="image" alt="nothing"/>
</div>
{/if}
</div>
<div class="ItemStrip"/>
<div class="noPadding">
<div class="title">{@html title}</div>
<div class="DateText">{@html date}</div>
<div class="bodyText">{@html desc}</div>
</div>
</div>
<style>
.imageContainer {
position: relative;
z-index: -1;
width: 10vw;
height: 10vw;
overflow: hidden;
}
.imageContainer img{
position: absolute;
height: 100%;
width: 100%;
min-width: 100%;
min-height: 100%;
}
.timelineItemContainer{
column-gap: 3vw;
margin-top: 10px;
}
.noPadding{
padding: 0;
}
.flexStart{
display: flex;
justify-content: start;
}
.title {
font-size: 200%;
display: flex;
align-content: center;
}
.bodyText{
font-size: 1rem;
}
.DateText{
margin: 0;
margin-bottom: 0.5rem;
color: darkgray;
display: flex;
align-self: flex-start;
}
.ItemStrip{
min-width: 0.5%;
display: inline-flex;
position: relative;
background-color: rgb(178, 178, 178);
}
<script lang="ts">
import HorizonalStack from "../Utils/HorizonalStack.svelte";
import VerticalStack from "../Utils/VerticalStack.svelte";
import ZSpacer from "../Utils/ZSpacer.svelte";
import MediaQuery from 'svelte-media-queries';
// Set these when using the component
export let date: string = "null";
export let imagePath: string = "null";
export let title: string = "null";
export let desc: string = "null";
const timelineCollapseThreshhold : string = '1000px';
let timelineCollaped: boolean = false;
</script>
<MediaQuery query='(max-width: {timelineCollapseThreshhold})' bind:matches={timelineCollaped} />
<div class="flexStart timelineItemContainer" style="overflow: auto;">
<div style="padding-top: 10px;">
{#if imagePath !== "null"}
<div class="imageContainer">
<img src={imagePath} class="image" alt="nothing"/>
</div>
{/if}
</div>
<div class="ItemStrip"/>
<div class="noPadding">
<div class="title">{@html title}</div>
<div class="DateText">{@html date}</div>
<div class="bodyText">{@html desc}</div>
</div>
</div>
<style>
.imageContainer {
position: relative;
z-index: -1;
width: 10vw;
height: 10vw;
overflow: hidden;
}
.imageContainer img{
position: absolute;
height: 100%;
width: 100%;
min-width: 100%;
min-height: 100%;
}
.timelineItemContainer{
column-gap: 3vw;
margin-top: 10px;
}
.noPadding{
padding: 0;
}
.flexStart{
display: flex;
justify-content: start;
}
.title {
font-size: 200%;
display: flex;
align-content: center;
}
.bodyText{
font-size: 1rem;
}
.DateText{
margin: 0;
margin-bottom: 0.5rem;
color: darkgray;
display: flex;
align-self: flex-start;
}
.ItemStrip{
min-width: 0.5%;
display: inline-flex;
position: relative;
background-color: rgb(178, 178, 178);
}
</style>