Difference between revisions of "Template:Grenoble-Alpes/CSS"

 
(87 intermediate revisions by 2 users not shown)
Line 3: Line 3:
  
 
/* ************************************** ECRITURE ***************************************** */           
 
/* ************************************** ECRITURE ***************************************** */           
 +
 +
/* ******************** Lato (Menu+Titre) **************************** */
  
 
/* latin-ext */
 
/* latin-ext */
 
@font-face {
 
@font-face {
−
   font-family: 'Molengo';
+
   font-family: 'Lato';
 
   font-style: normal;
 
   font-style: normal;
 
   font-weight: 400;
 
   font-weight: 400;
−
   src: local('Molengo'), local('Molengo-Regular'), url(http://fonts.gstatic.com/s/molengo/v7/LLqzi2QjRP17rseSSfDGKvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
+
   src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
 
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 
}
 
}
 
/* latin */
 
/* latin */
 
@font-face {
 
@font-face {
−
   font-family: 'Molengo';
+
   font-family: 'Lato';
 
   font-style: normal;
 
   font-style: normal;
 
   font-weight: 400;
 
   font-weight: 400;
−
   src: local('Molengo'), local('Molengo-Regular'), url(http://fonts.gstatic.com/s/molengo/v7/pqkjY4KeO1LHeSjFqV3Zsg.woff2) format('woff2');
+
   src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
 
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 +
/* ********************** Poiret One (gros titre) ************************** */
 +
 +
/* cyrillic */
 +
@font-face {
 +
  font-family: 'Poiret One';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Poiret One'), local('PoiretOne-Regular'), url(https://fonts.gstatic.com/s/poiretone/v4/cKr_e199f0xMkxMkRbEJXyEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
 +
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 
}
 
}
  
 
/* latin-ext */
 
/* latin-ext */
 
@font-face {
 
@font-face {
−
   font-family: 'Lato';
+
   font-family: 'Poiret One';
 
   font-style: normal;
 
   font-style: normal;
 
   font-weight: 400;
 
   font-weight: 400;
−
   src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
+
   src: local('Poiret One'), local('PoiretOne-Regular'), url(https://fonts.gstatic.com/s/poiretone/v4/3Annd_XP-99FcGbOpm6fVCEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
 
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 
}
 
}
 +
 
/* latin */
 
/* latin */
 
@font-face {
 
@font-face {
−
   font-family: 'Lato';
+
   font-family: 'Poiret One';
 
   font-style: normal;
 
   font-style: normal;
 
   font-weight: 400;
 
   font-weight: 400;
−
   src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
+
   src: local('Poiret One'), local('PoiretOne-Regular'), url(https://fonts.gstatic.com/s/poiretone/v4/HrI4ZJpJ3Fh0wa5ofYMK8fk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 
 +
/* ********************** Fredericka the Great (Notebook) ************************** */
 +
 
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Fredericka the Great';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Fredericka the Great'), local('FrederickatheGreat'), url(https://fonts.gstatic.com/s/frederickathegreat/v5/7Es8Lxoku-e5eOZWpxw18hsRj2C0BvLNQqKHRdEu66Y.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 
 +
/* ******************** Amatic (Notebook) **************************** */
 +
 
 +
/* hebrew */
 +
@font-face {
 +
  font-family: 'Amatic SC';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(https://fonts.gstatic.com/s/amaticsc/v9/OpbFR1Tmt2r4Z48lwWGNORJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
 +
}
 +
/* vietnamese */
 +
@font-face {
 +
  font-family: 'Amatic SC';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(https://fonts.gstatic.com/s/amaticsc/v9/6oAC5EqjVnFivtPX-TgvlRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 +
}
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Amatic SC';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(https://fonts.gstatic.com/s/amaticsc/v9/6UByihrsVPWtZ99tNMIgMBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Amatic SC';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(https://fonts.gstatic.com/s/amaticsc/v9/DPPfSFKxRTXvae2bKDzp5FtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 
 +
/* ******************** Dancing Script (citation+Notebook) **************************** */
 +
 
 +
/* vietnamese */
 +
@font-face {
 +
  font-family: 'Dancing Script';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(https://fonts.gstatic.com/s/dancingscript/v8/DK0eTGXiZjN6yA8zAEyM2fRMc6C39aem-aUPzsV2c2w.woff2) format('woff2');
 +
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 +
}
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Dancing Script';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(https://fonts.gstatic.com/s/dancingscript/v8/DK0eTGXiZjN6yA8zAEyM2e87R-l0-Xx_7cYc0ZX1ifE.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Dancing Script';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(https://fonts.gstatic.com/s/dancingscript/v8/DK0eTGXiZjN6yA8zAEyM2Ud0sm1ffa_JvZxsF_BEwQk.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 
 +
/* ******************** Open Sans (paragraphe) **************************** */
 +
 
 +
/* cyrillic-ext */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
 +
}
 +
/* cyrillic */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 +
}
 +
/* greek-ext */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+1F00-1FFF;
 +
}
 +
/* greek */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0370-03FF;
 +
}
 +
/* vietnamese */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 +
}
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
 
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 
}
 
}
Line 40: Line 186:
 
/* ******************************************** TYPOGRAPHIE ************************************************* */
 
/* ******************************************** TYPOGRAPHIE ************************************************* */
  
−
         h1 {      /* titre pour haut de page */
+
         h3 {      /* titre pour haut de page */
−
                 font-family: "Lato";
+
                 font-family: 'Poiret One' , cursive;
 
                 text-align: center;
 
                 text-align: center;
 
                 font-weight: 100;
 
                 font-weight: 100;
−
                 font-size: 3vw;
+
                 font-size: 10vw;
 
                 color: #ecf0f1;
 
                 color: #ecf0f1;
−
                 padding-top:25%;
+
                 padding-top:23%;
−
                 padding-bottom:25%;
+
                 padding-bottom:23%;
−
                 position:relative;
+
                 -webkit-animation: begin 4s linear;
−
                 /*text-transform: uppercase;*/
+
                -moz-animation: begin 4s linear;
 +
                animation: begin 4s linear;
 +
                 text-transform: uppercase;
 
             }
 
             }
  
 +
@-webkit-keyframes begin {
 +
    0% {opacity:0;}
 +
    100% {opacity:1;}
 +
}
 +
 +
@-moz-keyframes begin {
 +
    0% {opacity:0;}
 +
    100% {opacity:1;}
 +
}
 +
 +
@keyframes begin {
 +
    0% {opacity:0;}
 +
    100% {opacity:1;}
 +
}
  
 
         h2 {
 
         h2 {
−
                /* text-align: center; */
+
                 font-family:  'Lato',cursive;
−
                 font-family:  'Lato';
+
 
                 font-weight: 100;
 
                 font-weight: 100;
 
                 transform: translateY(5%);
 
                 transform: translateY(5%);
Line 76: Line 237:
 
                 color: #000;
 
                 color: #000;
 
                 padding-bottom: 30px;
 
                 padding-bottom: 30px;
 +
                font-family:  'Lato';
 +
                font-weight: 100;
 
             }
 
             }
  
Line 81: Line 244:
 
               margin-right:5%;
 
               margin-right:5%;
 
               margin-left: 5%;
 
               margin-left: 5%;
 +
              padding-right: 1%;
 +
              padding-left: 1%;
 
               text-align: justify;
 
               text-align: justify;
−
               font-family:  Open sans;
+
               font-family:  'Open Sans', sans-serif;
−
               font-size: 1vw;
+
               font-size: 15px;
 
               font-weight: lighter;
 
               font-weight: lighter;
 
                
 
                
 
             }
 
             }
 +
.couvlogogeo {
 +
            width:50%;
 +
            opacity:0.5;
 +
            transform:translate(3850%,-150%);
 +
            z-index:5;
 +
          }
 +
 +
/**************** TABLE *****************/
 +
 +
table
 +
{
 +
    border-collapse: collapse;
 +
}
 +
td, th
 +
{
 +
    border: 1px solid black;
 +
    font-family:  'Open Sans', sans-serif;
 +
    font-size: 15px;
 +
    font-weight: lighter;
 +
    text-align: center;
 +
}
 +
 +
caption
 +
{
 +
    font-family:  'Open Sans', sans-serif;
 +
    font-size: 15px;
 +
    font-weight: lighter;
 +
    margin-bottom: 2%;
 +
}
 +
 +
 +
 +
/* ****************************** CROIX POUR FERMER UNE POP UP ************************** */
 +
 +
.close {
 +
    margin: 2%;
 +
    float: top;
 +
    font-size: 250%;
 +
    font-weight: 100;
 +
}
 +
 +
.close:hover {
 +
    font-size: 300%;
 +
    font-weight: 100;
 +
}
 +
 +
.close a{
 +
    text-decoration: none;
 +
    color: #ecf0f1;
 +
}
  
 
/* ********************************************** PAGE *************************************************** */
 
/* ********************************************** PAGE *************************************************** */
  
 
       body {
 
       body {
−
                 background-color:#364A5E;
+
                 background-color:#364A5E;  
−
           
+
                overflow-x: hidden;
 
             }
 
             }
  
Line 107: Line 322:
 
             }
 
             }
  
 +
 +
/* ********************************************** Geolocalisation *************************************************** */
 +
 +
/******************** POP UP GEOLOCALISATION ******************/
 +
.popup_geoloc
 +
        {
 +
            position: relative;
 +
            display: float;
 +
            cursor: pointer;
 +
            -webkit-user-select: none;
 +
            -moz-user-select: none;
 +
            -ms-user-select: none;
 +
            user-select: none;
 +
            z-index:2;
 +
            width:5%;
 +
        }
 +
 +
#Popup_geo
 +
        {
 +
        position:absolute;
 +
        padding: 10% 10% 10% 10%;
 +
        top: -200%;
 +
        left: 1520%;
 +
        width: 380%;
 +
        z-index: 2;
 +
        }
 +
 +
 +
.popup_geoloc .popuptext
 +
        {
 +
            visibility: hidden;
 +
            width: 20%;
 +
            background-color: #364A5E;
 +
            color: #fff;
 +
            text-align: justify;
 +
            border-radius: 2.5%;
 +
            padding: 10% 10% 10% 10%;
 +
            position: relative;
 +
            z-index:1;
 +
            font-family:  'Open Sans', sans-serif;
 +
            font-size: 0.95vw;
 +
            font-weight: lighter;
 +
 +
        }
 +
 +
.popup_geoloc .popuptext::after
 +
        {
 +
            content: "";
 +
            top: 100%;
 +
            left: 50%;
 +
            margin-left: -5px;
 +
            border-width: 5px;
 +
            border-style: solid;
 +
            border-color: #555 transparent transparent transparent;
 +
            z-index:1;
 +
        }
 +
 +
.popup_geoloc .show {
 +
            visibility: visible;
 +
            -webkit-animation: fadeIn 1s;
 +
            animation: fadeIn 1s;
 +
        }
 +
.popup_geoloc .hide {
 +
            visibility: hidden;
 +
            -webkit-animation: fadeIn 1s;
 +
            animation: fadeIn 1s;
 +
        }
 +
 +
@-webkit-keyframes fadeIn {
 +
            from {opacity: 0;}
 +
            to {opacity: 1;}
 +
        }
 +
@keyframes fadeIn {
 +
            from {opacity: 0;}
 +
            to {opacity:1 ;}
 +
        }
  
 
</style>
 
</style>
 +
 +
<script>
 +
            function Function_geo()
 +
            {
 +
            var popup = document.getElementById("Popup_geo");
 +
            popup.classList.toggle("show");
 +
            }
 +
 +
        </script>
 
</html>
 
</html>

Latest revision as of 08:42, 20 October 2017