Skip to content

Commit

Permalink
feat: interfaz movil
Browse files Browse the repository at this point in the history
  • Loading branch information
@eerii
eerii committed Mar 22, 2024
1 parent 7006a8e commit df15a6b
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 85 deletions.
6 changes: 6 additions & 0 deletions templates/componentes/carrousel_peliculas.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,12 @@
this .tarxeta.inactive>#descripcion {
display: none;
}

@media md- {
this .tarxeta.inactive {
display: none;
}
}
</style>

{% for pelicula in peliculas %}
Expand Down
228 changes: 145 additions & 83 deletions templates/nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

padding: 0 calc(var(--spacing) * 2);
background-color: var(--bg-darker);
z-index: 30;

animation-timeline: scroll(root);
animation-timing-function: linear;
Expand All @@ -22,7 +23,6 @@

height: var(--nav-height);
border-bottom: 1px solid var(--bg-lighter);
z-index: 30;
}

this span {
Expand Down Expand Up @@ -70,8 +70,8 @@
this #banner {
position: fixed;
top: calc(var(--spacing) * 0.5);
width: 20rem;
left: calc(50% - 10rem);
left: calc(50% - 12rem);
width: 24rem;

background-color: var(--fg);
color: var(--bg);
Expand All @@ -81,6 +81,14 @@
border-radius: calc(var(--radius) * 2);
}

this #menu-toggle {
display: none;
height: 1.2rem;
width: 1.2rem;
border: none;
background-color: var(--fg);
}

@keyframes logo_hover {
50% {
color: var(--fg);
Expand All @@ -93,95 +101,149 @@
color: var(--accent);
}
}

@media lg- {
body {
margin-top: calc(
var(--nav-height) + var(--spacing) * 0.5 + 1.2rem
);
}

this {
padding-top: calc(var(--spacing) * 0.5 + 1.2rem);
height: calc(var(--nav-height) + var(--spacing) * 0.5 + 1.2rem);
}

this #banner {
border-radius: 0;
top: 0;
left: 0;
width: 100%;
padding: calc(var(--spacing) * 0.5);
}
}

@media md- {
this > div,
#menu {
flex-direction: column;
}

this #menu {
display: none;
}

this > div > div {
display: none;
}

this #menu-toggle {
display: block;
position: absolute;
top: calc(var(--spacing) + 2.2rem);
right: calc(var(--spacing) * 0.5);
}

#menu-toggle:checked + #menu {
display: flex;
background-color: var(--bg);
width: 100vw;
height: auto;
padding: 2.5rem;
}
}
</style>

<div>
<a id="banner" href="/cine_barato">Descubre o festival Cine Barato</a>
<a href="/">
<h1>CineMa<span id="alt">zarelos</span></h1>
</a>
<span></span>
<a href="/peliculas">Películas</a>
<!-- TODO: Blog <a href="/blog">Blog</a> -->
<a href="/sobre_nos">Sobre nós</a>
<a
href="https://www.instagram.com/cinemazarelos"
target="_blank"
aria-label="Instagram"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-brand-instagram"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
<input type="checkbox" id="menu-toggle" />
<div id="menu">
<a href="/peliculas">Películas</a>
<!-- TODO: Blog <a href="/blog">Blog</a> -->
<a href="/sobre_nos">Sobre nós</a>
<a
href="https://www.instagram.com/cinemazarelos"
target="_blank"
aria-label="Instagram"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="4" y="4" width="16" height="16" rx="4" />
<circle cx="12" cy="12" r="3" />
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
</svg>
</a>
<a
href="https://www.filmaffinity.com/es/userreviews.php?user_id=5661081"
target="_blank"
aria-label="Filmaffinity"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-brand-instagram"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-brand-instagram"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="4" y="4" width="16" height="16" rx="4" />
<circle cx="12" cy="12" r="3" />
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
</svg>
</a>
<a
href="https://www.filmaffinity.com/es/userreviews.php?user_id=5661081"
target="_blank"
aria-label="Filmaffinity"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="4" y="4" width="16" height="16" rx="2" />
<line x1="8" y1="4" x2="8" y2="20" />
<line x1="16" y1="4" x2="16" y2="20" />
<line x1="4" y1="8" x2="8" y2="8" />
<line x1="4" y1="16" x2="8" y2="16" />
<line x1="4" y1="12" x2="20" y2="12" />
<line x1="16" y1="8" x2="20" y2="8" />
<line x1="16" y1="16" x2="20" y2="16" />
</svg>
</a>
<a
href="https://letterboxd.com/cinemazarelos"
target="_blank"
aria-label="Letterboxd"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-brand-instagram"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-brand-instagram"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="4" y="4" width="16" height="16" rx="2" />
<line x1="8" y1="4" x2="8" y2="20" />
<line x1="16" y1="4" x2="16" y2="20" />
<line x1="4" y1="8" x2="8" y2="8" />
<line x1="4" y1="16" x2="8" y2="16" />
<line x1="4" y1="12" x2="20" y2="12" />
<line x1="16" y1="8" x2="20" y2="8" />
<line x1="16" y1="16" x2="20" y2="16" />
</svg>
</a>
<a
href="https://letterboxd.com/cinemazarelos"
target="_blank"
aria-label="Letterboxd"
>
<g transform="matrix(1,0,0,1,0.28094,0.108175)">
<circle cx="5.254" cy="11.892" r="4.395" />
</g>
<g transform="matrix(1,0,0,1,6.79829,0.108175)">
<circle cx="5.254" cy="11.892" r="4.395" />
</g>
<g transform="matrix(1,0,0,1,13.3156,0.108175)">
<circle cx="5.254" cy="11.892" r="4.395" />
</g>
</svg>
</a>
<a id="banner" href="/cine_barato">Descubre o festival Cine Barato</a>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-brand-instagram"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<g transform="matrix(1,0,0,1,0.28094,0.108175)">
<circle cx="5.254" cy="11.892" r="4.395" />
</g>
<g transform="matrix(1,0,0,1,6.79829,0.108175)">
<circle cx="5.254" cy="11.892" r="4.395" />
</g>
<g transform="matrix(1,0,0,1,13.3156,0.108175)">
<circle cx="5.254" cy="11.892" r="4.395" />
</g>
</svg>
</a>
</div>
</div>
</div>
4 changes: 2 additions & 2 deletions templates/paxinas/inicio.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
left: 0;
height: 40rem;
width: 100%;
z-index: -1;
z-index: -100;
}
</style>
</div>
Expand All @@ -39,7 +39,7 @@
flex: 50%;
}

@media sm- {
@media md- {
this { flex-direction: column; }
}
</style>
Expand Down

0 comments on commit df15a6b

Please sign in to comment.