keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Add responsive design for mobile

Browse Source
This commit is contained in:
Théo Marchal 2021-01-09 15:19:17 +01:00
parent e3f7632e88
commit 23785cc941
10 changed files with 171 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
biographie.html
View File

@ -5,12 +5,16 @@
<title>Ginou • biographie</title> <title>Ginou • biographie</title>
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou."> <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
<meta name="author" content="Famille Marchal"> <meta name="author" content="Famille Marchal">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x274c;&#xFE0E;</span>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li class="selected"><a href="biographie.html">Biographie</a></li> <li class="selected"><a href="biographie.html">Biographie</a></li>

4
divers.html
View File

@ -5,8 +5,10 @@
<title>Ginou • divers</title> <title>Ginou • divers</title>
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou."> <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
<meta name="author" content="Famille Marchal"> <meta name="author" content="Famille Marchal">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
<script src="plugins/jquery-3.5.1.min.js"></script> <script src="plugins/jquery-3.5.1.min.js"></script>
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet"> <link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
<script src="plugins/jquery.fancybox.min.js"></script> <script src="plugins/jquery.fancybox.min.js"></script>
@ -18,6 +20,8 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x274c;&#xFE0E;</span>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

4
explorer.html
View File

@ -5,12 +5,16 @@
<title>Ginou • explorer</title> <title>Ginou • explorer</title>
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou."> <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
<meta name="author" content="Famille Marchal"> <meta name="author" content="Famille Marchal">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x274c;&#xFE0E;</span>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

4
exposition.html
View File

@ -5,8 +5,10 @@
<title>Ginou • exposition</title> <title>Ginou • exposition</title>
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou."> <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
<meta name="author" content="Famille Marchal"> <meta name="author" content="Famille Marchal">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
<link rel="stylesheet" href="styles/fancybox.css" media="screen"> <link rel="stylesheet" href="styles/fancybox.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script> <script src="plugins/jquery-3.5.1.min.js"></script>
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet"> <link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
@ -16,6 +18,8 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x274c;&#xFE0E;</span>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

4
index.html
View File

@ -5,12 +5,16 @@
<title>Ginou • accueil</title> <title>Ginou • accueil</title>
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou."> <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
<meta name="author" content="Famille Marchal"> <meta name="author" content="Famille Marchal">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x274c;&#xFE0E;</span>
<ul> <ul>
<li class="title selected"><a href="index.html">Ginou</a></li> <li class="title selected"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

4
informations.html
View File

@ -5,14 +5,18 @@
<title>Ginou • informations</title> <title>Ginou • informations</title>
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou."> <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
<meta name="author" content="Famille Marchal"> <meta name="author" content="Famille Marchal">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
<script src="plugins/jquery-3.5.1.min.js"></script> <script src="plugins/jquery-3.5.1.min.js"></script>
<script src="scripts/mail.js"></script> <script src="scripts/mail.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x274c;&#xFE0E;</span>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

4
painting.html
View File

@ -5,12 +5,16 @@
<title>Ginou • tableau <!-- insérer le nom et/ou le numéro --></title> <title>Ginou • tableau <!-- insérer le nom et/ou le numéro --></title>
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou."> <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
<meta name="author" content="Famille Marchal"> <meta name="author" content="Famille Marchal">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x274c;&#xFE0E;</span>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

9
scripts/menu.js Normal file
View File

@ -0,0 +1,9 @@
function mobilemenu() {
var navmenu = document.getElementsByTagName("nav");
if (navmenu[0].classList.contains("active"))
navmenu[0].classList.remove("active");
else
navmenu[0].classList.add("active");
}

3
styles/fancybox.css
View File

@ -18,8 +18,7 @@
} }
.fancybox-custom-layout .fancybox-toolbar { .fancybox-custom-layout .fancybox-toolbar {
bottom:0; top:0;
top:initial;
} }

132
styles/main.css
View File

@ -60,6 +60,80 @@ header nav ul li a {
padding:0; padding:0;
} }
@media only screen and (min-width:500px) and (max-width: 1200px) {
header nav ul li.title {
display:block;
margin-bottom:0.5rem;
}
header nav ul li {
margin:0 1rem;
}
}
header nav .mobile-menu-open,
header nav .mobile-menu-close {
display:none;
}
@media only screen and (max-width: 500px) {
header nav .mobile-menu-open {
display:block;
position:absolute;
right:1rem;
top:0.5rem;
font-size:1.5rem;
cursor:pointer;
}
header nav.active .mobile-menu-open {
display:none;
}
header nav.active .mobile-menu-close {
display:block;
position:absolute;
right:1rem;
top:0.5rem;
font-size:1.5rem;
cursor:pointer;
}
header nav.active .mobile-menu {
animation-duration:1s;
animation-name:rotate90;
animation-fill-mode:forwards;
}
@keyframes rotate90 {
from {
transform:rotate(0deg);
}
to {
transform:rotate(90deg);
}
}
header nav ul li {
display:none;
}
header nav.active ul li {
display:block;
font-size:1.2rem;
}
header nav ul li.title {
font-size:1.8rem;
}
header nav ul li.title {
display:block;
margin-bottom:0.5rem;
}
}
article { article {
width:85vw; width:85vw;
margin:auto; margin:auto;
@ -67,6 +141,12 @@ article {
text-align:left; text-align:left;
} }
@media only screen and (max-width: 1200px) {
article {
width:95vw;
}
}
article h1 { article h1 {
text-align:center; text-align:center;
} }
@ -87,6 +167,17 @@ article.main img {
display:block; display:block;
} }
@media only screen and (max-width: 1200px) {
/*@media only screen and (max-width: 1000px) {*/
article.main {
width:85vw;
}
article.main img {
max-width:85vw;
}
}
article.main p.signature { article.main p.signature {
margin-top:2rem; margin-top:2rem;
margin-bottom:2rem; margin-bottom:2rem;
@ -111,6 +202,13 @@ article #gallery img {
margin:0.5rem; margin:0.5rem;
} }
@media only screen and (max-width: 1000px) {
article #gallery img {
max-height:85vh;
max-width:85vw;
}
}
/* Cartel (expo & painting) */ /* Cartel (expo & painting) */
@ -163,6 +261,7 @@ article.painting .container {
article.painting .container img { article.painting .container img {
max-height:75vh; max-height:75vh;
max-width:85vw;
display:block; display:block;
text-align:center; text-align:center;
margin:auto; margin:auto;
@ -186,6 +285,14 @@ article.painting .container .metadata span.content {
font-size:0.9em; font-size:0.9em;
} }
@media only screen and (max-width: 1200px) {
article.painting .container ul.metadata {
display:none;
}
}
/* Divers */ /* Divers */
@ -204,6 +311,31 @@ article #stats #stat {
margin-left:4vw; margin-left:4vw;
} }
@media only screen and (max-width: 1000px) {
article #stats {
display:block;
}
article #stats #stat {
width:85vw;
text-align:center;
margin:auto;
margin-top:3rem;
}
}
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
article #stats {
display:block;
}
article #stats #stat {
width:55vw;
text-align:center;
margin:auto;
margin-top:3rem;
}
}
/* Informations */ /* Informations */