Fix css
All checks were successful
ci/woodpecker/push/build Pipeline was successful

This commit is contained in:
Alessio Davoli 2023-07-18 15:08:52 +02:00
parent 38f587c7e0
commit 28190d0804
6 changed files with 98 additions and 22 deletions

41
frontend/src/css/app.css Normal file
View file

@ -0,0 +1,41 @@
:root {
--footer-height: calc(68px + 20px + 20px);
--accent-color: #213c8b;
--pianello-red: #de0e1b;
--pianello-yellow: #f6ae04;
--pianello-blue: #213c8b;
--card-background-color: #f9f4f1;
}
* {
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fff;
font-family: 'Roboto-Regular';
display: grid;
}
header,
main,
footer {
height: 100%;
width: 100%;
display: grid;
place-items: center;
}
@font-face {
font-family: 'Roboto-Regular';
src: url('/fonts/roboto/Roboto-Regular.ttf') format('TrueType');
}

View file

@ -18,11 +18,10 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
#container { #container {
display: flex; display: flex;
height: 68px; height: 10vh;
justify-content: center; justify-content: center;
width: 90%; width: 90%;
border-radius: 90px; border-radius: 90px;

View file

@ -1,14 +1,12 @@
<script lang="ts"> <script lang="ts">
export let title: string = 'Naturalistici'; export let title: string = 'Naturalistici';
export let transparent = false;
const goBack = () => { const goBack = () => {
history.back(); history.back();
}; };
</script> </script>
{#if transparent} <div style=''>
<div style='background-color: transparent; color: black; justify-content: space-between; margin: 0 auto; width: 80%;'>
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->
@ -18,28 +16,20 @@
<img src="/images/app-bar-logo.png" alt="" /> <img src="/images/app-bar-logo.png" alt="" />
</div> </div>
{:else}
<div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-missing-attribute -->
<a on:click={goBack}>
<img class="back" src="/images/white-back-arrow.png" alt="" />
</a>
<p>Percorsi <b>{title}</b></p>
<img src="/images/app-bar-logo.png" alt="" />
</div>
{/if}
<style> <style>
div { div {
color: white; position: fixed;
padding: 5px; padding: 15px;
background-color: transparent;
color: black;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-between;
align-items: center; align-items: center;
background-color: #de0e1b;
} }
div a { div a {
cursor: pointer; cursor: pointer;

View file

@ -0,0 +1,43 @@
<script lang="ts">
export let title: string = 'Naturalistici';
const goBack = () => {
history.back();
};
</script>
<div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-missing-attribute -->
<a on:click={goBack}>
<img class="back" src="/images/white-back-arrow.png" alt="" />
</a>
<p>Percorsi <b>{title}</b></p>
<img src="/images/app-bar-logo.png" alt="" />
</div>
<style>
div {
color: white;
padding: 5px;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: #de0e1b;
}
div a {
cursor: pointer;
}
div a img {
height: 40px;
}
img {
height: 40px;
}
.back {
height: 20px;
}
</style>

View file

@ -59,6 +59,7 @@
padding: 15px; padding: 15px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
cursor: pointer; cursor: pointer;
} }
.tab { .tab {

View file

@ -5,7 +5,7 @@
</script> </script>
<Header transparent></Header> <Header></Header>
<img src='/splash.jpeg' alt='splash'> <img src='/splash.jpeg' alt='splash'>
<div id='divider'> <div id='divider'>
@ -21,10 +21,12 @@
#divider { #divider {
background: white; background: white;
margin-top: 0px; margin-top: 0px;
margin-top: 20vh;
} }
img { img {
width: 100%; width: 100%;
height: 100%;
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }