Skip to content

Commit

Permalink
responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@leonardozilli
leonardozilli committed Feb 16, 2024
1 parent 36fe604 commit cd0c8e4
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 5,717 deletions.
90 changes: 79 additions & 11 deletions docs/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,55 @@
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


:root {
--verdino: #a6c9b5;
--giallino: #e5e1ad;
Expand Down Expand Up @@ -107,17 +157,6 @@ p {
padding: 0 5rem;
}

.mySlides {
width: 100%;
flex-shrink: 0;
box-sizing: border-box;
}

.carousel-track {
display: flex;
transition: transform 0.3s ease;
}

.w3-content {
margin-left: 0 !important;
margin-right: 0 !important;
Expand Down Expand Up @@ -194,6 +233,14 @@ p {
margin-bottom: 10px;
}

/* carousel */

.carousel-control-next,
.carousel-control-prev {
filter: invert(100%);
width: 3%;
}


/* cards section */

Expand Down Expand Up @@ -395,6 +442,7 @@ div[class^="grid-item"] {

div[class^="grid-item"] p {
line-height: 1rem;
padding-bottom: 1rem;
}

p[class^="text"] a {
Expand Down Expand Up @@ -623,6 +671,26 @@ p[class^="text"] a {
flex-direction: column;
gap: 30vh;
}

footer > .container-fluid > .grid-container {
display: flex;
flex-direction: column;
}

div[class^="grid-item"] {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.comparison-item {
width: 80vw;
height: 45vh;
border-image-width: 9vh 7vw;
border-image-outset: 9vh 3vw;
}

}


Expand Down
55 changes: 14 additions & 41 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<link href="css/style.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</head>

<body class="sb-nav-fixed">
Expand Down Expand Up @@ -72,9 +72,9 @@ <h3>The project</h3>

</section>
<section class="film-introduction-section">
<div class="w3-content w3-display-container">
<div class="carousel-track">
<div class="mySlides" id="traumnovelle">
<div id="introductionCarousel" class="carousel slide" data-bs-interval="false" >
<div class="carousel-inner">
<div class="mySlides carousel-item" id="traumnovelle">
<div class="sectitle">
<h3>Dream Story</h3>
</div>
Expand Down Expand Up @@ -103,7 +103,7 @@ <h3>Dream Story</h3>
</p>
</div>
</div>
<div class="mySlides" id="ews">
<div class="mySlides carousel-item active" id="ews">
<div class="sectitle">
<h3>Eyes Wide Shut</h3>
</div>
Expand Down Expand Up @@ -153,38 +153,15 @@ <h4>The production</h4>
1990s. </p>
</div>
</div>
<div class="mySlides" id="traumnovelle">
<div class="sectitle">
<h3>Dream Story</h3>
</div>
<div class="film-introduction">
<img src="./img/traumnovelle.jpg"
alt="First edition of the book.">
<p>"Traumnovelle," also known as "Dream Story," is a novella written by the Austrian author
Arthur Schnitzler and ublished in 1926.
<br>
Set in early 20th-century Vienna, "Traumnovelle" tells the story of Dr. Fridolin and his
wife, Albertine. The narrative unfolds when Fridolin stumbles upon his wife's hidden sexual
fantasies, which shakes the foundation of their seemingly stable marriage. This discovery
leads Fridolin on a surreal and introspective journey through the city's nightmarish
underbelly, filled with a series of erotic and unsettling encounters.
<br>
Schnitzler's work is notable for its exploration of the human psyche and the blurring of the
line between dreams and reality. The novella delves into the secret desires and hidden
motives of its characters, revealing the complex and often contradictory nature of human
sexuality.
<br>
"Traumnovelle" has had a significant influence on literature and cinema, most notably
inspiring Stanley Kubrick's film "Eyes Wide Shut," starring Tom Cruise and Nicole Kidman.
Schnitzler's exploration of sexual desire, jealousy, and the hidden aspects of the human
psyche continues to captivate readers and remains a thought-provoking piece of literature in
the realm of psychoanalytical fiction.
</p>
</div>
</div>
</div>
<button class="w3-button w3-black w3-display-left" id="prev-button" >&#10094;</button>
<button class="w3-button w3-black w3-display-right" id="next-button" >&#10095;</button>
<button class="carousel-control-prev" type="button" data-bs-target="#introductionCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#introductionCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section class="texts-introduction-section">
Expand Down Expand Up @@ -274,7 +251,6 @@ <h6 >Contacts</h6>
<p class="text1"><a href="https://www.unibo.it/it" target="_blank" class="icon-link">Alma Mater Studiorum Università di Bologna</a></p>
<p class="text1"><a href="https://corsi.unibo.it/2cycle/DigitalHumanitiesKnowledge" target="_blank" class="icon-link">Digital Humanities and Digital Knowledge</a></p>
<p class="text1"><a href="https://www.unibo.it/en/teaching/course-unit-catalogue/course-unit/2022/467035" target="_blank" class="icon-link">Digital Text in The Humanities</a></p>
<a href="#top"><button type="button" class="btn btn-outline-light">Back to the top</button></a>
</div>
<div class="grid-item-3">
<h6>Team</h6>
Expand All @@ -301,7 +277,7 @@ <h6>Team</h6>
</div>
</div>
<br>
<p style="text-align: center; font-size: smaller;">&copy; Copyright 2023 Erica Andreose, Giorgia Crosilla, Leonardo Zilli - DTiTH project - DHDK - Alma Mater Studiorum Bologna</p>
<p style="text-align: center; font-size: smaller; margin-bottom: 2rem;">&copy; Copyright 2023 Erica Andreose, Giorgia Crosilla, Leonardo Zilli - DTiTH project - DHDK - Alma Mater Studiorum Bologna</p>
</div>

</footer>
Expand Down Expand Up @@ -339,8 +315,5 @@ <h6>Team</h6>
}

</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>
<script src="js/main.js"></script>

</html>
36 changes: 0 additions & 36 deletions docs/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,3 @@
function carousel() {
const carouselTrack = document.querySelector(".carousel-track");
let slides = document.querySelectorAll(".mySlides");
const prevButton = document.getElementById("prev-button");
const nextButton = document.getElementById("next-button");
nextButton.addEventListener("click", nextSlide);
prevButton.addEventListener("click", prevSlide);
let slideIndex = 1;
const slideWidth = slides[0].clientWidth;
carouselTrack.style.transform = `translateX(-${slideIndex * slideWidth}px)`;

function updateCarousel() {
slides = document.querySelectorAll(".mySlides");
carouselTrack.style.transform = `translateX(-${slideIndex * slideWidth}px)`;
}

function nextSlide() {
if (slideIndex >= slides.length - 1) {
slideClone = slides[slideIndex - 1].cloneNode(true);
slides[slideIndex].insertAdjacentElement("afterend", slideClone);
}
slideIndex++;
updateCarousel();
}

function prevSlide() {
if (slideIndex <= 1) {
slideClone = slides[slideIndex].cloneNode(true);
slides[slideIndex - 1].insertAdjacentElement("beforebegin", slideClone);
}
slideIndex--;
updateCarousel();
}
}

function cardsBackground() {
let bgContainer = $(".bg-image");
$(".card-left").hover(function() {
Expand Down Expand Up @@ -246,7 +211,6 @@ function getImageForLabel(label, type) {

$(document).ready(function () {
parallax();
carousel();
cardsBackground();
fetchAlignment()
.then(function (alignmentData) {
Expand Down
Loading

0 comments on commit cd0c8e4

Please sign in to comment.