Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-06-07 10:53: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

31
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,6 +41,12 @@ 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', '', '', ''),
@ -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();
} }

146
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,7 +1051,7 @@ 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 {
@ -1078,8 +1078,8 @@ body * {
*/ */
} }
.btn:hover { .btn:hover {
outline: #E8E3E3 0.2rem solid; outline: #e8e3e3 0.2rem solid;
color: #E8E3E3; color: #e8e3e3;
cursor: pointer; cursor: pointer;
/* /*
&::after { &::after {
@ -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 */

45
css/main.scss
View file

@ -79,7 +79,8 @@ body {
text-decoration: none; text-decoration: none;
border: none; border: none;
@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;
@ -144,7 +145,8 @@ body {
background-color: $white; background-color: $white;
border: none; border: none;
@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;
@ -169,25 +171,28 @@ 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);
} }
/* /*
@ -213,7 +218,7 @@ a.btn {
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;
@ -224,13 +229,19 @@ a.btn {
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 {
@ -263,11 +274,13 @@ a.btn {
//margin: 0 0.25rem; //margin: 0 0.25rem;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
border: $black $border-thickness solid; border: $black $border-thickness solid;
@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;
} }
color: $fg; color: $fg;
font-size: 0.8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;
@ -313,6 +326,7 @@ form {
textarea { textarea {
resize: none; resize: none;
} }
/* /*
|------------------------------------------------------------- |-------------------------------------------------------------
| SVG | SVG
@ -328,7 +342,7 @@ textarea {
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;
@ -343,6 +357,7 @@ textarea {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
@ -392,7 +407,7 @@ a.link {
background-color: $bg-alt; background-color: $bg-alt;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
@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;
@ -400,7 +415,7 @@ a.link {
box-shadow: $shadow; box-shadow: $shadow;
transition: right 0.15s cubic-bezier(.19, 1, .22, 1); transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
&:hover { &:hover {
outline: 0.2rem solid $green; outline: 0.2rem solid $green;
@ -418,7 +433,7 @@ a.link {
} }
} }
@media(prefers-reduced-motion){ @media (prefers-reduced-motion) {
* { * {
transition: none !important; transition: none !important;
} }
@ -439,9 +454,11 @@ a.link {
.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;
} }

81
css/scss/_body.scss
View file

@ -65,7 +65,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: transform 0.4s cubic-bezier(.25,1.23,0,1.22); transition: transform 0.4s cubic-bezier(0.25, 1.23, 0, 1.22);
&:hover { &:hover {
transform: scale(1.15) rotate(5deg); transform: scale(1.15) rotate(5deg);
@ -150,7 +150,7 @@
text-align: center; text-align: center;
&::after { &::after {
content: ' Content'; content: " Content";
} }
} }
@ -176,7 +176,8 @@
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
.fullscreen-image { .fullscreen-image {
width: 100vw; height: 100vh; width: 100vw;
height: 100vh;
position: fixed; position: fixed;
top: 50%; top: 50%;
@ -188,13 +189,15 @@
z-index: 999; z-index: 999;
transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.5s cubic-bezier(.25,1.23,0,1.22);; transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1),
transform 0.5s cubic-bezier(0.25, 1.23, 0, 1.22);
display: none; // Automatically hidden, revealed on fullscreen display: none; // Automatically hidden, revealed on fullscreen
opacity: 0; // expose opacity: 0; // expose
img { img {
max-width: 95%; max-height: 95%; max-width: 95%;
max-height: 95%;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -209,7 +212,8 @@
button { button {
padding: 0.25rem; padding: 0.25rem;
width: 2rem; height: 2rem; width: 2rem;
height: 2rem;
position: absolute; position: absolute;
top: 1.25rem; top: 1.25rem;
@ -225,7 +229,7 @@
border-radius: 3px; border-radius: 3px;
} }
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1); transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: $black; background-color: $black;
@ -262,7 +266,7 @@
border-radius: $rad; border-radius: $rad;
transition: max-height 0.15s cubic-bezier(.19, 1, .22, 1); transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@ -291,7 +295,8 @@
.preview-button { .preview-button {
padding: 0.25rem; padding: 0.25rem;
width: 2rem; height: 2rem; width: 2rem;
height: 2rem;
position: absolute; position: absolute;
bottom: 0.5rem; bottom: 0.5rem;
@ -307,7 +312,7 @@
border-radius: 3px; border-radius: 3px;
} }
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1); transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: $bg-alt; background-color: $bg-alt;
@ -327,15 +332,14 @@
} }
} }
// DETAILS // DETAILS
.image-detail { .image-detail {
&>div { & > div {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
&>div { & > div {
width: 50%; width: 50%;
* { * {
@ -351,9 +355,9 @@
} }
@media (max-width: 669px) { @media (max-width: 669px) {
.image-detail { .image-detail {
&>div { & > div {
flex-direction: column; flex-direction: column;
&>div { & > div {
width: auto; width: auto;
} }
} }
@ -382,7 +386,7 @@
font-family: $font-body; font-family: $font-body;
&::before { &::before {
content: '# '; content: "# ";
} }
} }
@ -492,7 +496,7 @@
left: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
transition: opacity 0.1s cubic-bezier(.19, 1, .22, 1); transition: opacity 0.1s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 6; z-index: 6;
@ -551,7 +555,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1); transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
&:hover { &:hover {
outline: $white 0.2rem solid; outline: $white 0.2rem solid;
@ -645,7 +649,8 @@
background-color: $bg; background-color: $bg;
} }
h2, & > p { h2,
& > p {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
padding-left: 11rem; padding-left: 11rem;
} }
@ -655,7 +660,8 @@
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
padding-left: 11rem; padding-left: 11rem;
display: flex; flex-direction: column; display: flex;
flex-direction: column;
text-align: center; text-align: center;
& > * { & > * {
@ -726,7 +732,8 @@
} }
.tabs { .tabs {
display: flex; flex-direction: row; display: flex;
flex-direction: row;
& > button { & > button {
margin-right: 0.5rem; margin-right: 0.5rem;
@ -738,7 +745,11 @@
} }
.active-tab { .active-tab {
background-color: $page-accent !important; background-color: $page-accent !important;
background-image: linear-gradient(to top, darken($page-accent, 5%), $page-accent) !important; background-image: linear-gradient(
to top,
darken($page-accent, 5%),
$page-accent
) !important;
} }
.logs { .logs {
@ -760,19 +771,21 @@
border-radius: 3px; border-radius: 3px;
} }
transition: height 0.3s cubic-bezier(.19, 1, .22, 1), transform 0.3s cubic-bezier(.19, 1, .22, 1); transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
} }
.log { .log {
min-width: 850px; min-width: 850px;
padding: 0.5rem; padding: 0.5rem;
display: flex; flex-direction: row; display: flex;
flex-direction: row;
justify-content: space-between; justify-content: space-between;
&:nth-child(even) { &:nth-child(even) {
background-color: #E8E3E311; background-color: #e8e3e311;
} }
& > * { & > * {
@ -821,19 +834,21 @@
border-radius: 3px; border-radius: 3px;
} }
transition: height 0.3s cubic-bezier(.19, 1, .22, 1), transform 0.3s cubic-bezier(.19, 1, .22, 1); transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
} }
.ban { .ban {
min-width: 900px; min-width: 900px;
padding: 0.5rem; padding: 0.5rem;
display: flex; flex-direction: row; display: flex;
flex-direction: row;
justify-content: space-between; justify-content: space-between;
&:nth-child(even) { &:nth-child(even) {
background-color: #E8E3E311; background-color: #e8e3e311;
} }
& > * { & > * {
@ -888,19 +903,21 @@
border-radius: 3px; border-radius: 3px;
} }
transition: height 0.3s cubic-bezier(.19, 1, .22, 1), transform 0.3s cubic-bezier(.19, 1, .22, 1); transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
} }
.user { .user {
min-width: 950px; min-width: 950px;
padding: 0.5rem; padding: 0.5rem;
display: flex; flex-direction: row; display: flex;
flex-direction: row;
justify-content: space-between; justify-content: space-between;
&:nth-child(even) { &:nth-child(even) {
background-color: #E8E3E311; background-color: #e8e3e311;
} }
& > * { & > * {
@ -986,7 +1003,7 @@
opacity: 0; opacity: 0;
transform: scale(0.8); transform: scale(0.8);
transition: all 0.3s cubic-bezier(.19, 1, .22, 1); transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
> * { > * {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;

9
css/scss/_footer.scss
View file

@ -1,7 +1,7 @@
/* /*
|------------------------------------------------------------- |-------------------------------------------------------------
| FOOTER | FOOTER
|------------------------------------------------------------- |-------------------------------------------------------------
*/ */
footer { footer {
margin: 0 auto; margin: 0 auto;
@ -12,7 +12,8 @@ footer {
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
display: flex; flex-direction: row; display: flex;
flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;

3
css/scss/_mixin.scss
View file

@ -16,14 +16,13 @@
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, h1,
h2, h2,
h3, h3,

29
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};