2022-01-02 04:57:52 +01:00
< script >
import Panel from './Panel.svelte';
import Modfiles from './Modfiles.svelte';
import { sort , sortMode , sortingModes , groups , groupsEnabled } from './modfiles';
2022-01-02 15:04:11 +01:00
const groupIcons = ['unarchive', 'link'];
2022-01-02 04:57:52 +01:00
< / 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;
}
2022-01-02 15:04:11 +01:00
.options button i {
display: inline-block;
line-height: 1;
vertical-align: middle;
}
2022-01-02 04:57:52 +01:00
< / 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 >
2022-01-02 05:09:49 +01:00
< li > < a target = "_blank" rel = "noopener noreferrer" href = "https://git.oat.zone/oat/oat-zone-modfiles" > page source code< / a > < / li >
2022-01-02 04:57:52 +01:00
< / 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" >
2022-01-02 15:04:11 +01:00
{ #each groups as mode , i } < button class:selected = { $groupsEnabled [ i ]} on:click= {() => { $groupsEnabled [ i ] = ! $groupsEnabled [ i ]}} > { #if groupIcons [ i ]} < i class = "material-icons" > { groupIcons [ i ]} </ i > { /if }{ mode } </ button > { /each }
2022-01-02 04:57:52 +01:00
< / div >
< / Panel >
2022-01-02 15:04:11 +01:00
< / div >