diff --git a/index.css b/index.css
index 6f2da1d..21d56f6 100644
--- a/index.css
+++ b/index.css
@@ -163,11 +163,11 @@ input[type="checkbox"]:checked + label span {
{
float: right;
margin-right:25px;
+ margin-top:-30px;
}
#exMois
{
- margin-bottom:-10px;
margin-top:-10px;
height:30px;
width:30%;
@@ -179,23 +179,22 @@ input[type="checkbox"]:checked + label span {
{
text-align:center;
font-size: 30px;
- margin-bottom:-30px;
+ margin-top:-45px;
}
#exLess
{
width:40px;
height:40px;
- margin-top:-5px;
- margin-left:290px;
+ float:right;
+ margin-top:-40px;
}
#exMore
{
width:40px;
height:40px;
- margin-bottom:-45px;
- margin-left:80px;
+ padding-top:20px;
}
@@ -254,298 +253,21 @@ tr #date
-/*BURGER BUTTON*/
-.items {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- margin-bottom: 24px;
-}
-
-.item {
- margin: 12px;
-}
-
-/* =============================================================================
- MENU TOGGLE SWITCHES
-============================================================================= */
-/**
- * Toggle Switch Globals
- *
- * All switches should take on the class `cmn-toggle-switch` as well as their
- * variant that will give them unique properties. This class is an overview
- * class that acts as a reset for all versions of the icon.
- */
-.cmn-toggle-switch {
- display: block;
- position: relative;
- overflow: hidden;
- margin: 0;
- padding: 0;
- width: 108px;
- height: 96px;
- font-size: 0;
- text-indent: -9999px;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- box-shadow: none;
- border-radius: none;
- border: none;
- cursor: pointer;
- -webkit-transition: background 0.3s;
- transition: background 0.3s;
-}
-
-.cmn-toggle-switch:focus {
- outline: none;
-}
-
-.cmn-toggle-switch span {
- display: block;
- position: absolute;
- top: 45px;
- left: 18px;
- right: 18px;
- height: 6px;
- background: white;
-}
-
-.cmn-toggle-switch span::before,
-.cmn-toggle-switch span::after {
- position: absolute;
- display: block;
- left: 0;
- width: 100%;
- height: 6px;
- background-color: #fff;
- content: "";
-}
-
-.cmn-toggle-switch span::before {
- top: -27px;
-}
-.cmn-toggle-switch span::after {
- bottom: -27px;
-}
-/**
- * Style 1
- *
- * Rotating hamburger icon (rot), that simply rotates 90 degrees when activated.
- * Nothing too fancy, simple transition.
- */
-.cmn-toggle-switch__rot {
- background-color: #28aadc;
-}
-.cmn-toggle-switch__rot span {
- -webkit-transition: -webkit-transform 0.3s;
- transition: transform 0.3s;
-}
-
-/* active state, i.e. menu open */
-.cmn-toggle-switch__rot.active {
- background-color: #166888;
-}
-
-.cmn-toggle-switch__rot.active span {
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
-}
-
-/**
- * Style 2
- *
- * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
- * down to center and transform into an "x".
- */
-.cmn-toggle-switch__htx {
- background-color: #ff3264;
-}
-.cmn-toggle-switch__htx span {
- -webkit-transition: background 0 0.3s;
- transition: background 0 0.3s;
-}
-
-.cmn-toggle-switch__htx span::before,
-.cmn-toggle-switch__htx span::after {
- -webkit-transition-duration: 0.3s, 0.3s;
- transition-duration: 0.3s, 0.3s;
- -webkit-transition-delay: 0.3s, 0;
- transition-delay: 0.3s, 0;
-}
-
-.cmn-toggle-switch__htx span::before {
- -webkit-transition-property: top, -webkit-transform;
- transition-property: top, transform;
-}
-
-.cmn-toggle-switch__htx span::after {
- -webkit-transition-property: bottom, -webkit-transform;
- transition-property: bottom, transform;
-}
-
-/* active state, i.e. menu open */
-.cmn-toggle-switch__htx.active {
- background-color: #cb0032;
-}
-
-.cmn-toggle-switch__htx.active span {
- background: none;
-}
-
-.cmn-toggle-switch__htx.active span::before {
- top: 0;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
-}
-
-.cmn-toggle-switch__htx.active span::after {
- bottom: 0;
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
-}
-
-.cmn-toggle-switch__htx.active span::before,
-.cmn-toggle-switch__htx.active span::after {
- -webkit-transition-delay: 0, 0.3s;
- transition-delay: 0, 0.3s;
-}
+@media only screen and (max-width: 1000px) and (max-height: 500px){
-/**
- * Style 3
- *
- * Hamburger to left-arrow (htla). Hamburger menu transforms to a left-pointing
- * arrow. Usually indicates an off canvas menu sliding in from left that
- * will be close on re-click of the icon.
- */
-.cmn-toggle-switch__htla {
- background-color: #32dc64;
-}
-
-.cmn-toggle-switch__htla span {
- -webkit-transition: -webkit-transform 0.3s;
- transition: transform 0.3s;
-}
-
-.cmn-toggle-switch__htla span::before {
- -webkit-transform-origin: top right;
- -ms-transform-origin: top right;
- transform-origin: top right;
- -webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
- transition: transform 0.3s, width 0.3s, top 0.3s;
-}
-
-.cmn-toggle-switch__htla span::after {
- -webkit-transform-origin: bottom right;
- -ms-transform-origin: bottom right;
- transform-origin: bottom right;
- -webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
- transition: transform 0.3s, width 0.3s, bottom 0.3s;
-}
-
-/* active state, i.e. menu open */
-.cmn-toggle-switch__htla.active {
- background-color: #18903c;
-}
-
-.cmn-toggle-switch__htla.active span {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-
-.cmn-toggle-switch__htla.active span::before,
-.cmn-toggle-switch__htla.active span::after {
- width: 50%;
-}
-
-.cmn-toggle-switch__htla.active span::before {
- top: 0;
- -webkit-transform: translateX(42px) translateY(3px) rotate(45deg);
- -ms-transform: translateX(42px) translateY(3px) rotate(45deg);
- transform: translateX(42px) translateY(3px) rotate(45deg);
-}
-
-.cmn-toggle-switch__htla.active span::after {
- bottom: 0;
- -webkit-transform: translateX(42px) translateY(-3px) rotate(-45deg);
- -ms-transform: translateX(42px) translateY(-3px) rotate(-45deg);
- transform: translateX(42px) translateY(-3px) rotate(-45deg);
-}
-
-/**
- * Style 4
- *
- * Hamburger to right-arrow (htra). Hamburger menu transforms to a
- * right-pointing arrow. Usually indicates an off canvas menu sliding in from
- * right that will be close on re-click of the icon.
- */
-.cmn-toggle-switch__htra {
- background-color: #ff9650;
-}
-
-.cmn-toggle-switch__htra span {
- -webkit-transition: -webkit-transform 0.3s;
- transition: transform 0.3s;
-}
-
-.cmn-toggle-switch__htra span::before {
- -webkit-transform-origin: top left;
- -ms-transform-origin: top left;
- transform-origin: top left;
- -webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
- transition: transform 0.3s, width 0.3s, top 0.3s;
-}
-
-.cmn-toggle-switch__htra span::after {
- -webkit-transform-origin: bottom left;
- -ms-transform-origin: bottom left;
- transform-origin: bottom left;
- -webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
- transition: transform 0.3s, width 0.3s, bottom 0.3s;
-}
-
-/* active state, i.e. menu open */
-.cmn-toggle-switch__htra.active {
- background-color: #e95d00;
-}
-
-.cmn-toggle-switch__htra.active span {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-
-.cmn-toggle-switch__htra.active span::before,
-.cmn-toggle-switch__htra.active span::after {
- width: 50%;
+#title
+{
+ height: 50px;
}
-.cmn-toggle-switch__htra.active span::before {
- top: 0;
- -webkit-transform: translateX(-6px) translateY(3px) rotate(-45deg);
- -ms-transform: translateX(-6px) translateY(3px) rotate(-45deg);
- transform: translateX(-6px) translateY(3px) rotate(-45deg);
+#title img
+{
+ padding-top:10px;
+ height: 30px;
}
-.cmn-toggle-switch__htra.active span::after {
- bottom: 0;
- -webkit-transform: translateX(-6px) translateY(-3px) rotate(45deg);
- -ms-transform: translateX(-6px) translateY(-3px) rotate(45deg);
- transform: translateX(-6px) translateY(-3px) rotate(45deg);
}
diff --git a/index.html b/index.html
index 6a75bb2..781ed0e 100644
--- a/index.html
+++ b/index.html
@@ -63,19 +63,11 @@
-
-
-