Fix some responsive rules
This commit is contained in:
Laurent
2
deploy.sh
Normal file
2
deploy.sh
Normal file
@@ -0,0 +1,2 @@
|
||||
docker build -t letsmeet .
|
||||
docker run -d -p 8080:8080 letsmeet
|
||||
@@ -5,19 +5,9 @@
|
||||
--header-color : #FCFCFC;
|
||||
--background-color : rgba(252, 252, 252, 0.43);
|
||||
--radius : 3px;
|
||||
--font-size : 1.3rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 601px) {
|
||||
:root {
|
||||
--font-size : 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
:root {
|
||||
--font-size : 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
*
|
||||
{
|
||||
|
||||
@@ -1,24 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
const props = defineProps<{
|
||||
path: string;
|
||||
description: string;
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link to="/create"><div class="button">Create an event</div></router-link>
|
||||
<router-link :to=path><div class="button">{{ description }}</div></router-link>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@media screen and (min-width: 801px) {
|
||||
.button {
|
||||
width: 15vw;
|
||||
min-width: 15vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.button {
|
||||
width: 50vw;
|
||||
min-width: 50vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--primary-color);
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
min-width: 15vw;
|
||||
min-height: 7vh;
|
||||
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--secondary-color);
|
||||
word-break: break-word;
|
||||
min-height: 7vh;
|
||||
}
|
||||
|
||||
.button:hover
|
||||
{
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
transform: scale(1.1);
|
||||
background-color: var(--header-color);
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import NavLink from "@/components/NavLink.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -8,8 +9,9 @@
|
||||
<nav class="nav">
|
||||
<p>Let's<br>Meet</p>
|
||||
<div class="nav-actions">
|
||||
<router-link to="/login"><div class="button">Login</div></router-link>
|
||||
<router-link to="/about"><div class="button">About</div></router-link>
|
||||
<NavLink path="/" description="Home"></NavLink>
|
||||
<NavLink path="/login" description="Log in"></NavLink>
|
||||
<NavLink path="/about" description="About"></NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -35,12 +37,13 @@ nav {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 5vw;
|
||||
min-height: 10vh;
|
||||
border: 1px solid;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--header-color);
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
padding: 0 3vw 0 2vw;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
nav p {
|
||||
@@ -54,6 +57,30 @@ nav p {
|
||||
gap: 1vw;
|
||||
}
|
||||
|
||||
::v-deep(nav .button) {
|
||||
font-size: calc(var(--font-size) * 0.8);
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 951px) {
|
||||
|
||||
::v-deep(nav .button) {
|
||||
width: 5vw;
|
||||
|
||||
min-width: 5vw;
|
||||
min-height: 4vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 950px) {
|
||||
|
||||
::v-deep(nav .button) {
|
||||
width: 5vw;
|
||||
|
||||
min-width: 10vw;
|
||||
min-height: 3vh;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
@@ -63,27 +90,4 @@ nav p {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--primary-color);
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
width: 5vw;
|
||||
height: fit-content;
|
||||
|
||||
min-width: 5vw;
|
||||
min-height: 4vh;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--secondary-color);
|
||||
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.button:hover
|
||||
{
|
||||
transform: scale(1.1);
|
||||
background-color: var(--header-color);
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import NavLink from "@/components/NavLink.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -7,13 +8,20 @@
|
||||
<div class="container">
|
||||
<div class="introduction">
|
||||
<h1>Welcome !</h1>
|
||||
<p>This website is currently under <span class="colored-text">development</span> and might look ugly as fuck</p>
|
||||
<p>
|
||||
This website is currently under <span class="colored-text">development</span> and might look ugly as fuck
|
||||
bla bla bla I'm just writting things nobody will read to fill the space and see how it looks.
|
||||
</p>
|
||||
<p>
|
||||
Yes I know i could have use
|
||||
a Lorem Ipsum but it seems more natural with words everyone can understand
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<h1>Meet up now !</h1>
|
||||
<router-link to="/create"><div class="button">Create</div></router-link>
|
||||
<router-link to="/join"><div class="button">Join</div></router-link>
|
||||
<NavLink path="/create" description="Join"></NavLink>
|
||||
<NavLink path="/join" description="Create"></NavLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -35,49 +43,15 @@
|
||||
gap: 10vw;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 801px) {
|
||||
.container {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 15vw;
|
||||
min-width: 15vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.introduction, .actions {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 50vw;
|
||||
min-width: 50vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.introduction, .actions {
|
||||
flex-direction: column;
|
||||
padding: 30px;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
justify-content: start;
|
||||
word-break: break-word;
|
||||
|
||||
min-height: 40vh;
|
||||
height: fit-content;
|
||||
|
||||
border-radius: var(--radius);
|
||||
@@ -85,15 +59,10 @@
|
||||
background: rgb(239, 239, 239);
|
||||
}
|
||||
|
||||
.introduction h1
|
||||
{
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.introduction p
|
||||
{
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.colored-text
|
||||
@@ -104,32 +73,12 @@
|
||||
.actions {
|
||||
justify-content: start;
|
||||
gap: 4vh;
|
||||
min-height: 40vh;
|
||||
height: fit-content;
|
||||
border-radius: var(--radius);
|
||||
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0));
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--primary-color);
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--secondary-color);
|
||||
word-break: break-word;
|
||||
min-height: 7vh;
|
||||
|
||||
}
|
||||
|
||||
.button:hover
|
||||
{
|
||||
transform: scale(1.1);
|
||||
background-color: var(--header-color);
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
|
||||
.actions::before,
|
||||
.actions::after {
|
||||
content: "";
|
||||
@@ -155,4 +104,49 @@
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* MEDIA QUERIES */
|
||||
@media screen and (min-width: 1500px) {
|
||||
.container {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
width: 50%;
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 25%;
|
||||
min-height: 35vh;
|
||||
}
|
||||
|
||||
.introduction h1
|
||||
{
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1501px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.introduction, .actions {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
min-height: 25vh;
|
||||
}
|
||||
|
||||
.actions {
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
.introduction h1
|
||||
{
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user