Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-06-07 02:43:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Format SCSS with prettier

Browse source
This commit is contained in:
Michał Gdula 2022-11-09 18:37:02 +00:00
parent 6a28f6022d
commit bd7765b376
9 changed files with 1233 additions and 1195 deletions
Download patch file Download diff file Expand all files Collapse all files

33
app/sanity/check/_database.php
View file

@ -1,13 +1,20 @@
<?php <?php
// Database check, this will check if the database table is setup correctly /*
// Adding these check hopefully will make the gallery more stable as I dont |-------------------------------------------------------------
// Trust my programming skills nor my ability to write good documentation | Database Sanity Check
|-------------------------------------------------------------
// Im also so sorry for the code you're about to read | this will check if the database table is setup correctly
| Adding these checks hopefully will make the gallery more
| stable as I dont trust my programming skills nor my ability
| to write good documentation.
|
| Im also so sorry for the code you're about to read
|-------------------------------------------------------------
*/
if (defined('ROOT') && $_SESSION['id'] == 1) { if (defined('ROOT') && $_SESSION['id'] == 1) {
// Column name Type Null Key Default Extra /* Column name Type Null Key Default Extra */
$table_templates = array( $table_templates = array(
'images' => array( 'images' => array(
array('id', 'int(11)', 'NO', 'PRI', '', 'auto_increment'), array('id', 'int(11)', 'NO', 'PRI', '', 'auto_increment'),
@ -34,9 +41,15 @@ if (defined('ROOT') && $_SESSION['id'] == 1) {
array('last_modified', 'timestamp', 'NO', '', 'CURRENT_TIMESTAMP', 'on update CURRENT_TIMESTAMP'), array('last_modified', 'timestamp', 'NO', '', 'CURRENT_TIMESTAMP', 'on update CURRENT_TIMESTAMP'),
array('created_at', 'timestamp', 'NO', '', 'CURRENT_TIMESTAMP', '') array('created_at', 'timestamp', 'NO', '', 'CURRENT_TIMESTAMP', '')
), ),
'tokens' => array(
array('id', 'int(11)', 'NO', 'PRI', '', 'auto_increment'),
array('code', 'varchar(255)', 'NO', '', '', ''),
array('used', 'boolean', 'NO', '', 'FALSE', ''),
array('created_at', 'timestamp', 'NO', '', 'CURRENT_TIMESTAMP', '')
),
'logs' => array( 'logs' => array(
array('id', 'int(11)', 'NO', 'PRI', '', 'auto_increment'), array('id', 'int(11)', 'NO', 'PRI', '', 'auto_increment'),
array('ipaddress', 'varchar(16)', 'NO', '', '', ''), array('ipaddress', 'varchar(16)', 'NO', '', '', ''),
array('action', 'varchar(255)', 'NO', '', '', ''), array('action', 'varchar(255)', 'NO', '', '', ''),
array('created_at', 'timestamp', 'NO', '', 'CURRENT_TIMESTAMP', '') array('created_at', 'timestamp', 'NO', '', 'CURRENT_TIMESTAMP', '')
), ),
@ -47,12 +60,6 @@ if (defined('ROOT') && $_SESSION['id'] == 1) {
array('time', 'timestamp', 'NO', '', 'CURRENT_TIMESTAMP', ''), array('time', 'timestamp', 'NO', '', 'CURRENT_TIMESTAMP', ''),
array('length', 'int(255)', 'NO', '', '', ''), array('length', 'int(255)', 'NO', '', '', ''),
array('pernament', 'boolean', 'NO', '', 'FALSE', '') array('pernament', 'boolean', 'NO', '', 'FALSE', '')
),
'tokens' => array(
array('id', 'int(11)', 'NO', 'PRI', '', 'auto_increment'),
array('code', 'varchar(255)', 'NO', '', '', ''),
array('used', 'boolean', 'NO', '', 'FALSE', ''),
array('created_at', 'timestamp', 'NO', '', 'CURRENT_TIMESTAMP', '')
) )
); );

8
app/sanity/sanity.php
View file

@ -9,10 +9,10 @@ if (isset($_POST['fix'])) {
echo "<p><span style='color: var(--accent);'>[INFO]</span> Starting autofix</p>"; echo "<p><span style='color: var(--accent);'>[INFO]</span> Starting autofix</p>";
if (empty($_SESSION['id'])) { if (empty($_SESSION['id'])) {
echo "<p><span style='color: var(--warning);'>[ERROR]</span> You are not logged in</p>"; echo "<p class='alert alert-bad'>You are not logged in</p>";
exit(); exit();
} elseif ($_SESSION['id'] != 1) { } elseif ($_SESSION['id'] != 1) {
echo "<p><span style='color: var(--warning);'>[ERRO]</span> You cannot use Autofix as an Admin currently.</p>"; echo "<p class='alert alert-warning'>Autofix is currently not avaliable to You.</p>";
exit(); exit();
} }
@ -31,10 +31,10 @@ if (isset($_POST['fix'])) {
echo "<p><span style='color: var(--accent);'>[INFO]</span> Autofix complete in $timer_diff ms</p>"; echo "<p><span style='color: var(--accent);'>[INFO]</span> Autofix complete in $timer_diff ms</p>";
} elseif (isset($_POST['check'])) { } elseif (isset($_POST['check'])) {
if (empty($_SESSION['id'])) { if (empty($_SESSION['id'])) {
echo "<p><span style='color: var(--warning);'>[ERROR]</span> You are not logged in</p>"; echo "<p class='alert alert-bad'>You are not logged in</p>";
exit(); exit();
} elseif ($_SESSION['id'] != 1) { } elseif ($_SESSION['id'] != 1) {
echo "<p><span style='color: var(--warning);'>[ERRO]</span> You cannot use Autofix as an Admin currently.</p>"; echo "<p class='alert alert-warning'>Autofix is currently not avaliable to You.</p>";
exit(); exit();
} }

202
css/main.css
View file

@ -10,26 +10,26 @@
:root { :root {
--bg: rgba(21, 21, 21, 0.7333333333); --bg: rgba(21, 21, 21, 0.7333333333);
--bg-1: #242621; --bg-1: #242621;
--bg-2: #1D1E1C; --bg-2: #1d1e1c;
--bg-3: #151515; --bg-3: #151515;
--fg: #E8E3E3; --fg: #e8e3e3;
--fg-dark: #151515; --fg-dark: #151515;
--red: #B66467; --red: #b66467;
--orange: #D8A657; --orange: #d8a657;
--yellow: #D9BC8C; --yellow: #d9bc8c;
--green: #8C977D; --green: #8c977d;
--blue: #8DA3B9; --blue: #8da3b9;
--purple: #A988B0; --purple: #a988b0;
--black: #121212; --black: #121212;
--white: #E8E3E3; --white: #e8e3e3;
--accent: #8C977D; --accent: #8c977d;
--warning: #B66467; --warning: #b66467;
--alert: #D8A657; --alert: #d8a657;
--success: #8C977D; --success: #8c977d;
--neutral: #121212; --neutral: #121212;
--shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); --shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
--rad: 0.4rem; --rad: 0.4rem;
--border: #8C977D 0.2rem solid; --border: #8c977d 0.2rem solid;
} }
/* /*
@ -39,9 +39,9 @@
*/ */
nav { nav {
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #e8e3e3;
border-radius: 0.4rem; border-radius: 0.4rem;
border: #8C977D 0.2rem solid; border: #8c977d 0.2rem solid;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -129,7 +129,7 @@ nav .btn {
left: 0; left: 0;
right: 0; right: 0;
border: none; border: none;
border-top: #8C977D 0.2rem solid; border-top: #8c977d 0.2rem solid;
border-radius: 0; border-radius: 0;
-webkit-backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
@ -175,17 +175,17 @@ nav .btn {
.defaultDecoration { .defaultDecoration {
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #e8e3e3;
border-radius: 0.4rem; border-radius: 0.4rem;
border: #8C977D 0.2rem solid; border: #8c977d 0.2rem solid;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.warningDecoration { .warningDecoration {
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #e8e3e3;
border-radius: 0.4rem; border-radius: 0.4rem;
border: #B66467 0.2rem solid; border: #b66467 0.2rem solid;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -305,7 +305,7 @@ nav .btn {
background-color: rgba(21, 21, 21, 0.7333333333); background-color: rgba(21, 21, 21, 0.7333333333);
} }
.nsfw-warning span { .nsfw-warning span {
color: #B66467; color: #b66467;
text-align: center; text-align: center;
} }
.nsfw-warning span::after { .nsfw-warning span::after {
@ -372,8 +372,8 @@ nav .btn {
display: block; display: block;
} }
.fullscreen-image button:hover { .fullscreen-image button:hover {
outline: #E8E3E3 0.2rem solid; outline: #e8e3e3 0.2rem solid;
color: #E8E3E3; color: #e8e3e3;
cursor: pointer; cursor: pointer;
} }
@ -427,8 +427,8 @@ nav .btn {
display: block; display: block;
} }
.preview-button:hover { .preview-button:hover {
outline: #E8E3E3 0.2rem solid; outline: #e8e3e3 0.2rem solid;
color: #E8E3E3; color: #e8e3e3;
cursor: pointer; cursor: pointer;
} }
@ -468,7 +468,7 @@ nav .btn {
margin: 0 0.5rem 0.5rem 0; margin: 0 0.5rem 0.5rem 0;
padding: 0.5rem; padding: 0.5rem;
display: block; display: block;
background-color: #8C977D; background-color: #8c977d;
border-radius: 3px; border-radius: 3px;
font-family: "Secular One", sans-serif; font-family: "Secular One", sans-serif;
} }
@ -498,7 +498,7 @@ nav .btn {
.group-description h2 a { .group-description h2 a {
margin-left: 0.25rem; margin-left: 0.25rem;
font-size: 16px; font-size: 16px;
color: #8C977D; color: #8c977d;
text-decoration: none; text-decoration: none;
} }
.group-description > * { .group-description > * {
@ -508,10 +508,10 @@ nav .btn {
text-decoration: none; text-decoration: none;
} }
.group-description a:hover { .group-description a:hover {
color: #8C977D; color: #8c977d;
} }
.group-description .btn:hover { .group-description .btn:hover {
color: #E8E3E3; color: #e8e3e3;
} }
.group-cover { .group-cover {
@ -543,7 +543,7 @@ nav .btn {
} }
.selectedImage { .selectedImage {
outline: #8C977D solid 0.3rem; outline: #8c977d solid 0.3rem;
transform: scale(0.8) !important; transform: scale(0.8) !important;
} }
@ -599,7 +599,7 @@ nav .btn {
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1); transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
} }
.group-make:hover { .group-make:hover {
outline: #E8E3E3 0.2rem solid; outline: #e8e3e3 0.2rem solid;
} }
.group-make:after { .group-make:after {
content: ""; content: "";
@ -627,7 +627,7 @@ nav .btn {
font-family: "Secular One", sans-serif; font-family: "Secular One", sans-serif;
} }
.group-make button:hover { .group-make button:hover {
color: #E8E3E3; color: #e8e3e3;
cursor: pointer; cursor: pointer;
} }
.group-make button span { .group-make button span {
@ -667,7 +667,7 @@ nav .btn {
top: -3rem; top: -3rem;
transform: translateX(-50%); transform: translateX(-50%);
border-radius: 0.4rem; border-radius: 0.4rem;
border: #8C977D 0.2rem solid; border: #8c977d 0.2rem solid;
background-color: #151515; background-color: #151515;
} }
.profile-root h2, .profile-root > p { .profile-root h2, .profile-root > p {
@ -750,8 +750,8 @@ nav .btn {
} }
.active-tab { .active-tab {
background-color: #8C977D !important; background-color: #8c977d !important;
background-image: linear-gradient(to top, #7f8b6f, #8C977D) !important; background-image: linear-gradient(to top, #7f8b6f, #8c977d) !important;
} }
.logs { .logs {
@ -850,7 +850,7 @@ nav .btn {
} }
.perm { .perm {
border-left: #8C977D 0.2rem solid; border-left: #8c977d 0.2rem solid;
} }
.ban:first-of-type { .ban:first-of-type {
@ -910,7 +910,7 @@ nav .btn {
} }
.is-admin { .is-admin {
border-left: #8C977D 0.2rem solid; border-left: #8c977d 0.2rem solid;
} }
.user:first-of-type { .user:first-of-type {
@ -927,14 +927,14 @@ nav .btn {
} }
.btn-code::before { .btn-code::before {
content: "Hover to reveal"; content: "Hover to reveal";
color: #E8E3E3; color: #e8e3e3;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.btn-code:hover { .btn-code:hover {
color: #E8E3E3; color: #e8e3e3;
} }
.btn-code:hover::before { .btn-code:hover::before {
content: ""; content: "";
@ -967,9 +967,9 @@ nav .btn {
} }
/* /*
|------------------------------------------------------------- |-------------------------------------------------------------
| FOOTER | FOOTER
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
footer { footer {
margin: 0 auto; margin: 0 auto;
@ -996,7 +996,7 @@ footer a {
font-family: "Secular One", sans-serif; font-family: "Secular One", sans-serif;
} }
footer a:hover { footer a:hover {
color: #D8A657; color: #d8a657;
} }
/* /*
@ -1031,7 +1031,7 @@ body {
position: relative; position: relative;
} }
body * { body * {
color: #E8E3E3; color: #e8e3e3;
} }
/* /*
@ -1051,45 +1051,45 @@ body * {
text-decoration: none; text-decoration: none;
border: none; border: none;
border-radius: 3px; border-radius: 3px;
outline: #E8E3E3 0 solid; outline: #e8e3e3 0 solid;
transition: outline 0.1s; transition: outline 0.1s;
/* /*
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
width: calc(100% + calc($border-thickness * 4)); width: calc(100% + calc($border-thickness * 4));
height: calc(100% + calc($border-thickness * 4)); height: calc(100% + calc($border-thickness * 4));
top: calc($border-thickness * -2); top: calc($border-thickness * -2);
left: calc($border-thickness * -2); left: calc($border-thickness * -2);
z-index: +1; z-index: +1;
@if calc($rad - 0.5rem) > 0 { @if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem); border-radius: calc($rad - 0.5rem);
} @else { } @else {
border-radius: calc(3px * 2); border-radius: calc(3px * 2);
} }
border: $fg $border-thickness solid; border: $fg $border-thickness solid;
opacity: 0; opacity: 0;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
pointer-events: none; pointer-events: none;
} }
*/ */
} }
.btn:hover { .btn:hover {
outline: #E8E3E3 0.2rem solid; outline: #e8e3e3 0.2rem solid;
color: #E8E3E3; color: #e8e3e3;
cursor: pointer; cursor: pointer;
/* /*
&::after { &::after {
opacity: 1; opacity: 1;
width: calc(100% + calc($border-thickness * 2)); width: calc(100% + calc($border-thickness * 2));
height: calc(100% + calc($border-thickness * 2)); height: calc(100% + calc($border-thickness * 2));
top: calc($border-thickness * -1); top: calc($border-thickness * -1);
left: calc($border-thickness * -1); left: calc($border-thickness * -1);
} }
*/ */
} }
.btn:where(input[type=file])::-webkit-file-upload-button { .btn:where(input[type=file])::-webkit-file-upload-button {
margin: -0.5rem 0.5rem -0.5rem -0.5rem; margin: -0.5rem 0.5rem -0.5rem -0.5rem;
@ -1098,7 +1098,7 @@ body * {
font-size: 16px; font-size: 16px;
font-family: "Secular One", sans-serif; font-family: "Secular One", sans-serif;
text-decoration: none; text-decoration: none;
background-color: #E8E3E3; background-color: #e8e3e3;
border: none; border: none;
border-radius: 3px; border-radius: 3px;
} }
@ -1109,7 +1109,7 @@ body * {
font-size: 16px; font-size: 16px;
font-family: "Secular One", sans-serif; font-family: "Secular One", sans-serif;
text-decoration: none; text-decoration: none;
background-color: #E8E3E3; background-color: #e8e3e3;
border: none; border: none;
border-radius: 3px; border-radius: 3px;
} }
@ -1128,18 +1128,18 @@ a.btn {
} }
.btn-bad { .btn-bad {
background-color: #B66467; background-color: #b66467;
background-image: linear-gradient(to top, #ae5356, #B66467); background-image: linear-gradient(to top, #ae5356, #b66467);
} }
.btn-warning { .btn-warning {
background-color: #D8A657; background-color: #d8a657;
background-image: linear-gradient(to top, #d39b42, #D8A657); background-image: linear-gradient(to top, #d39b42, #d8a657);
} }
.btn-good { .btn-good {
background-color: #8C977D; background-color: #8c977d;
background-image: linear-gradient(to top, #7f8b6f, #8C977D); background-image: linear-gradient(to top, #7f8b6f, #8c977d);
} }
.btn-neutral { .btn-neutral {
@ -1161,24 +1161,24 @@ a.btn {
font-weight: 500; font-weight: 500;
font-family: "Secular One", sans-serif; font-family: "Secular One", sans-serif;
text-decoration: none; text-decoration: none;
border-left: 0.2rem solid #E8E3E3; border-left: 0.2rem solid #e8e3e3;
background-color: #151515; background-color: #151515;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 3px; border-radius: 3px;
} }
.alert-bad { .alert-bad {
border-color: #B66467; border-color: #b66467;
background-image: linear-gradient(120deg, rgba(182, 100, 103, 0.3), rgba(21, 21, 21, 0)); background-image: linear-gradient(120deg, rgba(182, 100, 103, 0.3), rgba(21, 21, 21, 0));
} }
.alert-warning { .alert-warning {
border-color: #D8A657; border-color: #d8a657;
background-image: linear-gradient(120deg, rgba(216, 166, 87, 0.3), rgba(21, 21, 21, 0)); background-image: linear-gradient(120deg, rgba(216, 166, 87, 0.3), rgba(21, 21, 21, 0));
} }
.alert-good { .alert-good {
border-color: #8C977D; border-color: #8c977d;
background-image: linear-gradient(120deg, rgba(140, 151, 125, 0.3), rgba(21, 21, 21, 0)); background-image: linear-gradient(120deg, rgba(140, 151, 125, 0.3), rgba(21, 21, 21, 0));
} }
@ -1200,7 +1200,7 @@ a.btn {
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
border: #121212 0.2rem solid; border: #121212 0.2rem solid;
border-radius: 3px; border-radius: 3px;
color: #E8E3E3; color: #e8e3e3;
font-size: 0.8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;
font-family: "Secular One", sans-serif; font-family: "Secular One", sans-serif;
@ -1216,24 +1216,24 @@ a.btn {
} }
.badge.badge-primary { .badge.badge-primary {
background: rgba(140, 151, 125, 0.3); background: rgba(140, 151, 125, 0.3);
border: #8C977D 0.2rem solid; border: #8c977d 0.2rem solid;
} }
.badge.badge-primary.link:hover { .badge.badge-primary.link:hover {
color: #8C977D; color: #8c977d;
} }
.badge.badge-critical { .badge.badge-critical {
background: rgba(182, 100, 103, 0.3); background: rgba(182, 100, 103, 0.3);
border: #B66467 0.2rem solid; border: #b66467 0.2rem solid;
} }
.badge.badge-critical.link:hover { .badge.badge-critical.link:hover {
color: #B66467; color: #b66467;
} }
.badge.badge-warning { .badge.badge-warning {
background: rgba(216, 166, 87, 0.3); background: rgba(216, 166, 87, 0.3);
border: #D8A657 0.2rem solid; border: #d8a657 0.2rem solid;
} }
.badge.badge-warning.link:hover { .badge.badge-warning.link:hover {
color: #D8A657; color: #d8a657;
} }
/* /*
@ -1309,7 +1309,7 @@ a.link {
text-decoration: underline; text-decoration: underline;
} }
a.link:hover { a.link:hover {
color: #8C977D; color: #8c977d;
} }
/* /*
@ -1334,7 +1334,7 @@ a.link:hover {
transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1); transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
} }
#back-to-top:hover { #back-to-top:hover {
outline: 0.2rem solid #8C977D; outline: 0.2rem solid #8c977d;
} }
#back-to-top * { #back-to-top * {
margin: 0; margin: 0;
@ -1354,7 +1354,7 @@ a.link:hover {
.hr { .hr {
margin: 0.5rem 0; margin: 0.5rem 0;
border: none; border: none;
border-top: 0.2rem solid #E8E3E3; border-top: 0.2rem solid #e8e3e3;
} }
.hr-full { .hr-full {
@ -1363,13 +1363,13 @@ a.link:hover {
} }
.hr-bad { .hr-bad {
border-color: #B66467; border-color: #b66467;
} }
.hr-warning { .hr-warning {
border-color: #D8A657; border-color: #d8a657;
} }
.hr-good { .hr-good {
border-color: #8C977D; border-color: #8c977d;
}/*# sourceMappingURL=main.css.map */ }/*# sourceMappingURL=main.css.map */

475
css/main.scss
View file

@ -20,42 +20,42 @@
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
min-height: 100vh; min-height: 100vh;
max-width: 100vw; max-width: 100vw;
position: relative; position: relative;
background-color: $bg; background-color: $bg;
background-image: url("../assets/backgrounds/bg.svg"); background-image: url("../assets/backgrounds/bg.svg");
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
scroll-behavior: smooth; scroll-behavior: smooth;
overflow: auto; overflow: auto;
} }
body { body {
margin: 0 auto; margin: 0 auto;
padding: 1rem; padding: 1rem;
max-width: 1100px; max-width: 1100px;
min-height: calc(100vh - 2rem); min-height: calc(100vh - 2rem);
@include flexDown(space-between); @include flexDown(space-between);
position: relative; position: relative;
* { * {
color: $fg; color: $fg;
} }
} }
/* /*
@ -64,32 +64,33 @@ body {
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
.btn { .btn {
padding: 0.5rem; padding: 0.5rem;
width: 100%; width: 100%;
position: relative; position: relative;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
font-family: $font-body; font-family: $font-body;
text-decoration: none; text-decoration: none;
border: none; border: none;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
outline: $fg 0 solid; @if calc($rad - 0.5rem) >0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
transition: outline 0.1s; outline: $fg 0 solid;
/* transition: outline 0.1s;
/*
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -113,13 +114,13 @@ body {
} }
*/ */
&:hover { &:hover {
outline: $fg $border-thickness solid; outline: $fg $border-thickness solid;
color: $fg; color: $fg;
cursor: pointer; cursor: pointer;
/* /*
&::after { &::after {
opacity: 1; opacity: 1;
width: calc(100% + calc($border-thickness * 2)); width: calc(100% + calc($border-thickness * 2));
@ -128,66 +129,70 @@ body {
left: calc($border-thickness * -1); left: calc($border-thickness * -1);
} }
*/ */
}
&:where(input[type="file"])::file-selector-button {
margin: -0.5rem 0.5rem -0.5rem -0.5rem;
padding: 0.5rem;
display: inline-block;
font-size: 16px;
font-family: $font-body;
text-decoration: none;
background-color: $white;
border: none;
@if calc($rad - 0.5rem) >0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
} }
}
&:where(input[type="file"])::file-selector-button { &:disabled {
margin: -0.5rem 0.5rem -0.5rem -0.5rem; cursor: not-allowed;
padding: 0.5rem; outline: none;
display: inline-block; z-index: 1;
font-size: 16px; filter: brightness(0.5) grayscale(0.3);
font-family: $font-body;
text-decoration: none; img {
display: none;
background-color: $white;
border: none;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
}
&:disabled {
cursor: not-allowed;
outline: none;
z-index: 1;
filter: brightness(0.5) grayscale(0.3);
img {
display: none;
}
} }
}
} }
a.btn { a.btn {
text-align: center; text-align: center;
} }
.btn-bad { .btn-bad {
background-color: $warning; background-color: $warning;
background-image: linear-gradient(to top, darken($warning, 5%), $warning); background-image: linear-gradient(to top, darken($warning, 5%), $warning);
} }
.btn-warning { .btn-warning {
background-color: $alert; background-color: $alert;
background-image: linear-gradient(to top, darken($alert, 5%), $alert); background-image: linear-gradient(to top, darken($alert, 5%), $alert);
} }
.btn-good { .btn-good {
background-color: $page-accent; background-color: $page-accent;
background-image: linear-gradient(to top, darken($page-accent, 5%), $page-accent); background-image: linear-gradient(
to top,
darken($page-accent, 5%),
$page-accent
);
} }
.btn-neutral { .btn-neutral {
background-color: $neutral; background-color: $neutral;
background-image: linear-gradient(to top, darken($neutral, 0.5%), $neutral); background-image: linear-gradient(to top, darken($neutral, 0.5%), $neutral);
} }
/* /*
@ -196,51 +201,57 @@ a.btn {
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
.alert { .alert {
padding: 0.75rem; padding: 0.75rem;
width: 100%; width: 100%;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
font-family: $font-body; font-family: $font-body;
text-decoration: none; text-decoration: none;
border-left: $border-thickness solid $fg; border-left: $border-thickness solid $fg;
background-color: $bg; background-color: $bg;
background-repeat: no-repeat; background-repeat: no-repeat;
@if calc($rad - 0.5rem) > 0 { @if calc($rad - 0.5rem) >0 {
border-radius: calc($rad - 0.3rem); border-radius: calc($rad - 0.3rem);
} @else { } @else {
border-radius: 3px; border-radius: 3px;
} }
} }
.alert-bad { .alert-bad {
border-color: $warning; border-color: $warning;
background-image: linear-gradient(120deg, rgba($warning, 0.3), rgba($bg, 0)); background-image: linear-gradient(120deg, rgba($warning, 0.3), rgba($bg, 0));
} }
.alert-warning { .alert-warning {
border-color: $alert; border-color: $alert;
background-image: linear-gradient(120deg, rgba($alert, 0.3), rgba($bg, 0)); background-image: linear-gradient(120deg, rgba($alert, 0.3), rgba($bg, 0));
} }
.alert-good { .alert-good {
border-color: $page-accent; border-color: $page-accent;
background-image: linear-gradient(120deg, rgba($page-accent, 0.3), rgba($bg, 0)); background-image: linear-gradient(
120deg,
rgba($page-accent, 0.3),
rgba($bg, 0)
);
} }
.alert-box { .alert-box {
> * { > * {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
} }
> *:last-child { > *:last-child {
margin: 0; margin: 0;
} }
} }
/* /*
@ -249,51 +260,53 @@ a.btn {
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
@mixin badge($color, $fg: $color) { @mixin badge($color, $fg: $color) {
background: rgba($color, 0.3); background: rgba($color, 0.3);
border: $color $border-thickness solid; border: $color $border-thickness solid;
&.link:hover { &.link:hover {
color: $color; color: $color;
} }
} }
.badge { .badge {
display: inline-block;
box-sizing: border-box;
//margin: 0 0.25rem;
padding: 0.2em 0.4em;
border: $black $border-thickness solid;
@if calc($rad - 0.5rem) >0 {
border-radius: calc($rad - 0.3rem);
} @else {
border-radius: 3px;
}
color: $fg;
font-size: 0.8em;
font-weight: bold;
font-family: $font-body;
line-height: 1;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
&.link {
cursor: pointer;
text-decoration: none;
display: inline-block; display: inline-block;
box-sizing: border-box; }
//margin: 0 0.25rem;
padding: 0.2em 0.4em;
border: $black $border-thickness solid;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.3rem);
} @else {
border-radius: 3px;
}
color: $fg;
font-size: 0.8em;
font-weight: bold;
font-family: $font-body;
line-height: 1;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
&.link { &.badge-primary {
cursor: pointer; @include badge($page-accent);
text-decoration: none; }
display: inline-block;
}
&.badge-primary { &.badge-critical {
@include badge($page-accent); @include badge($red);
} }
&.badge-critical { &.badge-warning {
@include badge($red); @include badge($orange);
} }
&.badge-warning {
@include badge($orange);
}
} }
/* /*
@ -302,50 +315,52 @@ a.btn {
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
form { form {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
& > * { & > * {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
} }
textarea { textarea {
resize: none; resize: none;
} }
/* /*
|------------------------------------------------------------- |-------------------------------------------------------------
| SVG | SVG
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
.svg { .svg {
margin: 0 0.2rem 0.1rem 0; margin: 0 0.2rem 0.1rem 0;
width: 1.15rem; width: 1.15rem;
height: 1.1rem; height: 1.1rem;
vertical-align: middle; vertical-align: middle;
display: inline; display: inline;
@if calc($rad - 0.5rem) > 0 { @if calc($rad - 0.5rem) >0 {
border-radius: calc($rad - 0.5rem); border-radius: calc($rad - 0.5rem);
} @else { } @else {
border-radius: 3px; border-radius: 3px;
} }
} }
.loading { .loading {
animation: spin 1.5s ease-in-out infinite; animation: spin 1.5s ease-in-out infinite;
} }
@keyframes spin { @keyframes spin {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% {
transform: rotate(360deg); 100% {
} transform: rotate(360deg);
}
} }
/* /*
@ -354,9 +369,9 @@ textarea {
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
br { br {
margin: 0; margin: 0;
line-height: 0.25rem; line-height: 0.25rem;
} }
/* /*
@ -365,12 +380,12 @@ br {
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
a.link { a.link {
display: inline; display: inline;
text-decoration: underline; text-decoration: underline;
&:hover { &:hover {
color: $page-accent; color: $page-accent;
} }
} }
/* /*
@ -379,69 +394,71 @@ a.link {
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
#back-to-top { #back-to-top {
margin: 0; margin: 0;
padding: 0.5rem; padding: 0.5rem;
position: fixed; position: fixed;
z-index: 99; z-index: 99;
right: -2.5rem; right: -2.5rem;
bottom: 1rem; bottom: 1rem;
object-position: center;
background-color: $bg-alt;
backdrop-filter: blur(8px);
@if calc($rad - 0.5rem) >0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
box-shadow: $shadow;
transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
&:hover {
outline: 0.2rem solid $green;
}
* {
margin: 0;
padding: 0;
width: 1.5rem;
height: 1.5rem;
display: block;
object-position: center; object-position: center;
}
background-color: $bg-alt;
backdrop-filter: blur(8px);
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
box-shadow: $shadow;
transition: right 0.15s cubic-bezier(.19, 1, .22, 1);
&:hover {
outline: 0.2rem solid $green;
}
* {
margin: 0;
padding: 0;
width: 1.5rem;
height: 1.5rem;
display: block;
object-position: center;
}
} }
@media(prefers-reduced-motion){ @media (prefers-reduced-motion) {
* { * {
transition: none !important; transition: none !important;
} }
} }
.hr { .hr {
margin: 0.5rem 0; margin: 0.5rem 0;
border: none; border: none;
border-top: $border-thickness solid $fg; border-top: $border-thickness solid $fg;
} }
.hr-full { .hr-full {
margin-left: -0.5rem; margin-left: -0.5rem;
margin-right: -0.5rem; margin-right: -0.5rem;
} }
.hr-bad { .hr-bad {
border-color: $warning; border-color: $warning;
} }
.hr-warning { .hr-warning {
border-color: $alert; border-color: $alert;
} }
.hr-good { .hr-good {
border-color: $page-accent; border-color: $page-accent;
} }

1357
css/scss/_body.scss
View file

File diff suppressed because it is too large Load diff

63
css/scss/_footer.scss
View file

@ -1,41 +1,42 @@
/* /*
|------------------------------------------------------------- |-------------------------------------------------------------
| FOOTER | FOOTER
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
footer { footer {
margin: 0 auto; margin: 0 auto;
width: auto; width: auto;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
display: flex; flex-direction: row; display: flex;
flex-wrap: wrap; flex-direction: row;
justify-content: center; flex-wrap: wrap;
gap: 0.5rem; justify-content: center;
gap: 0.5rem;
p { p {
margin: 0; margin: 0;
padding: 0; padding: 0;
text-decoration: none; text-decoration: none;
font-family: $font-body; font-family: $font-body;
}
a {
margin: 0;
padding: 0;
text-decoration: none;
font-family: $font-body;
&:hover {
color: $orange;
} }
}
a { }
margin: 0;
padding: 0;
text-decoration: none;
font-family: $font-body;
&:hover {
color: $orange;
}
}
}

73
css/scss/_mixin.scss
View file

@ -1,61 +1,60 @@
@mixin defaultDecoration($border-colour) { @mixin defaultDecoration($border-colour) {
background-color: $bg; background-color: $bg;
color: $fg; color: $fg;
border-radius: $rad; border-radius: $rad;
border: $border-colour $border-thickness solid; border: $border-colour $border-thickness solid;
box-shadow: $shadow; box-shadow: $shadow;
} }
@mixin defaultSpacing() { @mixin defaultSpacing() {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem 0.5rem 0 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
>* { > * {
margin-top: 0; margin-top: 0;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
} }
@mixin defaultFont() { @mixin defaultFont() {
h1,
h2,
h3,
h4,
h5 {
font-family: $font-header;
text-rendering: optimizeLegibility;
}
h1, p,
h2, a,
h3, button,
h4, input {
h5 { font-family: $font-body;
font-family: $font-header; text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility; }
}
p,
a,
button,
input {
font-family: $font-body;
text-rendering: optimizeLegibility;
}
} }
@mixin flexDown($justify) { @mixin flexDown($justify) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: $justify; justify-content: $justify;
} }
@mixin flexLeft($justify) { @mixin flexLeft($justify) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: $justify; justify-content: $justify;
} }

186
css/scss/_navigation.scss
View file

@ -4,146 +4,146 @@
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
nav { nav {
@include defaultDecoration($page-accent); @include defaultDecoration($page-accent);
@include flexLeft(space-between); @include flexLeft(space-between);
margin: 0 auto 1rem; margin: 0 auto 1rem;
padding: 0.5rem; padding: 0.5rem;
width: 100%; width: 100%;
height: auto; height: auto;
background-color: $bg-alt; background-color: $bg-alt;
backdrop-filter: blur(69px) saturate(100%) brightness(100%); backdrop-filter: blur(69px) saturate(100%) brightness(100%);
box-sizing: border-box; box-sizing: border-box;
position: sticky; position: sticky;
z-index: 99; z-index: 99;
top: 1rem; top: 1rem;
align-items: center; align-items: center;
vertical-align: middle;
p {
margin: 0;
vertical-align: middle; vertical-align: middle;
}
p { hr {
margin: 0; margin: 0.5rem 0.2rem;
vertical-align: middle; padding: 0;
} opacity: 0;
}
hr { .btn {
margin: 0.5rem 0.2rem; width: auto;
padding: 0; }
opacity: 0;
}
.btn {
width: auto;
}
} }
.nav-name { .nav-name {
@include flexLeft(space-around); @include flexLeft(space-around);
margin: 0; margin: 0;
font-family: $font-header; font-family: $font-header;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.69rem; line-height: 1.69rem;
img { img {
margin: 0 0.5rem 0 0; margin: 0 0.5rem 0 0;
padding: 0; padding: 0;
width: 1.69rem; width: 1.69rem;
height: 1.69rem; height: 1.69rem;
//vertical-align: middle; //vertical-align: middle;
display: inline; display: inline;
@if calc($rad - 0.5rem) > 0 { @if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.3rem); border-radius: calc($rad - 0.3rem);
} @else { } @else {
border-radius: 3px; border-radius: 3px;
}
} }
}
} }
.nav-links { .nav-links {
@include flexLeft(space-around); @include flexLeft(space-around);
margin: 0; margin: 0;
font-family: $font-body; font-family: $font-body;
width: auto; width: auto;
a.btn { a.btn {
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
} }
} }
.nav-mobile { .nav-mobile {
display: none; display: none;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
.nav-name { .nav-name {
display: none; display: none;
} }
.nav-links { .nav-links {
width: 100%; width: 100%;
} }
} }
@media (max-width: 550px) { @media (max-width: 550px) {
nav { nav {
margin: 0; margin: 0;
padding-bottom: 1rem; padding-bottom: 1rem;
position: fixed; position: fixed;
top: auto; top: auto;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
border: none; border: none;
border-top: $border; border-top: $border;
border-radius: 0; border-radius: 0;
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
.svg { .svg {
margin: 0; margin: 0;
display: block; display: block;
}
} }
}
.nav-links { .nav-links {
a.btn { a.btn {
padding: 0.5rem; padding: 0.5rem;
}
} }
}
.nav-hide { .nav-hide {
display: none; display: none;
} }
.info-text { .info-text {
text-align: left !important; text-align: left !important;
} }
footer { footer {
margin-bottom: 4rem !important; margin-bottom: 4rem !important;
} }
#back-to-top { #back-to-top {
bottom: 5rem !important; bottom: 5rem !important;
} }
.nav-mobile { .nav-mobile {
display: block; display: block;
} }
} }

31
css/scss/_variables.scss
View file

@ -1,20 +1,20 @@
$bg: #151515; $bg: #151515;
$bg-alt: #151515bb; $bg-alt: #151515bb;
$fg: #E8E3E3; $fg: #e8e3e3;
$fg-alt: #151515; $fg-alt: #151515;
$red: #B66467; $red: #b66467;
$orange: #D8A657; $orange: #d8a657;
$yellow: #D9BC8C; $yellow: #d9bc8c;
$green: #8C977D; $green: #8c977d;
$blue: #8DA3B9; $blue: #8da3b9;
$purple: #A988B0; $purple: #a988b0;
$black: #121212; $black: #121212;
$white: #E8E3E3; $white: #e8e3e3;
$page-accent: #8C977D; $page-accent: #8c977d;
$warning: $red; $warning: $red;
$alert: $orange; $alert: $orange;
$success: $green; $success: $green;
@ -29,18 +29,15 @@ $border: $page-accent $border-thickness solid;
$weight-bold: 621; $weight-bold: 621;
$weight-normal: 400; $weight-normal: 400;
$font-header: 'Lexend Deca', $font-header: "Lexend Deca", sans-serif;
sans-serif; $font-body: "Secular One", sans-serif;
$font-body: 'Secular One', $font-code: "JetBrains Mono", monospace;
sans-serif;
$font-code: 'JetBrains Mono',
monospace;
// Fallback for items that do not yet support the new sass stylesheet system // Fallback for items that do not yet support the new sass stylesheet system
:root { :root {
--bg: #{$bg-alt}; --bg: #{$bg-alt};
--bg-1: #242621; --bg-1: #242621;
--bg-2: #1D1E1C; --bg-2: #1d1e1c;
--bg-3: #{$bg}; --bg-3: #{$bg};
--fg: #{$fg}; --fg: #{$fg};
@ -65,4 +62,4 @@ monospace;
--shadow: #{$shadow}; --shadow: #{$shadow};
--rad: #{$rad}; --rad: #{$rad};
--border: #{$border}; --border: #{$border};
} }