arch/sliproad
1
0
Fork 0
mirror of https://github.com/gmemstr/sliproad.git synced 2024-09-20 08:31:09 +01:00
Code Issues Packages Projects Releases Wiki Activity
sliproad/assets/web/css/styles.css

152 lines
2.9 KiB
CSS
Raw Normal View History

Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
:root {
/* https://coolors.co/fe4a49-fed766-009fb7-e6e6ea-f4f4f8 */
--orange: rgba(254, 74, 73, 1);
--yellow: rgba(254, 215, 102, 1);
--blue: rgba(0, 159, 183, 1);
--platinum: rgba(230, 230, 234, 1);
--white: rgba(244, 244, 248, 1);
--desktop-width: 1170px;
}
body, h1 a {
Subdirectory handling in frontend, README Updated READMe a bit for providers, allowed frontend to better handle linking to subdirectories (previously didn't work at all!).
2020-03-22 21:15:31 +00:00
font-family: sans-serif;
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
color: var(--orange);
background-color: var(--white);
Implement new frontend, "/" at end of provider. Started work on a new basic frontend, with some magic code from @tomhodgins (Tom Hodgins) for templating and processing data, which was the primary purpose for considering a full-fledged JavaScript framework. Fairly simple right now, with minimal "bling", and seems "functional enough". Might need to consider options for using less or no JS down the line if there is demand. As part of this frontend, actually implemented route logic for fetching a sorted list of providers (might be worth investigating whether storing this final result in memory is worth the performance to memory trade-off). Also fixed a bug where adding "/" to the end of a provider name without a file path would result in a 404. This was addressed with some Regex filtering on the path that should be able to handle that matching.
2020-03-22 00:18:19 +00:00
}
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
.grid-lg {
Implement new frontend, "/" at end of provider. Started work on a new basic frontend, with some magic code from @tomhodgins (Tom Hodgins) for templating and processing data, which was the primary purpose for considering a full-fledged JavaScript framework. Fairly simple right now, with minimal "bling", and seems "functional enough". Might need to consider options for using less or no JS down the line if there is demand. As part of this frontend, actually implemented route logic for fetching a sorted list of providers (might be worth investigating whether storing this final result in memory is worth the performance to memory trade-off). Also fixed a bug where adding "/" to the end of a provider name without a file path would result in a 404. This was addressed with some Regex filtering on the path that should be able to handle that matching.
2020-03-22 00:18:19 +00:00
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 2fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
}
.grid-lg a {
display: flex;
padding: 10vh;
justify-content: center;
font-size: 32px;
font-weight: bold;
text-decoration: none;
transition: background-color 0.5s;
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
background-color: var(--blue);
Implement new frontend, "/" at end of provider. Started work on a new basic frontend, with some magic code from @tomhodgins (Tom Hodgins) for templating and processing data, which was the primary purpose for considering a full-fledged JavaScript framework. Fairly simple right now, with minimal "bling", and seems "functional enough". Might need to consider options for using less or no JS down the line if there is demand. As part of this frontend, actually implemented route logic for fetching a sorted list of providers (might be worth investigating whether storing this final result in memory is worth the performance to memory trade-off). Also fixed a bug where adding "/" to the end of a provider name without a file path would result in a 404. This was addressed with some Regex filtering on the path that should be able to handle that matching.
2020-03-22 00:18:19 +00:00
}
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
.list {
width: 40%;
margin: 0 auto;
Implement new frontend, "/" at end of provider. Started work on a new basic frontend, with some magic code from @tomhodgins (Tom Hodgins) for templating and processing data, which was the primary purpose for considering a full-fledged JavaScript framework. Fairly simple right now, with minimal "bling", and seems "functional enough". Might need to consider options for using less or no JS down the line if there is demand. As part of this frontend, actually implemented route logic for fetching a sorted list of providers (might be worth investigating whether storing this final result in memory is worth the performance to memory trade-off). Also fixed a bug where adding "/" to the end of a provider name without a file path would result in a 404. This was addressed with some Regex filtering on the path that should be able to handle that matching.
2020-03-22 00:18:19 +00:00
display: flex;
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
flex-direction: column;
}
.list a {
padding: 1.5vh;
Implement new frontend, "/" at end of provider. Started work on a new basic frontend, with some magic code from @tomhodgins (Tom Hodgins) for templating and processing data, which was the primary purpose for considering a full-fledged JavaScript framework. Fairly simple right now, with minimal "bling", and seems "functional enough". Might need to consider options for using less or no JS down the line if there is demand. As part of this frontend, actually implemented route logic for fetching a sorted list of providers (might be worth investigating whether storing this final result in memory is worth the performance to memory trade-off). Also fixed a bug where adding "/" to the end of a provider name without a file path would result in a 404. This was addressed with some Regex filtering on the path that should be able to handle that matching.
2020-03-22 00:18:19 +00:00
font-size: 24px;
font-weight: bold;
text-decoration: none;
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
text-align: center;
Implement new frontend, "/" at end of provider. Started work on a new basic frontend, with some magic code from @tomhodgins (Tom Hodgins) for templating and processing data, which was the primary purpose for considering a full-fledged JavaScript framework. Fairly simple right now, with minimal "bling", and seems "functional enough". Might need to consider options for using less or no JS down the line if there is demand. As part of this frontend, actually implemented route logic for fetching a sorted list of providers (might be worth investigating whether storing this final result in memory is worth the performance to memory trade-off). Also fixed a bug where adding "/" to the end of a provider name without a file path would result in a 404. This was addressed with some Regex filtering on the path that should be able to handle that matching.
2020-03-22 00:18:19 +00:00
transition: background-color 0.5s;
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
-ms-word-wrap: anywhere;
word-wrap: anywhere;
}
.list a.file {
background-color: var(--orange);
}
.list a.directory {
background-color: var(--blue);
Implement new frontend, "/" at end of provider. Started work on a new basic frontend, with some magic code from @tomhodgins (Tom Hodgins) for templating and processing data, which was the primary purpose for considering a full-fledged JavaScript framework. Fairly simple right now, with minimal "bling", and seems "functional enough". Might need to consider options for using less or no JS down the line if there is demand. As part of this frontend, actually implemented route logic for fetching a sorted list of providers (might be worth investigating whether storing this final result in memory is worth the performance to memory trade-off). Also fixed a bug where adding "/" to the end of a provider name without a file path would result in a 404. This was addressed with some Regex filtering on the path that should be able to handle that matching.
2020-03-22 00:18:19 +00:00
}
.grid-lg a:visited, .grid-lg a,
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
.list a:visited, .list a {
Implement new frontend, "/" at end of provider. Started work on a new basic frontend, with some magic code from @tomhodgins (Tom Hodgins) for templating and processing data, which was the primary purpose for considering a full-fledged JavaScript framework. Fairly simple right now, with minimal "bling", and seems "functional enough". Might need to consider options for using less or no JS down the line if there is demand. As part of this frontend, actually implemented route logic for fetching a sorted list of providers (might be worth investigating whether storing this final result in memory is worth the performance to memory trade-off). Also fixed a bug where adding "/" to the end of a provider name without a file path would result in a 404. This was addressed with some Regex filtering on the path that should be able to handle that matching.
2020-03-22 00:18:19 +00:00
color: white;
}
.grid-lg a:hover,
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
.list a.directory:hover {
color: var(--blue);
background-color: var(--platinum);
transition: background-color 0.5s, color 0.5s;
}
.list a.file:hover {
color: var(--orange);
background-color: var(--platinum);
transition: background-color 0.5s, color 0.5s;
Subdirectory handling in frontend, README Updated READMe a bit for providers, allowed frontend to better handle linking to subdirectories (previously didn't work at all!).
2020-03-22 21:15:31 +00:00
}
@media (prefers-color-scheme: dark) {
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
body { background-color: black; }
.grid-lg a {
Subdirectory handling in frontend, README Updated READMe a bit for providers, allowed frontend to better handle linking to subdirectories (previously didn't work at all!).
2020-03-22 21:15:31 +00:00
color: black;
}
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
.grid-lg a:visited, .grid-lg a {
Subdirectory handling in frontend, README Updated READMe a bit for providers, allowed frontend to better handle linking to subdirectories (previously didn't work at all!).
2020-03-22 21:15:31 +00:00
color: black
}
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
.grid-lg a:hover {
Subdirectory handling in frontend, README Updated READMe a bit for providers, allowed frontend to better handle linking to subdirectories (previously didn't work at all!).
2020-03-22 21:15:31 +00:00
color: lightgray;
background-color: darkgray;
transition: background-color 0.5s;
}
Responsive media queries for grid. Currently just reverts to displaying as a block with some margin, but it does scale really well. Useful for mobile devices.
2020-03-22 21:26:00 +00:00
}
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
form {
margin: 0 auto;
width: 40%;
}
@media only screen and (max-width: 1170px) {
.grid-lg {
Responsive media queries for grid. Currently just reverts to displaying as a block with some margin, but it does scale really well. Useful for mobile devices.
2020-03-22 21:26:00 +00:00
display: block;
}
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
.grid-lg a {
Responsive media queries for grid. Currently just reverts to displaying as a block with some margin, but it does scale really well. Useful for mobile devices.
2020-03-22 21:26:00 +00:00
margin: 10px;
}
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
.list, form {
width: 90%;
}
.list a img {
display: none;
Responsive media queries for grid. Currently just reverts to displaying as a block with some margin, but it does scale really well. Useful for mobile devices.
2020-03-22 21:26:00 +00:00
}
}
Implemented uploading for Backblaze & Disk (v1) Implemented file uploading for both the disk and Backblaze providers. Also implements a UI element and frontend logic for doing so from the frontend. Disk will write directly to disk, while the Backblaze provider will attempt to stream the file from memory directly to the POST body. This could introduce some problems down the line, so caching to disk then uploading in the background may need to be implemented. It also performs the final upload using a goroutine so the end client can continue on it's merry way. Backblaze proved a bit tricky to do, and considering switching to using a library for managing Backblaze going forward.
2020-03-30 20:51:26 +01:00
input[type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
input[type="file"] + label {
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
padding: 10px;
Implemented uploading for Backblaze & Disk (v1) Implemented file uploading for both the disk and Backblaze providers. Also implements a UI element and frontend logic for doing so from the frontend. Disk will write directly to disk, while the Backblaze provider will attempt to stream the file from memory directly to the POST body. This could introduce some problems down the line, so caching to disk then uploading in the background may need to be implemented. It also performs the final upload using a goroutine so the end client can continue on it's merry way. Backblaze proved a bit tricky to do, and considering switching to using a library for managing Backblaze going forward.
2020-03-30 20:51:26 +01:00
font-size: 1.25em;
font-weight: 700;
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
color: var(--desktop-width);
background-color: var(--yellow);
Implemented uploading for Backblaze & Disk (v1) Implemented file uploading for both the disk and Backblaze providers. Also implements a UI element and frontend logic for doing so from the frontend. Disk will write directly to disk, while the Backblaze provider will attempt to stream the file from memory directly to the POST body. This could introduce some problems down the line, so caching to disk then uploading in the background may need to be implemented. It also performs the final upload using a goroutine so the end client can continue on it's merry way. Backblaze proved a bit tricky to do, and considering switching to using a library for managing Backblaze going forward.
2020-03-30 20:51:26 +01:00
display: inline-block;
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
border: 2px solid var(--orange);
border-radius: 5px 5px 0 0;
border-bottom: none;
Implemented uploading for Backblaze & Disk (v1) Implemented file uploading for both the disk and Backblaze providers. Also implements a UI element and frontend logic for doing so from the frontend. Disk will write directly to disk, while the Backblaze provider will attempt to stream the file from memory directly to the POST body. This could introduce some problems down the line, so caching to disk then uploading in the background may need to be implemented. It also performs the final upload using a goroutine so the end client can continue on it's merry way. Backblaze proved a bit tricky to do, and considering switching to using a library for managing Backblaze going forward.
2020-03-30 20:51:26 +01:00
}
input[type="file"]:focus + label,
input[type="file"] + label:hover {
Restyled frontend with nicer colours and layout. Got some good pointers for how to layout directories, so took the chance to add a nicer colour palette. May tweak this a little later down the line, but blue = directory, red = file.
2020-04-03 21:19:59 +01:00
background-color: var(--platinum);
}
progress {
background: var(--platinum);
border: 1px solid var(--orange);
}
progress::-webkit-progress-bar {
background: var(--orange);
}
progress::-webkit-progress-value {
background: var(--orange);
}
progress::-moz-progress-bar {
background: var(--orange);
Implemented uploading for Backblaze & Disk (v1) Implemented file uploading for both the disk and Backblaze providers. Also implements a UI element and frontend logic for doing so from the frontend. Disk will write directly to disk, while the Backblaze provider will attempt to stream the file from memory directly to the POST body. This could introduce some problems down the line, so caching to disk then uploading in the background may need to be implemented. It also performs the final upload using a goroutine so the end client can continue on it's merry way. Backblaze proved a bit tricky to do, and considering switching to using a library for managing Backblaze going forward.
2020-03-30 20:51:26 +01:00
}
Reference in a new issue Copy permalink