disco

3 files changed, 217 insertions, 55 deletions

diff --git a/public/discographie.css b/public/discographie.css
new file mode 100644
index 0000000..326cfbb
--- /dev/null
+++ b/public/discographie.css
@@ -0,0 +1,202 @@
+/* public/discographie.css */
+
+.police_titre
+{
+    color: #c9a068;
+}
+
+#multicolonnes
+{
+    /*display: flex;*/
+}
+
+aside
+{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    font-size: 80%;
+    font-family: 'Monospace';
+    /*margin-right: 10px;*/
+    /*position: absolute;*/
+}
+
+aside div
+{
+    position: absolute;
+}
+
+#bouton_chronologie
+{
+    width: 200px;
+    text-align: center;
+    font-size: large;
+    font-weight: bold;
+    /*text-decoration: underline;*/
+    /*border: 1px red solid;*/
+    margin: 13px 0 0 0;
+}
+
+#chronologie
+{
+    width: 200px;
+    font-weight: bold;
+    /*padding: 5px;*/
+    display: none;
+    z-index: 1; /* placer le menu déroulant au dessus */
+    background-color: #9fa8d0;
+}
+
+#chronologie p
+{
+    margin: 8px;
+}
+
+/* PC uniquement, pour les smartphones prévoir un clic
+=> :checked et une checkbox
+=> ou la balise select qui crée un menu déroulant */
+aside:hover #chronologie
+{
+    display: block;
+}
+
+section
+{
+    /*border: 1px red solid;*/
+}
+
+h3
+{
+    margin-top: 45px;
+}
+
+form p
+{
+    margin: 0px;
+}
+
+input
+{
+    margin: 2px 0;
+}
+
+.boutonAlbum
+{
+    margin-top: 45px;
+    padding-bottom: 20px;
+    border-bottom: 1px black solid;
+}
+.boutonAlbum a
+{
+    padding: 2px;
+    border: 4px black groove;
+}
+
+article
+{
+        margin: 5px 0px;
+}
+
+figure
+{
+        margin: 0px;
+        display: inline-block;
+}
+
+figcaption
+{
+        margin: 2px;
+        color: #666;
+        font-size: small;
+        font-weight: bold;
+        text-align: center;
+}
+
+a
+{
+        
+        display: inline-block;
+}
+
+article a:hover
+{
+        border: 2px blue solid;
+}
+
+
+a:hover figure figcaption
+{
+        text-decoration: underline;
+}
+
+@media screen and (min-width: 700px)
+{
+        #titre
+    {
+        width: 630px;
+        height: 171px;
+        background-image: url("mouette.png");
+    }
+
+    #contenu
+    {
+        position: relative;
+        bottom: 35px;
+    }
+}
+
+@media screen and (max-width: 699px)
+{
+    #titre
+    {
+        width: 480px;
+        height: 131px;
+        background-image: url("mouette_petit.png");
+        margin: auto;
+    }
+
+    #contenu
+    {
+        position: relative;
+        bottom: 24px;
+    }
+}
+
+@media screen and (max-width: 479px)
+{
+    #titre
+    {
+        width: 320px;
+        height: 88px;
+        background-image: url("mouette_mini.png");
+        margin: auto;
+    }
+
+    #multicolonnes
+    {
+        flex-direction: column;
+    }
+
+    aside
+    {
+        width: 320px;
+    }
+
+    #chronologie
+    {
+        display: flex;
+
+    }
+
+    #chronologie p
+    {
+        max-width: 80px;
+        margin: 2px;
+    }
+
+    #contenu
+    {
+        position: relative;
+        bottom: 15px;
+    }
+}
diff --git a/public/main.js b/public/main.js
index d4fb43a..1c04dec 100644
--- a/public/main.js
+++ b/public/main.js
@@ -1,6 +1,6 @@
 // public/main.js
 
-function accueil_vers_menu()
+function versMenu()
 {
         // ergonomique
         window.setTimeout("location=('index.php?page=menu');", 10000);
@@ -15,6 +15,19 @@ function deconnexionAutomatique()
         //window.setTimeout("location=('index.php?action=deconnexion');", 600000);
 }
 
+// fonction appelée avec onClick dans un lien,
+// si on sélectionne pas "oui", on ne doit pas suivre le lien
+// si javascript est désactivé, le lien fonctionne
+function confirmerSuppression(page)
+{
+        // ne suivre le lien "href" que si on clique sur oui
+        var oui = confirm('Confirmer la suppression de cet article.');
+        if(!oui)
+        {
+                event.preventDefault();
+        }
+}
+
 // bouton "mailto", le visiteur ne quitte pas la page
 function clientCourriel()
 {
diff --git a/public/melaine.css b/public/melaine.css
index 97872da..9736147 100644
--- a/public/melaine.css
+++ b/public/melaine.css
@@ -18,7 +18,7 @@ pre
 
 figure
 {
-    margin: 5px;
+    /*margin: 5px;*/
 }
 .boutonArticle
 {
@@ -106,56 +106,3 @@ figure
         max-width: 320px;
     }
 }
-
-
-/* CONTENU */
-
-/*.article1_elem1
-{
-        color: #2e5487;
-        font-size: 150%;
-}
-
-.article1_elem2
-{
-        color: #006ffd;
-        font-size: 90%;
-        font-weight: bold;
-}
-
-.article7_elem1
-{
-    color: #141aff;
-}
-
-.article8_elem1
-{
-    color: #141aff;
-}
-
-.article9_elem1
-{
-    color: #2a5971;
-}
-
-.article10_elem1
-{
-    color: #ad8b15;
-}
-
-.article10_elem2
-{
-    color: #ad240a;
-}
-
-.article11_elem1
-{
-    color: #ad8b15;
-}
-
-.article12_elem1
-{
-    color: #2878aa;
-    font-size: 125%;
-    font-weight: normal;
-}*/
\ No newline at end of file