Update
This commit is contained in:
a-ill
@@ -1,168 +0,0 @@
|
||||
<svelte:options tag="affiliates-component" />
|
||||
|
||||
<script>
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
//import { communities, addMarkersCommunities } from '/js/communities.js'
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
|
||||
// Main code
|
||||
|
||||
let affiliates = [
|
||||
{
|
||||
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"
|
||||
}
|
||||
]
|
||||
|
||||
onMount(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<div id="container">
|
||||
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
|
||||
<div id="text-container">
|
||||
<h1>Affiliates</h1>
|
||||
<img id="hands-img" src="/img/common/handshake.svg" alt="hands">
|
||||
<p>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.</p>
|
||||
<h3>Our affiliates</h3>
|
||||
<h4>Online</h4>
|
||||
{#each affiliates as affiliate}
|
||||
<div class="location-info">
|
||||
<div class="img-general-info">
|
||||
<picture>
|
||||
<source srcset={"/img/affiliates/"+affiliate.logo+".webp"}>
|
||||
<source srcset={"/img/affiliates/"+affiliate.logo+".jpg"}>
|
||||
<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>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
|
||||
#hands-img {
|
||||
position: absolute;
|
||||
width: 10.5rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
z-index: 0;
|
||||
opacity: 0.2;
|
||||
margin-top: -2rem;
|
||||
}
|
||||
|
||||
#text-container>:nth-child(3) {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: #DD1C1A;
|
||||
}
|
||||
|
||||
#map {
|
||||
--height: 30rem;
|
||||
--width: 100%;
|
||||
--margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#text-container {
|
||||
max-width: calc(100vw - 4rem);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#container {
|
||||
margin: auto;
|
||||
max-width: 1000px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
#container>div>p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#container p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.img-general-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: left;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
align-items: left;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.img-general-info>:nth-child(1) {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.img-general-info>:nth-child(2) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -3,16 +3,23 @@
|
||||
<script>
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { communities, addMarkersCommunities } from '/js/communities.js'
|
||||
import { loadLocaleContent,getLocale } from "/js/libraries/serverTools.js"
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
|
||||
// Main code
|
||||
let loaded
|
||||
let locale = []
|
||||
let content = writable({})
|
||||
|
||||
function mapCallbackCommunities(createMap) {
|
||||
loadLocaleContent(content,"communities-component",loaded,(lang) => getLocale(locale,lang))
|
||||
|
||||
function mapCallbackCommunities(createMap,content,locale) {
|
||||
let map = createMap([51.505, -0.09],3)
|
||||
addMarkersCommunities(map)
|
||||
addMarkersCommunities(map,content,locale)
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
@@ -20,26 +27,30 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<div id="container">
|
||||
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
|
||||
<div id="text-container">
|
||||
<h1>Communities</h1>
|
||||
<img id="communities-img" src="/img/common/communities.svg" alt="communities">
|
||||
<p>We establish libertarian socialist communities by buying land, housing and the means of production which are then owned by the members of these communities. There is no private property within the communities and, therefore, exploitation and suffering that comes with it. Decisions are made using direct democracy with a focus on consensus, ensuring that each community member has power over decisions that affect their life. Communities try to establish their own cooperatives in order to finance their development becoming financially independent and sustainable, which allows for their survival and growth. Within communities the gift economy is utilized whenever possible. Each community is a small beacon of socialism within the dark capitalist world showing us how good life can be if only we achieve our goal.</p>
|
||||
<h3>Our communities</h3>
|
||||
<map-component id="map" callback={mapCallbackCommunities}></map-component>
|
||||
<h4>Europe</h4>
|
||||
{#each communities as community}
|
||||
<div class="location-info">
|
||||
<p><b>Location: </b>{community.location[0]}</p>
|
||||
<p><b>Status: </b>{community.status}</p>
|
||||
<p><b>Members: </b>{community.members}</p>
|
||||
<p><b>Contact: </b><a href={community.contact[0]} target=;_blank; rel=noreferrer>{community.contact[1]}</a></p>
|
||||
{#key loaded}
|
||||
{#if Object.keys($content).length!=0}
|
||||
<div id="container">
|
||||
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
|
||||
<div id="text-container">
|
||||
<h1>{$content.heading}</h1>
|
||||
<img id="communities-img" src="/img/common/communities.svg" alt="communities">
|
||||
<p>{$content.p1}</p>
|
||||
<h3>{$content.subheading1}</h3>
|
||||
<map-component id="map" callback={(createMap) => mapCallbackCommunities(createMap,$content,locale)}></map-component>
|
||||
<h4>{$content.subheading2}</h4>
|
||||
{#each communities as community}
|
||||
<div class="location-info">
|
||||
<p><b>{$content.location}: </b>{community.location[0][locale[0]]}</p>
|
||||
<p><b>{$content.status}: </b>{community.status[locale[0]]}</p>
|
||||
<p><b>{$content.members}: </b>{community.members}</p>
|
||||
<p><b>{$content.contact}: </b><a href={community.contact[0]} target=;_blank; rel=noreferrer>{community.contact[1][locale[0]]}</a></p>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
@@ -97,7 +108,7 @@
|
||||
|
||||
#container {
|
||||
margin: auto;
|
||||
max-width: 1000px;
|
||||
max-width: 800px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
@@ -3,15 +3,23 @@
|
||||
<script>
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { coops, addMarkersCoops } from '/js/coops.js'
|
||||
import { loadLocaleContent,getLocale } from "/js/libraries/serverTools.js"
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
|
||||
// Main code
|
||||
function mapCallbackCoops(createMap) {
|
||||
let loaded
|
||||
let locale = []
|
||||
let content = writable({})
|
||||
|
||||
loadLocaleContent(content,"cooperatives-component",loaded,(lang) => getLocale(locale,lang))
|
||||
|
||||
function mapCallbackCoops(createMap,content,locale) {
|
||||
let map = createMap([51.505, -0.09],3)
|
||||
addMarkersCoops(map)
|
||||
addMarkersCoops(map,content,locale)
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
@@ -19,38 +27,42 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<div id="container">
|
||||
<div id="text-container">
|
||||
<h1>Cooperatives</h1>
|
||||
<img id="coops-img" src="/img/common/coops.svg" alt="coops">
|
||||
<p>We establish worker cooperatives that embody a transformative business model where employees own and control the enterprise. Each worker has a voice in decision-making, and profits are distributed based on individual contributions. This participatory structure fosters ownership, motivation, and job satisfaction, creating a more fulfilling work experience as well as challenging the wealth concentration in traditional capitalist businesses.</p>
|
||||
<p>By focusing on employees' needs, our cooperatives create supportive and sustainable work environments that foster social cohesion and job security. We also prioritize the interests of local communities, taking a long-term perspective. With workers making decisions, we avoid harmful short-term profit-driven strategies and instead reinvest our profits, contributing to community development and resilience.</p>
|
||||
<h3>Our cooperatives</h3>
|
||||
<map-component id="map" callback={mapCallbackCoops}></map-component>
|
||||
<h4>Europe</h4>
|
||||
{#each coops as coop}
|
||||
<div class="location-info">
|
||||
<div class="img-general-info">
|
||||
<div>
|
||||
<p><b>Name: </b>{coop.name}</p>
|
||||
<p><b>Location: </b>{coop.location[0]}</p>
|
||||
<p><b>Market: </b>{coop.market}</p>
|
||||
<p><b>Workers: </b>{coop.workers}</p>
|
||||
<p><b>Status: </b>{coop.status}</p>
|
||||
<p><b>Website: </b><a href={"https://www."+coop.website} target="_blank" rel=noreferrer>{coop.website}</a></p>
|
||||
<p><b>Contact: </b><a href={coop.contact[0]} target=;_blank; rel=noreferrer>{coop.contact[1]}</a></p>
|
||||
{#key loaded}
|
||||
{#if Object.keys($content).length!=0}
|
||||
<div id="container">
|
||||
<div id="text-container">
|
||||
<h1>{$content.heading}</h1>
|
||||
<img id="coops-img" src="/img/common/coops.svg" alt="coops">
|
||||
<p>{$content.p1}</p>
|
||||
<p>{$content.p2}</p>
|
||||
<h3>{$content.subheading1}</h3>
|
||||
<map-component id="map" callback={(createMap) => mapCallbackCoops(createMap,$content,locale)}></map-component>
|
||||
<h4>{$content.subheading2}</h4>
|
||||
{#each coops as coop}
|
||||
<div class="location-info">
|
||||
<div class="img-general-info">
|
||||
<div>
|
||||
<p><b>{$content.name}: </b>{coop.name}</p>
|
||||
<p><b>{$content.location}: </b>{coop.location[0][locale[0]]}</p>
|
||||
<p><b>{$content.market}: </b>{coop.market[locale[0]]}</p>
|
||||
<p><b>{$content.workers}: </b>{coop.workers}</p>
|
||||
<p><b>{$content.status}: </b>{coop.status[locale[0]]}</p>
|
||||
<p><b>{$content.website}: </b><a href={"https://www."+coop.website} target="_blank" rel=noreferrer>{coop.website}</a></p>
|
||||
<p><b>{$content.contact}: </b><a href={coop.contact[0]} target=;_blank; rel=noreferrer>{coop.contact[1][locale[0]]}</a></p>
|
||||
</div>
|
||||
<picture>
|
||||
<source srcset={"/img/coops/"+coop.logo+".webp"}>
|
||||
<source srcset={"/img/coops/"+coop.logo+".png"}>
|
||||
<img class="coop-logo" alt="logo">
|
||||
</picture>
|
||||
</div>
|
||||
<p><b>{$content.description}: </b>{coop.description[locale[0]]}</p>
|
||||
</div>
|
||||
<picture>
|
||||
<source srcset={"/img/coops/"+coop.logo+".webp"}>
|
||||
<source srcset={"/img/coops/"+coop.logo+".png"}>
|
||||
<img class="coop-logo" alt="logo">
|
||||
</picture>
|
||||
</div>
|
||||
<p><b>Description: </b>{coop.description}</p>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
@@ -128,7 +140,7 @@
|
||||
|
||||
#container {
|
||||
margin: auto;
|
||||
max-width: 1000px;
|
||||
max-width: 800px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
@@ -2,35 +2,46 @@
|
||||
|
||||
<script>
|
||||
|
||||
// Import statements
|
||||
// Import statements
|
||||
import { writable } from 'svelte/store';
|
||||
import { loadLocaleContent,getLocale } from "/js/libraries/serverTools.js"
|
||||
|
||||
// Import components
|
||||
// Import components
|
||||
|
||||
// Main code
|
||||
// Main code
|
||||
let loaded
|
||||
let locale = []
|
||||
let content = writable({})
|
||||
|
||||
loadLocaleContent(content,"footer-component",loaded,(lang) => getLocale(locale,lang))
|
||||
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
<div id="footer-content-container">
|
||||
<div id="footer-grid-content-container" class="logged">
|
||||
<div id="contact-us-container">
|
||||
<h2>CONTACT US</h2>
|
||||
<!--<p>Email: <a href="mailto:info@chiron.com">info@libsoc.org</a></p>-->
|
||||
<p>WhatsApp: <a href="https://chat.whatsapp.com/BhnmUNljUxJ2AjeHUwyTKh" target="_blank" rel=noreferrer style="margin-left: 0.5rem;">invite link</a></p>
|
||||
<p>Discord: <a href="https://discord.gg/xAPZmyr8B6" target="_blank" rel=noreferrer style="margin-left: 2rem;">invite link</a></p>
|
||||
{#key loaded}
|
||||
{#if Object.keys($content).length!=0}
|
||||
<footer>
|
||||
<div id="footer-content-container">
|
||||
<div id="footer-grid-content-container" class="logged">
|
||||
<div id="contact-us-container">
|
||||
<h2>{$content.contactUs}</h2>
|
||||
<!--<p>Email: <a href="mailto:info@chiron.com">info@libsoc.org</a></p>-->
|
||||
<p>WhatsApp: <a href="https://chat.whatsapp.com/BhnmUNljUxJ2AjeHUwyTKh" target="_blank" rel=noreferrer style="margin-left: 0.5rem;">{$content.inviteLink}</a></p>
|
||||
<p>Discord: <a href="https://discord.gg/xAPZmyr8B6" target="_blank" rel=noreferrer style="margin-left: 2rem;">{$content.inviteLink}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<button on:click={() => {location.href='#'}} id="footer-up" aria-label="go up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="42.545" height="72.601" viewBox="0 0 42.545 72.601">
|
||||
<g id="Group_268" data-name="Group 268" transform="translate(-6.177 -2.399)">
|
||||
<rect id="Rectangle_146" data-name="Rectangle 146" width="11" height="51" rx="5.5" transform="translate(22 24)" fill="#cb1816"/>
|
||||
<path id="Path_1145" data-name="Path 1145" d="M23.814,4.021a5,5,0,0,1,7.372,0l16.134,17.6c2.94,3.207,1.046,10.4-3.686,8.379S28.02,14.081,28.391,13.524,16.544,27.976,11.366,30,4.741,24.828,7.68,21.621Z" fill="#DD1C1A"/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<p id="footer-copyright">© 2023 {$content.libertarianSocialists}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button on:click={() => {location.href='#'}} id="footer-up" aria-label="go up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="42.545" height="72.601" viewBox="0 0 42.545 72.601">
|
||||
<g id="Group_268" data-name="Group 268" transform="translate(-6.177 -2.399)">
|
||||
<rect id="Rectangle_146" data-name="Rectangle 146" width="11" height="51" rx="5.5" transform="translate(22 24)" fill="#cb1816"/>
|
||||
<path id="Path_1145" data-name="Path 1145" d="M23.814,4.021a5,5,0,0,1,7.372,0l16.134,17.6c2.94,3.207,1.046,10.4-3.686,8.379S28.02,14.081,28.391,13.524,16.544,27.976,11.366,30,4.741,24.828,7.68,21.621Z" fill="#DD1C1A"/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<p id="footer-copyright">© 2023 Libertarian Socialists</p>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
@@ -3,40 +3,53 @@
|
||||
<script>
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { groups, addMarkersGroups } from '/js/groups.js'
|
||||
import { loadLocaleContent,getLocale } from "/js/libraries/serverTools.js"
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
|
||||
// Main code
|
||||
export function mapCallbackGroups(createMap) {
|
||||
let loaded
|
||||
let locale = []
|
||||
let content = writable({})
|
||||
|
||||
loadLocaleContent(content,"groups-component",loaded,(lang) => getLocale(locale,lang))
|
||||
|
||||
function mapCallbackGroups(createMap,content,locale) {
|
||||
let map = createMap([51.505, -0.09],3)
|
||||
addMarkersGroups(map)
|
||||
addMarkersGroups(map,content,locale)
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<div id="container">
|
||||
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
|
||||
<div id="text-container">
|
||||
<h1>Groups</h1>
|
||||
<img id="groups-img" src="/img/common/groups.svg" alt="groups">
|
||||
<p>We aim to raise awareness about the negative impact of current politico-economic systems on our well-being. Through education, community engagement, and analysis, we reveal the flaws and inequalities in capitalist societies. By highlighting these issues, we empower people to question the status quo and imagine fairer and more sustainable alternatives.</p>
|
||||
<p>But our mission goes beyond theory. We engage in mutual aid and collective action to address immediate challenges within capitalism. Through mutual aid, we support each other by sharing resources, knowledge, and skills, fostering solidarity and resilience. Whether it's community gardens, food cooperatives, or support networks, our goal is to make life under capitalism more bearable and create pockets of resistance and alternatives within the system.</p>
|
||||
<h3>Our groups</h3>
|
||||
<map-component id="map" callback={mapCallbackGroups}></map-component>
|
||||
<h4>Europe</h4>
|
||||
{#each groups as group}
|
||||
<div class="location-info">
|
||||
<p><b>Location: </b>{group.location[0]}</p>
|
||||
<p><b>Members: </b>{group.members}</p>
|
||||
<p><b>Contact: </b><a href={group.contact[0]} target=;_blank; rel=noreferrer>{group.contact[1]}</a></p>
|
||||
{#key loaded}
|
||||
{#if Object.keys($content).length!=0}
|
||||
<div id="container">
|
||||
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
|
||||
<div id="text-container">
|
||||
<h1>{$content.heading}</h1>
|
||||
<img id="groups-img" src="/img/common/groups.svg" alt="groups">
|
||||
<p>{$content.p1}</p>
|
||||
<p>{$content.p2}</p>
|
||||
<h3>{$content.subheading1}</h3>
|
||||
<map-component id="map" callback={(createMap) => mapCallbackGroups(createMap,$content,locale)}></map-component>
|
||||
<h4>{$content.subheading2}</h4>
|
||||
{#each groups as group}
|
||||
<div class="location-info">
|
||||
<p><b>{$content.location}: </b>{group.location[0][locale[0]]}</p>
|
||||
<p><b>{$content.members}: </b>{group.members}</p>
|
||||
<p><b>{$content.contact}: </b><a href={group.contact[0]} target=;_blank; rel=noreferrer>{group.contact[1][locale[0]]}</a></p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
@@ -94,7 +107,7 @@
|
||||
|
||||
#container {
|
||||
margin: auto;
|
||||
max-width: 1000px;
|
||||
max-width: 800px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
@@ -6,17 +6,19 @@
|
||||
import { addMarkersGroups } from '/js/groups.js'
|
||||
import { addMarkersCoops } from '/js/coops.js'
|
||||
import { addMarkersCommunities } from '/js/communities.js'
|
||||
// Import components
|
||||
|
||||
// Main code
|
||||
|
||||
|
||||
|
||||
import { loadLocaleContent } from "/js/libraries/serverTools.js"
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
|
||||
|
||||
// Main code
|
||||
export function mapCallback(createMap) {
|
||||
let loaded
|
||||
let content = writable({})
|
||||
|
||||
loadLocaleContent(content,"join-us-component",loaded)
|
||||
|
||||
function mapCallback(createMap) {
|
||||
let map = createMap([51.505, -0.09],3)
|
||||
addMarkersGroups(map)
|
||||
addMarkersCoops(map)
|
||||
@@ -28,46 +30,43 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Are you against exploitation of one human being by another?
|
||||
Do you agree that we should cooperate and not compete with each other?
|
||||
In that case, you are already a libertarian socialist. Join us
|
||||
|
||||
FInd our group, community or cooperative near you and join in order to make a world we both envision a reality.
|
||||
|
||||
None of them near you? Not a problem! Join our WhatsApp group and we will help you get started.
|
||||
<div id="container">
|
||||
<div id="text-container">
|
||||
<h1>Join Us</h1>
|
||||
<img src="/img/common/join-group.svg" id="join-group" alt="join group">
|
||||
<ol id="condition-list">
|
||||
<li>Are you against dictatorship and in favor of democracy?</li>
|
||||
<li>Are you against exploitation of one human being by another?</li>
|
||||
<li>Do you agree that we should cooperate and not compete with each other?</li>
|
||||
<p>If the answer is <b>YES</b>, then you are already a libertarian socialist. <b>JOIN US!</b></p>
|
||||
</ol>
|
||||
<h2>What You Will Get</h2>
|
||||
<ol id="value-proposition-list">
|
||||
<li>A community that is always ready to help with all your troubles;</li>
|
||||
<li>Access to the means of production of our cooperatives;</li>
|
||||
<li>Products and services at the cost of production or even for free;</li>
|
||||
<li>Monetary and non-monetary help with opening your own cooperative;</li>
|
||||
<p>and much more!</p>
|
||||
</ol>
|
||||
<h2>Find Us</h2>
|
||||
<div id="call-to-action-list">
|
||||
<p>Find our</p>
|
||||
<ol>
|
||||
<li><a href="/groups">group</a>,</li>
|
||||
<li><a href="/communities">community</a> or</li>
|
||||
<li><a href="/cooperatives">cooperative</a></li>
|
||||
</ol>
|
||||
<p>near you and join to help make a world we both envision a reality.</p>
|
||||
{#key loaded}
|
||||
{#if Object.keys($content).length!=0}
|
||||
<div id="container">
|
||||
<div id="text-container">
|
||||
<h1>{$content.heading}</h1>
|
||||
<img src="/img/common/join-group.svg" id="join-group" alt="join group">
|
||||
<ol id="condition-list">
|
||||
<li>{$content.condition1}</li>
|
||||
<li>{$content.condition2}</li>
|
||||
<li>{$content.condition3}</li>
|
||||
<p>{@html $content.conditionsOutcome}</p>
|
||||
</ol>
|
||||
<h2>{$content.subheading1}</h2>
|
||||
<ol id="value-proposition-list">
|
||||
<li>{$content.valueProposition1}</li>
|
||||
<li>{$content.valueProposition2}</li>
|
||||
<li>{$content.valueProposition3}</li>
|
||||
<li>{$content.valueProposition4}</li>
|
||||
<p>{$content.valueProposition5}</p>
|
||||
</ol>
|
||||
<h2>{$content.subheading2}</h2>
|
||||
<div id="call-to-action-list">
|
||||
<p>{$content.findOur}</p>
|
||||
<ol>
|
||||
<li><a href="/groups">{$content.group}</a>,</li>
|
||||
<li><a href="/communities">{$content.community}</a> {$content.or}</li>
|
||||
<li><a href="/cooperatives">{$content.cooperative}</a></li>
|
||||
</ol>
|
||||
<p>{$content.nearYou}</p>
|
||||
</div>
|
||||
<p>{$content.noneNear} <a href="https://chat.whatsapp.com/BhnmUNljUxJ2AjeHUwyTKh" target="_blank" rel=noreferrer>{$content.WhatsAppGroup}</a> {$content.or} <a href="https://discord.gg/xAPZmyr8B6" target="_blank" rel=noreferrer>{$content.DiscordServer}</a>{$content.helpStart}</p>
|
||||
<map-component id="map" callback={mapCallback}></map-component>
|
||||
</div>
|
||||
</div>
|
||||
<p>None of them near you? Not a problem! Join our <a href="https://chat.whatsapp.com/BhnmUNljUxJ2AjeHUwyTKh" target="_blank" rel=noreferrer>WhatsApp group</a> or <a href="https://discord.gg/xAPZmyr8B6" target="_blank" rel=noreferrer>Discord server</a> and we will help you start your own.</p>
|
||||
<map-component id="map" callback={mapCallback}></map-component>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
@@ -135,7 +134,7 @@ None of them near you? Not a problem! Join our WhatsApp group and we will help y
|
||||
|
||||
#container {
|
||||
margin: auto;
|
||||
max-width: 1000px;
|
||||
max-width: 800px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
@@ -148,6 +147,10 @@ None of them near you? Not a problem! Join our WhatsApp group and we will help y
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#call-to-action-list>:nth-child(1) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#call-to-action-list>:nth-child(2) {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
@@ -3,47 +3,66 @@
|
||||
<script>
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { loadLocaleContent } from "/js/libraries/serverTools.js"
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
// Import components
|
||||
|
||||
|
||||
// Main code
|
||||
|
||||
let grid
|
||||
let gridWidth
|
||||
let loaded
|
||||
let content = writable({})
|
||||
|
||||
function changeWidth(locale) {
|
||||
if (locale=="ru") {
|
||||
gridWidth = "1.2fr 1.05fr 1fr"
|
||||
}
|
||||
else {
|
||||
gridWidth = "1.2fr 1.1fr 1fr"
|
||||
}
|
||||
}
|
||||
|
||||
loadLocaleContent(content,"landing-component",loaded,changeWidth)
|
||||
|
||||
onMount(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<div id="container">
|
||||
<picture>
|
||||
<source srcset="/img/crowd.webp">
|
||||
<source srcset="/img/crowd.png">
|
||||
<img id="crowd" alt="crowd">
|
||||
</picture>
|
||||
|
||||
<div id="text-container">
|
||||
<p>We are people united around a singular cause: bringing down authoritarian exploitative systems represented by various forms of capitalism and replacing them with libertarian socialist systems, with the goal of creating a more equitable and democratic world.</p>
|
||||
<div id="container-grid">
|
||||
<div>
|
||||
<h2>GROUPS</h2>
|
||||
<img id="groups-img" src="/img/common/groups.svg" alt="groups">
|
||||
<p>We organize groups for the purposes of education, advocacy, and mutual aid. Our objective is to demonstrate to people how the current politico-economic systems detrimentally impact our well-being, present them with alternative approaches, and engage in mutual aid to alleviate the challenges of living under capitalism.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>COMMUNITIES</h2>
|
||||
<img id="communities-img" src="/img/common/communities.svg" alt="communities">
|
||||
<p>We establish communities based on libertarian socialist principles, where communities have ownership of their land, houses, and the means of production as well as make decisions using direct democracy. We are gradually expanding our socialist world, one community at a time.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>COOPERATIVES</h2>
|
||||
<img id="coops-img" src="/img/common/coops.svg" alt="coops">
|
||||
<p>We form worker cooperatives to finance the operations of our groups and communities. Recognizing that economic power influences political power, we consider the establishment of cooperatives to be one of the initial steps towards achieving socialism.</p>
|
||||
{#key loaded}
|
||||
{#if Object.keys($content).length!=0}
|
||||
<div id="container">
|
||||
<picture>
|
||||
<source srcset="/img/crowd.webp">
|
||||
<source srcset="/img/crowd.png">
|
||||
<img id="crowd" alt="crowd">
|
||||
</picture>
|
||||
|
||||
<div id="text-container">
|
||||
<p>{$content.top}</p>
|
||||
<div bind:this={grid} id="container-grid" style="--grid-width: {gridWidth}">
|
||||
<div>
|
||||
<h2>{$content.groupsTitle}</h2>
|
||||
<img id="groups-img" src="/img/common/groups.svg" alt="groups">
|
||||
<p>{$content.groupsText}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>{$content.communitiesTitle}</h2>
|
||||
<img id="communities-img" src="/img/common/communities.svg" alt="communities">
|
||||
<p>{$content.communitiesText}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>{$content.cooperativesTitle}</h2>
|
||||
<img id="coops-img" src="/img/common/coops.svg" alt="coops">
|
||||
<p>{$content.cooperativesText}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
@@ -88,7 +107,7 @@
|
||||
|
||||
#container-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1.1fr 1fr;
|
||||
grid-template-columns: var(--grid-width);
|
||||
grid-gap: 4rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
@@ -103,7 +122,7 @@
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
@media only screen and (max-width: 1060px) {
|
||||
#container-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@@ -3,11 +3,18 @@
|
||||
<script>
|
||||
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { onMount, getContext } from 'svelte'
|
||||
import { loadLocaleContent } from "/js/libraries/serverTools.js"
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
// Main code
|
||||
let hambInput
|
||||
let navbar
|
||||
let localesDropdown
|
||||
let loaded
|
||||
let content = writable({})
|
||||
|
||||
loadLocaleContent(content,"navbar-component",loaded)
|
||||
|
||||
function changeNavbar() {
|
||||
if (hambInput.checked) {
|
||||
@@ -25,6 +32,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
function showLocales() {
|
||||
if (localesDropdown.style.display=="block") {
|
||||
localesDropdown.style.display = "none"
|
||||
}
|
||||
else {
|
||||
localesDropdown.style.display = "block"
|
||||
}
|
||||
}
|
||||
|
||||
function changeLocale(lang) {
|
||||
localStorage.setItem("locale",lang)
|
||||
location.reload()
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
|
||||
})
|
||||
@@ -32,31 +53,312 @@
|
||||
</script>
|
||||
|
||||
<!-- Navigation bar -->
|
||||
<header bind:this={navbar} id="navbar">
|
||||
<!-- Hamburger icon -->
|
||||
<input bind:this={hambInput} type="checkbox" id="side-menu" on:click={changeNavbar}>
|
||||
<label id="hamb" for="side-menu"><span id="hamb-line"></span></label>
|
||||
<!-- Logo -->
|
||||
<a id=logo-container href="/">
|
||||
<img src="img/common/flag.png" id="navbar-logo" alt="logo">
|
||||
<span id="navbar-logo-text">Libertarian socialists</span>
|
||||
</a>
|
||||
<!-- Menu -->
|
||||
<nav id="nav">
|
||||
<ul id="menu">
|
||||
<li><a href="/manifesto">Manifesto</a></li>
|
||||
<li><a href="/join-us">Join Us</a></li>
|
||||
<li><a href="/groups">Groups</a></li>
|
||||
<li><a href="/communities">Communities</a></li>
|
||||
<li><a href="/cooperatives">Cooperatives</a></li>
|
||||
<li><a href="/affiliates">Affiliates</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
{#key loaded}
|
||||
{#if Object.keys($content).length!=0}
|
||||
<header bind:this={navbar} id="navbar">
|
||||
<!-- Hamburger icon -->
|
||||
<input bind:this={hambInput} type="checkbox" id="side-menu" on:click={changeNavbar}>
|
||||
<label id="hamb" for="side-menu"><span id="hamb-line"></span></label>
|
||||
<!-- Logo -->
|
||||
<a id=logo-container href="/">
|
||||
<img src="img/common/flag.png" id="navbar-logo" alt="logo">
|
||||
<span id="navbar-logo-text">{$content.orgName}</span>
|
||||
</a>
|
||||
<!-- Menu -->
|
||||
<nav id="nav">
|
||||
<ul id="menu">
|
||||
<li><a href="/manifesto">{$content.manifesto}</a></li>
|
||||
<li><a href="/join-us">{$content.joinUs}</a></li>
|
||||
<li><a href="/groups">{$content.groups}</a></li>
|
||||
<li><a href="/communities">{$content.communities}</a></li>
|
||||
<li><a href="/cooperatives">{$content.cooperatives}</a></li>
|
||||
<li><a href="/partners">{$content.partners}</a></li>
|
||||
<li id="locales">
|
||||
<button on:click={showLocales}>
|
||||
<picture>
|
||||
<source srcset="/img/common/globe.webp">
|
||||
<source srcset="/img/common/globe.png">
|
||||
<img id="locales-img" alt="globe">
|
||||
</picture>
|
||||
</button>
|
||||
</li>
|
||||
<div bind:this={localesDropdown} id="locales-dropdown">
|
||||
<button on:click={() => changeLocale("en")}>English</button>
|
||||
<button on:click={() => changeLocale("ru")}>Русский</button>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
@import '/css/common.css';
|
||||
@import '/css/navbar.css';
|
||||
@import '/css/common.css';
|
||||
|
||||
/* Header */
|
||||
#navbar{
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: min(100%,116rem);
|
||||
z-index: 1000000000;
|
||||
height: 5.26rem;
|
||||
}
|
||||
|
||||
#navbar * {
|
||||
font-family: var(--sans-serif, sans-serif);
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
#logo-container {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
margin-left: 1rem;
|
||||
height: 100%;
|
||||
max-height: 5.26rem;
|
||||
color: black;
|
||||
z-index: 1;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#navbar-logo {
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
object-fit: contain;
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
#navbar-logo-text {
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
line-height: 400%;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
color: #292222;
|
||||
font-family: var(--sans-serif, sans-serif);
|
||||
font-weight: 400;
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
|
||||
/* Nav menu */
|
||||
#nav {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
#menu a {
|
||||
display: block;
|
||||
padding: 1.2rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
color: black;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
#menu a:hover {
|
||||
background-color: rgb(220, 220, 220);
|
||||
}
|
||||
|
||||
#menu a:active{
|
||||
background-color: #f7aec0;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#nav{
|
||||
max-height: 0;
|
||||
/*transition: max-height .5s ease-out;*/
|
||||
}
|
||||
|
||||
/* Menu Icon */
|
||||
#hamb{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 0rem;
|
||||
padding: 2.8rem 2rem;
|
||||
z-index: 9999;
|
||||
}/* Style label tag */
|
||||
|
||||
#hamb-line {
|
||||
background: black;
|
||||
display: block;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
width: 24px;
|
||||
|
||||
} /* Style span tag */
|
||||
|
||||
#hamb-line::before,
|
||||
#hamb-line::after{
|
||||
background: black;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: all .2s ease-out;
|
||||
width: 100%;
|
||||
}
|
||||
#hamb-line::before{
|
||||
top: 5px;
|
||||
}
|
||||
#hamb-line::after{
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
#side-menu {
|
||||
display: none;
|
||||
} /* Hide checkbox */
|
||||
|
||||
/* Toggle menu icon */
|
||||
#side-menu:checked ~ nav {
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
padding-top: 5.625rem;
|
||||
}
|
||||
|
||||
#side-menu:checked ~ #logo-container {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#side-menu:checked ~ #hamb {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#side-menu:checked ~ #logo-container {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#side-menu:checked ~ #hamb #hamb-line {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#side-menu:checked ~ #hamb #hamb-line::before {
|
||||
transform: rotate(-45deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#side-menu:checked ~ #hamb #hamb-line::after {
|
||||
transform: rotate(45deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/*Localization*/
|
||||
|
||||
#locales {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#locales button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
#locales button:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#locales-img {
|
||||
position: relative;
|
||||
top: 0rem;
|
||||
height: 2rem;
|
||||
margin-left: 1.2rem;
|
||||
}
|
||||
|
||||
#locales-dropdown {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 5.6rem;
|
||||
right: 1.8rem;
|
||||
border: #404040 solid 0.1rem;
|
||||
padding: 1.4rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#locales-dropdown button {
|
||||
display: block;
|
||||
font-family: var(--sans-serif,sans-serif);
|
||||
font-size: 1.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#locales-dropdown button:hover {
|
||||
color: rgb(127, 127, 127);
|
||||
}
|
||||
|
||||
#locales-dropdown>:first-child {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#locales-dropdown>:nth-child(2) {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* Responsiveness */
|
||||
@media only screen and (min-width: 1500px) {
|
||||
|
||||
#navbar {
|
||||
position: relative;
|
||||
width: min(95%,116rem);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#nav {
|
||||
max-height: none;
|
||||
top: 0;
|
||||
position: relative;
|
||||
float: right;
|
||||
width: fit-content;
|
||||
background-color: transparent;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#side-menu:checked ~ nav {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#menu a:hover {
|
||||
background-color: transparent;
|
||||
color: rgb(127, 127, 127);
|
||||
}
|
||||
|
||||
#menu a {
|
||||
padding: 1.2rem;
|
||||
padding-top: 1.9rem;
|
||||
padding-bottom: 1.9rem;
|
||||
}
|
||||
|
||||
#hamb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#locales {
|
||||
position: relative;
|
||||
margin-right: 1.8rem;
|
||||
}
|
||||
|
||||
#locales-img {
|
||||
top: 0.9rem;
|
||||
}
|
||||
|
||||
#locales-dropdown {
|
||||
top: 5,7rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
184
Server/app/svelte/src/partners-component.svelte
Normal file
184
Server/app/svelte/src/partners-component.svelte
Normal file
@@ -0,0 +1,184 @@
|
||||
<svelte:options tag="partners-component" />
|
||||
|
||||
<script>
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { loadLocaleContent,getLocale } from "/js/libraries/serverTools.js"
|
||||
//import { communities, addMarkersCommunities } from '/js/communities.js'
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
|
||||
// Main code
|
||||
let loaded
|
||||
let locale = []
|
||||
let content = writable({})
|
||||
|
||||
loadLocaleContent(content,"partners-component",loaded,(lang) => getLocale(locale,lang))
|
||||
|
||||
let partners = [
|
||||
{
|
||||
name: "Gaia's Fall",
|
||||
type: {
|
||||
en: "a place to discuss and organize",
|
||||
ru: "место для общения и организации"
|
||||
},
|
||||
link: "https://discord.libsoc.org",
|
||||
description: {
|
||||
en: "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.",
|
||||
ru: "Gaia's Fall — это сервер, который продвигает идеалы соларпанка, защиту окружающей среды, анархизм и антикапитализм. Мы поощряем гражданские дебаты, обсуждение теорий и возможностей, а также создание сообществ, сосредоточенных на формировании лучшего мира. Это наш официальный сервер Discord, на котором мы организуемся и работаем вместе"
|
||||
},
|
||||
logo: "gaias_fall"
|
||||
}
|
||||
]
|
||||
|
||||
onMount(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
{#key loaded}
|
||||
{#if Object.keys($content).length!=0}
|
||||
<div id="container">
|
||||
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
|
||||
<div id="text-container">
|
||||
<h1>{$content.heading}</h1>
|
||||
<img id="hands-img" src="/img/common/handshake.svg" alt="hands">
|
||||
<p>{$content.p1}</p>
|
||||
<h3>{$content.subheading1}</h3>
|
||||
<h4>{$content.subheading2}</h4>
|
||||
{#each partners as partner}
|
||||
<div class="location-info">
|
||||
<div class="img-general-info">
|
||||
<picture>
|
||||
<source srcset={"/img/partners/"+partner.logo+".webp"}>
|
||||
<source srcset={"/img/partners/"+partner.logo+".jpg"}>
|
||||
<img class="partner-logo" alt="logo">
|
||||
</picture>
|
||||
<div>
|
||||
<p><b>{$content.name}: </b>{partner.name}</p>
|
||||
<p><b>{$content.type}: </b>{partner.type[locale[0]]}</p>
|
||||
<p><b>{$content.link}: </b><a href={partner.link[locale[0]]} target=;_blank; rel=noreferrer>{partner.link}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<p><b>{$content.description}: </b>{partner.description[locale[0]]}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
|
||||
#hands-img {
|
||||
position: absolute;
|
||||
width: 10.5rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
z-index: 0;
|
||||
opacity: 0.2;
|
||||
margin-top: -2rem;
|
||||
}
|
||||
|
||||
#text-container>:nth-child(3) {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.partner-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 {
|
||||
color: #DD1C1A;
|
||||
}
|
||||
|
||||
#map {
|
||||
--height: 30rem;
|
||||
--width: 100%;
|
||||
--margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#text-container {
|
||||
max-width: calc(100vw - 4rem);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#container {
|
||||
margin: auto;
|
||||
max-width: 800px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
#container>div>p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#container p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.img-general-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: left;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
align-items: left;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.img-general-info>:nth-child(1) {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.img-general-info>:nth-child(2) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user