Commits

C4ptain Crunch committed fd48b92

OPtimisation css (part1)

Comments (0)

Files changed (8)

css/index.css

Empty file removed.

css/original/index.css

Empty file added.

css/original/reset.css

+/* Reset CSS : compatibility with all browsers */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+	outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+	text-decoration: none;
+}
+del {
+	text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/original/slide.css

+#slideshow {
+    margin-top: 20px;
+    position:relative;
+    height:330px;
+    width: 650px;
+    overflow: hidden;
+    float: left;
+}
+
+#slideshow DIV {
+    position:absolute;
+    top:0;
+    left:0;
+    z-index:8;
+    opacity:0.0;
+    height: 330px;
+    background-color: #333;
+}
+
+#slideshow DIV p {
+    padding-left: 10px;
+    color: #DDD;
+    
+    position:relative;
+    padding: 10px;
+    padding-left: 20px;
+    color: #DDD;
+    margin-top: -50px;
+    margin-left: -5px;
+    opacity:.75;
+    background:#000;
+    height: 20px;
+}
+
+#slideshow DIV.active {
+    z-index:10;
+    opacity:1.0;
+    color: #DDD
+    background-color: #333;
+}
+
+#slideshow DIV.last-active {
+    z-index:9;
+}
+
+#slideshow DIV IMG {
+    height: 330px;
+    width: 650px;
+    display: block;
+    border: 0;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+
+/* ==== réseaux sociaux */
+
+.social {
+width: 200px;
+margin-top: 10px;
+height: 340px;
+overflow: hidden; }
+
+.radio {
+color: #362200; }
+
+/* style pour les tweets */
+.twitter {
+margin-top: 0px;
+font-size: 0.8 }
+
+.twitter .twitter_date {
+font-size: 0.7em; }
+
+
+.twitter a{
+text-decoration: none; }
+
+.twitter_status {
+color:#362200;
+border-bottom: 1px solid #DDD;
+font-size: 0.9em;
+margin-left: 0em; }
+
+
+
+
+/* height: 200px; margin: 20px; padding: 20px; background-color: green; width: 700px; font-size: 7em */

css/original/style.css

+/* Earth&co2 website */
+/* structure principale */
+
+body {
+font-family: Georgia, "DejaVu Serif", Norasi, serif; 
+color: #2A2A2A }
+
+h1, h2, h3, h4 {
+color: #5e9439;
+margin-top: 20px;
+margin-bottom: 5px; }
+
+/* Fibonacci based heading scale ratio */
+h1{ font-size: 2.4em; font-weight: normal; }
+h2{ font-size: 2.1em; font-weight: normal; }
+h3{ font-size: 1.4em; font-weight: normal; }
+h4{ font-size: 1.1em; font-weight: normal; }
+
+
+a {
+color: #32551b; }
+
+a:hover {
+color: #76ba48;
+text-decoration:none; }
+
+p {
+margin-left: 5px;
+margin-top: 5px; }
+
+iframe {
+border: 0;
+overflow: hidden;
+allowTransparency: true }
+
+hr { border: 1px solid #76ba48;}
+/* Reusable classes ============================================================ */
+
+/* Left & Right alignment */
+.left{ float: left; }
+.right{ float: right; }
+.clear { clear: both; }
+.none { display: none; }
+
+.fail { color: red; }
+
+.inside{ padding: 10px; }
+
+.etoile {
+font-size: 0.7em;
+color: grey; }
+
+.img {
+margin: 5px;
+border: 7px solid #EEEEEE; }
+
+/* =========== forms */
+
+input{
+font-size: 1em;
+font-family: Georgia, "DejaVu Serif", Norasi, serif;
+border: 1px solid #76ba48;
+padding: 3px;
+margin: 5px;
+-moz-border-radius: 8px; 
+-webkit-border-radius: 8px; 
+border-radius: 8px; }
+textarea{
+font-size: 1em;
+font-family: Georgia, "DejaVu Serif", Norasi, serif;
+border: 1px solid #76ba48;
+padding: 7px;
+margin: 5px;
+-moz-border-radius: 8px; 
+-webkit-border-radius: 8px; 
+border-radius: 8px; }
+
+/* lonely forms */
+form .serial {
+font-size: 1.2em; }
+
+/* Basic Structure ============================================================= */
+/* conteneur total (sans footer) */
+#wrap{
+margin: 0 auto;
+width: 1010px; }
+
+/* contenu */
+.content {
+margin-left: 50px; }
+
+/*=========  Header */
+header {
+width: 100%;
+margin-bottom: 10px; }
+
+/* logo */
+header h1 {
+background:#ffffff url('../img/logo.png') no-repeat;
+margin-left: 30px;
+height: 190px;
+width: 500px;
+text-indent: -100000px; }
+
+/* conteneur liens */
+header nav {
+border-top: 3px solid #4f2a11;
+padding-top: 10px;
+height: 20px;
+width:920px;
+margin-left : auto;
+margin-right: 20px;
+text-align: right; }
+
+header nav ul {
+font-size: 1.1em;
+margin-right: 0px;
+margin-left: 0px; }
+
+header nav li {
+display: inline; }
+
+/* box verte */
+header nav li a {
+color: #437224;
+text-decoration: none;
+padding: 5px;
+padding-left: 10px;
+padding-right: 10px; }
+
+header nav li a:hover {
+background-color: #66AA44;
+-moz-border-radius: 8px; 
+-webkit-border-radius: 8px; 
+border-radius: 8px;
+color: white; }
+
+/* icones de langue dans le header */
+.langtop {
+position: absolute;
+top : 5px; }
+.langtop:hover {
+background: none;}
+
+/* === compteur de co2 dans le header */
+
+header .co2total {
+font-size: 1.4em;
+margin-right: 25px;
+padding-left: 15px;
+margin-top: 30px;
+color: #362200;}
+
+/* chiffres en grand */
+header .co2total strong {
+color: #5e9439;
+font-size: 3em;
+font-weight:normal ; }
+
+/* ***** propriétés utiliées une seule fois ************ */
+
+/* compteur de co2 avec n° de série */
+
+.comp {
+font-size: 1.4em;
+color: #5e9439; }
+.comp strong {
+color: #76ba48;
+font-size: 3.3em;
+font-weight:normal; }
+
+/* cadenas pour la page actionnaires */
+.action {
+background: url('../img/lock.png') no-repeat right; }
+
+/* Agrandissement de la police des n° de série (input) */
+form .serial { font-size: 1.2em; }
+
+/* === footer */
+
+footer {
+width: 100%;
+float: left; }
+
+/* filigrane (logo) en bas de page (a droite) */
+.fili {
+background:#ffffff url('../img/filigrane.png') no-repeat;
+position: fixed;
+bottom: 0px;
+right: 0px;
+height: 213px;
+width: 200px;
+z-index: -1000; }
+
+/* Catalogue */
+.catalogue {
+    cellpading: 5px;}
+
+.catalogue td {
+width : 450px;
+margin-bottom: 15px;
+margin-top: 5px;
+padding: 5px;
+padding-left: 5px;
+/* height: 150px;
+border: 2px solid #76ba48;
+-moz-border-radius: 8px; 
+-webkit-border-radius: 8px;
+border-radius: 8px;*/}
+
+#catalogue p:hover {
+background : #EEE; }
+
+#catalogue p.impair {
+float: right; clear: both;
+margin-top: 0px;}
+
+.catalogue .prev {
+float: left;
+margin-right: 7px;
+margin-top: 7px;
+clear: left;}
+
+/* L'équipe (contact.php) */
+
+#team {
+margin: 50px;
+margin-left: 700px;}
+#team li {
+margin: 4px;}
+/* Le calendrier  */
+.event li {
+margin: 10px;
+padding: 10px;
+border: 2px solid #CCC;
+-moz-border-radius: 8px; 
+-webkit-border-radius: 8px; 
+border-radius: 8px;
+color: #999;
+clear: both;
+height: 80px;}
+
+.event li:hover {
+background : #EEE; }
+
+.event li .adresse {
+color : #999; }
+
+.event li a{
+color: #777;
+text-decoration: none;}
+
+.event .future {
+border: 2px solid #76ba48;
+color: #2A2A2A;}
+
+.event .future a{
+color: #32551b;}
+
+.event img {
+float:left;
+margin-right: 10px;
+height: 80px;
+opacity:0.5;}
+.event .future img {
+opacity:1.0;}
+
+.event h3 {
+font-size: 1.2em;
+margin: 4px;
+padding: 0px;}
+
+/* Page média */
+.pmedia {
+    margin-right: 20px;
+    float: left;
+    width: 210px;
+    padding: 7px;
+    height: 110px;
+    overflow: hidden;
+border: 2px solid #76ba48;
+-moz-border-radius: 8px; 
+-webkit-border-radius: 8px;
+border-radius: 8px;}
+
+.pmedia:hover {
+   height: auto; }
+/* tout est bian qui finit bien :) */

css/reset.css

-/* Reset CSS : compatibility with all browsers */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-
-/* remember to define focus styles! */
-:focus {
-	outline: 0;
-}
-
-/* remember to highlight inserts somehow! */
-ins {
-	text-decoration: none;
-}
-del {
-	text-decoration: line-through;
-}
-
-/* tables still need 'cellspacing="0"' in the markup */
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}

css/slide.css

-#slideshow {
-    margin-top: 20px;
-    position:relative;
-    height:330px;
-    width: 650px;
-    overflow: hidden;
-    float: left;
-}
-
-#slideshow DIV {
-    position:absolute;
-    top:0;
-    left:0;
-    z-index:8;
-    opacity:0.0;
-    height: 330px;
-    background-color: #333;
-}
-
-#slideshow DIV p {
-    padding-left: 10px;
-    color: #DDD;
-    
-    position:relative;
-    padding: 10px;
-    padding-left: 20px;
-    color: #DDD;
-    margin-top: -50px;
-    margin-left: -5px;
-    opacity:.75;
-    background:#000;
-    height: 20px;
-}
-
-#slideshow DIV.active {
-    z-index:10;
-    opacity:1.0;
-    color: #DDD
-    background-color: #333;
-}
-
-#slideshow DIV.last-active {
-    z-index:9;
-}
-
-#slideshow DIV IMG {
-    height: 330px;
-    width: 650px;
-    display: block;
-    border: 0;
-    overflow: hidden;
-    margin-bottom: 10px;
-}
-
-/* ==== réseaux sociaux */
-
-.social {
-width: 200px;
-margin-top: 10px;
-height: 340px;
-overflow: hidden; }
-
-.radio {
-color: #362200; }
-
-/* style pour les tweets */
-.twitter {
-margin-top: 0px;
-font-size: 0.8 }
-
-.twitter .twitter_date {
-font-size: 0.7em; }
-
-
-.twitter a{
-text-decoration: none; }
-
-.twitter_status {
-color:#362200;
-border-bottom: 1px solid #DDD;
-font-size: 0.9em;
-margin-left: 0em; }
-
-
-
-
-/* height: 200px; margin: 20px; padding: 20px; background-color: green; width: 700px; font-size: 7em */

css/style.css

-/* Earth&co2 website */
-/* structure principale */
-
-body {
-font-family: Georgia, "DejaVu Serif", Norasi, serif; 
-color: #2A2A2A }
-
-h1, h2, h3, h4 {
-color: #5e9439;
-margin-top: 20px;
-margin-bottom: 5px; }
-
-/* Fibonacci based heading scale ratio */
-h1{ font-size: 2.4em; font-weight: normal; }
-h2{ font-size: 2.1em; font-weight: normal; }
-h3{ font-size: 1.4em; font-weight: normal; }
-h4{ font-size: 1.1em; font-weight: normal; }
-
-
-a {
-color: #32551b; }
-
-a:hover {
-color: #76ba48;
-text-decoration:none; }
-
-p {
-margin-left: 5px;
-margin-top: 5px; }
-
-iframe {
-border: 0;
-overflow: hidden;
-allowTransparency: true }
-
-hr { border: 1px solid #76ba48;}
-/* Reusable classes ============================================================ */
-
-/* Left & Right alignment */
-.left{ float: left; }
-.right{ float: right; }
-.clear { clear: both; }
-.none { display: none; }
-
-.fail { color: red; }
-
-.inside{ padding: 10px; }
-
-.etoile {
-font-size: 0.7em;
-color: grey; }
-
-.img {
-margin: 5px;
-border: 7px solid #EEEEEE; }
-
-/* =========== forms */
-
-input{
-font-size: 1em;
-font-family: Georgia, "DejaVu Serif", Norasi, serif;
-border: 1px solid #76ba48;
-padding: 3px;
-margin: 5px;
--moz-border-radius: 8px; 
--webkit-border-radius: 8px; 
-border-radius: 8px; }
-textarea{
-font-size: 1em;
-font-family: Georgia, "DejaVu Serif", Norasi, serif;
-border: 1px solid #76ba48;
-padding: 7px;
-margin: 5px;
--moz-border-radius: 8px; 
--webkit-border-radius: 8px; 
-border-radius: 8px; }
-
-/* lonely forms */
-form .serial {
-font-size: 1.2em; }
-
-/* Basic Structure ============================================================= */
-/* conteneur total (sans footer) */
-#wrap{
-margin: 0 auto;
-width: 1010px; }
-
-/* contenu */
-.content {
-margin-left: 50px; }
-
-/*=========  Header */
-header {
-width: 100%;
-margin-bottom: 10px; }
-
-/* logo */
-header h1 {
-background:#ffffff url('../img/logo.png') no-repeat;
-margin-left: 30px;
-height: 190px;
-width: 500px;
-text-indent: -100000px; }
-
-/* conteneur liens */
-header nav {
-border-top: 3px solid #4f2a11;
-padding-top: 10px;
-height: 20px;
-width:920px;
-margin-left : auto;
-margin-right: 20px;
-text-align: right; }
-
-header nav ul {
-font-size: 1.1em;
-margin-right: 0px;
-margin-left: 0px; }
-
-header nav li {
-display: inline; }
-
-/* box verte */
-header nav li a {
-color: #437224;
-text-decoration: none;
-padding: 5px;
-padding-left: 10px;
-padding-right: 10px; }
-
-header nav li a:hover {
-background-color: #66AA44;
--moz-border-radius: 8px; 
--webkit-border-radius: 8px; 
-border-radius: 8px;
-color: white; }
-
-/* icones de langue dans le header */
-.langtop {
-position: absolute;
-top : 5px; }
-.langtop:hover {
-background: none;}
-
-/* === compteur de co2 dans le header */
-
-header .co2total {
-font-size: 1.4em;
-margin-right: 25px;
-padding-left: 15px;
-margin-top: 30px;
-color: #362200;}
-
-/* chiffres en grand */
-header .co2total strong {
-color: #5e9439;
-font-size: 3em;
-font-weight:normal ; }
-
-/* ***** propriétés utiliées une seule fois ************ */
-
-/* compteur de co2 avec n° de série */
-
-.comp {
-font-size: 1.4em;
-color: #5e9439; }
-.comp strong {
-color: #76ba48;
-font-size: 3.3em;
-font-weight:normal; }
-
-/* cadenas pour la page actionnaires */
-.action {
-background: url('../img/lock.png') no-repeat right; }
-
-/* Agrandissement de la police des n° de série (input) */
-form .serial { font-size: 1.2em; }
-
-/* === footer */
-
-footer {
-width: 100%;
-float: left; }
-
-/* filigrane (logo) en bas de page (a droite) */
-.fili {
-background:#ffffff url('../img/filigrane.png') no-repeat;
-position: fixed;
-bottom: 0px;
-right: 0px;
-height: 213px;
-width: 200px;
-z-index: -1000; }
-
-/* Catalogue */
-.catalogue {
-    cellpading: 5px;}
-
-.catalogue td {
-width : 450px;
-margin-bottom: 15px;
-margin-top: 5px;
-padding: 5px;
-padding-left: 5px;
-/* height: 150px;
-border: 2px solid #76ba48;
--moz-border-radius: 8px; 
--webkit-border-radius: 8px;
-border-radius: 8px;*/}
-
-#catalogue p:hover {
-background : #EEE; }
-
-#catalogue p.impair {
-float: right; clear: both;
-margin-top: 0px;}
-
-.catalogue .prev {
-float: left;
-margin-right: 7px;
-margin-top: 7px;
-clear: left;}
-
-/* L'équipe (contact.php) */
-
-#team {
-margin: 50px;
-margin-left: 700px;}
-#team li {
-margin: 4px;}
-/* Le calendrier  */
-.event li {
-margin: 10px;
-padding: 10px;
-border: 2px solid #CCC;
--moz-border-radius: 8px; 
--webkit-border-radius: 8px; 
-border-radius: 8px;
-color: #999;
-clear: both;
-height: 80px;}
-
-.event li:hover {
-background : #EEE; }
-
-.event li .adresse {
-color : #999; }
-
-.event li a{
-color: #777;
-text-decoration: none;}
-
-.event .future {
-border: 2px solid #76ba48;
-color: #2A2A2A;}
-
-.event .future a{
-color: #32551b;}
-
-.event img {
-float:left;
-margin-right: 10px;
-height: 80px;
-opacity:0.5;}
-.event .future img {
-opacity:1.0;}
-
-.event h3 {
-font-size: 1.2em;
-margin: 4px;
-padding: 0px;}
-
-/* Page média */
-.pmedia {
-    margin-right: 20px;
-    float: left;
-    width: 210px;
-    padding: 7px;
-    height: 110px;
-    overflow: hidden;
-border: 2px solid #76ba48;
--moz-border-radius: 8px; 
--webkit-border-radius: 8px;
-border-radius: 8px;}
-
-.pmedia:hover {
-   height: auto; }
-/* tout est bian qui finit bien :) */