css: polish navbar integration
This commit is contained in:
parent
ce55d56bbb
commit
1cfc786947
|
|
@ -8,7 +8,7 @@ msgid ""
|
|||
msgstr ""
|
||||
"Project-Id-Version: PROJECT VERSION\n"
|
||||
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
|
||||
"POT-Creation-Date: 2024-05-22 02:27+0200\n"
|
||||
"POT-Creation-Date: 2024-05-22 15:44+0200\n"
|
||||
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
|
||||
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
|
||||
"Language: fr\n"
|
||||
|
|
@ -19,21 +19,21 @@ msgstr ""
|
|||
"Content-Transfer-Encoding: 8bit\n"
|
||||
"Generated-By: Babel 2.15.0\n"
|
||||
|
||||
#: src/lib/nav.html:18
|
||||
#: src/lib/nav.html:21
|
||||
msgid "Collective"
|
||||
msgstr "Collectif"
|
||||
|
||||
#: src/lib/nav.html:21 src/pages/index/games.html:1
|
||||
#: src/lib/nav.html:22 src/pages/index/games.html:1
|
||||
msgid "Games"
|
||||
msgstr "Jeux"
|
||||
|
||||
#: src/lib/nav.html:24
|
||||
#: src/lib/nav.html:23
|
||||
msgid "News"
|
||||
msgstr "Actualités"
|
||||
msgstr "Actus"
|
||||
|
||||
#: src/lib/nav.html:27
|
||||
msgid "Contact Us"
|
||||
msgstr "Nous Contacter"
|
||||
#: src/lib/nav.html:24
|
||||
msgid "Contact"
|
||||
msgstr "Contact"
|
||||
|
||||
#: src/pages/index/presentation.html:9
|
||||
msgid ""
|
||||
|
|
@ -46,10 +46,10 @@ msgstr ""
|
|||
"Bienvenue dans le monde soyeux de la compagnie des grenouilles, où les "
|
||||
"gros rêves sont livrés dans des petits paquets. Nous ne sommes pas votre "
|
||||
"turbo-corporation habituelle avec des équipes de fifous et des bureaux au"
|
||||
"cœur du 16ème arrondissement. Non, nous sommes justes deux âmes PASSIONNÉES "
|
||||
"lovées près de quelques transistors, animés par l'envie insatiable de "
|
||||
"confectionner des pépites de joie, que nous vendrons ensuite au baudaud "
|
||||
" contre une somme relativement anectodique."
|
||||
" cœur du 16ème arrondissement. Non, nous sommes justes deux âmes "
|
||||
"PASSIONNÉES lovées près de quelques transistors, animés par l'envie "
|
||||
"insatiable de confectionner des pépites de joie, que nous vendrons "
|
||||
"ensuite au baudaud contre une somme relativement anectodique."
|
||||
|
||||
#: src/pages/index/presentation.html:19
|
||||
msgid ""
|
||||
|
|
@ -64,19 +64,19 @@ msgid ""
|
|||
"treacherous waters of game development."
|
||||
msgstr ""
|
||||
"Nous sommes les spécialiste de l'aventure façon canapé-cocktail, que "
|
||||
"n'importe qui peu picorer mais que seuls les vrais PGM peuvent maîtriser"
|
||||
", façon peu subtile de marketter une cible aussi large que le Nevada."
|
||||
"Voyez-nous comme les Davids du Goliath de l'industrie du jeu vidéo "
|
||||
"n'importe qui peu picorer mais que seuls les vrais PGM peuvent maîtriser,"
|
||||
" façon peu subtile de marketter une cible aussi large que le Nevada"
|
||||
".Voyez-nous comme les Davids du Goliath de l'industrie du jeu vidéo "
|
||||
"(https://stjv.fr). Nos jeux sont petits, mais vous ne pourrez vous "
|
||||
"empêcher d'y revenir, tels de jolis cachets d'oxycodone. Mais, vous "
|
||||
"vous demandez peut-être comment deux personnes peuvent se partager la "
|
||||
"barre dans cet océan de pixels ? C'est grâce à cette douce, douce magie "
|
||||
"de la prise de décision collective. (N.D.T : Chat GPT n'a clairement "
|
||||
"jamais fait partie d'une organisation de gauche pour sortir des trucs "
|
||||
"aussi cons). Nous sommes le yin et yang, nous tempérant l'un l'autre "
|
||||
"nos écueils et nos force, lorsque nous navigons dans les eaux scabreuses"
|
||||
" du développement de logiciels vidéo-ludiques (N.D.T, mais par contre il"
|
||||
" sait admirablement amener une pointe d'érotisme là où on en attend pas)."
|
||||
"empêcher d'y revenir, tels de jolis cachets d'oxycodone. Mais, vous vous "
|
||||
"demandez peut-être comment deux personnes peuvent se partager la barre "
|
||||
"dans cet océan de pixels ? C'est grâce à cette douce, douce magie de la "
|
||||
"prise de décision collective. (N.D.T : Chat GPT n'a clairement jamais "
|
||||
"fait partie d'une organisation de gauche pour sortir des trucs aussi "
|
||||
"cons). Nous sommes le yin et yang, nous tempérant l'un l'autre nos "
|
||||
"écueils et nos force, lorsque nous navigons dans les eaux scabreuses du "
|
||||
"développement de logiciels vidéo-ludiques (N.D.T, mais par contre il sait"
|
||||
" admirablement amener une pointe d'érotisme là où on en attend pas)."
|
||||
|
||||
#: src/pages/index/presentation.html:33
|
||||
msgid ""
|
||||
|
|
@ -91,6 +91,7 @@ msgid ""
|
|||
"where small is mighty, and fun knows no bounds!"
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/index/presentation.html:45
|
||||
#: src/pages/index/presentation.html:46
|
||||
msgid "Members"
|
||||
msgstr "Membres"
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,28 @@
|
|||
class NavBar extends HTMLElement {
|
||||
#dockingTimeout
|
||||
|
||||
connectedCallback() {
|
||||
document.addEventListener("scroll", this.onScroll.bind(this))
|
||||
this.addEventListener('transitionend', this.onTransitionEnd.bind(this))
|
||||
this.onScroll()
|
||||
}
|
||||
|
||||
onScroll() {
|
||||
const scrollThreshold = parseInt(this.getAttribute('dock-logo-scroll-threshold'))
|
||||
const style = getComputedStyle(document.body)
|
||||
|
||||
onScroll(evt) {
|
||||
const scrollThreshold = this.getAttribute('scroll-threshold')
|
||||
if(window.scrollY > scrollThreshold) {
|
||||
this.classList.add("nav-bar__scrolled")
|
||||
if(window.scrollY > scrollThreshold && !this.classList.contains("nav-bar__docked")) {
|
||||
this.classList.add("nav-bar__docking")
|
||||
this.classList.add("nav-bar__docked")
|
||||
}
|
||||
else {
|
||||
this.classList.remove("nav-bar__scrolled")
|
||||
else if(window.scrollY <= scrollThreshold){
|
||||
this.classList.remove("nav-bar__docked")
|
||||
}
|
||||
}
|
||||
|
||||
onTransitionEnd(evt) {
|
||||
if(evt.target.classList.contains('nav-bar--logo') && evt.propertyName == 'top') {
|
||||
this.classList.remove("nav-bar__docking")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
%button {
|
||||
--background: var(--color-accent);
|
||||
--background-hover: var(--background);
|
||||
--color: var(--color-on-accent);
|
||||
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: var(--space-small) var(--space-medium);
|
||||
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
opacity: 0.9;
|
||||
|
||||
font-size: var(--fz-4);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
opacity: 1.0;
|
||||
background: var(--background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,13 +1,17 @@
|
|||
$mobile-breakpoint: "max-width: 768px";
|
||||
|
||||
:root {
|
||||
--color: #161616;
|
||||
--color-text: #161616;
|
||||
|
||||
--primary-color: #E04855;
|
||||
--on-primary: white;
|
||||
--color-primary: #aa1d29;
|
||||
--color-on-primary: white;
|
||||
|
||||
--dark: #282828;
|
||||
--on-dark: #E04855;
|
||||
--color-accent: #161616;
|
||||
--color-on-accent: #f2a6ac;
|
||||
|
||||
--color-dark: #303030;
|
||||
--color-dark-gradient: linear-gradient(0deg, var(--color-accent) 0%, var(--color-dark) 22%);
|
||||
--color-on-dark: #f2a6ac;
|
||||
|
||||
--space-xsmall: 5px;
|
||||
--space-small: 10px;
|
||||
|
|
@ -22,14 +26,9 @@ $mobile-breakpoint: "max-width: 768px";
|
|||
--fz-3: 1.5rem;
|
||||
--fz-4: 1.125rem;
|
||||
|
||||
--box-shadow: 0px 5px 5px 0px rgba(22,22,22,0.5);
|
||||
--button-shadow: inset 0 0 0.5px 1px hsla(0, 0%,
|
||||
100%, 0.075),
|
||||
/* shadow ring 👇 */
|
||||
0 0 0 1px hsla(0, 0%, 0%, 0.05),
|
||||
/* multiple soft shadows 👇 */
|
||||
0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
|
||||
0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
|
||||
0 3.5px 6px hsla(0, 0%, 0%, 0.09);;
|
||||
}
|
||||
--border-radius-small: 3px;
|
||||
--border-radius-medium: 7px;
|
||||
--elevation-high: 0px 5px 5px 0px rgba(22, 22, 22, 0.5);
|
||||
|
||||
--transitions-duration: 0.2s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +1,24 @@
|
|||
{% macro language_button(code, label) -%}
|
||||
<a class="
|
||||
nav-bar--language-link
|
||||
{% if context.current_language == code %}nav-bar--language-link__active{% endif %}
|
||||
"
|
||||
href="/{{code}}/"
|
||||
aria-label="{{label}}"
|
||||
{% if context.current_language != code %}
|
||||
<a class="nav-bar--language-link" href="/{{code}}/" aria-label="{{label}}"
|
||||
>
|
||||
{{ code }}
|
||||
</a>
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
<nav-bar class="nav-bar" id="nav-bar">
|
||||
<nav-bar class="nav-bar" dock-logo-scroll-threshold="130">
|
||||
<div class="nav-bar--content">
|
||||
<div class="nav-bar--menu">
|
||||
<ul class="nav-bar--menu-section">
|
||||
<li class="nav-bar--menu-item">
|
||||
<a href="#" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
|
||||
</li>
|
||||
<li class="nav-bar--menu-item">
|
||||
<a href="#" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
|
||||
</li>
|
||||
<li class="nav-bar--menu-item">
|
||||
<a href="#" class="nav-bar--menu-link">{{ gettext('News') }}</a>
|
||||
</li>
|
||||
<li class="nav-bar--menu-item">
|
||||
<a href="#" class="nav-bar--menu-link">{{ gettext('Contact Us') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav-bar--menu-section">
|
||||
<li class="nav-bar--menu-item">
|
||||
<a href="#" class="nav-bar--menu-link">Itch.io</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-bar--brand">
|
||||
<div class="nav-bar--logo-wrapper">
|
||||
<img class="nav-bar--logo" src="/img/nav-logo.png"></img>
|
||||
<div class="nav-bar--menu">
|
||||
<a href="#" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
|
||||
<a href="#" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
|
||||
<a href="#" class="nav-bar--menu-link">{{ gettext('News') }}</a>
|
||||
<a href="#" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar--language-section">
|
||||
{{ context.language() }}
|
||||
{{ language_button('fr', 'Site en français') }}
|
||||
<div class="nav-bar--separator"></div>
|
||||
<div class="nav-bar--languages">
|
||||
{{ language_button('fr', 'Version Française') }}
|
||||
{{ language_button('en', 'English version') }}
|
||||
</div>
|
||||
<toggle-nav-bar-button class="nav-bar--toggle-button">
|
||||
|
|
|
|||
238
src/lib/nav.scss
238
src/lib/nav.scss
|
|
@ -1,211 +1,185 @@
|
|||
.nav-bar {
|
||||
--background: var(--dark);
|
||||
--mobile-nav-height: 47px;
|
||||
%nav-button {
|
||||
@extend %button;
|
||||
--background: transparent;
|
||||
--background-hover: var(--color-accent);
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
--desktop-height: 75px;
|
||||
--desktop-logo-width: 145px;
|
||||
// Put the logo up this number of pixel when scrolling
|
||||
--desktop-dock-logo-offset: -73px;
|
||||
|
||||
--mobile-height: 47px;
|
||||
--mobile-logo-width: 100px;
|
||||
|
||||
// Put the logo up this number of pixel when scrolling
|
||||
--mobile-dock-logo-offset: -52px;
|
||||
|
||||
display: grid;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 82px;
|
||||
padding: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0px, var(--width)) auto;
|
||||
background: var(--background);
|
||||
box-shadow: var(--box-shadow);
|
||||
box-shadow: var(--elevation-high);
|
||||
background: var(--color-dark-gradient);
|
||||
|
||||
@media ($mobile-breakpoint) {
|
||||
height: var(--mobile-nav-height);
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
|
||||
&--content {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
grid-template-columns: 155px 1fr auto;
|
||||
}
|
||||
height: var(--desktop-height);
|
||||
margin: 0;
|
||||
|
||||
&--brand {
|
||||
position: relative;
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
padding: 0;
|
||||
transition: margin-top 0.2s ease-out;
|
||||
|
||||
@media ($mobile-breakpoint) {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
&__scrolled &--brand {
|
||||
margin-top: -80px;
|
||||
}
|
||||
|
||||
@media ($mobile-breakpoint) {
|
||||
&__scrolled &--brand, &__open &--brand {
|
||||
margin-top: -52px;
|
||||
}
|
||||
}
|
||||
|
||||
&--logo-wrapper {
|
||||
width: 100%;
|
||||
background: var(--dark);
|
||||
position: absolute;
|
||||
display: grid;
|
||||
box-shadow: var(--box-shadow);
|
||||
padding: var(--space-small);
|
||||
transition: padding-bottom 0.2s ease-out;
|
||||
}
|
||||
grid-template-columns: 1fr auto auto;
|
||||
|
||||
&__scrolled &--logo-wrapper {
|
||||
padding-bottom: 0;
|
||||
box-shadow: none;
|
||||
@media ($mobile-breakpoint) {
|
||||
height: var(--mobile-height);
|
||||
}
|
||||
}
|
||||
|
||||
&--logo {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
box-shadow: var(--elevation-high);
|
||||
top: 0;
|
||||
width: var(--desktop-logo-width);
|
||||
padding: var(--space-small);
|
||||
|
||||
background: var(--color-dark);
|
||||
transition: top var(--transitions-duration) ease-out;
|
||||
|
||||
@media($mobile-breakpoint) {
|
||||
width: var(--mobile-logo-width);
|
||||
}
|
||||
}
|
||||
|
||||
&__docked &--logo, &__open &--logo {
|
||||
top: var(--desktop-dock-logo-offset);
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
|
||||
@media ($mobile-breakpoint) {
|
||||
top: var(--mobile-dock-logo-offset);
|
||||
}
|
||||
}
|
||||
|
||||
// Override the transparent background and box-shadow: none until the
|
||||
// docking transition ends (see nav.js)
|
||||
&__docking &--logo {
|
||||
background: var(--color-dark);
|
||||
box-shadow: var(--elevation-high);
|
||||
}
|
||||
|
||||
&--menu {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
overflow: hidden;
|
||||
background: var(--background);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
|
||||
display: flex;
|
||||
|
||||
@media ($mobile-breakpoint) {
|
||||
z-index: -1;
|
||||
|
||||
position: absolute;
|
||||
top: var(--mobile-nav-height);
|
||||
top: -500px;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
display: flex;
|
||||
|
||||
box-shadow: var(--elevation-high);
|
||||
padding: 0 var(--space-medium);
|
||||
|
||||
flex-direction: column;
|
||||
transition: all 0.2s ease-out;
|
||||
gap: var(--space-small);
|
||||
|
||||
background: var(--color-dark);
|
||||
transition: all var(--transitions-duration) ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&__open &--menu {
|
||||
max-height: 230px;
|
||||
}
|
||||
|
||||
&--menu-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@media ($mobile-breakpoint) {
|
||||
flex-direction: column;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
}
|
||||
top: 0;
|
||||
padding-top: calc(var(--mobile-height) + var(--space-small));
|
||||
padding-bottom: var(--space-small);
|
||||
}
|
||||
|
||||
&--menu-item {
|
||||
list-style: none;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
&--menu-link {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@extend %nav-button;
|
||||
}
|
||||
|
||||
font-family: Knewave;
|
||||
font-size: var(--fz-4);
|
||||
color: var(--primary-color);
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
&--separator {
|
||||
align-self: center;
|
||||
height: 40%;
|
||||
width: 2px;
|
||||
margin: 0 var(--space-small);
|
||||
|
||||
background: var(--color-on-accent);
|
||||
|
||||
@media($mobile-breakpoint) {
|
||||
padding: var(--space-small);
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-color);
|
||||
color: var(--on-primary);
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--language-section {
|
||||
grid-area: 1 / 3 / 2 / 4;
|
||||
&--languages {
|
||||
align-self: center;
|
||||
padding: 0 var(--space-xsmall);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-small);
|
||||
|
||||
@media($mobile-breakpoint) {
|
||||
grid-area: 1 / 3 / 2 / 4;
|
||||
}
|
||||
}
|
||||
|
||||
&--language-link {
|
||||
border-radius: 3px;
|
||||
border: 1px solid transparent;
|
||||
@extend %nav-button;
|
||||
padding: var(--space-small);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background: var(--dark);
|
||||
color: var(--primary-color);
|
||||
|
||||
font-size: var(--fz-4);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media($mobile-breakpoint) {
|
||||
padding: var(--space-xsmall);
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
background: transparent;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
&__active:after {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&--toggle-button {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
margin: 0 var(--space-small) 0 var(--space-medium);
|
||||
align-self: center;
|
||||
grid-area: 1 / 4 / 2 / 5;
|
||||
align-self: center;
|
||||
margin: 0 var(--space-medium);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@media ($mobile-breakpoint) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: block;
|
||||
position: initial;
|
||||
background-color: var(--primary-color);
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
transition: all 0.3s ease-out;
|
||||
margin: 5px 0;
|
||||
|
||||
display: block;
|
||||
background-color: var(--color-on-accent);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&__open &--toggle-button {
|
||||
.bar {
|
||||
opacity: 0;
|
||||
|
||||
&:first-child {
|
||||
opacity: 1;
|
||||
&:nth-child(1) {
|
||||
transform: translateY(8px) rotate(-45deg);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
opacity: 1;
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: translateY(-8px) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,13 +19,13 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: var(--primary-color);
|
||||
background: var(--primary);
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
&--more-button {
|
||||
background: var(--dark);
|
||||
color: var(--primary-color);
|
||||
color: var(--primary);
|
||||
padding: var(--space-small) var(--space-medium);
|
||||
text-decoration: none;
|
||||
font-family: Knewave;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: var(--primary-color);
|
||||
background: var(--primary);
|
||||
color: var(--dark);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import 'lib/css/variables.scss';
|
||||
|
||||
@import 'lib/css/content.scss';
|
||||
@import 'lib/css/controls.scss';
|
||||
@import 'lib/css/reset.scss';
|
||||
@import 'lib/css/typo.scss';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue