Add styles for small screens

web/static/numerus.css

@@ -10322,9 +10322,8 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
   }
 
   .web nav ul {
-      margin: 0;
+    margin: 0;
-      justify-content: space-around;
+    justify-content: space-around;
-    }
   }
 
   .web nav ul li {
@@ -10388,7 +10387,7 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
     padding: 5rem 0 0 0;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
 }
 
 .web nav ul {
@@ -10494,7 +10493,6 @@ grid-row-gap: 0px;
   justify-content: start;
   padding: 1rem;
   border-bottom: 1px solid var(--numerus--color--black);
->>>>>>> Stashed changes
 }
 .mondrian3 {
   grid-area: 2 / 1 / 3 / 2;
@@ -10631,7 +10629,18 @@ margin: 5rem 0;
   width: 100%;
   font-size: calc(16px + 1vw);
   color: var(--numerus--color--black);
+  display: flex;
+  gap: 2.5rem;
 }
+
+.download a {
+  text-decoration: none;
+}
+
+.download svg {
+  width: 30px;
+}
+
 .deco_2 {
   grid-area: 4 / 5 / 5 / 6;
   background: white;
@@ -10673,3 +10682,47 @@ margin: 5rem 0;
 .price_cta p {
   margin: 2rem 0;
 }
+
+
+/* home mobile */
+
+@media screen and (max-width: 600px) {
+
+  .mondrian {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mondrian-element.mondrian1, .mondrian-element.mondrian3, .mondrian-element.mondrian5, .mondrian-element.mondrian6, .mondrian-element.mondrian7, .mondrian-element.mondrian8, .mondrian-element.mondrian9, .mondrian-element.mondrian11, .mondrian-element.mondrian12, .mondrian-element.mondrian13, .mondrian-element.mondrian15 {
+    display: none;
+  }
+
+  .description {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  margin-top: 60px;
+  }
+  .open {
+  display: flex;
+  flex-direction: column;
+  }
+
+  .price {
+	display: flex;
+	flex-direction: column;
+	gap: 30px;
+	margin: 60px 0;
+	border-top: 1px solid;
+	padding-top: 30px;
+  }
+
+  footer {
+  flex-direction: column;
+  gap: 30px;
+  }
+
+  footer nav ul {
+	padding-top: 30px !important;
+	}
+}

web/template/home.gohtml

@@ -77,7 +77,7 @@
 			<small>**_ sempre que respectis els mateixos valors i ho comparteixis amb la mateixa llicència.</small></p>
 		</div>
 		<div class="download">
-			<a href="https://dev.tandem.ws/tandem/numerus" target="_blank"><button type="submit">DESCARREGA</button></a>
+			<a href="https://dev.tandem.ws/tandem/numerus" target="_blank"><button type="submit">DESCARREGA <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 19H21V21H3V19ZM13 13.1716L19.0711 7.1005L20.4853 8.51472L12 17L3.51472 8.51472L4.92893 7.1005L11 13.1716V2H13V13.1716Z"></path></svg></button></a>
 		</div>
 		<div class="deco_2"> </div>
 	</div>

web/template/web.gohtml

@@ -22,7 +22,7 @@
 {{- template "content" . }}
 
 <footer>
-    <p><small>ho hem fet tant bé com hem sabut en Jordi Fita i l’Oriol Carbonell</small></p>
+    <p><small>ho hem fet tant bé com hem sabut en Jordi Fita i l’Oriol Carbonell <a href="https://tandem.blog"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 519 180" style="enable-background:new 0 0 519 180; width:100px; " xml:space="preserve"> <style type="text/css"> .st0{fill:#282828;}</style> <g> <path class="st0" d="M317,76.1h190.1l2.4-11.5l-189.2-0.3C318.2,71.6,319.3,68.4,317,76.1z"></path> <path class="st0" d="M474.3,149.4c-1.9,0-2.4-1.7-2.4-3.6c0-8.3,7.9-32.3,11.3-48.8l-18.6-10.9L424,137c0,0,13.5-38.7,14.5-41.1 l-17.1-10.3l-41,51.5c0,0,13.7-38.7,14.7-41.1l-17.3-10.3c0,0-3.1,12.6-6.7,27.5l0,0c-6.4,12.4-19.2,35.9-33.6,35.9 c-7.3,0-11.6-5.4-12.8-11.8c17.3-0.8,37.2-22.5,37.2-36.6c0-9.4-7.9-15.4-16.3-15.4c-22.3,0-36.1,26.2-37.5,46.3 c-5.8,10.6-11.5,18.7-15.1,18.7c-2.1,0-2.4-1.9-2.4-3.8c0-1.5,0.2-3.2,0.4-3.9c0-5.6,25.5-105.8,28.7-120.2l-16.5-9.8 c0,0-10.1,45.7-18.4,85.5c-1.3-9-8.5-15-17.1-15c-21.5,0-35.6,22.6-39.3,42.8c-6.6,12.9-13.5,23.9-17.7,23.9 c-2.1,0-2.4-1.9-2.4-3.8c0-8.3,7.7-31.9,11.3-48.8l-18.8-11.5l-41,51.1c0,0,13.7-38.9,14.7-41.3l-17.3-10.3c0,0-4.1,16.8-8.3,34.3 c-7.4,15.2-15.9,29.9-20.6,29.9c-2.1,0-2.4-1.7-2.4-3.6c0-7.9,8.5-35.1,12-51.3l-15.8-9.2c0,0-1.1,4.5-3,11.3 c-3.2-6.6-8.8-10-15.8-10c-19.3,0-34,21.3-36.7,42.1c-6.2,11.8-12.6,21.6-16.5,21.6c-1.9,0-2.3-1.7-2.3-3.4s0.4-3.4,0.4-3.9 c0.6-3.4,8.3-41.9,14.1-66.9h215.9c2.1-7.6,1.1-4.9,3.1-11.8L65.5,64.7c1.5-8.1,2.6-13,3.4-15.6l-15.2-9c0,0-2.4,9.2-5.6,22.4 l-34.8-1.1l-3.8,16h35.3c-6.6,26.1-13.9,66-13.9,75.2c2.1,9.6,10.7,12.8,16.7,12.8c5.6,0,12.6-8.6,19.5-20.1c0,0.1,0,0,0.1-0.2 c2.5,10,9,19.6,19.3,19.6c8.6,0,16-6.4,22-15c-0.2,0.9-0.2,1.7-0.2,2.4c2.3,9.4,11.1,13,17.3,13c4.6,0,10.3-6,16.1-14.5 c-0.2,0.9-0.3,1.6-0.3,2.5c0,3,1.5,5.3,3.9,7c3.9,3,9.2,4.9,11.6,5.1c1.1-0.2,41-58.8,41-58.8c-1.5,7.1-6.6,28.6-7.7,45.8 c2.3,9.6,11.3,13.1,17.7,13.1c5.7,0,13.1-9,20.3-20.8c2.5,11.7,10,22.9,22.2,22.9c9.8,0,17.8-8.1,24.4-18.4l-0.8,4.9 c2.3,10,9.4,12.4,16.2,12.4c5.5,0,12.6-8.3,19.7-19.4c3.4,10.1,11.3,17.9,22.4,17.9c13.4,0,23.7-9.9,31.7-21.6 c-0.6,2.6-1.1,5-1.6,7.2c-0.2,1.1-0.4,1.9-0.4,2.8c0,7.1,9.8,11.6,15.6,12.2c0.8-0.2,27.8-39.5,37.4-53.5 c-9.4,39.5-9.6,40.6-9.6,41.3c0,7.1,10,11.6,15.6,12.2c1.1-0.2,41-58.6,41-58.6c-1.5,7-6.6,28.4-7.7,45.7 c2.1,9.6,11.1,13.2,17.7,13.2c9.8,0,24.6-27.1,34.9-49L499,112C490.7,129.3,480.2,149.4,474.3,149.4z M91.5,148.2 c-5.4,0-10-5.6-10-13.7c0-10.7,9.2-39.3,21.4-39.3c7.9,0,9.6,8.5,9.6,15.8c0,5.6-0.9,10.5-0.9,10.5l1.3,1.3 C110.2,131.3,101.4,148.2,91.5,148.2z M254.1,149.1c-5.6,0-10.3-6-10.3-14.5c0-10.9,10.1-42.3,22.4-42.3c5.3,0,7,2.8,7,6.6 c0,6.2-4.7,14.7-4.7,14.7l9.8,4.7C273.7,128.6,264.9,149.1,254.1,149.1z M345.3,96.9c2.6,0,3.8,1.9,3.8,4.9 c-1.5,11.8-13.9,25.2-25,28C325,118.9,332.7,96.9,345.3,96.9z"></path> </g> </svg> </a></small></p>
     <nav>
         <ul>
             <li><a href="/legal">{{( pgettext "Legal Disclaimer" "title")}}</a></li>