1 files changed, 314 insertions, 0 deletions

diff --git a/public/css/discographie.css b/public/css/discographie.css
new file mode 100644
index 0000000..8ed3700
--- /dev/null
+++ b/public/css/discographie.css
@@ -0,0 +1,314 @@
+/* public/discographie.css */
+
+.police_titre
+{
+    color: #c9a068;
+}
+
+aside
+{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    font-size: 80%;
+    font-family: 'Monospace';
+    /*margin-right: 10px;*/
+    /*position: absolute;*/
+    position: relative;
+    bottom: 30px;
+}
+
+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: 0px;
+    /*position: relative;
+    bottom: 45px;*/
+}
+
+#chronologie
+{
+    width: 200px;
+    font-weight: bold;
+    /*padding: 5px;*/
+    display: none;
+    z-index: 1; /* placer le menu déroulant au dessus */
+    /*background-color: #9fa8d0;*/
+    background-color: #a4afd4;
+    border: 2px #3d4c9d solid;
+}
+
+#chronologie p
+{
+    margin: 8px;
+}
+
+#chronologie p a:visited
+{
+    color: blue;
+}
+#chronologie p a:hover
+{
+    color: black;
+}
+
+.linkChrono
+{
+    text-decoration: none;
+}
+.linkChrono:hover
+{
+    text-decoration: underline;
+}
+.noLinkChrono
+{
+    text-decoration: none;
+    color: black;
+}
+
+/* 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;*/
+}
+.flexArticles
+{
+    /*display: flex;*/
+}
+
+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;
+}
+
+#articles
+{
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    align-items: flex-end;
+}
+
+article
+{
+        margin: 5px 0px;
+    width: 32%;
+    /*min-width: 300px;*/
+}
+.articleAvecEditeur
+{
+    width: 100%;
+}
+
+.vignette
+{
+    width: 100%;
+}
+
+figure
+{
+        margin: 0px;
+        /*display: inline-block;*/
+}
+
+figcaption
+{
+        margin: 2px;
+        color: #666;
+        font-size: small;
+        font-weight: bold;
+        text-align: center;
+}
+
+a
+{
+        display: inline-block;
+    /*border: 2px white solid;*/
+}
+
+.articleSansEditeur a
+{
+    border: 2px white solid;
+}
+.articleSansEditeur a:hover
+{
+        border: 2px blue solid;
+}
+
+a:hover figure figcaption
+{
+        text-decoration: underline;
+}
+
+.articleSansEditeur p
+{
+    /*border: 1px black solid;*/
+    text-align: center;
+    margin-top: 0px;
+}
+
+.articleSansEditeur img
+{
+    vertical-align: middle;
+}
+
+/* image dans le formulaire */
+.imageFormulaire
+{
+    float: right;
+    max-width: 25%;
+}
+
+/* page dédiée à un album */
+#albumHTML
+{
+    width: 100%;
+}
+.linkAlbumHTML
+{
+    color: blue;
+}
+
+
+@media screen and (min-width: 700px)
+{
+        #titre
+    {
+        width: 630px;
+        height: 171px;
+        background-image: url("../mouette.png");
+    }
+
+    #contenu
+    {
+        /*position: relative;*/
+        /*bottom: 35px;*/
+    }
+
+    #albumHTML
+    {
+        /* annuler le positionnement du contenu */
+        margin-top: 55px;
+    }
+}
+
+@media screen and (max-width: 699px)
+{
+    #titre
+    {
+        width: 480px;
+        height: 131px;
+        background-image: url("../mouette_petit.png");
+        margin: auto;
+    }
+
+    #contenu
+    {
+        /*position: relative;
+        bottom: 24px;*/
+    }
+
+    #albumHTML
+    {
+        /* annuler le positionnement du contenu */
+        margin-top: 42px;
+    }
+    article
+    {
+        width: 40%;
+    }
+}
+
+@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;
+    }
+
+    #bouton_chronologie
+    {
+        width: 130px;
+        font-size: initial; /* 150% est plus petit que "normal" */
+        padding-top: 5px;
+    }
+
+    #chronologie
+    {
+        /*display: flex;*/
+    }
+
+    #chronologie p
+    {
+        /*max-width: 80px;*/
+        margin: 5px;
+    }
+
+    #contenu
+    {
+        /*position: relative;*/
+       /* bottom: 15px;*/
+    }
+
+    #albumHTML
+    {
+        /* annuler le positionnement du contenu */
+        margin-top: 32px;
+    }
+    article
+    {
+        width: 48%;
+    }
+}