91 lines
2.7 KiB
Svelte
91 lines
2.7 KiB
Svelte
<script>
|
|
import Panel from './Panel.svelte';
|
|
import Modfiles from './Modfiles.svelte';
|
|
import { sort, sortMode, sortingModes, groups, groupsEnabled } from './modfiles';
|
|
</script>
|
|
|
|
<style>
|
|
.columns {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
flex-flow: row wrap;
|
|
align-items: flex-start;
|
|
}
|
|
.nowrap {
|
|
display: inline-block;
|
|
}
|
|
|
|
@media screen and (max-width: 953px) {
|
|
:global(.panel) {
|
|
position: inherit !important;
|
|
}
|
|
.columns {
|
|
justify-content: center;
|
|
}
|
|
.columns:nth-child(3) {
|
|
order: 1;
|
|
}
|
|
}
|
|
|
|
.columns:nth-child(1) {
|
|
order: 0;
|
|
}
|
|
.columns:nth-child(2) {
|
|
order: 2;
|
|
}
|
|
.columns:nth-child(3) {
|
|
order: 3;
|
|
}
|
|
|
|
.options {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.options button {
|
|
border: 2px solid var(--fg);
|
|
box-shadow: 2px 2px 0 #000, 4px 4px 0 var(--bg);
|
|
border-radius: 0px;
|
|
padding: 4px;
|
|
|
|
background: linear-gradient(180deg, black 0%, var(--fg, white) 0% 100%);
|
|
background-repeat: no-repeat;
|
|
background-position: 0px -40px;
|
|
|
|
transition: 0.2s background-position, 0.2s color;
|
|
|
|
cursor: pointer;
|
|
}
|
|
.options button.selected {
|
|
color: #000;
|
|
background-position: 0px 0px;
|
|
}
|
|
</style>
|
|
|
|
<div class="columns">
|
|
<Panel type="hi!" --fg="#3FA58C" --bg="#3a7a6a" --fg2="#89e8d0" --position="sticky">
|
|
this is my cozy little space for modfiles, hosted by <a href="https://heysora.net/">HeySora</a>! you'll be able to find <span class="nowrap"><b><i class="material-icons">unarchive</i> pack downloads</b></span>, <span class="nowrap"><b><i class="material-icons">music_note</i> song links</b></span>, <span class="nowrap"><b><i class="material-icons">video_library</i> video lineouts</b></span> and most importantly <span class="nowrap"><b><i class="material-icons">file_download</i> downloads</b></span> for my files here.<br><br>
|
|
|
|
here's a few useful links:<br>
|
|
|
|
<ul>
|
|
<li><a target="_blank" rel="noopener noreferrer" href="https://notitg.heysora.net/">NotITG's homepage</a></li>
|
|
<li><a target="_blank" rel="noopener noreferrer" href="https://oat.zone/">my homepage</a></li>
|
|
<li><a target="_blank" rel="noopener noreferrer" href="https://uksrt.heysora.net/discord">NotITG Discord</a></li>
|
|
</ul>
|
|
</Panel>
|
|
<Panel type="modfiles" --fg="#DD5B5A" --bg="#7e3a3a" --width="450px">
|
|
<Modfiles --fg="#DD5B5A" --bg="#7e3a3a"/>
|
|
</Panel>
|
|
<Panel type="sorting" --fg="#B6C436" --bg="#747c26" --position="sticky">
|
|
<b>Sort:</b><br>
|
|
<div class="options">
|
|
{#each sortingModes as mode}<button class:selected={mode === $sortMode} on:click={() => {sort(mode)}}>{mode}</button>{/each}
|
|
</div>
|
|
<b>Include:</b><br>
|
|
<div class="options">
|
|
{#each groups as mode, i}<button class:selected={$groupsEnabled[i]} on:click={() => {$groupsEnabled[i] = !$groupsEnabled[i]}}>{mode}</button>{/each}
|
|
</div>
|
|
</Panel>
|
|
</div> |