1er commitHEADmaster

1 files changed, 352 insertions, 0 deletions

diff --git a/blog.css b/blog.css
new file mode 100644
index 0000000..0f698a7
--- /dev/null
+++ b/blog.css
@@ -0,0 +1,352 @@
+body
+{
+    /* vire une bande de la couleur du fond au dessus */
+    margin: 0px;
+    /* violet lavande */
+    background-color: #FFEDED;
+    /* marron */
+    color: #661D17;
+    word-wrap: break-word; /* coupe un mot plus long que ce que permet le bloc qui le contient */
+    font-family: sans-serif;
+}
+
+#bloc_page
+{
+    max-width: 980px;
+    margin: auto;
+}
+
+header
+{
+    text-align: center;
+    margin: 0px;
+    /* jaune citron */
+    background-color: #FFFCC2;
+}
+
+img
+{
+    /* supprime la bande en dessous de l'image, <img /> est considérée comme une balise inline et par défaut,
+    le navigateur applique un «vertical-align: baseline;» à cause des g, p, q qui peuvent dépasser en dessous d'un texte */
+    vertical-align: middle;
+    /* image dans le bon sens en regardant les données EXIF */
+        image-orientation: from-image;
+}
+
+p
+{
+    margin: 10px;
+}
+
+i
+{
+    color: red;
+}
+
+h1
+{
+    margin: 0px;
+    font-size: xx-large;
+    font-weight: normal;
+    /* orange curcuma */
+    color: #FC5900;
+
+}
+
+.sakura
+{
+    margin: 15px;
+}
+
+nav
+{
+    width: 100%;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    border-top: 1px purple solid;
+    border-bottom: 1px purple solid;
+    //font-size: large;
+}
+
+h3
+{
+    margin: 0px;
+    padding: 10px 10px 10px 40px;
+    text-align: left;
+}
+
+ul
+{
+    /* annule les marges par défaut */
+    margin: 0px;
+    padding-left: 0px;
+}
+
+li
+{
+    padding: 1px;
+    margin: 10px 20px;
+    text-transform: uppercase;
+    display: inline;
+}
+
+ul li
+{
+    display: inline-block;
+}
+
+li a
+{
+    text-decoration: none;
+}
+
+a
+{
+    color: purple;
+    text-decoration: none;
+}
+
+a:hover
+{
+    /* orange curcuma */
+    color: #FC5900;
+    //text-decoration: underline;
+}
+
+#admin
+{
+    margin: 20px;
+    border: 2px violet solid;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.corps
+{
+    /* jaune citron */
+    background-color: #FFFCC2;
+    display: flex;
+    justify-content: space-between;
+}
+
+article
+{
+    /* rose saumon */
+    border: #FFBD8D 2px solid;
+    margin: 0px 0px 20px 0px;
+    padding: 1px;
+    min-height: 336px;
+    /* violet lavande */
+    background-color: #FFEDED;
+}
+
+h2
+{
+    font-size: x-large;
+    margin: 10px;
+    font-weight: normal;
+}
+
+figure
+{
+    display: flex;
+    width: 180%;
+}
+
+figcaption
+{
+    margin: 10px;
+}
+
+.dateheure
+{
+    font-size: small;
+    font-style: italic;
+}
+
+section img
+{
+    max-width: 300px;
+    max-height: 300px;
+    margin: 0px 10px;
+    float: left;
+}
+
+.contenutexte
+{
+    margin: 10px;
+}
+
+h4
+{
+    /* orange curcuma */
+    color: #FC5900;
+    font-size: large;
+    margin: 20px 0px 0px 0px;
+    text-transform: uppercase;
+    display: inline-block;
+}
+
+
+/* colonne de droite */
+aside
+{
+    text-align: center;
+    width: 200px;
+    display:flex;
+    flex-wrap: wrap;
+    /* quand disposition horizontale*/
+    justify-content: space-around;
+    align-items: flex-start;
+    
+}
+
+.aside
+{
+        display:flex;
+        flex-wrap: wrap;
+        justify-content: center;
+}
+
+aside p
+{
+    width: 180px;
+}
+
+.prez
+{
+    display: inline-block;
+}
+
+pre
+{
+    font-family: sans-serif;    
+    white-space: pre-wrap;
+    margin: 0px;
+}
+
+aside pre
+{
+    width: 180px;
+}
+
+
+/* pied de page */
+footer
+{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+}
+
+
+/* grands écrans */
+@media all and (min-width: 980px) /* bloc_page = 980px, aside = 200px, section = 740px et 20 de marge de chaque côté*/
+{
+    section
+    {
+        margin: 20px;
+        width: 740px;
+    }
+}
+
+
+@media all and (min-width: 780px)
+{
+    aside
+    {
+        justify-content: space-around;
+    }
+}
+
+/* petits écrans */
+@media all and (max-width: 979px)
+{
+    #bloc_page
+    {
+        max-width: 780px;
+    }
+    
+    #banderole
+    {
+        width: 780px;
+    }
+    
+    #bloc_page
+    {
+        max-width: 780px;
+    }
+    
+    section /* bloc_page = 780px, aside = 200px, section = 560px et 10 de marge de chaque côté*/
+    {
+        margin: 10px;
+        width: 560px;
+    }
+    
+    figcaption
+    {
+        width: 250px;
+    }
+}
+
+
+/* tablettes */
+@media all and (max-width: 779px)
+{
+    #bloc_page
+    {
+        max-width: 580px;
+    }
+    
+    #banderole
+    {
+        width: 580px;
+    }
+    
+    .corps
+    {
+        flex-wrap: wrap;
+    }
+    
+    aside
+    {
+        width: auto;
+    }
+}
+
+@media all and (max-width: 579px)
+{
+    header
+    {
+        width: auto;
+    }
+    
+    figure
+    {
+        flex-wrap: wrap;
+    }
+    
+    .sakura
+    {
+        display: none;
+    }
+}
+    
+/* téléphones */
+@media all and (max-width: 429px)
+{
+    #banderole
+    {
+        width: 429px;
+    }
+    
+    .sakura
+    {
+        display: none;
+    }
+        
+    figure
+    {
+        flex-wrap: wrap;
+    }
+}