Merge branch 'master' of https://github.com/Linasa64/smart24

RedHBlack · RedHBlack · commit dbdd411ce629 · 2024-05-03T12:10:58.000+02:00
diff --git a/glaciers_vulgarisation/api/static/styles/content-elements.css b/glaciers_vulgarisation/api/static/styles/content-elements.css
@@ -86,18 +86,19 @@ body {
   }
 }
 
-@media only screen and (max-width: 576px) {
-  .container {
-    margin: 4%;
-  }
-}
-
-
 
 .anim-slide {
   width: 100%;
 }
 
+.illustration-container div {
+  transition: transform 2s;
+}
+.scale3d:hover {
+  transform: scale3d(1.5, 1.5, 1.5); 
+  /* translate3d x y z */
+}
+
 .slide-wrapper {
   /* border: 2px dashed rgba(114, 186, 94, 0.35); */
   height: 1200px;
diff --git a/glaciers_vulgarisation/api/static/styles/font.css b/glaciers_vulgarisation/api/static/styles/font.css
@@ -1,5 +1,3 @@
-
-
 h1 {
 font-size: 64px;
 margin-top: 32px;
@@ -20,14 +18,6 @@ margin-bottom: 10px;
 font-weight: 650;
 }
 
-.illustration-container h3 {
-margin-bottom: -10px;
-}
-
-.slide-container h3 {
-margin-bottom: -10px;
-}
-
 h4 {
 font-size: 16px;
 color: #160f29;
diff --git a/glaciers_vulgarisation/api/static/styles/global-elements.css b/glaciers_vulgarisation/api/static/styles/global-elements.css
@@ -26,7 +26,17 @@ header {
       min-height: 100vh;
 }
 
+@media only screen and (max-width: 576px) {
+      .container {
+            margin: 4%;
+      }
+}
+
 nav {
       white-space: nowrap;
       background: #f6e7cf;
+}
+
+@media only screen and (max-width: 800px) {
+      nav {white-space: normal;}
 }
diff --git a/glaciers_vulgarisation/api/static/styles/menu-elements.css b/glaciers_vulgarisation/api/static/styles/menu-elements.css
@@ -5,9 +5,7 @@ nav ul {
       padding: 0;
 }
 
-@media only screen and (max-width: 800px) {
-      nav {white-space: normal;}
-}
+
 /* Only stick if you can fit */
 @media (min-height: 300px) {
       nav ul {
diff --git a/glaciers_vulgarisation/api/templates/index.html b/glaciers_vulgarisation/api/templates/index.html
@@ -7,10 +7,10 @@
   <title>Vulgarisation sur la fonte des glaciers</title>
 
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
-  <link rel="stylesheet" href="{{ url_for('static', filename='styles/menu.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='styles/content-elements.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='styles/menu-elements.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='styles/font.css') }}">
-  <link rel="stylesheet" href="{{ url_for('static', filename='styles/global.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='styles/global-elements.css') }}">
 </head>
 
 <body>
@@ -99,7 +99,9 @@ <h4>4°C</h4>
         <p>Mais avant d’aller plus loin pourquoi ne pas profiter d’une petite mise en jambe afin de découvrir les
           différents glaciers du monde et quelques informations qui les composent ?</p>
         <div class="illustration-container">
-          <img src="{{ url_for('static', filename='images/wgms_rgi_map.png') }}" alt="Illustration">
+          <div class="scale3d">
+            <img src="{{ url_for('static', filename='images/wgms_rgi_map.png') }}" alt="Illustration">
+          </div>
           <legend>add a legend</legend>
         </div>
       </section>
@@ -112,7 +114,7 @@ <h2>Le recul des glaciers</h2>
         <p style="width: 50%;">
           Si l’on considère les années passées, il est juste de remarquer que le phénomène se veut de plus en plus présent. Un des indicateurs les plus importants lorsque l’on fait ce type d’affirmation est celui de la balance massique*. Jusqu’à aujourd’hui les quantités impliquées sont décroissantes, cela peut s’expliquer par une quantité accumulé moindre ou une quantité perdue de plus en plus importante. Plus tôt, je vous parlais du futur, venez-avec moi découvrir le futur d’un glacier alpin.
         </p>
-        </div>
+        <div class="illustration-container">
           {% include 'glass.html' %}
           <legend>add a legend</legend>
         </div>
