Merge pull request #37 from cato447/page-navigation
Added routing to frontend
This commit is contained in:
cato
@@ -1,17 +1,41 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<ItemModel/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ItemModel from "@/components/ItemModel";
|
||||
export default {
|
||||
components: {
|
||||
ItemModel
|
||||
import LoginPage from "@/components/LoginPage";
|
||||
import Custom404Page from "@/components/Custom404Page";
|
||||
|
||||
const routes = {
|
||||
'/': ItemModel,
|
||||
'/login': LoginPage
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentPath: window.location.hash
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentView() {
|
||||
return routes[this.currentPath.slice(1) || '/'] || Custom404Page
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('hashchange', () => {
|
||||
this.currentPath = window.location.hash
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="currentView" />
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
|
||||
@@ -15,8 +15,6 @@
|
||||
<a>Storage</a>
|
||||
</div>
|
||||
|
||||
<span class="divider"></span>
|
||||
|
||||
<input type="checkbox" class="menu-btn" id="menu-btn">
|
||||
<label for="menu-btn" class="menu-icon">
|
||||
<span class="menu-icon__line"></span>
|
||||
@@ -24,29 +22,24 @@
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="nav-link">
|
||||
<router-link to="/">Home</router-link>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<router-link to="/profile">Profile</router-link>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<router-link to="/recipes">Recipes</router-link>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<router-link to="/shoppinglist">Shoppinglist</router-link>
|
||||
<a href="/#/login">Sign up</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-background"/>
|
||||
|
||||
<!-- input field -->
|
||||
|
||||
<div class="field-header-box">
|
||||
<div class="inputField-header">
|
||||
<input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder=" " v-model="newItem"
|
||||
<input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"
|
||||
@keyup.enter="addItem"/>
|
||||
<label for="inputTextField" class="formLabel">
|
||||
Add here ...
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- response element -->
|
||||
|
||||
@@ -201,7 +194,7 @@ export default Items
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color:darkcyan;
|
||||
background-color: #213737;
|
||||
}
|
||||
|
||||
.main {
|
||||
@@ -212,23 +205,45 @@ body{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.25vh;
|
||||
background-color: darkcyan;
|
||||
background-color: #213737;
|
||||
}
|
||||
|
||||
/* navbar-background */
|
||||
|
||||
.nav-background{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
background: #213737;
|
||||
width: 100vw;
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
/* input field styling */
|
||||
|
||||
.inputField-header {
|
||||
.field-header-box{
|
||||
z-index: 3;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 5vh;
|
||||
left: 0;
|
||||
top: 10vh;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.inputField-header {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
width: 20vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
.newItemName {
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
top: -65.5vh; // 0,65 of height
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -236,11 +251,11 @@ body{
|
||||
border-radius: 0.4411764705882353vh; // times 2 of border
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: black;
|
||||
color: white;
|
||||
outline: none;
|
||||
padding: 0.5vh;// size of font
|
||||
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font
|
||||
background: darkcyan;
|
||||
background: #213737;
|
||||
}
|
||||
|
||||
.newItemName:hover {
|
||||
@@ -293,9 +308,11 @@ body{
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
left: 50%;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 20px;
|
||||
margin-left: 30px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.item-list{
|
||||
@@ -317,9 +334,7 @@ body{
|
||||
font-family: Montserrat, sans-serif;
|
||||
list-style: none;
|
||||
background: darkslategrey;
|
||||
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
|
||||
padding: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
@@ -394,21 +409,25 @@ body{
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 2299px) {
|
||||
@media (max-width: 2100px) {
|
||||
.item-list{
|
||||
grid-template-columns: repeat(4, 2vh);
|
||||
grid-template-columns: repeat(7, 2vh);
|
||||
}
|
||||
|
||||
.item{
|
||||
right: 4.1vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2100px) {
|
||||
.item-list{
|
||||
grid-template-columns: repeat(5, 2vh);
|
||||
grid-template-columns: repeat(8, 2vh);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.item-list{
|
||||
grid-template-columns: repeat(6, 2vh);
|
||||
grid-template-columns: repeat(8, 2vh);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -441,7 +460,6 @@ body{
|
||||
|
||||
row-gap: 50px;
|
||||
column-gap: 230px;
|
||||
grid-template-columns: repeat(4, 2vh);
|
||||
|
||||
.item{
|
||||
width: 200px;
|
||||
@@ -515,21 +533,6 @@ body{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
|
||||
.item-section{
|
||||
|
||||
font-size: 40/3 px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.item-list{
|
||||
grid-template-columns: repeat(9, 2vh)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
626
frontend/src/components/LoginPage.vue
Normal file
626
frontend/src/components/LoginPage.vue
Normal file
@@ -0,0 +1,626 @@
|
||||
<template>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<div v-if="loading">
|
||||
<h1 class="loading">Loading...</h1>
|
||||
</div>
|
||||
<div v-else>
|
||||
|
||||
<!-- navbar -->
|
||||
|
||||
<header class="navbar-header">
|
||||
<div class="logo">
|
||||
<a>Login</a>
|
||||
</div>
|
||||
|
||||
<input id="menu-btn" class="menu-btn" type="checkbox">
|
||||
<label class="menu-icon" for="menu-btn">
|
||||
<span class="menu-icon__line"></span>
|
||||
</label>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="nav-link">
|
||||
<a href="/">Storage</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
|
||||
<div id="user-sign-in" class="user-login">
|
||||
<div class="site-background"/>
|
||||
<div class="form-background">
|
||||
<form>
|
||||
|
||||
<h2>Sign In</h2>
|
||||
<input placeholder="Username" type="text">
|
||||
<input placeholder="Password" type="password">
|
||||
<input class="login-btn-apple" type="submit" value="Login Apple">
|
||||
<input class="login-btn" type="submit" value="Login">
|
||||
<p class="signup">Don't have an account?
|
||||
<a href="#/login" v-on:click="isSignUp = !isSignUp">Sign up</a>
|
||||
</p>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :style="{'display': isSignUp ? 'none' : ''}" class="user-signup">
|
||||
<div class="site-background"/>
|
||||
<div class="form-background">
|
||||
<form>
|
||||
|
||||
<h2>Create Account</h2>
|
||||
<input placeholder="Username" type="text">
|
||||
<input placeholder="Email Address" type="text">
|
||||
<input placeholder="Create Password" type="password">
|
||||
<input placeholder="Confirm Password" type="password">
|
||||
<input type="submit" value="Sign Up" class="submit">
|
||||
<p class="signup">Have an account?
|
||||
<br>
|
||||
<a href="#/login" v-on:click="isSignUp = !isSignUp">Sign in</a>
|
||||
</p>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"
|
||||
type='text/css'/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "LoginPage",
|
||||
data() {
|
||||
return {
|
||||
isSignUp: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
|
||||
@import 'src/styling/navbar';
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.main {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #213737;
|
||||
}
|
||||
|
||||
.logo {
|
||||
left: -3vh;
|
||||
top: 1vh;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
left: 3vh;
|
||||
top: 1vh;
|
||||
|
||||
&__line, &__line:before, &__line::after {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* login / signin styling */
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 2800px;
|
||||
height: 1700px;
|
||||
background: white;
|
||||
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.user-login {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.site-background {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
transition: 0.5s;
|
||||
//background: url('../ressouce/5008bf96009ea69ba157815061bce4f2.png');
|
||||
background: brown;
|
||||
}
|
||||
|
||||
.form-background {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 160px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-size: 60px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 8px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
color: black;
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
h2:after {
|
||||
content: '';
|
||||
display: block;
|
||||
border-bottom: 4px solid #000;
|
||||
height: 0;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
background: lightgrey;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
font-size: 1vh;
|
||||
letter-spacing: 4px;
|
||||
margin: 20px 0;
|
||||
top: 50px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
max-width: 520px;
|
||||
transition: 0.5s;
|
||||
background-color: darkslategrey;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
position: relative;
|
||||
left: 40px;
|
||||
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.login-btn-apple {
|
||||
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.login-btn:hover, .login-btn-apple:hover {
|
||||
background: brown;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.signup {
|
||||
text-align: center;
|
||||
justify-content: right;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-top: 550px;
|
||||
top: 50px;
|
||||
font-size: 40px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
//border: 1px solid black;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: darkslategrey;
|
||||
letter-spacing: 2px;
|
||||
font-size: 50px;
|
||||
transition: color 0.5s ease-in-out;
|
||||
//border: 1px solid black;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
left: 30%;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: brown;
|
||||
}
|
||||
}
|
||||
|
||||
.user-signup {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: display 0.5s ease-in-out;
|
||||
|
||||
.site-background {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
left: 50%;
|
||||
transition: 0.5s;
|
||||
//background: url('../ressouce/5008bf96009ea69ba157815061bce4f2.png');
|
||||
background: brown;
|
||||
}
|
||||
|
||||
.form-background {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 160px;
|
||||
top: -100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-size: 60px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 8px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
color: black;
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
h2:after {
|
||||
content: '';
|
||||
display: block;
|
||||
border-bottom: 4px solid #000;
|
||||
height: 0;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
background: lightgrey;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
font-size: 40px;
|
||||
letter-spacing: 4px;
|
||||
margin: 20px 0;
|
||||
top: 230px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.submit{
|
||||
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.submit:hover{
|
||||
background: brown;
|
||||
color: black;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
max-width: 520px;
|
||||
transition: 0.5s;
|
||||
background-color: darkslategrey;
|
||||
color: white;
|
||||
left: 51.8%;
|
||||
}
|
||||
|
||||
.signup {
|
||||
text-align: center;
|
||||
justify-content: left;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-top: 560px;
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
top: -130px;
|
||||
//border: 1px solid black;
|
||||
}
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: darkslategrey;
|
||||
letter-spacing: 2px;
|
||||
font-size: 50px;
|
||||
top: -10px;
|
||||
left: 30%;
|
||||
transition: color 0.5s ease-in-out;
|
||||
//border: 1px solid black;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: brown;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-height: 1440px) {
|
||||
|
||||
/* login / signin styling */
|
||||
|
||||
section {
|
||||
padding: 52px;
|
||||
|
||||
.container {
|
||||
width: 1800px;
|
||||
height: 1200px;
|
||||
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.user-login {
|
||||
|
||||
.form-background {
|
||||
padding: 106px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
letter-spacing: 6px;
|
||||
margin-bottom: 14px;
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
h2:after {
|
||||
border-bottom: 4px solid #000;
|
||||
top: 26px;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 26px;
|
||||
letter-spacing: 4px;
|
||||
margin: 14px 0;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
left: 28px;
|
||||
}
|
||||
|
||||
.signup {
|
||||
margin-top: 400px;
|
||||
letter-spacing: 2px;
|
||||
font-size: 20px;
|
||||
top: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
letter-spacing: 4px;
|
||||
font-size: 40px;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.user-signup {
|
||||
|
||||
.form-background {
|
||||
padding: 106px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
letter-spacing: 6px;
|
||||
margin-bottom: 140px;
|
||||
top: 120px;
|
||||
}
|
||||
|
||||
h2:after {
|
||||
border-bottom: 4px solid #000;
|
||||
top: 26px;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 26px;
|
||||
font-size: 26px;
|
||||
letter-spacing: 4px;
|
||||
margin: 14px 0;
|
||||
top: 27px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
max-width: 330px;
|
||||
left: 52%;
|
||||
}
|
||||
|
||||
.signup {
|
||||
margin-top: 374px;
|
||||
letter-spacing: 2px;
|
||||
top: -154px;
|
||||
font-size: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
letter-spacing: 4px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
font-size: 40px;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-height: 1080px) {
|
||||
|
||||
/* login / signin styling */
|
||||
|
||||
section {
|
||||
padding: 40px;
|
||||
|
||||
.container {
|
||||
width: 1500px;
|
||||
height: 900px;
|
||||
box-shadow: 0 7.5px 25px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.user-login {
|
||||
|
||||
.form-background {
|
||||
padding: 80px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
letter-spacing: 4px;
|
||||
margin-bottom: 10px;
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
h2:after {
|
||||
border-bottom: 2px solid #000;
|
||||
top: 25px;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
margin: 10px 0;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
max-width: 285px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.signup {
|
||||
position: relative;
|
||||
margin-top: 300px;
|
||||
letter-spacing: 2px;
|
||||
font-size: 0.05vh;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
letter-spacing: 1px;
|
||||
align-content: center;
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-signup {
|
||||
|
||||
.form-background {
|
||||
padding: 80px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
letter-spacing: 4px;
|
||||
margin-bottom: 10px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
h2:after {
|
||||
border-bottom: 2px solid #000;
|
||||
top: 25px;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
margin: 10px 0;
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
max-width: 260px;
|
||||
left: 55.8%;
|
||||
}
|
||||
|
||||
.signup {
|
||||
margin-top: 280px;
|
||||
letter-spacing: 2px;
|
||||
top: -60px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
letter-spacing: 2px;
|
||||
font-size: 40px;
|
||||
align-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -18,8 +18,6 @@
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
margin: 0.2vh;
|
||||
@@ -30,17 +28,11 @@
|
||||
a:hover {
|
||||
font-size: 3vh;
|
||||
transition: all 300ms;
|
||||
color: brown;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider{
|
||||
flex-grow: 1;
|
||||
border-bottom: 0.1vh solid black;
|
||||
margin: 5px;
|
||||
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
position: relative;
|
||||
padding: 0.5vh 0.5vh;
|
||||
@@ -81,6 +73,7 @@
|
||||
}
|
||||
|
||||
.logo{
|
||||
position: relative;
|
||||
padding: 0.5vh 0.5vh;
|
||||
}
|
||||
|
||||
@@ -118,8 +111,9 @@
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 5vh 0;
|
||||
width: 100vw;
|
||||
height: 120vh;
|
||||
@@ -127,9 +121,8 @@
|
||||
letter-spacing: 0.25vh;
|
||||
color: white;
|
||||
background: #272727;
|
||||
|
||||
transition: opacity 0.8s 0.5s,
|
||||
clip-path 1s 0.5s;
|
||||
align-content: center;
|
||||
transition: opacity 0.8s 0.5s, clip-path 1s 0.5s;
|
||||
clip-path: circle(9.615384615384615vh at top right);
|
||||
|
||||
.nav-links {
|
||||
@@ -137,6 +130,8 @@
|
||||
transform: translateX(100%);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
@@ -156,9 +151,21 @@
|
||||
clip-path: circle(100% at center);
|
||||
|
||||
.nav-link {
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
right: -0.2vh;
|
||||
top: -11.5vh;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-btn:checked ~ .menu-icon {
|
||||
@@ -179,6 +186,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo{
|
||||
a {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 4vh;
|
||||
top: -0.68vh;
|
||||
}
|
||||
a:hover{
|
||||
font-size: 4vh;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes openButtonBefore {
|
||||
|
||||
Reference in New Issue
Block a user