Update

Server/app/svelte/public/css/common.css

@@ -503,30 +503,30 @@ html {
 
 @media only screen and (max-width: 660px) {
     html {
-        font-size: 14px;
+        font-size: 15px;
     }
 }
 
 @media only screen and (max-width: 570px) {
     html {
-        font-size: 13px;
+        font-size: 14.5px;
     }
 }
-/*
+
 @media only screen and (max-width: 470px) {
     html {
-        font-size: 11px;
+        font-size: 14px;
     }
 }
 
 @media only screen and (max-width: 400px) {
     html {
-        font-size: 10px;
+        font-size: 13.5px;
     }
 }
 
 @media only screen and (max-width: 360px) {
     html {
-        font-size: 9px;
+        font-size: 13px;
     }
-}*/
+}

Server/app/svelte/src/affiliates-component.svelte

@@ -35,17 +35,17 @@
         <h4>Online</h4>
         {#each affiliates as affiliate}
             <div class="location-info">
-                <div>
+                <div class="img-general-info">
-                    <div>
-                        <p><b>Name: </b>{affiliate.name}</p>
-                        <p><b>Type: </b>{affiliate.type}</p>
-                        <p><b>Link: </b><a href={affiliate.link} target=;_blank; rel=noreferrer>{affiliate.link}</a></p>
-                    </div>
                     <picture>
                         <source srcset={"/img/affiliates/"+affiliate.logo+".webp"}>
                         <source srcset={"/img/affiliates/"+affiliate.logo+".png"}>
                         <img class="affiliate-logo" alt="logo">
                     </picture>
+                    <div>
+                        <p><b>Name: </b>{affiliate.name}</p>
+                        <p><b>Type: </b>{affiliate.type}</p>
+                        <p><b>Link: </b><a href={affiliate.link} target=;_blank; rel=noreferrer>{affiliate.link}</a></p>
+                    </div>
                 </div>
                 <p><b>Description: </b>{affiliate.description}</p>
             </div>
@@ -70,16 +70,16 @@
         margin-top: 8rem;
     }
 
-    .location-info>:first-child {
+    .img-general-info {
         display: flex;
         align-content: center;
         width: 100%;
-        justify-content: space-between;
+        gap: 1.5rem;
-        gap: 3rem;
         align-items: center;
+        margin-bottom: 1rem;
     }
 
-    .location-info>:first-child>:first-child {
+    .img-general-info>:nth-child(2) {
         flex:none;
     }
 
@@ -146,4 +146,24 @@
         text-align: justify;
     }
 
+    @media only screen and (max-width: 500px) {
+        .img-general-info {
+            display: flex;
+            flex-direction: column;
+            align-content: left;
+            width: 100%;
+            gap: 1.5rem;
+            align-items: left;
+            margin-bottom: 0rem;
+        }
+
+        .img-general-info>:nth-child(1) {
+            width: max-content;
+        }
+
+        .img-general-info>:nth-child(2) {
+            width: 100%;
+        }
+    }
+
 </style>

Server/app/svelte/src/cooperatives-component.svelte

@@ -31,7 +31,7 @@
         <h4>Europe</h4>
         {#each coops as coop}
             <div class="location-info">
-                <div>
+                <div class="img-general-info">
                     <div>
                         <p><b>Name: </b>{coop.name}</p>
                         <p><b>Location: </b>{coop.location[0]}</p>
@@ -69,7 +69,7 @@
         margin-top: 8rem;
     }
 
-    .location-info>:first-child {
+    .img-general-info {
         display: flex;
         align-content: center;
         width: 100%;
@@ -78,7 +78,7 @@
         align-items: center;
     }
 
-    .location-info>:first-child>:first-child {
+    .img-general-info>:first-child {
         flex:none;
     }
 
@@ -144,4 +144,24 @@
         text-align: justify;
     }
 
+    @media only screen and (max-width: 600px) {
+        .img-general-info {
+            display: flex;
+            flex-direction: column-reverse;
+            align-content: left;
+            width: 100%;
+            gap: 1rem;
+            align-items: left;
+            margin-bottom: 0rem;
+        }
+
+        .img-general-info>:nth-child(2) {
+            width: max-content;
+        }
+
+        .img-general-info>:nth-child(1) {
+            width: 100%;
+        }
+    }
+
 </style>

Server/public/css/common.css

@@ -503,30 +503,30 @@ html {
 
 @media only screen and (max-width: 660px) {
     html {
-        font-size: 14px;
+        font-size: 15px;
     }
 }
 
 @media only screen and (max-width: 570px) {
     html {
-        font-size: 13px;
+        font-size: 14.5px;
     }
 }
-/*
+
 @media only screen and (max-width: 470px) {
     html {
-        font-size: 11px;
+        font-size: 14px;
     }
 }
 
 @media only screen and (max-width: 400px) {
     html {
-        font-size: 10px;
+        font-size: 13.5px;
     }
 }
 
 @media only screen and (max-width: 360px) {
     html {
-        font-size: 9px;
+        font-size: 13px;
     }
-}*/
+}

Server/public/js/components/affiliates-component.js

@@ -1 +1 @@
-import{S as t,i as e,a as i,b as n,s as o,e as a,c as s,n as r,d as l,f as m,g as c,h,j as d,o as g,t as f}from"./index-95aedb1a.js";import"../../../../../../../../../js/components/map-component.js";function p(t,e,i){const n=t.slice();return n[1]=e[i],n}function u(t){let e,i,o,m,d,g,p,u,b,x,w,v,y,k,C,z,j,D,T,A,E,F,G,L,O,R,S,W=t[1].name+"",_=t[1].type+"",q=t[1].link+"",H=t[1].description+"";return{c(){e=a("div"),i=a("div"),o=a("div"),m=a("p"),d=a("b"),d.textContent="Name: ",g=f(W),p=s(),u=a("p"),b=a("b"),b.textContent="Type: ",x=f(_),w=s(),v=a("p"),y=a("b"),y.textContent="Link: ",k=a("a"),C=f(q),z=s(),j=a("picture"),D=a("source"),T=s(),A=a("source"),E=s(),F=a("img"),G=s(),L=a("p"),O=a("b"),O.textContent="Description: ",R=f(H),S=s(),l(k,"href",t[1].link),l(k,"target",";_blank;"),l(k,"rel","noreferrer"),l(D,"srcset","/img/affiliates/"+t[1].logo+".webp"),l(A,"srcset","/img/affiliates/"+t[1].logo+".png"),l(F,"class","affiliate-logo"),l(F,"alt","logo"),l(e,"class","location-info")},m(t,a){n(t,e,a),c(e,i),c(i,o),c(o,m),c(m,d),c(m,g),c(o,p),c(o,u),c(u,b),c(u,x),c(o,w),c(o,v),c(v,y),c(v,k),c(k,C),c(i,z),c(i,j),c(j,D),c(j,T),c(j,A),c(j,E),c(j,F),c(e,G),c(e,L),c(L,O),c(L,R),c(e,S)},p:r,d(t){t&&h(e)}}}function b(t){let e,i,o,g,f,b,x,w,v,y,k,C,z,j=t[0],D=[];for(let e=0;e<j.length;e+=1)D[e]=u(p(t,j,e));return{c(){e=a("div"),i=a("div"),o=a("h1"),o.textContent="Affiliates",g=s(),f=a("img"),x=s(),w=a("p"),w.textContent="We affiliate with organizations and initiatives that align with our mission. Together, we are a united force driven by a shared worldview where there is no place for authoritarian exploitative systems, but where systems promoting equity and democracy thrive.",v=s(),y=a("h3"),y.textContent="Our affiliates",k=s(),C=a("h4"),C.textContent="Online",z=s();for(let t=0;t<D.length;t+=1)D[t].c();this.c=r,l(f,"id","hands-img"),m(f.src,b="/img/common/handshake.svg")||l(f,"src","/img/common/handshake.svg"),l(f,"alt","hands"),l(i,"id","text-container"),l(e,"id","container")},m(t,a){n(t,e,a),c(e,i),c(i,o),c(i,g),c(i,f),c(i,x),c(i,w),c(i,v),c(i,y),c(i,k),c(i,C),c(i,z);for(let t=0;t<D.length;t+=1)D[t].m(i,null)},p(t,[e]){if(1&e){let n;for(j=t[0],n=0;n<j.length;n+=1){const o=p(t,j,n);D[n]?D[n].p(o,e):(D[n]=u(o),D[n].c(),D[n].m(i,null))}for(;n<D.length;n+=1)D[n].d(1);D.length=j.length}},i:r,o:r,d(t){t&&h(e),d(D,t)}}}function x(t){return g((()=>{})),[[{name:"Gaia's Fall",type:"a place to discuss and organize",link:"https://discord.libsoc.org",description:"Gaia's Fall is a server that promotes Solarpunk ideals, environmentalism, anarchism, and anti-capitalism. We encourage civil debates, discussions of theories and possibilities, and the creation of communities focused on shaping a better world. It is our official Discord server where we organize and work together.",logo:"gaias_fall"}]]}class w extends t{constructor(t){super(),this.shadowRoot.innerHTML="<style>@import '/css/common.css';#hands-img{position:absolute;width:10.5rem;left:50%;transform:translate(-50%);z-index:0;opacity:0.2}#text-container>:nth-child(3){margin-top:8rem}.location-info>:first-child{display:flex;align-content:center;width:100%;justify-content:space-between;gap:3rem;align-items:center}.location-info>:first-child>:first-child{flex:none}.affiliate-logo{position:relative;right:0;max-height:6rem;max-width:100%;border-radius:1rem}h4{margin-bottom:2rem}.location-info{position:relative;margin-bottom:2rem}.location-info p{margin-bottom:0}a{font-size:1.15rem;color:#DD1C1A}#text-container{max-width:calc(100vw - 4rem);margin:auto}h1{margin-bottom:1rem;font-size:2.5rem;text-align:center}h3{margin-bottom:2rem}#container{margin:auto;max-width:1200px;margin-top:1rem;margin-bottom:4rem}#container>div>p{margin-bottom:1rem}#container p{font-size:1.15rem;text-align:justify}</style>",e(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},x,b,o,{},null),t&&t.target&&n(t.target,this,t.anchor)}}customElements.define("affiliates-component",w);export{w as default};
+import{S as t,i as e,a as i,b as n,s as o,e as a,c as r,n as s,d as l,f as m,g as c,h as g,j as d,o as h,t as f}from"./index-95aedb1a.js";import"../../../../../../../../../js/components/map-component.js";function p(t,e,i){const n=t.slice();return n[1]=e[i],n}function u(t){let e,i,o,m,d,h,p,u,x,b,w,v,y,k,C,z,j,D,T,A,E,F,G,L,O,R,S,W=t[1].name+"",_=t[1].type+"",q=t[1].link+"",H=t[1].description+"";return{c(){e=a("div"),i=a("div"),o=a("picture"),m=a("source"),d=r(),h=a("source"),p=r(),u=a("img"),x=r(),b=a("div"),w=a("p"),v=a("b"),v.textContent="Name: ",y=f(W),k=r(),C=a("p"),z=a("b"),z.textContent="Type: ",j=f(_),D=r(),T=a("p"),A=a("b"),A.textContent="Link: ",E=a("a"),F=f(q),G=r(),L=a("p"),O=a("b"),O.textContent="Description: ",R=f(H),S=r(),l(m,"srcset","/img/affiliates/"+t[1].logo+".webp"),l(h,"srcset","/img/affiliates/"+t[1].logo+".png"),l(u,"class","affiliate-logo"),l(u,"alt","logo"),l(E,"href",t[1].link),l(E,"target",";_blank;"),l(E,"rel","noreferrer"),l(i,"class","img-general-info"),l(e,"class","location-info")},m(t,a){n(t,e,a),c(e,i),c(i,o),c(o,m),c(o,d),c(o,h),c(o,p),c(o,u),c(i,x),c(i,b),c(b,w),c(w,v),c(w,y),c(b,k),c(b,C),c(C,z),c(C,j),c(b,D),c(b,T),c(T,A),c(T,E),c(E,F),c(e,G),c(e,L),c(L,O),c(L,R),c(e,S)},p:s,d(t){t&&g(e)}}}function x(t){let e,i,o,h,f,x,b,w,v,y,k,C,z,j=t[0],D=[];for(let e=0;e<j.length;e+=1)D[e]=u(p(t,j,e));return{c(){e=a("div"),i=a("div"),o=a("h1"),o.textContent="Affiliates",h=r(),f=a("img"),b=r(),w=a("p"),w.textContent="We affiliate with organizations and initiatives that align with our mission. Together, we are a united force driven by a shared worldview where there is no place for authoritarian exploitative systems, but where systems promoting equity and democracy thrive.",v=r(),y=a("h3"),y.textContent="Our affiliates",k=r(),C=a("h4"),C.textContent="Online",z=r();for(let t=0;t<D.length;t+=1)D[t].c();this.c=s,l(f,"id","hands-img"),m(f.src,x="/img/common/handshake.svg")||l(f,"src","/img/common/handshake.svg"),l(f,"alt","hands"),l(i,"id","text-container"),l(e,"id","container")},m(t,a){n(t,e,a),c(e,i),c(i,o),c(i,h),c(i,f),c(i,b),c(i,w),c(i,v),c(i,y),c(i,k),c(i,C),c(i,z);for(let t=0;t<D.length;t+=1)D[t].m(i,null)},p(t,[e]){if(1&e){let n;for(j=t[0],n=0;n<j.length;n+=1){const o=p(t,j,n);D[n]?D[n].p(o,e):(D[n]=u(o),D[n].c(),D[n].m(i,null))}for(;n<D.length;n+=1)D[n].d(1);D.length=j.length}},i:s,o:s,d(t){t&&g(e),d(D,t)}}}function b(t){return h((()=>{})),[[{name:"Gaia's Fall",type:"a place to discuss and organize",link:"https://discord.libsoc.org",description:"Gaia's Fall is a server that promotes Solarpunk ideals, environmentalism, anarchism, and anti-capitalism. We encourage civil debates, discussions of theories and possibilities, and the creation of communities focused on shaping a better world. It is our official Discord server where we organize and work together.",logo:"gaias_fall"}]]}class w extends t{constructor(t){super(),this.shadowRoot.innerHTML="<style>@import '/css/common.css';#hands-img{position:absolute;width:10.5rem;left:50%;transform:translate(-50%);z-index:0;opacity:0.2}#text-container>:nth-child(3){margin-top:8rem}.img-general-info{display:flex;align-content:center;width:100%;gap:1.5rem;align-items:center;margin-bottom:1rem}.img-general-info>:nth-child(2){flex:none}.affiliate-logo{position:relative;right:0;max-height:6rem;max-width:100%;border-radius:1rem}h4{margin-bottom:2rem}.location-info{position:relative;margin-bottom:2rem}.location-info p{margin-bottom:0}a{font-size:1.15rem;color:#DD1C1A}#text-container{max-width:calc(100vw - 4rem);margin:auto}h1{margin-bottom:1rem;font-size:2.5rem;text-align:center}h3{margin-bottom:2rem}#container{margin:auto;max-width:1200px;margin-top:1rem;margin-bottom:4rem}#container>div>p{margin-bottom:1rem}#container p{font-size:1.15rem;text-align:justify}@media only screen and (max-width: 500px){.img-general-info{display:flex;flex-direction:column;align-content:left;width:100%;gap:1.5rem;align-items:left;margin-bottom:0rem}.img-general-info>:nth-child(1){width:max-content}.img-general-info>:nth-child(2){width:100%}}</style>",e(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},b,x,o,{},null),t&&t.target&&n(t.target,this,t.anchor)}}customElements.define("affiliates-component",w);export{w as default};