1 files changed, 202 insertions, 0 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;
+    }
+}