Skip to content

Commit

Permalink
fix latyout
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniele Ciminieri committed Oct 16, 2024
1 parent 3bba7a4 commit 6b1e50a
Show file tree
Hide file tree
Showing 9 changed files with 107 additions and 89 deletions.
4 changes: 4 additions & 0 deletions src/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,4 +75,8 @@ body {
.bg-blur {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}

body {
overflow-x: hidden;
}
4 changes: 2 additions & 2 deletions src/lib/components/BlurredButton.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
background-color: transparent;
color: white;
box-shadow:
inset 0px 0px 2px 2px var(--btn-color),
0px 0px 2px 2px var(--btn-color);
inset 0px 0px 4px 2px var(--btn-color),
0px 0px 4px 2px var(--btn-color);
border: 1px solid var(--btn-color);
transition: all 0.3s ease;
}
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/BlurredIconButton.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@

<style>
.btn-blur {
background-color: transparent;
background-color: black;
color: white;
box-shadow:
inset 0px 0px 2px 2px var(--btn-color),
0px 0px 2px 2px var(--btn-color);
inset 0px 0px 4px 2px var(--btn-color),
0px 0px 4px 2px var(--btn-color);
border: 1px solid var(--btn-color);
transition: all 0.3s ease;
}
Expand Down
8 changes: 4 additions & 4 deletions src/lib/components/DataProject.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,20 +136,20 @@
<div class="row">
<div class="col-md-3 offset-md-3 col-sm-12">
<div>
<h5 class="text-uppercase">{project.titolo}</h5>
<h5 class="text-uppercase mb-1">{project.titolo}</h5>
{#if project.studenti && project.studenti.length > 1}
<p class="fs-5 mb-2">Progetto collettivo</p>
<p style="margin-bottom: 10px;" class="fs-5">Progetto collettivo</p>
{:else if project.studenti}
{#each project.studenti as student}
<p class="fs-5 mb-2">{student.nome} {student.cognome}</p>
<p style="margin-bottom: 10px;" class="fs-5">{student.nome} {student.cognome}</p>
{/each}
{/if}
</div>
<p class="fs-5 text-secondary mt-0">{project.tipologia}</p>
</div>
<div class="col-md-6 col-sm-12">
<div class="d-flex flex-column align-items-start h-100">
<p class="fs-5">
<p class="fs-6">
{project.descrizione}
</p>
<BlurredButton
Expand Down
31 changes: 15 additions & 16 deletions src/lib/components/ImageGallery.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script>
import { urlFor } from '$lib/sanityClient.js';
import { browser } from '$app/environment';
import BlurredIconButton from './BlurredIconButton.svelte';
let isMobile = $state(false);
$effect(() => {
Expand Down Expand Up @@ -100,23 +100,22 @@
</div>
{/each}
</div>

<button
class="btn-slide btn me-2 ms-2 d-flex align-items-center justify-content-center position-absolute top-50 start-0 translate-middle-y gallery-button"
style="--hover-color: #{color};"
onclick={prevImage}
<BlurredIconButton
icon="bi bi-arrow-left"
{color}
onClick={prevImage}
disabled={currentIndex === 0}
>
<i class="bi bi-arrow-left"></i>
</button>
<button
class="btn ms-2 me-2 d-flex align-items-center justify-content-center position-absolute top-50 end-0 translate-middle-y gallery-button"
style="--hover-color: #{color};"
onclick={nextImage}
--btn-color={'#' + color}
classes="position-absolute top-50 start-0 translate-middle-y ms-2"
/>
<BlurredIconButton
icon="bi bi-arrow-right"
{color}
onClick={nextImage}
disabled={currentIndex === images.length - 1}
>
<i class="bi bi-arrow-right"></i>
</button>
--btn-color={'#' + color}
classes="position-absolute top-50 end-0 translate-middle-y me-2"
/>
{/if}
</div>

Expand Down
5 changes: 4 additions & 1 deletion src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
import Header from '$lib/components/Header.svelte';
</script>

<div class="container-fluid">
<div
style="min-height: 100vh;"
class="container-fluid p-0 p-sm-0 d-flex flex-column justify-content-between"
>
<Header />
<slot />
</div>
43 changes: 20 additions & 23 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,37 +28,18 @@
});
</script>

<div class="container-fluid mt-2" bind:this={firstContainer}>
<div class="container-fluid mt-2 flex-grow-1" bind:this={firstContainer}>
<div class="row justify-content-between">
<div class="col-md-7 col-sm-12 home-main">
<PortableText value={home.descrizione} />
</div>
<div class="col-md-4 col-sm-12 mt-2 sidebar">
<PortableText value={home.info} />
<!--<div class="mb-4">
<h6 class="fw-normal">SUPERVISIONE</h6>
<p class="mb-0 fw-semibold">Giorgio Uboldi</p>
<p class="mb-0 fw-semibold">Marco Luitprandi</p>
</div>
<div class="mb-4">
<h6 class="fw-normal">LAUREA MAGISTRALE</h6>
<a href="https://design.unirsm.sm/magistrale/presentazione/" class="fw-semibold fs-5">
Interaction & Experience Design
</a>
</div>
<div class="mb-4">
<h6 class="fw-normal">UNIVERSITÀ</h6>
<a href="https://www.unirsm.sm/" class="fw-semibold fs-5"> Repubblica di San Marino </a>
</div>
<div class="text-light">
<p class="mb-0 fs-6">Design by Alessandra Valentini</p>
<p class="mb-0 mt-0 fs-6">Development by Daniele Ciminieri (Calibro)</p>
</div>-->
</div>
</div>
</div>

<div class="container-fluid mt-4">
<div class="container-fluid mt-4" id="course-list">
{#each corsi as corso, index}
<div
class="row py-2"
Expand All @@ -68,11 +49,15 @@
<div class="col-12">
<h1 class="d-flex align-items-center gap-3">
<a href="{base}/corsi/{corso.slug.current}" class="text-decoration-none text-white">
<span class="fw-normal text-uppercase">{corso.titolo}</span>
<span
class="course-title fs-big fw-normal text-uppercase"
style="transition: all 0.3s ease-in-out; --color: {'#' + corso.colore}"
>{corso.titolo}</span
>
</a>
<span
class="fw-semibold badge rounded-pill text-white fs-6 mt-2"
style="box-shadow: inset 0 0 2px 2px {'#' + corso.colore}, 0 0 2px 2px {'#' +
style="box-shadow: inset 0 0 4px 2px {'#' + corso.colore}, 0 0 2px 2px {'#' +
corso.colore};
border: 1px solid {'#' + corso.colore}; background-color: {'#' + corso.colore}">{corso.anno}</span
>
Expand Down Expand Up @@ -111,4 +96,16 @@
font-size: 1rem;
color: #666666;
}
.fs-big {
font-size: 4rem;
}
.course-title:hover {
filter: blur(2px);
color: var(--color);
}
@media (max-width: 768px) {
.fs-big {
font-size: 2rem;
}
}
</style>
84 changes: 47 additions & 37 deletions src/routes/corsi/[slug]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,51 +3,56 @@
const { data } = $props();
</script>

{#if data.corso}
<div class="container-fluid mt-1 sticky-top bg-blur">
<div class="row">
<div class="col-md-12 border-2 border-bottom border-white py-1">
<h1 class="d-flex align-items-center gap-3">
<span class="fw-normal text-uppercase">{data.corso.titolo}</span>
<span
class="badge fw-semibold rounded-pill text-white fs-6 mt-0"
style="box-shadow: inset 0 0 2px 2px {'#' + data.corso.colore}, 0 0 2px 2px {'#' +
data.corso.colore};
<div class="flex-grow-1 d-flex flex-column justify-content-between">
{#if data.corso}
<div class="container-fluid mt-1 sticky-top bg-blur">
<div class="row">
<div class="col-md-12 border-2 border-bottom border-white py-1">
<h1 class="d-flex align-items-center gap-3">
<span class="fw-normal text-uppercase">{data.corso.titolo}</span>
<span
class="badge fw-semibold rounded-pill text-white fs-6 mt-0"
style="box-shadow: inset 0 0 2px 2px {'#' + data.corso.colore}, 0 0 2px 2px {'#' +
data.corso.colore};
border: 1px solid {'#' + data.corso.colore}; background-color: {'#' + data.corso.colore}"
>{data.corso.anno}</span
>
</h1>
</div>
</div>
</div>
<div class="container-fluid mt-4">
<div class="row">
<div class="col-md-7 col-sm-12">
<p class="fs-4 fw-semibold">{data.corso.descrizione}</p>
>{data.corso.anno}</span
>
</h1>
</div>
</div>
</div>
</div>
{#if data.corso.gruppi && data.corso.gruppi.length > 0}
<div class="container-fluid mt-4">
<div class="container-fluid mt-4 flex-grow-1">
<div class="row">
<div class="col-12">
{#each data.corso.gruppi as gruppo, index}
<div
class="border-white px-3 py-1 group-item"
class:border-top={index !== 0}
class:border-bottom={index !== data.corso.gruppi.length - 1}
style="--corso-color: #{data.corso.colore};"
>
<a href="{base}/gruppi/{gruppo.slug.current}" class="text-decoration-none text-white">
<p class="fw-normal text-uppercase fw-big my-0">{gruppo.nome}</p>
</a>
</div>
{/each}
<div class="col-md-7 col-sm-12">
<p class="fs-4 fw-semibold">{data.corso.descrizione}</p>
</div>
</div>
</div>
{#if data.corso.gruppi && data.corso.gruppi.length > 0}
<div class="container-fluid mt-4">
<div class="row">
<div class="col-12">
{#each data.corso.gruppi as gruppo, index}
<div
class="border-white px-3 py-1 group-item"
class:border-top={index !== 0}
class:border-bottom={index !== data.corso.gruppi.length - 1}
style="--corso-color: #{data.corso.colore};"
>
<a
href="{base}/gruppi/{gruppo.slug.current}"
class="text-decoration-none text-white"
>
<p class="fw-normal text-uppercase fw-big my-0">{gruppo.nome}</p>
</a>
</div>
{/each}
</div>
</div>
</div>
{/if}
{/if}
{/if}
</div>

<style>
.group-item a p {
Expand All @@ -60,4 +65,9 @@
.fw-big {
font-size: 4rem;
}
@media (max-width: 768px) {
.fw-big {
font-size: 2rem;
}
}
</style>
11 changes: 8 additions & 3 deletions src/routes/gruppi/[slug]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@
</a>
<span
class="fw-semibold badge rounded-pill text-white fs-6 mt-0"
style="box-shadow: inset 0 0 2px 2px {'#' +
data.gruppo.corso.colore}, 0 0 2px 2px {'#' + data.gruppo.corso.colore};
style="box-shadow: inset 0 0 4px 2px {'#' +
data.gruppo.corso.colore}, 0 0 4px 2px {'#' + data.gruppo.corso.colore};
border: 1px solid {'#' + data.gruppo.corso.colore}; background-color: {'#' +
data.gruppo.corso.colore}">{data.gruppo.corso.anno}</span
>
Expand All @@ -86,7 +86,7 @@
<h6 class="text-uppercase">STUDENTI</h6>
<ul class="list-unstyled">
{#each data.gruppo.studenti as studente}
<li class="fs-5 text-uppercase">{studente.nome} {studente.cognome}</li>
<li style="font-size: 1.12rem;">{studente.nome} {studente.cognome}</li>
{/each}
</ul>
</div>
Expand Down Expand Up @@ -149,4 +149,9 @@
/*:global(.btn-blur) {
--btn-color: #{data.gruppo.corso.colore};
}*/
@media (max-width: 768px) {
.fs-big {
font-size: 3rem;
}
}
</style>

0 comments on commit 6b1e50a

Please sign in to comment.