GARAGENUM
/
ltqf
13
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

portrait responsive index

Browse Source
pull/12/head
Carmen Ngaka Iziasuma 9 months ago
parent 77cce889c5
commit f0b29535ec
6 changed files with 117 additions and 106 deletions
Show Stats Download Patch File Download Diff File

36
assets/css/index.css
Unescape Escape View File

@ -1,33 +1,35 @@
.section {
position: relative;
}
.overlay {
@media screen and (orientation: landscape) {
.overlay {
z-index: 10;
opacity: 1;
position: absolute;
right: 10%; /* Extending full width */
bottom: 10%;
height: 30%;
width: 30%;
height: auto;
width: 50%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center; /* Center content horizontally */
align-items: center; /* Center content vertically */
text-align: center;
}
#galerie {
height: 100vh;
}
.carousel-item {
max-height: 100vh;
overflow-y: hidden;
}
}
@media screen and (orientation: portrait) {
.overlay {
z-index: 10;
opacity: 1;
position: relative;
top: 0;
right: 0;
position: sticky;
bottom: 0;
z-index: 100;
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#galerie {
height: 100%;
}
}

7
assets/css/style.css
Unescape Escape View File

@ -34,6 +34,10 @@ p {
.menu-column {
display: flex;
}
#main-col {
width: 80%;
}
}
@media screen and (orientation: portrait) {
.navbar {
@ -42,4 +46,7 @@ p {
.menu-column {
display: none;
}
#main-col {
width: 100%;
}
}

2
layouts/_default/baseof.html
Unescape Escape View File

@ -17,7 +17,7 @@
{{- partial "navbar.html" . -}}
<!-- Contenu de la page -->
<div class="column is-four-fifths m-0 p-0">
<div class="column m-0 p-0" id="main-col">
{{- block "content" . }}{{- end }}
{{ if not .IsHome}}
<div class="is-flex is-flex-direction-column is-justify-content-flex-end" style="position: fixed; bottom: 0%; right: 2%;">

136
layouts/index.html
Unescape Escape View File

@ -10,76 +10,78 @@
{{ end }}
{{ define "content" }}
<section class="hero is-fullheight is-flex is-flex-direction-column is-justify-content-flex-start has-background-danger">
<section id="galerie" class="carousel">
{{ $carouselImages := resources.Match "carousel/*"}}
{{ range $index, $image := $carouselImages }}
{{- $jpegxxs := $image.Resize (printf "%dx jpeg q%d" 412 75) }}
{{- $jpegxs := $image.Resize (printf "%dx jpeg q%d" 768 75) }}
{{- $jpegs := $image.Resize (printf "%dx jpeg q%d" 1024 75) }}
{{- $jpegm := $image.Resize (printf "%dx jpeg q%d" 1440 75) }}
{{- $jpegl := $image.Resize (printf "%dx jpeg q%d" 1920 75) }}
{{- $jpegxl := $image.Resize (printf "%dx jpeg q%d" 2560 75) }}
{{- $webpxxs := $image.Resize (printf "%dx webp q%d picture" 412 75) }}
{{- $webpxs := $image.Resize (printf "%dx webp q%d picture" 768 75) }}
{{- $webps := $image.Resize (printf "%dx webp q%d picture" 1024 75) }}
{{- $webpm := $image.Resize (printf "%dx webp q%d picture" 1440 75) }}
{{- $webpl := $image.Resize (printf "%dx webp q%d picture" 1920 75) }}
{{- $webpxl := $image.Resize (printf "%dx webp q%d picture" 2560 75) }}
<figure class="image carousel-item" style="height: 100vh;">
<picture>
<source type="image/webp"
srcset="{{ $webpxxs.Permalink }} {{ $webpxxs.Width }}w,
{{ $webpxs.Permalink }} {{ $webpxs.Width }}w,
{{ $webps.Permalink }} {{ $webps.Width }}w,
{{ $webpm.Permalink }} {{ $webpm.Width }}w,
{{ $webpl.Permalink }} {{ $webpl.Width }}w,
{{ $webpxl.Permalink }} {{ $webpl.Width }}w"
sizes="(max-with: 411px) 100vw,
(max-width: 767px) 412px,
(max-width: 1023px) 768px,
(max-width: 1439px) 1024px,
(max-width: 1919px) 1440px,
(max-width: 2559px) 1920px,
2560px">
<img style="width: 100%; height: 100%; object-fit: cover;"
src='{{ $jpegl.Permalink }}'
width="{{ $jpegxl.Width }}"
height="{{ $jpegxl.Height }}"
{{ if ne $index 0 }} loading="lazy" {{ end }}
srcset="{{ $jpegxxs.Permalink }} {{ $jpegxxs.Width }}w,
{{ $jpegxs.Permalink }} {{ $jpegxs.Width }}w,
{{ $jpegs.Permalink }} {{ $jpegs.Width }}w,
{{ $jpegm.Permalink }} {{ $jpegm.Width }}w,
{{ $jpegl.Permalink }} {{ $jpegl.Width }}w,
{{ $jpegxl.Permalink }} {{ $jpegxl.Width }}w"
sizes="(max-with: 411px) 100vw,
(max-width: 767px) 412px,
(max-width: 1023px) 768px,
(max-width: 1439px) 1024px,
(max-width: 1919px) 1440px,
(max-width: 2559px) 1920px,
2560px"
alt="{{ $image.Permalink }}">
</picture>
</figure>
{{ end }}
</section>
<section class="hero is-fullheight has-background-black">
<div class="is-flex is-flex-grow-1 is-flex-direction-column is-justify-content-space-between">
<div id="galerie" class="carousel is-flex is-flex-direction-column is-flex-grow-1 is-justify-content-space-around">
{{ $carouselImages := resources.Match "carousel/*"}}
{{ range $index, $image := $carouselImages }}
{{- $jpegxxs := $image.Resize (printf "%dx jpeg q%d" 412 75) }}
{{- $jpegxs := $image.Resize (printf "%dx jpeg q%d" 768 75) }}
{{- $jpegs := $image.Resize (printf "%dx jpeg q%d" 1024 75) }}
{{- $jpegm := $image.Resize (printf "%dx jpeg q%d" 1440 75) }}
{{- $jpegl := $image.Resize (printf "%dx jpeg q%d" 1920 75) }}
{{- $jpegxl := $image.Resize (printf "%dx jpeg q%d" 2560 75) }}
{{- $webpxxs := $image.Resize (printf "%dx webp q%d picture" 412 75) }}
{{- $webpxs := $image.Resize (printf "%dx webp q%d picture" 768 75) }}
{{- $webps := $image.Resize (printf "%dx webp q%d picture" 1024 75) }}
{{- $webpm := $image.Resize (printf "%dx webp q%d picture" 1440 75) }}
{{- $webpl := $image.Resize (printf "%dx webp q%d picture" 1920 75) }}
{{- $webpxl := $image.Resize (printf "%dx webp q%d picture" 2560 75) }}
<figure class="image carousel-item">
<picture>
<source type="image/webp"
srcset="{{ $webpxxs.Permalink }} {{ $webpxxs.Width }}w,
{{ $webpxs.Permalink }} {{ $webpxs.Width }}w,
{{ $webps.Permalink }} {{ $webps.Width }}w,
{{ $webpm.Permalink }} {{ $webpm.Width }}w,
{{ $webpl.Permalink }} {{ $webpl.Width }}w,
{{ $webpxl.Permalink }} {{ $webpl.Width }}w"
sizes="(max-with: 411px) 100vw,
(max-width: 767px) 412px,
(max-width: 1023px) 768px,
(max-width: 1439px) 1024px,
(max-width: 1919px) 1440px,
(max-width: 2559px) 1920px,
2560px">
<img style="width: 100%; height: 100%; object-fit: cover;"
src='{{ $jpegl.Permalink }}'
width="{{ $jpegxl.Width }}"
height="{{ $jpegxl.Height }}"
{{ if ne $index 0 }} loading="lazy" {{ end }}
srcset="{{ $jpegxxs.Permalink }} {{ $jpegxxs.Width }}w,
{{ $jpegxs.Permalink }} {{ $jpegxs.Width }}w,
{{ $jpegs.Permalink }} {{ $jpegs.Width }}w,
{{ $jpegm.Permalink }} {{ $jpegm.Width }}w,
{{ $jpegl.Permalink }} {{ $jpegl.Width }}w,
{{ $jpegxl.Permalink }} {{ $jpegxl.Width }}w"
sizes="(max-with: 411px) 100vw,
(max-width: 767px) 412px,
(max-width: 1023px) 768px,
(max-width: 1439px) 1024px,
(max-width: 1919px) 1440px,
(max-width: 2559px) 1920px,
2560px"
alt="{{ $image.Permalink }}">
</picture>
</figure>
{{ end }}
</div>
<div id="news" class="newscarousel box overlay">
{{ $spectacles := where .Site.RegularPages "Section" "spectacles" }}
{{ range $index, $page := where $spectacles ".Params.actu" "!=" nil }}
<div class="newscarousel-item text-center has-text-warning-light {{ if eq $index 0}}is-block {{ else }} is-hidden {{end}}">
<div class="title has-text-warning-light py-3">Actualités</div>
<div class="subtitle has-text-warning-light">{{ .Title }}</div>
<p class="p-0-mobile px-4-tablet">{{ .Params.actu }}</p>
</div>
{{ end }}
<div id="news" class="newscarousel box overlay is-flex is-justify-content-center has-text-centered">
{{ $spectacles := where .Site.RegularPages "Section" "spectacles" }}
{{ range $index, $page := where $spectacles ".Params.actu" "!=" nil }}
<div class="newscarousel-item has-text-warning-light {{ if eq $index 0}}is-block {{ else }} is-hidden {{end}}">
<div class="title has-text-warning-light py-3">Actualités</div>
<div class="subtitle has-text-warning-light">{{ .Title }}</div>
<p class="p-0-mobile px-4-tablet">{{ .Params.actu }}</p>
</div>
{{ end }}
</div>
</div>
{{ partial "navbarbottom.html" . }}
</section>
{{ end }}
@ -123,7 +125,7 @@
}
})
}
setInterval(moveToNextItem, 2000);
setInterval(moveToNextItem, 20000);
});
</script>

21
layouts/partials/navbar.html
Unescape Escape View File

@ -1,26 +1,5 @@
{{ $bg := cond .IsHome "has-background-black has-text-white" "has-background-success has-text-black" }}
<nav class="navbar is-black is-fixed-bottom" role="navigation" aria-label="main navigation">
<div class="navbar-brand is-flex is-justify-content-center is-flex-grow-1">
<a class="navbar-item" href="/" aria-label="Lien vers la page d'accueil du site">
<img src="{{ $.Site.Params.logoHome |relURL }}" alt="Logo de la Compagnie le temps qu'il faut">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mynavbar">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="mynavbar" class="navbar-menu has-background-black">
{{ range .Site.Menus.main }}
<a class="navbar-item is-uppercase has-text-white" href="{{ .URL }}" aria-label="Lien vers la page {{ .Name }}">{{ .Name }}</a>
{{ end }}
</div>
</nav>
<div class="column menu-column is-fullheight is-one-fifth has-background-danger has-background-warning is-narrow" style="z-index: 100;">
<aside id="sidebar" class="menu {{$bg}} is-flex is-flex-direction-column is-justify-content-space-between" style="position: fixed; top: 0; height: 100%; width: 20vw;">
<div>

21
layouts/partials/navbarbottom.html
Unescape Escape View File

@ -0,0 +1,21 @@
<nav class="navbar is-black" role="navigation" aria-label="main navigation">
<div class="navbar-brand is-flex is-justify-content-center is-flex-grow-1">
<a class="navbar-item" href="/" aria-label="Lien vers la page d'accueil du site">
<img src="{{ $.Site.Params.logoHome |relURL }}" alt="Logo de la Compagnie le temps qu'il faut">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mynavbar">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="mynavbar" class="navbar-menu has-background-black">
{{ range .Site.Menus.main }}
<a class="navbar-item is-uppercase has-text-white" href="{{ .URL }}" aria-label="Lien vers la page {{ .Name }}">{{ .Name }}</a>
{{ end }}
</div>
</nav>
Write Preview
Loading…
Cancel
Save