Make css compatible with multiple browsers

static/css/hamburger.css

@@ -1,5 +1,4 @@
 /* Basic styles */
-
 #mobile-header {
 	font-family: sans-serif;
 	right: 0;
@@ -11,274 +10,273 @@
 
 /* Toggle functionality */
 #toggle {
-  position: absolute;
-  left: -100%;
-  top: -100%;
-}
-
-#toggle:focus ~ .toggle-container .button-toggle {
-  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 8px rgba(0, 0, 0, 0.1);
+	position: absolute;
+	left: -100%;
+	top: -100%;
 }
-
+#toggle:focus ~ .toggle-container .button-toggle,
 #toggle:checked ~ .toggle-container .button-toggle {
-  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 8px rgba(0, 0, 0, 0.1);
+	-webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
+		 -moz-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
+					box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
 }
 
-#toggle:checked ~ .toggle-container .button-toggle:hover {
-  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 8px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 8px rgba(0, 0, 0, 0.1);
+#toggle:checked ~ .toggle-container .button-toggle:hover,
+#toggle:checked:focus ~ .toggle-container .button-toggle {
+	-webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1), 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
+		 -moz-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1), 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
+					box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1), 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
 }
 
 #toggle:checked ~ .toggle-container .button-toggle:before {
-  -webkit-transform: translateY(-50%) rotate(45deg) scale(1);
-      -ms-transform: translateY(-50%) rotate(45deg) scale(1);
-          transform: translateY(-50%) rotate(45deg) scale(1);
+	-webkit-transform: translateY(-50%) rotate(45deg) scale(1);
+			-ms-transform: translateY(-50%) rotate(45deg) scale(1);
+			 -o-transform: translateY(-50%) rotate(45deg) scale(1);
+					transform: translateY(-50%) rotate(45deg) scale(1);
 }
 
 #toggle:checked ~ .toggle-container .button-toggle:after {
-  -webkit-transform: translateY(-50%) rotate(-45deg) scale(1);
-      -ms-transform: translateY(-50%) rotate(-45deg) scale(1);
-          transform: translateY(-50%) rotate(-45deg) scale(1);
-}
-
-#toggle:checked:focus ~ .toggle-container .button-toggle {
-  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 8px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 8px rgba(0, 0, 0, 0.1);
+	-webkit-transform: translateY(-50%) rotate(-45deg) scale(1);
+			-ms-transform: translateY(-50%) rotate(-45deg) scale(1);
+			 -o-transform: translateY(-50%) rotate(-45deg) scale(1);
+					transform: translateY(-50%) rotate(-45deg) scale(1);
 }
 
 #toggle:checked ~ .nav {
-  margin-bottom: 100px;
-  pointer-events: auto;
-  -webkit-transform: translate(0px, 50px);
-      -ms-transform: translate(0px, 50px);
-          transform: translate(0px, 50px);
+	margin-bottom: 100px;
+	pointer-events: auto;
+	-webkit-transform: translate(0px, 50px);
+			-ms-transform: translate(0px, 50px);
+			 -o-transform: translate(0px, 50px);
+					transform: translate(0px, 50px);
 }
 
-/* 
-#toggle:check ~ .nav .nav-item {
-} */
-
 #toggle:checked ~ .nav .nav-item {
-	/* margin-right: calc(var(--body-margin) + var(--tile-margin)); */
 	font-family: 'akrobat-regular';
-  color: black;
-  letter-spacing: 0;
-  height: 40px;
+	color: black;
+	letter-spacing: 0;
+	height: 40px;
 	line-height: 40px;
 	float: none;
 	text-align: right;
-	/* margin-top: 0; */
 	margin: 0;
-  opacity: 1;
-  -webkit-transform: scaleY(1);
-      -ms-transform: scaleY(1);
-          transform: scaleY(1);
-  -webkit-transition: 0.5s, opacity 0.1s;
-  transition: 0.5s, opacity 0.1s;
-}
-
-#toggle:checked ~ .nav .nav-item:nth-child(1) {
-  -webkit-transition-delay: 0.15s;
-          transition-delay: 0.15s;
-}
-
+	opacity: 1;
+	-webkit-transform: scaleY(1);
+			-ms-transform: scaleY(1);
+			 -o-transform: scaleY(1);
+					transform: scaleY(1);
+	-webkit-transition: .5s, opacity .1s;
+		 -moz-transition: .5s, opacity .1s;
+			 -o-transition: .5s, opacity .1s;
+					transition: .5s, opacity .1s;
+}
+
+#toggle:checked ~ .nav .nav-item:nth-child(1),
 #toggle:checked ~ .nav .nav-item:nth-child(1):before {
-  -webkit-transition-delay: 0.15s;
-          transition-delay: 0.15s;
-}
-
-#toggle:checked ~ .nav .nav-item:nth-child(2) {
-  -webkit-transition-delay: 0.1s;
-          transition-delay: 0.1s;
+	-webkit-transition-delay: .15s;
+		 -moz-transition-delay: .15s;
+			 -o-transition-delay: .15s;
+					transition-delay: .15s;
 }
 
+#toggle:checked ~ .nav .nav-item:nth-child(2),
 #toggle:checked ~ .nav .nav-item:nth-child(2):before {
-  -webkit-transition-delay: 0.1s;
-          transition-delay: 0.1s;
+	-webkit-transition-delay: .01s;
+		 -moz-transition-delay: .01s;
+			 -o-transition-delay: .01s;
+					transition-delay: .01s;
 }
 
-#toggle:checked ~ .nav .nav-item:nth-child(3) {
-  -webkit-transition-delay: 0.05s;
-          transition-delay: 0.05s;
-}
 
+#toggle:checked ~ .nav .nav-item:nth-child(3),
 #toggle:checked ~ .nav .nav-item:nth-child(3):before {
-  -webkit-transition-delay: 0.05s;
-          transition-delay: 0.05s;
-}
-
-#toggle:checked ~ .nav .nav-item:nth-child(4) {
-  -webkit-transition-delay: 0s;
-          transition-delay: 0s;
+	-webkit-transition-delay: .05s;
+		 -moz-transition-delay: .05s;
+			 -o-transition-delay: .05s;
+					transition-delay: .05s;
 }
 
+#toggle:checked ~ .nav .nav-item:nth-child(4),
 #toggle:checked ~ .nav .nav-item:nth-child(4):before {
-  -webkit-transition-delay: 0s;
-          transition-delay: 0s;
+	-webkit-transition-delay: 0s;
+		 -moz-transition-delay: 0s;
+			 -o-transition-delay: 0s;
+					transition-delay: 0s;
 }
 
 #toggle:checked ~ .nav .nav-item:before {
-  opacity: 0;
+	opacity: 0;
 }
 
 /* Toggle button */
 .button-toggle {
-  position: absolute;
+	position: absolute;
 	display: inline-block;
 	right: 0;
-  width: 20px;
-  height: 20px;
-  margin: 25px 0;
-  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 8px rgba(0, 0, 0, 0.1);	
-  border: none;
-  cursor: pointer;
-  border-radius: 100%;
-  -webkit-transition: 0.6s;
-  transition: 0.6s;
+	width: 20px;
+	height: 20px;
+	margin: 25px 0;
+	-webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);	
+		 -moz-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);	
+					box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);	
+	border: none;
+	cursor: pointer;
+	border-radius: 100%;
+	-webkit-transition: .6s;
+		 -moz-transition: .6s;
+			 -o-transition: .6s;
+					transition: .6s;
 }
 /* button X container (toggled) */
 .button-toggle:before, .button-toggle:after {
-  position: absolute;
-  content: '';
-  top: 50%;
+	position: absolute;
+	content: '';
+	top: 50%;
 	/* left: 0; */
 	right: 0;
-  width: 100%;
-  height: 2px;
-  background-color: black;
-  border-radius: 5px;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
+	width: 100%;
+	height: 2px;
+	background-color: black;
+	border-radius: 5px;
+	-webkit-transition: .5s;
+		 -moz-transition: .5s;
+			 -o-transition: .5s;
+					transition: .5s;
 }
 /* button \ container  */
 .button-toggle:before {
-  -webkit-transform: translateY(-50%) rotate(45deg) scale(0);
-      -ms-transform: translateY(-50%) rotate(45deg) scale(0);
+	-webkit-transform: translateY(-50%) rotate(45deg) scale(0);
+			-ms-transform: translateY(-50%) rotate(45deg) scale(0);
+			 -o-transform: translateY(-50%) rotate(45deg) scale(0);
 					transform: translateY(-50%) rotate(45deg) scale(0);
 }
 /* button / container  */
 .button-toggle:after {
-  -webkit-transform: translateY(-50%) rotate(-45deg) scale(0);
-      -ms-transform: translateY(-50%) rotate(-45deg) scale(0);
-          transform: translateY(-50%) rotate(-45deg) scale(0);
+	-webkit-transform: translateY(-50%) rotate(-45deg) scale(0);
+			-ms-transform: translateY(-50%) rotate(-45deg) scale(0);
+			 -o-transform: translateY(-50%) rotate(-45deg) scale(0);
+					transform: translateY(-50%) rotate(-45deg) scale(0);
 }
 
 /* Menu */
 .nav {
 	display: block;
-  margin: 25px 0;
-  pointer-events: none;
-  -webkit-transition: 0.5s;
-	transition: 0.5s;
+	margin: 25px 0;
+	pointer-events: none;
+	-webkit-transition: .5s;
+		 -moz-transition: .5s;
+			 -o-transition: .5s;
+					transition: .5s;
 }
 
 .nav-item {
-  position: relative;
+	position: relative;
 	display: block;
-	/* float: right; */
-	/* text-align: right; */
-  clear: both;
-  color: transparent;
-  font-size: 14px;
-  letter-spacing: -6.2px;
-  height: 7px;
-  line-height: 7px;
-  text-transform: uppercase;
-  white-space: nowrap;
-  -webkit-transform: scaleY(0.2);
-      -ms-transform: scaleY(0.2);
-          transform: scaleY(0.2);
-  -webkit-transition: 0.5s, opacity 1s;
-  transition: 0.5s, opacity 1s;
-}
-
-.nav-item:nth-child(1) {
-  -webkit-transition-delay: 0s;
-          transition-delay: 0s;
-}
-
+	clear: both;
+	color: transparent;
+	font-size: 14px;
+	letter-spacing: -6.2px;
+	height: 7px;
+	line-height: 7px;
+	text-transform: uppercase;
+	white-space: nowrap;
+	-webkit-transform: scaleY(.2);
+			-ms-transform: scaleY(.2);
+			 -o-transform: scaleY(.2);
+					transform: scaleY(.2);
+	-webkit-transition: .5s, opacity .1s;
+		 -moz-transition: .5s, opacity .1s;
+			 -o-transition: .5s, opacity .1s;
+					transition: .5s, opacity .1s;
+}
+
+.nav-item:nth-child(1),
 .nav-item:nth-child(1):before {
-  -webkit-transition-delay: 0s;
-          transition-delay: 0s;
-}
-
-.nav-item:nth-child(2) {
-  -webkit-transition-delay: 0.05s;
-          transition-delay: 0.05s;
+	-webkit-transition-delay: 0s;
+		 -moz-transition-delay: 0s;
+			 -o-transition-delay: 0s;
+					transition-delay: 0s;
 }
 
+.nav-item:nth-child(2),
 .nav-item:nth-child(2):before {
-  -webkit-transition-delay: 0.05s;
-          transition-delay: 0.05s;
-}
-
-.nav-item:nth-child(3) {
-  -webkit-transition-delay: 0.1s;
-          transition-delay: 0.1s;
+	-webkit-transition-delay: .05s;
+		 -moz-transition-delay: .05s;
+			 -o-transition-delay: .05s;
+					transition-delay: .05s;
 }
 
+.nav-item:nth-child(3),
 .nav-item:nth-child(3):before {
-  -webkit-transition-delay: 0.1s;
-          transition-delay: 0.1s;
-}
-
-.nav-item:nth-child(4) {
-  -webkit-transition-delay: 0.15s;
-          transition-delay: 0.15s;
+	-webkit-transition-delay: .1s;
+		 -moz-transition-delay: .1s;
+			 -o-transition-delay: .1s;
+					transition-delay: .1s;
 }
 
+.nav-item:nth-child(4),
 .nav-item:nth-child(4):before {
-  -webkit-transition-delay: 0.15s;
-          transition-delay: 0.15s;
+	-webkit-transition-delay: .15s;
+		 -moz-transition-delay: .15s;
+			 -o-transition-delay: .15s;
+					transition-delay: .15s;
 }
 
 .nav-item:nth-child(1) {
-  letter-spacing: -8px;
+	letter-spacing: -8px;
 }
 
 .nav-item:nth-child(2) {
-  letter-spacing: -7px;
+	letter-spacing: -7px;
 }
 
 .nav-item:nth-child(n + 4) {
-  letter-spacing: -8px;
-  margin-top: -7px;
-  opacity: 0;
+	letter-spacing: -8px;
+	margin-top: -7px;
+	opacity: 0;
 }
 
 .nav-item:before {
-  position: absolute;
-  content: '';
-  top: 50%;
-	/* left: 0; */
-  width: 100%;
-  height: 2px;
-  background-color: black;
-  -webkit-transform: translateY(-50%) scaleY(5);
-      -ms-transform: translateY(-50%) scaleY(5);
-          transform: translateY(-50%) scaleY(5);
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
+	position: absolute;
+	content: '';
+	top: 50%;
+	width: 100%;
+	height: 2px;
+	background-color: black;
+	-webkit-transform: translateY(-50%) scaleY(5);
+			-ms-transform: translateY(-50%) scaleY(5);
+			 -o-transform: translateY(-50%) scaleY(5);
+					transform: translateY(-50%) scaleY(5);
+	-webkit-transition: .5s;
+		 -moz-transition: .5s;
+			 -o-transition: .5s;
+					transition: .5s;
 }
 /* .main-layout {
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
+	-webkit-transition: .5s;
+		 -moz-transition: .5s;
+			 -o-transition: .5s;
+					transition: .5s;
 }
 
 .main-layout:before {
-  position: absolute;
-  content: '';
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  z-index: 2;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
+	position: absolute;
+	content: '';
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: transparent;
+	z-index: 2;
+	-webkit-transition: .5s;
+		 -moz-transition: .5s;
+			 -o-transition: .5s;
+					transition: .5s;
 }
 #toggle:checked ~ .main-layout {
-  padding-top: 30px;
+	padding-top: 30px;
 }
 
 #toggle:checked ~ .main-layout:before {
-  background-color: rgba(0, 0, 0, 0.3);
-} */
+	background-color: rgba(0, 0, 0, .3);
+} */

static/css/image-modal.css

@@ -7,14 +7,16 @@
 	border: 0;
 	padding: 0;
 }
-#dialog-image-modal::backdrop {
+#dialog-image-modal::backdrop,
+#dialog-image-modal::-webkit-backdrop {
 	background: #ffffff00;
 }
 #modal-image-container {
 	margin-top: var(--header-space);
 }
 #modal-image {
-	object-fit: cover;
+	-o-object-fit: cover;
+		 object-fit: cover;
 	height: calc(100vh - var(--header-space) - var(--body-margin) - var(--tile-margin));
 }
 #img-prev {
@@ -29,11 +31,23 @@
 #close-modal {
 	position: absolute;
 	align-self: flex-end;
-	transform: translate(50%, -50%);
 	width: calc(2.5 * var(--tile-margin));
-	transition: .3s ease;
+	-webkit-transform: translate(50%, -50%);
+			-ms-transform: translate(50%, -50%);
+			 -o-transform: translate(50%, -50%);
+					transform: translate(50%, -50%);
+	-webkit-transition: .3s ease;
+		 -moz-transition: .3s ease;
+			 -o-transition: .3s ease;
+					transition: .3s ease;
 }
 #close-modal:hover {
-	transform: translate(50%, -50%) rotate(90deg);
-	transition: .3s ease;
-}
+	-webkit-transform: translate(50%, -50%) rotate(90deg);
+			-ms-transform: translate(50%, -50%) rotate(90deg);
+			 -o-transform: translate(50%, -50%) rotate(90deg);
+					transform: translate(50%, -50%) rotate(90deg);
+	-webkit-transition: .3s ease;
+		 -moz-transition: .3s ease;
+			 -o-transition: .3s ease;
+					transition: .3s ease;
+}

static/css/main.css

@@ -6,8 +6,6 @@
 	--body-margin: 3.6vw;
 	--theme-color: #46c8a5;
 	--bgcolor: white;
-	/* --tile-margin: 12.75px; */
-	/* --body-margin: 66px; */
 	--header-inner-space: calc(8 * var(--tile-margin));
 	--header-space: calc(10 * var(--tile-margin) - 10px + var(--tile-margin));
 }
@@ -32,12 +30,10 @@
 }
 /* Font Size */
 :root {
-	/* font-size: 180%; */
 	font-size: 1.2vw;
 	font-weight: 100;
 }
 h1 {
-	/* font-size: 97%; */
 	font-size: 1.18vw;
 }
 /* @media (max-width: 1500px) {
@@ -71,9 +67,6 @@ h1 {
 	width: 10vw;
 	margin: 0 .7vw -.9vw .5vw;
 }
-/* @media (max-width: 460px) {
-	#logo { width: 130px; }
-} */
 /* Typographies */
 @font-face {
 	font-family: 'akrobat-regular';
@@ -86,7 +79,6 @@ h1 {
 /* Rules */
 :root {
 	font-family: 'akrobat-regular';
-	/* letter-spacing: 1.5px; */
 	letter-spacing: .07rem;
 }
 .sec-div {
@@ -104,7 +96,6 @@ a.en {
 h1 {
 	font-size: 1.1em;
 	text-align: center;
-	/* letter-spacing: 1px; */
 	letter-spacing: .05rem;
 	font-weight: 100;
 	font-family: 'akrobat-bold';
@@ -119,8 +110,6 @@ h2 {
 	text-transform: uppercase;
 }
 a.selected, a[href]:hover {
-	/* cursor: default; */
-	/* display: inline-block; */
 	color: var(--theme-color);
 }
 div {
@@ -129,10 +118,6 @@ div {
 body {
 	width: calc(100% - 2*var(--body-margin));
 	margin: 0 var(--body-margin);
-	/* width: 94%;
-	margin: 0 3%; */
-	/* width: calc(100% - 2*var(--body-margin)); */
-	/* margin: 0 var(--body-margin); */
 	position: absolute;
 	background-color: var(--bgcolor);
 }
@@ -142,32 +127,15 @@ body {
 #wide-header {
 	width: calc(100% - 2*(var(--body-margin)));
 	margin: 0;
-	/* width: calc(100% - 2*(var(--body-margin) + var(--tile-margin))); */
-	/* margin: 0 var(--tile-margin); */
-	/* width: 100%; */
-	/* margin: 0 calc(var(--body-margin) + var(--tile-margin)); */
-
-
 	display: flex;
 	flex-direction: column;
-	/* margin: 0 0 0 var(--tile-margin); */
 	justify-content: flex-end;
 	position: fixed;
-	/* width: calc(100% - 2*var(--body-margin) - 2*var(--tile-margin)); */
 	background-color: var(--bgcolor);
-	/* padding-bottom: calc(2*var(--tile-margin)); */
-	/* border-bottom: calc(2*var(--tile-margin)); */
 	height: var(--header-space);
 	position: fixed;
 	z-index: 1;
 }
-/* header::after {
-	content: " ";
-	background-color: black;
-	height: var(--header-line-width);
-	width: 100%;
-	align-self: flex-start;
-} */
 .header-box {
 	padding-bottom: calc(2 * var(--tile-margin));
 	overflow: hidden;
@@ -226,14 +194,7 @@ body {
 	flex-wrap: wrap;
 	justify-content: flex-end;
 	align-items: center;
-	/* margin-bottom: 8px; */
 }
-/* #wide-header > a, #wide-header > h1 {
-	margin: 0 3px;
-} */
-/* .header-subtitle > a {
-	margin: 0 5px;
-} */
 a.first {
 	margin-left: var(--tile-margin);
 }
@@ -246,10 +207,7 @@ main {
 	flex-wrap: wrap;
 	justify-content: flex-start;
 	margin-top: calc(var(--header-space) - var(--tile-margin));
-	/* margin: 0; */
-	/* margin-top: calc(var(--header-space) + var(--body-margin)); */
 	position: static;
-	/* position: absolute; */
 }
 figure {
 	position: relative;
@@ -273,20 +231,27 @@ figure figcaption {
 	background-color: var(--bgcolor);
 	bottom: 0;
 	width: calc(100% - 2 * var(--caption-hmargin));
-  -webkit-transform: translateY(100%);
-      -ms-transform: translateY(100%);
+	-webkit-transform: translateY(100%);
+			-ms-transform: translateY(100%);
+			 -o-transform: translateY(100%);
 					transform: translateY(100%);
-	transition: .3s ease;	
+	-webkit-transition: .3s ease;
+		 -moz-transition: .3s ease;
+			 -o-transition: .3s ease;
+					transition: .3s ease;
 }
 figure:hover figcaption {
-  -webkit-transform: translateY(0);
-      -ms-transform: translateY(0);
-          transform: translateY(0);
-	transition: .3s ease;
+	-webkit-transform: translateY(0);
+			-ms-transform: translateY(0);
+			 -o-transform: translateY(0);
+					transform: translateY(0);
+	-webkit-transition: .3s ease;
+		 -moz-transition: .3s ease;
+			 -o-transition: .3s ease;
+					transition: .3s ease;
 }
 figcaption h1 {
 	margin: 0;
-	/* font-family: 'akrobat-regular'; */
 }
 .caption {
 	display: flex;
@@ -302,7 +267,7 @@ footer {
 	font-weight: 900;
 }
 footer::after {
-	content: " ";
+	content: "";
 	height: var(--tile-margin);
 	bottom: 0;
 }