mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-01-15 11:05:14 +00:00
Finishing up with switching to SASS
This commit is contained in:
parent
302fe6c15e
commit
2ff9d356b2
10
about.php
10
about.php
|
|
@ -8,7 +8,7 @@
|
||||||
<title>Lynx Gallery</title>
|
<title>Lynx Gallery</title>
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="css/master.css">
|
<link rel="stylesheet" href="css/main.css">
|
||||||
<link rel="stylesheet" href="css/normalise.css">
|
<link rel="stylesheet" href="css/normalise.css">
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
<!-- Google Fonts -->
|
||||||
|
|
@ -33,21 +33,27 @@
|
||||||
<body>
|
<body>
|
||||||
<?php include "ui/nav.php"; ?>
|
<?php include "ui/nav.php"; ?>
|
||||||
|
|
||||||
<div class="about-root default-window">
|
<div class="about-root">
|
||||||
<h2 id="about">What is Fluffys Amazing Gallery?</h2>
|
<h2 id="about">What is Fluffys Amazing Gallery?</h2>
|
||||||
<p>Fluffys Amazing Gallery is a smol project I originally started to control the images on my main page, but quickly turned into something much bigger...</p>
|
<p>Fluffys Amazing Gallery is a smol project I originally started to control the images on my main page, but quickly turned into something much bigger...</p>
|
||||||
<p>What Do I want this to become in the future? No clue, but I do want this to be usable by others, if its a file they download a docker image they setup on your own web server.</p>
|
<p>What Do I want this to become in the future? No clue, but I do want this to be usable by others, if its a file they download a docker image they setup on your own web server.</p>
|
||||||
<p>Will it become that any time soon? No, but. I am going to work on this untill it becomes what I want it to be!</p>
|
<p>Will it become that any time soon? No, but. I am going to work on this untill it becomes what I want it to be!</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
<h2 class="space-top-large" id="add-this">Can you add "A" or "B"?</h2>
|
<h2 class="space-top-large" id="add-this">Can you add "A" or "B"?</h2>
|
||||||
<p>No.</p>
|
<p>No.</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
<h2 class="space-top-large" id="guide">How do I use this!</h2>
|
<h2 class="space-top-large" id="guide">How do I use this!</h2>
|
||||||
<p>First you must obtain the invite code. If you don't have one and are interested in trying this, feel free to DM me on Telegram!</p>
|
<p>First you must obtain the invite code. If you don't have one and are interested in trying this, feel free to DM me on Telegram!</p>
|
||||||
<p>But once you're done doing that, you can start making your account <a class='link' href="https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php">at the signup page here</a>.</p>
|
<p>But once you're done doing that, you can start making your account <a class='link' href="https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php">at the signup page here</a>.</p>
|
||||||
<p>From there you should be able to go and login <a class='link' href="https://superdupersecteteuploadtest.fluffybean.gay/account/login.php">at this fancy page here</a>!</p>
|
<p>From there you should be able to go and login <a class='link' href="https://superdupersecteteuploadtest.fluffybean.gay/account/login.php">at this fancy page here</a>!</p>
|
||||||
<p>Now you should see "Welcome (your username)" at the homepage. From there navigate to the navbar and click on the upload button. Choose your file, enter the description and your image is up!</p>
|
<p>Now you should see "Welcome (your username)" at the homepage. From there navigate to the navbar and click on the upload button. Choose your file, enter the description and your image is up!</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
<h2 class="space-top-large">Credits!</h2>
|
<h2 class="space-top-large">Credits!</h2>
|
||||||
<p>To Carty for being super cool again and helping me get started with SQL and PHP!</p>
|
<p>To Carty for being super cool again and helping me get started with SQL and PHP!</p>
|
||||||
<p>To <a class='link' href="https://phosphoricons.com/">Phosphor</a> for providing nice SVG icons.</p>
|
<p>To <a class='link' href="https://phosphoricons.com/">Phosphor</a> for providing nice SVG icons.</p>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<title>Lynx Gallery</title>
|
<title>Lynx Gallery</title>
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="../css/master.css">
|
<link rel="stylesheet" href="../css/main.css">
|
||||||
<link rel="stylesheet" href="../css/normalise.css">
|
<link rel="stylesheet" href="../css/normalise.css">
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
<!-- Google Fonts -->
|
||||||
|
|
@ -34,32 +34,32 @@
|
||||||
include "../ui/nav.php";
|
include "../ui/nav.php";
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="account-root default-window">
|
<div class="account-root">
|
||||||
<h2>Account settings</h2>
|
<h2>Account settings</h2>
|
||||||
<?php
|
<?php
|
||||||
if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) {
|
if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) {
|
||||||
echo "<p>O hi ".$_SESSION["username"].".</p>";
|
echo "<br>";
|
||||||
|
|
||||||
// Join code
|
|
||||||
if ($_SESSION["id"] == 1) {
|
if ($_SESSION["id"] == 1) {
|
||||||
echo "<h3 class='space-top'>Invite Codes</h3>";
|
echo "<h3>Invite Codes</h3>";
|
||||||
$token_request = mysqli_query($conn, "SELECT * FROM tokens WHERE used = 0");
|
$token_request = mysqli_query($conn, "SELECT * FROM tokens WHERE used = 0");
|
||||||
while ($token = mysqli_fetch_array($token_request)) {
|
while ($token = mysqli_fetch_array($token_request)) {
|
||||||
echo "<p class='text-box space-top center alert-default'>".$token['code']."</p>";
|
echo "<p>".$token['code']."</p>";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
?>
|
||||||
echo "<h3 class='space-top'>Danger ahead</h3>";
|
<br>
|
||||||
// Reset password
|
<h3 class='space-top'>Danger ahead</h3>
|
||||||
echo "<p class='text-box space-top-large center alert-default'>Resetting your password regularly is a good way of keeping your account safe</p>";
|
<p>Resetting your password regularly is a good way of keeping your account safe</p>
|
||||||
echo "<a class='btn alert-low space-top-small' href='https://superdupersecteteuploadtest.fluffybean.gay/account/password-reset.php'><img class='svg' src='../assets/icons/password.svg'>Reset Password</a>";
|
<a class='btn btn-bad' href='https://superdupersecteteuploadtest.fluffybean.gay/account/password-reset.php'><img class='svg' src='../assets/icons/password.svg'>Reset Password</a>
|
||||||
|
<br>
|
||||||
// Logout
|
<p>Don't leave! I'm with the science team!</p>
|
||||||
echo "<p class='text-box space-top-large center alert-default'>Don't leave! I'm with the science team!</p>";
|
<a class='btn btn-bad' href='https://superdupersecteteuploadtest.fluffybean.gay/account/logout.php'><img class='svg' src='../assets/icons/sign-out.svg'>Logout</a>
|
||||||
echo "<a class='btn alert-low space-top-small' href='https://superdupersecteteuploadtest.fluffybean.gay/account/logout.php'><img class='svg' src='../assets/icons/sign-out.svg'>Logout</a>";
|
<?php
|
||||||
} else {
|
} else {
|
||||||
echo "<p class='space-bottom-large'>You must be logged in to change your account settings!</p>";
|
?>
|
||||||
echo "<a class='btn alert-high space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/account/login.php'>Login!</a>";
|
<p>You must be logged in to change your account settings!</p>
|
||||||
|
<a class='btn btn-good' href='https://superdupersecteteuploadtest.fluffybean.gay/account/login.php'>Login!</a>
|
||||||
|
<?php
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<title>Lynx Gallery</title>
|
<title>Lynx Gallery</title>
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="../css/master.css">
|
<link rel="stylesheet" href="../css/main.css">
|
||||||
<link rel="stylesheet" href="../css/normalise.css">
|
<link rel="stylesheet" href="../css/normalise.css">
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
<!-- Google Fonts -->
|
||||||
|
|
@ -111,27 +111,17 @@
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="alert-banner">
|
<div class="login-root">
|
||||||
<?php
|
<h2>Login</h2>
|
||||||
if (isset($error)) {
|
<p>Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p>
|
||||||
echo notify($error, "low");
|
<br>
|
||||||
}
|
<form method="POST" action="login.php" enctype="multipart/form-data">
|
||||||
if (isset($success)) {
|
<input class="btn btn-neutral" type="text" name="username" placeholder="Username">
|
||||||
echo notify($success, "hight");
|
<input class="btn btn-neutral" type="password" name="password" placeholder="Password">
|
||||||
}
|
<br>
|
||||||
?>
|
<button class="btn btn-good" type="submit" name="login"><img class="svg" src="../assets/icons/sign-in.svg">Login</button>
|
||||||
<script src='../scripts/alert.js'></script>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login-root default-window">
|
|
||||||
<h2 class="space-bottom">Login</h2>
|
|
||||||
<p class="space-bottom">Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p>
|
|
||||||
<form class="flex-down between" method="POST" action="login.php" enctype="multipart/form-data">
|
|
||||||
<input class="btn alert-default space-bottom" type="text" name="username" placeholder="Username">
|
|
||||||
<input class="btn alert-default space-bottom-large" type="password" name="password" placeholder="Password">
|
|
||||||
<button class="btn alert-high" type="submit" name="login"><img class="svg" src="../assets/icons/sign-in.svg">Login</button>
|
|
||||||
</form>
|
</form>
|
||||||
<a class='btn alert-default space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php'><img class="svg" src="../assets/icons/sign-in.svg">Need an account? Sign up!</a>
|
<a class='btn btn-neutral' href='https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php'><img class="svg" src="../assets/icons/sign-in.svg">Need an account? Sign up!</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php include "../ui/footer.php"; ?>
|
<?php include "../ui/footer.php"; ?>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<title>Lynx Gallery</title>
|
<title>Lynx Gallery</title>
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="../css/master.css">
|
<link rel="stylesheet" href="../css/main.css">
|
||||||
<link rel="stylesheet" href="../css/normalise.css">
|
<link rel="stylesheet" href="../css/normalise.css">
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
<!-- Google Fonts -->
|
||||||
|
|
@ -83,33 +83,20 @@
|
||||||
} else {
|
} else {
|
||||||
$error = "Oopsie woopsie, somthing brokie :c";
|
$error = "Oopsie woopsie, somthing brokie :c";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close connection
|
|
||||||
mysqli_close($stmt);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close connection
|
|
||||||
mysqli_close($conn);
|
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="alert-banner">
|
<div class="password-reset-root">
|
||||||
<?php
|
<h2>Reset Password</h2>
|
||||||
if (isset($error)) {
|
<p>After reset, you will be kicked out to login again</p>
|
||||||
echo notify($error, "low");
|
<br>
|
||||||
}
|
<form method="POST" action="password-reset.php" enctype="multipart/form-data">
|
||||||
?>
|
<input class="btn btn-neutral" type="password" name="new_password" placeholder="New Password">
|
||||||
<script src='../scripts/alert.js'></script>
|
<input class="btn btn-neutral" type="password" name="confirm_password" placeholder="Confirm Password">
|
||||||
</div>
|
<br>
|
||||||
|
<button class="btn btn-bad" type="submit" name="reset"><img class="svg" src="../assets/icons/sign-in.svg">Reset</button>
|
||||||
<div class="password-reset-root default-window">
|
|
||||||
<h2 class="space-bottom">Reset Password</h2>
|
|
||||||
<p class="space-bottom">After reset, you will be kicked out to login again</p>
|
|
||||||
<form class="flex-down between" method="POST" action="password-reset.php" enctype="multipart/form-data">
|
|
||||||
<input class="btn alert-default space-bottom" type="password" name="new_password" placeholder="New Password">
|
|
||||||
<input class="btn alert-default space-bottom" type="password" name="confirm_password" placeholder="Confirm Password">
|
|
||||||
<button class="btn alert-low" type="submit" name="reset"><img class="svg" src="../assets/icons/sign-in.svg">Reset</button>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<title>Lynx Gallery</title>
|
<title>Lynx Gallery</title>
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="../css/master.css">
|
<link rel="stylesheet" href="../css/main.css">
|
||||||
<link rel="stylesheet" href="../css/normalise.css">
|
<link rel="stylesheet" href="../css/normalise.css">
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
<!-- Google Fonts -->
|
||||||
|
|
@ -175,27 +175,19 @@
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="alert-banner">
|
<div class="signup-root">
|
||||||
<?php
|
<h2>Make account</h2>
|
||||||
if (isset($error)) {
|
<p>And amazing things happened here...</p>
|
||||||
echo notify($error, "low");
|
<br>
|
||||||
}
|
<form method="POST" action="signup.php" enctype="multipart/form-data">
|
||||||
if (isset($success)) {
|
<input class="btn btn-neutral" type="text" name="username" placeholder="Username">
|
||||||
echo notify($success, "hight");
|
<br>
|
||||||
}
|
<input class="btn btn-neutral" type="password" name="password" placeholder="Password">
|
||||||
?>
|
<input class="btn btn-neutral" type="password" name="confirm_password" placeholder="Re-enter Password">
|
||||||
<script src='../scripts/alert.js'></script>
|
<br>
|
||||||
</div>
|
<input class="btn btn-neutral" type="text" name="token" placeholder="Invite Code">
|
||||||
|
<br>
|
||||||
<div class="signup-root default-window">
|
<button class="btn btn-good" type="submit" name="signup"><img class="svg" src="../assets/icons/sign-in.svg">Sign Up</button>
|
||||||
<h2 class="space-bottom">Make account</h2>
|
|
||||||
<p class="space-bottom">And amazing things happened here...</p>
|
|
||||||
<form class="flex-down between" method="POST" action="signup.php" enctype="multipart/form-data">
|
|
||||||
<input class="btn alert-default space-bottom-large" type="text" name="username" placeholder="Username">
|
|
||||||
<input class="btn alert-default space-bottom" type="password" name="password" placeholder="Password">
|
|
||||||
<input class="btn alert-default space-bottom-large" type="password" name="confirm_password" placeholder="Re-enter Password">
|
|
||||||
<input class="btn alert-default space-bottom-large" type="text" name="token" placeholder="Invite Code">
|
|
||||||
<button class="btn alert-high" type="submit" name="signup"><img class="svg" src="../assets/icons/sign-in.svg">Sign Up</button>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
/*
|
|
||||||
-=-=-= FOOTER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
||||||
*/
|
|
||||||
footer {
|
|
||||||
margin: 0; padding: 0.5rem;
|
|
||||||
|
|
||||||
width: calc(100vh - 2rem));
|
|
||||||
|
|
||||||
background-color: var(--bg-3); color: var(--fg);
|
|
||||||
|
|
||||||
border: 0.2rem solid var(--green);
|
|
||||||
/*outline: 0.5rem solid var(--bg);*/
|
|
||||||
|
|
||||||
border-radius: var(--rad);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer a {
|
|
||||||
margin: 0.5rem;
|
|
||||||
}
|
|
||||||
351
css/main.css
351
css/main.css
|
|
@ -12,25 +12,27 @@
|
||||||
--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: #FF7700;
|
--orange: #FF7700;
|
||||||
--green: #8C977D;
|
--green: #8C977D;
|
||||||
--black: #151515;
|
--black: #151515;
|
||||||
--white: #E8E3E3;
|
--white: #E8E3E3;
|
||||||
--shadow: 6px 6px 2px #15151588;
|
|
||||||
--rad: 0px;
|
|
||||||
--square: 33.33%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| NAVIGATION BAR
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
nav {
|
nav {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
width: calc(100% - 1.4rem);
|
width: calc(100% - 1.4rem);
|
||||||
background-color: #151515;
|
background-color: #151515;
|
||||||
color: #E8E3E3;
|
color: #E8E3E3;
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
border: 0.2rem solid #8C977D;
|
border: 0.2rem solid #8C977D;
|
||||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -111,6 +113,10 @@ nav .btn {
|
||||||
-webkit-backdrop-filter: blur(16px);
|
-webkit-backdrop-filter: blur(16px);
|
||||||
backdrop-filter: blur(16px);
|
backdrop-filter: blur(16px);
|
||||||
}
|
}
|
||||||
|
nav .svg {
|
||||||
|
margin: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
.nav-hide {
|
.nav-hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -134,10 +140,17 @@ nav .btn {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.info-text h1, .info-text h2, .info-text h3, .info-text h4, .info-text h5 {
|
.info-text h1,
|
||||||
|
.info-text h2,
|
||||||
|
.info-text h3,
|
||||||
|
.info-text h4,
|
||||||
|
.info-text h5 {
|
||||||
font-family: "Lexend Deca", sans-serif;
|
font-family: "Lexend Deca", sans-serif;
|
||||||
}
|
}
|
||||||
.info-text p, .info-text a, .info-text button, .info-text input {
|
.info-text p,
|
||||||
|
.info-text a,
|
||||||
|
.info-text button,
|
||||||
|
.info-text input {
|
||||||
font-family: "Secular One", sans-serif;
|
font-family: "Secular One", sans-serif;
|
||||||
}
|
}
|
||||||
.info-text h1 {
|
.info-text h1 {
|
||||||
|
|
@ -160,7 +173,7 @@ nav .btn {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
border: 0.2rem solid #8C977D;
|
border: 0.2rem solid #8C977D;
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -170,7 +183,7 @@ nav .btn {
|
||||||
height: auto;
|
height: auto;
|
||||||
max-width: calc(33.33% - 0.5rem);
|
max-width: calc(33.33% - 0.5rem);
|
||||||
background-color: #151515;
|
background-color: #151515;
|
||||||
border-radius: 0;
|
border-radius: -0.5rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1 0 150px;
|
flex: 1 0 150px;
|
||||||
transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
|
@ -178,7 +191,7 @@ nav .btn {
|
||||||
.gallery-item:hover {
|
.gallery-item:hover {
|
||||||
transform: scale(1.1) rotate(5deg);
|
transform: scale(1.1) rotate(5deg);
|
||||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
z-index: 999;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
.gallery-item:after {
|
.gallery-item:after {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
@ -200,7 +213,7 @@ nav .btn {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
-o-object-position: center;
|
-o-object-position: center;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
border-radius: 0;
|
border-radius: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -218,7 +231,7 @@ nav .btn {
|
||||||
background-color: rgba(21, 21, 21, 0.7333333333);
|
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||||
-webkit-backdrop-filter: blur(8px);
|
-webkit-backdrop-filter: blur(8px);
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -233,21 +246,16 @@ nav .btn {
|
||||||
width: auto;
|
width: auto;
|
||||||
max-height: inherit;
|
max-height: inherit;
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
| DESCRIPTION
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
.image-description {
|
.image-description {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
width: calc(100% - 1.4rem);
|
width: calc(100% - 1.4rem);
|
||||||
background-color: #151515;
|
background-color: #151515;
|
||||||
color: #E8E3E3;
|
color: #E8E3E3;
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
border: 0.2rem solid #8C977D;
|
border: 0.2rem solid #8C977D;
|
||||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
}
|
}
|
||||||
|
|
@ -255,25 +263,27 @@ nav .btn {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
.image-description h1, .image-description h2, .image-description h3, .image-description h4, .image-description h5 {
|
.image-description h1,
|
||||||
|
.image-description h2,
|
||||||
|
.image-description h3,
|
||||||
|
.image-description h4,
|
||||||
|
.image-description h5 {
|
||||||
font-family: "Lexend Deca", sans-serif;
|
font-family: "Lexend Deca", sans-serif;
|
||||||
}
|
}
|
||||||
.image-description p, .image-description a, .image-description button, .image-description input {
|
.image-description p,
|
||||||
|
.image-description a,
|
||||||
|
.image-description button,
|
||||||
|
.image-description input {
|
||||||
font-family: "Secular One", sans-serif;
|
font-family: "Secular One", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
| DETAILS
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
.image-detail {
|
.image-detail {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
width: calc(100% - 1.4rem);
|
width: calc(100% - 1.4rem);
|
||||||
background-color: #151515;
|
background-color: #151515;
|
||||||
color: #E8E3E3;
|
color: #E8E3E3;
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
border: 0.2rem solid #8C977D;
|
border: 0.2rem solid #8C977D;
|
||||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
}
|
}
|
||||||
|
|
@ -281,25 +291,27 @@ nav .btn {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
.image-detail h1, .image-detail h2, .image-detail h3, .image-detail h4, .image-detail h5 {
|
.image-detail h1,
|
||||||
|
.image-detail h2,
|
||||||
|
.image-detail h3,
|
||||||
|
.image-detail h4,
|
||||||
|
.image-detail h5 {
|
||||||
font-family: "Lexend Deca", sans-serif;
|
font-family: "Lexend Deca", sans-serif;
|
||||||
}
|
}
|
||||||
.image-detail p, .image-detail a, .image-detail button, .image-detail input {
|
.image-detail p,
|
||||||
|
.image-detail a,
|
||||||
|
.image-detail button,
|
||||||
|
.image-detail input {
|
||||||
font-family: "Secular One", sans-serif;
|
font-family: "Secular One", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
| TAGS
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
.tags-root {
|
.tags-root {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
width: calc(100% - 1.4rem);
|
width: calc(100% - 1.4rem);
|
||||||
background-color: #151515;
|
background-color: #151515;
|
||||||
color: #E8E3E3;
|
color: #E8E3E3;
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
border: 0.2rem solid #8C977D;
|
border: 0.2rem solid #8C977D;
|
||||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
}
|
}
|
||||||
|
|
@ -307,10 +319,17 @@ nav .btn {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
.tags-root h1, .tags-root h2, .tags-root h3, .tags-root h4, .tags-root h5 {
|
.tags-root h1,
|
||||||
|
.tags-root h2,
|
||||||
|
.tags-root h3,
|
||||||
|
.tags-root h4,
|
||||||
|
.tags-root h5 {
|
||||||
font-family: "Lexend Deca", sans-serif;
|
font-family: "Lexend Deca", sans-serif;
|
||||||
}
|
}
|
||||||
.tags-root p, .tags-root a, .tags-root button, .tags-root input {
|
.tags-root p,
|
||||||
|
.tags-root a,
|
||||||
|
.tags-root button,
|
||||||
|
.tags-root input {
|
||||||
font-family: "Secular One", sans-serif;
|
font-family: "Secular One", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -326,22 +345,17 @@ nav .btn {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
display: block;
|
display: block;
|
||||||
background-color: #8C977D;
|
background-color: #8C977D;
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
font-family: "Secular One", sans-serif;
|
font-family: "Secular One", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
| DANGER ZONE
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
.danger-zone {
|
.danger-zone {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
width: calc(100% - 1.4rem);
|
width: calc(100% - 1.4rem);
|
||||||
background-color: #151515;
|
background-color: #151515;
|
||||||
color: #E8E3E3;
|
color: #E8E3E3;
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
border: 0.2rem solid #B66467;
|
border: 0.2rem solid #B66467;
|
||||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
}
|
}
|
||||||
|
|
@ -349,20 +363,235 @@ nav .btn {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
.danger-zone h1, .danger-zone h2, .danger-zone h3, .danger-zone h4, .danger-zone h5 {
|
.danger-zone h1,
|
||||||
|
.danger-zone h2,
|
||||||
|
.danger-zone h3,
|
||||||
|
.danger-zone h4,
|
||||||
|
.danger-zone h5 {
|
||||||
font-family: "Lexend Deca", sans-serif;
|
font-family: "Lexend Deca", sans-serif;
|
||||||
}
|
}
|
||||||
.danger-zone p, .danger-zone a, .danger-zone button, .danger-zone input {
|
.danger-zone p,
|
||||||
|
.danger-zone a,
|
||||||
|
.danger-zone button,
|
||||||
|
.danger-zone input {
|
||||||
font-family: "Secular One", sans-serif;
|
font-family: "Secular One", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| ABOUT
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.about-root {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: calc(100% - 1.4rem);
|
||||||
|
background-color: #151515;
|
||||||
|
color: #E8E3E3;
|
||||||
|
border-radius: 0rem;
|
||||||
|
border: 0.2rem solid #8C977D;
|
||||||
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
|
}
|
||||||
|
.about-root > * {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.about-root h1,
|
||||||
|
.about-root h2,
|
||||||
|
.about-root h3,
|
||||||
|
.about-root h4,
|
||||||
|
.about-root h5 {
|
||||||
|
font-family: "Lexend Deca", sans-serif;
|
||||||
|
}
|
||||||
|
.about-root p,
|
||||||
|
.about-root a,
|
||||||
|
.about-root button,
|
||||||
|
.about-root input {
|
||||||
|
font-family: "Secular One", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| UPLOAD
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.upload-root {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: calc(100% - 1.4rem);
|
||||||
|
background-color: #151515;
|
||||||
|
color: #E8E3E3;
|
||||||
|
border-radius: 0rem;
|
||||||
|
border: 0.2rem solid #8C977D;
|
||||||
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
|
}
|
||||||
|
.upload-root > * {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.upload-root h1,
|
||||||
|
.upload-root h2,
|
||||||
|
.upload-root h3,
|
||||||
|
.upload-root h4,
|
||||||
|
.upload-root h5 {
|
||||||
|
font-family: "Lexend Deca", sans-serif;
|
||||||
|
}
|
||||||
|
.upload-root p,
|
||||||
|
.upload-root a,
|
||||||
|
.upload-root button,
|
||||||
|
.upload-root input {
|
||||||
|
font-family: "Secular One", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| ACCOUNT
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.account-root {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: calc(100% - 1.4rem);
|
||||||
|
background-color: #151515;
|
||||||
|
color: #E8E3E3;
|
||||||
|
border-radius: 0rem;
|
||||||
|
border: 0.2rem solid #8C977D;
|
||||||
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
|
}
|
||||||
|
.account-root > * {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.account-root h1,
|
||||||
|
.account-root h2,
|
||||||
|
.account-root h3,
|
||||||
|
.account-root h4,
|
||||||
|
.account-root h5 {
|
||||||
|
font-family: "Lexend Deca", sans-serif;
|
||||||
|
}
|
||||||
|
.account-root p,
|
||||||
|
.account-root a,
|
||||||
|
.account-root button,
|
||||||
|
.account-root input {
|
||||||
|
font-family: "Secular One", sans-serif;
|
||||||
|
}
|
||||||
|
.account-root p:first-of-type {
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: #151515;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| SIGNUP
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.signup-root {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: calc(100% - 1.4rem);
|
||||||
|
background-color: #151515;
|
||||||
|
color: #E8E3E3;
|
||||||
|
border-radius: 0rem;
|
||||||
|
border: 0.2rem solid #8C977D;
|
||||||
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
|
}
|
||||||
|
.signup-root > * {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.signup-root h1,
|
||||||
|
.signup-root h2,
|
||||||
|
.signup-root h3,
|
||||||
|
.signup-root h4,
|
||||||
|
.signup-root h5 {
|
||||||
|
font-family: "Lexend Deca", sans-serif;
|
||||||
|
}
|
||||||
|
.signup-root p,
|
||||||
|
.signup-root a,
|
||||||
|
.signup-root button,
|
||||||
|
.signup-root input {
|
||||||
|
font-family: "Secular One", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| LOGIN
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.login-root {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: calc(100% - 1.4rem);
|
||||||
|
background-color: #151515;
|
||||||
|
color: #E8E3E3;
|
||||||
|
border-radius: 0rem;
|
||||||
|
border: 0.2rem solid #8C977D;
|
||||||
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
|
}
|
||||||
|
.login-root > * {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.login-root h1,
|
||||||
|
.login-root h2,
|
||||||
|
.login-root h3,
|
||||||
|
.login-root h4,
|
||||||
|
.login-root h5 {
|
||||||
|
font-family: "Lexend Deca", sans-serif;
|
||||||
|
}
|
||||||
|
.login-root p,
|
||||||
|
.login-root a,
|
||||||
|
.login-root button,
|
||||||
|
.login-root input {
|
||||||
|
font-family: "Secular One", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| PASSWORD RESET
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.password-reset-root {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: calc(100% - 1.4rem);
|
||||||
|
background-color: #151515;
|
||||||
|
color: #E8E3E3;
|
||||||
|
border-radius: 0rem;
|
||||||
|
border: 0.2rem solid #B66467;
|
||||||
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
|
}
|
||||||
|
.password-reset-root > * {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.password-reset-root h1,
|
||||||
|
.password-reset-root h2,
|
||||||
|
.password-reset-root h3,
|
||||||
|
.password-reset-root h4,
|
||||||
|
.password-reset-root h5 {
|
||||||
|
font-family: "Lexend Deca", sans-serif;
|
||||||
|
}
|
||||||
|
.password-reset-root p,
|
||||||
|
.password-reset-root a,
|
||||||
|
.password-reset-root button,
|
||||||
|
.password-reset-root input {
|
||||||
|
font-family: "Secular One", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| FOOTER
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
footer {
|
footer {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
width: calc(100% - 1.4rem);
|
width: calc(100% - 1.4rem);
|
||||||
background-color: #151515;
|
background-color: #151515;
|
||||||
color: #E8E3E3;
|
color: #E8E3E3;
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
border: 0.2rem solid #8C977D;
|
border: 0.2rem solid #8C977D;
|
||||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -435,9 +664,8 @@ body * {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-family: "Secular One", sans-serif;
|
font-family: "Secular One", sans-serif;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: calc(0rem - (0.5rem + 3px));
|
||||||
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
|
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
}
|
}
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
|
|
@ -445,24 +673,28 @@ body * {
|
||||||
color: #E8E3E3;
|
color: #E8E3E3;
|
||||||
}
|
}
|
||||||
.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.25rem 0.5rem -0.25rem -0.25rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #E8E3E3;
|
background-color: #E8E3E3;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
}
|
}
|
||||||
.btn:where(input[type=file])::file-selector-button {
|
.btn:where(input[type=file])::file-selector-button {
|
||||||
margin: -0.5rem 0.5rem -0.5rem -0.5rem;
|
margin: -0.25rem 0.5rem -0.25rem -0.25rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #E8E3E3;
|
background-color: #E8E3E3;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btn {
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-good {
|
.btn-good {
|
||||||
|
|
@ -486,6 +718,9 @@ form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
|
form > * {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|-------------------------------------------------------------
|
|-------------------------------------------------------------
|
||||||
|
|
@ -500,6 +735,16 @@ form {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| BR / BREAK
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
br {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|-------------------------------------------------------------
|
|-------------------------------------------------------------
|
||||||
| BACK TO TOP
|
| BACK TO TOP
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -20,9 +20,11 @@
|
||||||
|-------------------------------------------------------------
|
|-------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
html {
|
html {
|
||||||
margin: 0; padding: 0;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
min-height: 100vh; max-width: 100vw;
|
min-height: 100vh;
|
||||||
|
max-width: 100vw;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
@ -40,7 +42,8 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0 auto; padding: 1rem;
|
margin: 0 auto;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
|
|
||||||
|
|
@ -73,12 +76,11 @@ body {
|
||||||
font-family: $font-body;
|
font-family: $font-body;
|
||||||
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: $rad;
|
border-radius: calc($rad - (0.5rem + 3px));
|
||||||
|
|
||||||
transition: outline 0.1s cubic-bezier(.19,1,.22,1);
|
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
outline: $white 3px solid;
|
outline: $white 3px solid;
|
||||||
|
|
@ -86,7 +88,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:where(input[type="file"])::file-selector-button {
|
&:where(input[type="file"])::file-selector-button {
|
||||||
margin: -0.5rem 0.5rem -0.5rem -0.5rem;
|
margin: -0.25rem 0.5rem -0.25rem -0.25rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -101,12 +103,19 @@ body {
|
||||||
border-radius: $rad;
|
border-radius: $rad;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a.btn {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-good {
|
.btn-good {
|
||||||
background-color: $green;
|
background-color: $green;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-bad {
|
.btn-bad {
|
||||||
background-color: $red;
|
background-color: $red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-neutral {
|
.btn-neutral {
|
||||||
background-color: $black;
|
background-color: $black;
|
||||||
}
|
}
|
||||||
|
|
@ -119,6 +128,10 @@ body {
|
||||||
form {
|
form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
|
|
||||||
|
>* {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -129,23 +142,38 @@ form {
|
||||||
.svg {
|
.svg {
|
||||||
margin: 0 0.2rem 0.1rem 0;
|
margin: 0 0.2rem 0.1rem 0;
|
||||||
|
|
||||||
width: 19px; height: 18px;
|
width: 19px;
|
||||||
|
height: 18px;
|
||||||
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| BR / BREAK
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
br {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
line-height: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|-------------------------------------------------------------
|
|-------------------------------------------------------------
|
||||||
| BACK TO TOP
|
| BACK TO TOP
|
||||||
|-------------------------------------------------------------
|
|-------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
#back-to-top {
|
#back-to-top {
|
||||||
margin: 0; padding: 0.5rem;
|
margin: 0;
|
||||||
|
padding: 0.5rem;
|
||||||
|
|
||||||
position: fixed; z-index: 99;
|
position: fixed;
|
||||||
right: -2.5rem; bottom: 1rem;
|
z-index: 99;
|
||||||
|
right: -2.5rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
|
||||||
object-position: center;
|
object-position: center;
|
||||||
|
|
||||||
|
|
@ -155,15 +183,17 @@ form {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-shadow: $shadow;
|
box-shadow: $shadow;
|
||||||
|
|
||||||
transition: right 0.15s cubic-bezier(.19,1,.22,1);
|
transition: right 0.15s cubic-bezier(.19, 1, .22, 1);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
outline: 0.2rem solid $green;
|
outline: 0.2rem solid $green;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0; padding: 0;
|
margin: 0;
|
||||||
width: 1.5rem; height: 1.5rem;
|
padding: 0;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
|
|
|
||||||
447
css/master.css
447
css/master.css
|
|
@ -1,447 +0,0 @@
|
||||||
/*
|
|
||||||
Normalize CSS
|
|
||||||
|
|
||||||
This ensures that the website looks the same across all devices
|
|
||||||
and browsers, regardless if I waisted my time making a tag look
|
|
||||||
good or not
|
|
||||||
|
|
||||||
@import "normalize.css";
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
@import "nav.css";
|
|
||||||
@import "footer.css";
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--bg: #151515bb;
|
|
||||||
--bg-1: #242621;
|
|
||||||
--bg-2: #1D1E1C;
|
|
||||||
--bg-3: #151515;
|
|
||||||
|
|
||||||
--fg:#E8E3E3;
|
|
||||||
--fg-dark: #151515;
|
|
||||||
|
|
||||||
--red: #B66467;
|
|
||||||
--orange: #FF7700;
|
|
||||||
--green: #8C977D;
|
|
||||||
--black: #151515;
|
|
||||||
--white: #E8E3E3;
|
|
||||||
|
|
||||||
--shadow: 6px 6px 2px #15151588;
|
|
||||||
--rad: 0px;
|
|
||||||
|
|
||||||
--square: 33.33%;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--fg);
|
|
||||||
font-family: 'Secular One', sans-serif;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
margin: 0; padding: 0;
|
|
||||||
|
|
||||||
min-height: 100vh; max-width: 100vw;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
background-color: var(--bg-3);
|
|
||||||
background-image: url("../assets/bg.svg");
|
|
||||||
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-attachment: fixed;
|
|
||||||
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0 auto; padding: 1rem;
|
|
||||||
|
|
||||||
min-height: calc(100vh - 2rem); max-width: 1000px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
-=-=-= BACK TO TOP BUTTON =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
||||||
*/
|
|
||||||
#back-to-top {
|
|
||||||
margin: 0; padding: 0.5rem;
|
|
||||||
|
|
||||||
position: fixed; z-index: 99;
|
|
||||||
right: -2.5rem; bottom: 1rem;
|
|
||||||
|
|
||||||
object-position: center;
|
|
||||||
|
|
||||||
background-color: var(--bg);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
|
|
||||||
transition: right 0.15s cubic-bezier(.19,1,.22,1);
|
|
||||||
}
|
|
||||||
#back-to-top:hover {
|
|
||||||
outline: 0.2rem solid var(--green);
|
|
||||||
}
|
|
||||||
|
|
||||||
#back-to-top * {
|
|
||||||
margin: 0; padding: 0;
|
|
||||||
width: 1.5rem; height: 1.5rem;
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
object-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
-=-=-= DIV DECORATIONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
||||||
*/
|
|
||||||
.default-window {
|
|
||||||
margin: 0 0 1rem; padding: 0.5rem;
|
|
||||||
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
background-color: var(--bg-3);
|
|
||||||
|
|
||||||
/*outline: 0.5rem solid var(--bg);*/
|
|
||||||
|
|
||||||
border-radius: var(--rad);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-reset-root {
|
|
||||||
border: 0.2rem solid var(--red);
|
|
||||||
}
|
|
||||||
.edit-root {
|
|
||||||
border: 0.2rem solid var(--red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-root {
|
|
||||||
border: 0.2rem solid var(--green);
|
|
||||||
}
|
|
||||||
.signup-root {
|
|
||||||
border: 0.2rem solid var(--green);
|
|
||||||
}
|
|
||||||
.account-root {
|
|
||||||
border: 0.2rem solid var(--green);
|
|
||||||
}
|
|
||||||
.login-root {
|
|
||||||
border: 0.2rem solid var(--green);
|
|
||||||
}
|
|
||||||
.about-root {
|
|
||||||
border: 0.2rem solid var(--green);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
-=-=-= GALLERY =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
||||||
*/
|
|
||||||
.info-text {
|
|
||||||
margin: 0 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-root {
|
|
||||||
margin: 0 0 2rem; padding: 0.25rem;
|
|
||||||
|
|
||||||
background-color: var(--bg-3); color: var(--fg);
|
|
||||||
|
|
||||||
border: 0.2rem solid var(--green);
|
|
||||||
/*outline: 0.5rem solid var(--bg);*/
|
|
||||||
|
|
||||||
border-radius: var(--rad);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-item {
|
|
||||||
margin: 0.25rem; padding: 0;
|
|
||||||
|
|
||||||
height: auto; max-width: calc(33.33% - 0.5rem); /*max-width: 350px;*/
|
|
||||||
|
|
||||||
background-color: var(--bg-2);
|
|
||||||
border-radius: var(--rad);
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
flex: 1 0 150px;
|
|
||||||
|
|
||||||
transition: transform 0.15s cubic-bezier(.19,1,.22,1);
|
|
||||||
}
|
|
||||||
.gallery-item:hover {
|
|
||||||
transform: scale(1.1) rotate(5deg);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
.gallery-item:after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
padding-bottom: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-image {
|
|
||||||
margin: 0; padding: 0;
|
|
||||||
|
|
||||||
width: 100%; height: 100%;
|
|
||||||
|
|
||||||
top: 0; bottom: 0; left: 0; right: 0;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
object-fit: cover;
|
|
||||||
object-position: center;
|
|
||||||
|
|
||||||
border-radius: var(--rad);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
-=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
||||||
*/
|
|
||||||
.image-container {
|
|
||||||
/*padding: 0.5rem;*/
|
|
||||||
width: calc(100vw - var(--space-medium));
|
|
||||||
max-height: 69vh; height: auto;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
background-color: var(--bg);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
/*outline: 0.5rem solid var(--bg);*/
|
|
||||||
|
|
||||||
border-radius: var(--rad);
|
|
||||||
|
|
||||||
transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.image-container {
|
|
||||||
max-height: 35vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
max-width: 100%; width: auto;
|
|
||||||
max-height: inherit; height: auto;
|
|
||||||
|
|
||||||
border-radius: var(--rad);
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-description {
|
|
||||||
border: 0.2rem solid var(--green);
|
|
||||||
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
.image-detail {
|
|
||||||
border: 0.2rem solid var(--green);
|
|
||||||
}
|
|
||||||
.danger-zone {
|
|
||||||
border: 0.2rem solid var(--red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags-root {
|
|
||||||
border: 0.2rem solid var(--green);
|
|
||||||
}
|
|
||||||
.tag {
|
|
||||||
margin: 0.25rem; padding: 0.5rem;
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
border-radius: var(--rad);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
-=-=-= UNIVERSAL =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
||||||
*/
|
|
||||||
.flex-left {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.flex-down {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.between {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.around {
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
.center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.space-bottom-small {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.space-top-small {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.space-bottom {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.space-top {
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.space-bottom-large {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
.space-top-large {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.svg {
|
|
||||||
margin: 0 0.2rem 0.1rem 0;
|
|
||||||
width: 19px; height: 18px;
|
|
||||||
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-box {
|
|
||||||
padding: 0.5rem;
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--rad);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
-=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
||||||
*/
|
|
||||||
.alert {
|
|
||||||
padding: 0.69rem;
|
|
||||||
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
border-radius: var(--rad);
|
|
||||||
|
|
||||||
outline: 0.5rem solid var(--bg);
|
|
||||||
|
|
||||||
transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1);
|
|
||||||
}
|
|
||||||
.alert:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-high {
|
|
||||||
background-color: var(--green);
|
|
||||||
}
|
|
||||||
.alert-low {
|
|
||||||
background-color: var(--red);
|
|
||||||
}
|
|
||||||
.alert-default {
|
|
||||||
background-color: var(--black);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
-=-=-= FORM =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
||||||
*/
|
|
||||||
form {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
form * {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
-=-=-= BUTTONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
||||||
*/
|
|
||||||
.btn {
|
|
||||||
padding: 0.5rem;
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--rad);
|
|
||||||
|
|
||||||
transition: outline 0.1s cubic-bezier(.19,1,.22,1);
|
|
||||||
}
|
|
||||||
.btn:hover {
|
|
||||||
outline: var(--white) 3px solid;
|
|
||||||
color: var(--fg);
|
|
||||||
}
|
|
||||||
a.btn {
|
|
||||||
margin-bottom: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn: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;
|
|
||||||
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
background-color: var(--white);
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--rad);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
-=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
||||||
*/
|
|
||||||
h1, h2, h3, h4 {
|
|
||||||
margin: 0 0 0.5rem 0;
|
|
||||||
font-family: "Lexend Deca", sans-serif;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 27px;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
font-size: 21px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p, a {
|
|
||||||
margin: 0 0 0.5rem 0;
|
|
||||||
font-family: 'Secular One', sans-serif;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: var(--orange);
|
|
||||||
}
|
|
||||||
91
css/nav.css
91
css/nav.css
|
|
@ -1,91 +0,0 @@
|
||||||
/*
|
|
||||||
-=-=-= NAV =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
||||||
*/
|
|
||||||
nav {
|
|
||||||
margin: 0 0 2rem; padding: 0.5rem;
|
|
||||||
|
|
||||||
width: calc(100vh - 2rem)); height: 2.5rem;
|
|
||||||
|
|
||||||
position: static; z-index: 99;
|
|
||||||
top: 1rem;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
background-color: var(--bg-3); color: var(--fg);
|
|
||||||
|
|
||||||
border: 0.2rem solid var(--green);
|
|
||||||
/*outline: 0.5rem solid var(--bg);*/
|
|
||||||
|
|
||||||
border-radius: var(--rad);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav p {
|
|
||||||
margin: 0;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
nav hr {
|
|
||||||
margin: 0.5rem 0.2rem; padding: 0;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-name *, .nav-name {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
font-family: "Lexend Deca", sans-serif;
|
|
||||||
|
|
||||||
font-size: 22px;
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.nav-links {
|
|
||||||
width: auto;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.nav-name p, .nav-name hr, .nav-name {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.nav-links {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 550px) {
|
|
||||||
nav {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
width: calc(100vw - 2rem)); height: 3rem;
|
|
||||||
|
|
||||||
position: fixed;
|
|
||||||
top: auto; bottom: 0; left: 0; right: 0;
|
|
||||||
|
|
||||||
background-color: var(--bg);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
border-top: 3px solid var(--green);
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
}
|
|
||||||
.nav-hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.nav-links a .svg {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
margin-bottom: calc(4rem + 3px) !important;
|
|
||||||
}
|
|
||||||
#back-to-top {
|
|
||||||
bottom: 5rem !important;
|
|
||||||
}
|
|
||||||
nav .svg {
|
|
||||||
padding: 0.35rem !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -6,7 +6,8 @@
|
||||||
.info-text {
|
.info-text {
|
||||||
@include defaultFont();
|
@include defaultFont();
|
||||||
|
|
||||||
margin: 1rem 0 1rem 0.5rem; padding: 0;
|
margin: 1rem 0 1rem 0.5rem;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
|
@ -16,6 +17,7 @@
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-family: $font-body;
|
font-family: $font-body;
|
||||||
|
|
||||||
|
|
@ -25,9 +27,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-root {
|
.gallery-root {
|
||||||
margin-bottom: 1rem; padding: 0.25rem;
|
margin-bottom: 1rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
|
||||||
background-color: $bg; color: $fg;
|
background-color: $bg;
|
||||||
|
color: $fg;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
@ -40,24 +44,26 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-item {
|
.gallery-item {
|
||||||
margin: 0.25rem; padding: 0;
|
margin: 0.25rem;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
height: auto; max-width: calc(33.33% - 0.5rem);
|
height: auto;
|
||||||
|
max-width: calc(33.33% - 0.5rem);
|
||||||
|
|
||||||
background-color: $bg;
|
background-color: $bg;
|
||||||
border-radius: $rad;
|
border-radius: calc($rad - 0.5rem);
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
flex: 1 0 150px;
|
flex: 1 0 150px;
|
||||||
|
|
||||||
transition: transform 0.15s cubic-bezier(.19,1,.22,1);
|
transition: transform 0.15s cubic-bezier(.19, 1, .22, 1);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.1) rotate(5deg);
|
transform: scale(1.1) rotate(5deg);
|
||||||
box-shadow: $shadow;
|
box-shadow: $shadow;
|
||||||
|
|
||||||
z-index: 999;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
|
|
@ -68,18 +74,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-image {
|
.gallery-image {
|
||||||
margin: 0; padding: 0;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
width: 100%; height: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
top: 0; bottom: 0; left: 0; right: 0;
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
|
|
||||||
border-radius: $rad;
|
border-radius: calc($rad - 0.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -88,10 +99,12 @@
|
||||||
|-------------------------------------------------------------
|
|-------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
.image-container {
|
.image-container {
|
||||||
margin: 1rem 0 2rem 0; padding: 0;
|
margin: 1rem 0 2rem 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 69vh; height: auto;
|
max-height: 69vh;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|
@ -100,7 +113,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(.19, 1, .22, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
|
|
@ -112,47 +125,40 @@
|
||||||
.image {
|
.image {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
max-width: 100%; width: auto;
|
max-width: 100%;
|
||||||
max-height: inherit; height: auto;
|
width: auto;
|
||||||
|
max-height: inherit;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
border-radius: $rad;
|
border-radius: $rad;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
// DESCRIPTION
|
||||||
|-------------------------------------------------------------
|
|
||||||
| DESCRIPTION
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
.image-description {
|
.image-description {
|
||||||
@include defaultDecoration($green);
|
@include defaultDecoration($green);
|
||||||
@include defaultFont();
|
@include defaultFont();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
// DETAILS
|
||||||
|-------------------------------------------------------------
|
|
||||||
| DETAILS
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
.image-detail {
|
.image-detail {
|
||||||
@include defaultDecoration($green);
|
@include defaultDecoration($green);
|
||||||
@include defaultFont();
|
@include defaultFont();
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
// TAGS
|
||||||
|-------------------------------------------------------------
|
|
||||||
| TAGS
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
.tags-root {
|
.tags-root {
|
||||||
@include defaultDecoration($green);
|
@include defaultDecoration($green);
|
||||||
@include defaultFont();
|
@include defaultFont();
|
||||||
}
|
}
|
||||||
|
|
||||||
.tags {
|
.tags {
|
||||||
@include flexLeft(auto);
|
@include flexLeft(auto);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
margin: 0.25rem; padding: 0.5rem;
|
margin: 0.25rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
|
|
@ -163,12 +169,76 @@
|
||||||
font-family: $font-body;
|
font-family: $font-body;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
// DANGER ZONE
|
||||||
|-------------------------------------------------------------
|
|
||||||
| DANGER ZONE
|
|
||||||
|-------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
.danger-zone {
|
.danger-zone {
|
||||||
@include defaultDecoration($red);
|
@include defaultDecoration($red);
|
||||||
@include defaultFont();
|
@include defaultFont();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| ABOUT
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.about-root {
|
||||||
|
@include defaultDecoration($green);
|
||||||
|
@include defaultFont();
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| UPLOAD
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.upload-root {
|
||||||
|
@include defaultDecoration($green);
|
||||||
|
@include defaultFont();
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| ACCOUNT
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.account-root {
|
||||||
|
@include defaultDecoration($green);
|
||||||
|
@include defaultFont();
|
||||||
|
|
||||||
|
p:first-of-type {
|
||||||
|
padding: 0.5rem;
|
||||||
|
|
||||||
|
background-color: $black;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| SIGNUP
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.signup-root {
|
||||||
|
@include defaultDecoration($green);
|
||||||
|
@include defaultFont();
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| LOGIN
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.login-root {
|
||||||
|
@include defaultDecoration($green);
|
||||||
|
@include defaultFont();
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| PASSWORD RESET
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.password-reset-root {
|
||||||
|
@include defaultDecoration($red);
|
||||||
|
@include defaultFont();
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,8 @@
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| FOOTER
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
footer {
|
footer {
|
||||||
@include defaultDecoration($page-accent);
|
@include defaultDecoration($page-accent);
|
||||||
@include flexLeft(space-around);
|
@include flexLeft(space-around);
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
@mixin defaultDecoration($border) {
|
@mixin defaultDecoration($border) {
|
||||||
margin-bottom: 1rem; padding: 0.5rem;
|
margin-bottom: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
|
||||||
width: calc(100% - 1.4rem);
|
width: calc(100% - 1.4rem);
|
||||||
|
|
||||||
background-color: $bg; color: $fg;
|
background-color: $bg;
|
||||||
|
color: $fg;
|
||||||
|
|
||||||
border-radius: $rad;
|
border-radius: $rad;
|
||||||
border: 0.2rem solid $border;
|
border: 0.2rem solid $border;
|
||||||
|
|
@ -11,16 +13,25 @@
|
||||||
box-shadow: $shadow;
|
box-shadow: $shadow;
|
||||||
|
|
||||||
>* {
|
>* {
|
||||||
margin-top: 0; margin-bottom: 0.5rem;
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin defaultFont() {
|
@mixin defaultFont() {
|
||||||
h1, h2, h3, h4, h5 {
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5 {
|
||||||
font-family: $font-header;
|
font-family: $font-header;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, a, button, input {
|
p,
|
||||||
|
a,
|
||||||
|
button,
|
||||||
|
input {
|
||||||
font-family: $font-body;
|
font-family: $font-body;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -32,6 +43,7 @@
|
||||||
|
|
||||||
justify-content: $justify;
|
justify-content: $justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin flexLeft($justify) {
|
@mixin flexLeft($justify) {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,19 @@
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| NAVIGATION BAR
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
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;
|
||||||
|
|
||||||
width: calc(100% - 1.4rem); height: 2.5rem;
|
width: calc(100% - 1.4rem);
|
||||||
|
height: 2.5rem;
|
||||||
|
|
||||||
position: sticky; z-index: 99;
|
position: sticky;
|
||||||
|
z-index: 99;
|
||||||
top: 1rem;
|
top: 1rem;
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -16,10 +23,13 @@ nav {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
margin: 0.5rem 0.2rem; padding: 0;
|
margin: 0.5rem 0.2rem;
|
||||||
|
padding: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -36,6 +46,7 @@ nav {
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links {
|
.nav-links {
|
||||||
@include flexLeft(space-around);
|
@include flexLeft(space-around);
|
||||||
|
|
||||||
|
|
@ -50,6 +61,7 @@ nav {
|
||||||
.nav-name {
|
.nav-name {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links {
|
.nav-links {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -62,7 +74,10 @@ nav {
|
||||||
width: calc(100% - 1rem);
|
width: calc(100% - 1rem);
|
||||||
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: auto; bottom: 0; left: 0; right: 0;
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
background-color: $bg-alt;
|
background-color: $bg-alt;
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
|
|
@ -72,7 +87,14 @@ nav {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
backdrop-filter: blur(16px);
|
backdrop-filter: blur(16px);
|
||||||
|
|
||||||
|
.svg {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.nav-hide {
|
.nav-hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -80,9 +102,11 @@ nav {
|
||||||
.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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,13 +13,15 @@ $white: #E8E3E3;
|
||||||
$page-accent: #8C977D;
|
$page-accent: #8C977D;
|
||||||
|
|
||||||
$shadow: 6px 6px 2px #15151588;
|
$shadow: 6px 6px 2px #15151588;
|
||||||
$rad: 0;
|
$rad: 0rem;
|
||||||
|
|
||||||
$weight-bold: 621;
|
$weight-bold: 621;
|
||||||
$weight-normal: 400;
|
$weight-normal: 400;
|
||||||
|
|
||||||
$font-header: 'Lexend Deca', sans-serif;
|
$font-header: 'Lexend Deca',
|
||||||
$font-body: 'Secular One', sans-serif;
|
sans-serif;
|
||||||
|
$font-body: 'Secular One',
|
||||||
|
sans-serif;
|
||||||
|
|
||||||
// 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 {
|
||||||
|
|
@ -28,7 +30,7 @@ $font-body: 'Secular One', sans-serif;
|
||||||
--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;
|
||||||
|
|
@ -36,9 +38,4 @@ $font-body: 'Secular One', sans-serif;
|
||||||
--green: #8C977D;
|
--green: #8C977D;
|
||||||
--black: #151515;
|
--black: #151515;
|
||||||
--white: #E8E3E3;
|
--white: #E8E3E3;
|
||||||
|
}
|
||||||
--shadow: 6px 6px 2px #15151588;
|
|
||||||
--rad: 0px;
|
|
||||||
|
|
||||||
--square: 33.33%;
|
|
||||||
}
|
|
||||||
12
ui/nav.php
12
ui/nav.php
|
|
@ -1,19 +1,19 @@
|
||||||
<nav class="nav-root flex-left between">
|
<nav class="nav-root flex-left">
|
||||||
<div class="nav-name flex-left">
|
<div class="nav-name flex-left">
|
||||||
<p>Lynx Gallery</p>
|
<p>Lynx Gallery</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-links flex-left">
|
<div class="nav-links flex-left">
|
||||||
<a class='btn alert-default' href='<?php echo $root_dir; ?>index.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/house.svg'><span class='nav-hide'>Home</span></a>
|
<a class='btn' href='<?php echo $root_dir; ?>index.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/house.svg'><span class='nav-hide'>Home</span></a>
|
||||||
<hr>
|
<hr>
|
||||||
<a class='btn alert-default' href='<?php echo $root_dir; ?>search.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/binoculars.svg'><span class='nav-hide'>Search</span></a>
|
<a class='btn' href='<?php echo $root_dir; ?>search.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/binoculars.svg'><span class='nav-hide'>Search</span></a>
|
||||||
<hr>
|
<hr>
|
||||||
<?php
|
<?php
|
||||||
if (loggedin()) {
|
if (loggedin()) {
|
||||||
echo "<a class='btn alert-default' href='".$root_dir."upload.php'><img class='svg' src='".$root_dir."assets/icons/upload.svg'><span class='nav-hide'>Upload</span></a>";
|
echo "<a class='btn' href='".$root_dir."upload.php'><img class='svg' src='".$root_dir."assets/icons/upload.svg'><span class='nav-hide'>Upload</span></a>";
|
||||||
echo "<hr>";
|
echo "<hr>";
|
||||||
echo "<a class='btn alert-default' href='".$root_dir."/account/account.php'><img class='svg' src='".$root_dir."assets/icons/user-circle.svg'><span class='nav-hide'>".substr($_SESSION["username"], 0, 15)."</span></a>";
|
echo "<a class='btn' href='".$root_dir."/account/account.php'><img class='svg' src='".$root_dir."assets/icons/user-circle.svg'><span class='nav-hide'>".substr($_SESSION["username"], 0, 15)."</span></a>";
|
||||||
} else {
|
} else {
|
||||||
echo "<a class='btn alert-default' href='".$root_dir."/account/login.php'><img class='svg' src='".$root_dir."assets/icons/sign-in.svg'><span class='nav-hide'>Login</span></a>";
|
echo "<a class='btn' href='".$root_dir."/account/login.php'><img class='svg' src='".$root_dir."assets/icons/sign-in.svg'><span class='nav-hide'>Login</span></a>";
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
14
upload.php
14
upload.php
|
|
@ -6,7 +6,7 @@
|
||||||
<title>Lynx Gallery</title>
|
<title>Lynx Gallery</title>
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="css/master.css">
|
<link rel="stylesheet" href="css/main.css">
|
||||||
<link rel="stylesheet" href="css/normalise.css">
|
<link rel="stylesheet" href="css/normalise.css">
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
<!-- Google Fonts -->
|
||||||
|
|
@ -87,13 +87,15 @@
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="upload-root default-window">
|
<div class="upload-root">
|
||||||
<h2 class="space-bottom">Upload image</h2>
|
<h2>Upload image</h2>
|
||||||
<p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p>
|
<p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p>
|
||||||
|
<br>
|
||||||
<form id="uploadSubmit" class="flex-down between" method="POST" enctype="multipart/form-data">
|
<form id="uploadSubmit" class="flex-down between" method="POST" enctype="multipart/form-data">
|
||||||
<input id="image" class="btn alert-default space-bottom" type="file" placeholder="select image UwU">
|
<input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
|
||||||
<input id="alt" class="btn alert-default space-bottom-large" type="text" placeholder="Description/Alt for image">
|
<input id="alt" class="btn btn-neutral" type="text" placeholder="Description/Alt for image">
|
||||||
<button id="submit" class="btn alert-high" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
|
<br>
|
||||||
|
<button id="submit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue