Merge branch 'set-img-size' of https://git.selfprivacy.org/nevfy/selfprivacy.org into set-img-size

- Illustrations load from the `content` folders, not from `assets`
- Screenshots load from `static/images`, not from `assets`
- `justimg` shortcode is not used anywhere

`assets/images` and `justimg.html` can be deleted.

Reviewed-on: SelfPrivacy/selfprivacy.org#131
Reviewed-by: Inex Code <inex.code@selfprivacy.org>
Co-authored-by: nevfy <yaver4.0.0.0@gmail.com>
Co-committed-by: nevfy <yaver4.0.0.0@gmail.com>

.gitmodules

@@ -1,4 +0,0 @@
-
-[submodule "themes/docsy"]
-	path = themes/docsy
-	url = https://github.com/google/docsy

assets/scss/_styles_project.scss

@@ -23,7 +23,6 @@
 .sp-footer span i {
   margin: auto;
 }
-
 .rounded-img {
   border-radius: 1rem;
 }
@@ -113,20 +112,10 @@
 .sp-supported-by-list {
   display: flex;
   align-items: center;
-  justify-content: space-around;
+  justify-content: center;
+  column-gap: 5vw;
   flex-wrap: wrap;
-}
+  margin-top: 2rem;
-
-.sp-supported-by-card {
-  background: white;
-  box-shadow: $shadow;
-  border-radius: 10px;
-  border: none;
-  margin-top: 1rem;
-}
-
-body {
-  background-color: $bg-color;
 }
 
 a.nav-link.sp-coming-soon {
@@ -144,6 +133,50 @@ a.nav-link.sp-coming-soon {
   }
 }
 
+html {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  background-color: $bg-color;
+}
+
+a, a.btn-link {
+  text-decoration: none;
+}
+
+.sp-advantages {
+  row-gap: 0px;
+}
+
+.sp-advantages-header {
+  position: sticky;
+  top: 10vh;
+  margin-bottom: 5rem;
+}
+
+.sp-feature {
+  position: sticky;
+  top: 0;
+  min-height: 100vh;
+}
+
+.sp-feature-green {
+  background-color: #e9f1da !important;
+}
+.sp-feature-blue {
+  background-color: #e1eaea !important;
+}
+.sp-feature-purple {
+  background-color: #ebe0e8 !important;
+}
+
+.container-fluid {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
 .error {
   display: flex;
   flex-direction: column;

assets/scss/docsy_overrides.scss

@@ -1,6 +1,7 @@
 .td-navbar {
     background: $dark;
     min-height: 5rem;
+    z-index: 15;
     .navbar-brand__name {
         display: none;
     }
@@ -192,4 +193,8 @@ li:has(input[type="checkbox"]) {
     .td-sidebar-toc {
         padding-top: 2.75rem;
     }
+}
+
+.carousel-control-next, .carousel-control-prev {
+    background-image: none;
 }

content/en/_index.html

@@ -5,21 +5,12 @@ linkTitle = "SelfPrivacy"
 +++
 
 {{< blocks/section color="dark" type="section" >}}
-	<div class="row">
+	<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
 		<div class="col-xs-12 col-md-4">
 			<div class="container rounded">
-				<div id="screenshotsCarouselControls" class="carousel slide" data-ride="carousel">
+				<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="carousel">
-					<ol class="carousel-indicators">
-						<li data-target="#screenshotsCarouselControls" data-slide-to="0" class="active"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="1"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="2"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="3"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="4"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="5"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="6"></li>
-					  </ol>
 				  <div class="carousel-inner rounded">
-					<div class="carousel-item">
+					<div class="carousel-item active">
 					  <img class="d-block w-100" src="/images/screenshots/1-en.png" alt="First slide">
 					</div>
 					<div class="carousel-item">
@@ -41,18 +32,27 @@ linkTitle = "SelfPrivacy"
 						<img class="d-block w-100" src="/images/screenshots/7-en.png" alt="Seventh slide">
 					</div>
 				  </div>
-				  <a class="carousel-control-prev" href="#screenshotsCarouselControls" role="button" data-slide="prev">
+				  <div class="carousel-indicators">
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active" aria-current="true"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="2"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="3"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="4"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="5"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="6"></button>
+				  </div>
+				  <button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
 					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
-					<span class="sr-only">Previous</span>
+					<span class="visually-hidden">Previous</span>
-				  </a>
+				  </button>
-				  <a class="carousel-control-next" href="#screenshotsCarouselControls" role="button" data-slide="next">
+				  <button class="carousel-control-next" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="next">
 					<span class="carousel-control-next-icon" aria-hidden="true"></span>
-					<span class="sr-only">Next</span>
+					<span class="visually-hidden">Next</span>
-				  </a>
+				  </button>	
-				</div>
+				  </div>
 			</div>
  		</div>
-		<div class="col-xs-12 col-md-8 my-auto">
+		<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
 			<div class="container my-4">
 				<h1>
 					SelfPrivacy app allows you to set up self-hosted services and manage them
@@ -65,12 +65,12 @@ linkTitle = "SelfPrivacy"
 </div>
 {{< /blocks/section >}}
 
-<section class="container-fluid">
+<section class="container">
-	<div class="row w-100">
+	<div class="w-100">
 		<h2 class="mx-auto text-center font-weight-bolder">Your personal services</h2>
 	</div>
 
-	<div class="row w-100 mt-5 mb-3">
+	<div class="w-100 mt-5 mb-3">
 		<h3 class="mx-auto text-center">For serious business</h3>
 	</div>
 
@@ -94,7 +94,7 @@ linkTitle = "SelfPrivacy"
 		</div>
 	</div>
 
-	<div class="row w-100 mt-5 mb-3">
+	<div class="w-100 mt-5 mb-3">
 		<h3 class="mx-auto text-center">For entertainment and communication</h3>
 	</div>
 
@@ -118,7 +118,7 @@ linkTitle = "SelfPrivacy"
 		</div>
 	</div>
 
-	<div class="row w-100 mt-5 mb-3">
+	<div class="w-100 mt-5 mb-3">
 		<h3 class="mx-auto text-center">For a good life</h3>
 	</div>
 
@@ -138,47 +138,47 @@ linkTitle = "SelfPrivacy"
 	</div>
 </section>
 
-<section class="container-fluid">
+<section class="container-fluid d-flex flex-column sp-advantages">
-	<div class="row w-100">
+	<div class="w-100 sp-advantages-header">
 		<h2 class="mx-auto text-center">Advantages</h2>
 	</div>
 
-	{{< landing-feature privacy "Privacy" >}}
+	{{< landing-feature privacy "Privacy" "-green" >}}
 		<p class="card-text">No registration, cookies or telemetry.</p>
 	{{< /landing-feature >}}
 
-	{{< landing-feature zerotrust "Zero trust" "right">}}
+	{{< landing-feature zerotrust "Zero trust" "-blue" "right" >}}
 		<p class="card-text">SelfPrivacy is developed on the «zero trust» principle, even in relation to SelfPrivacy developers. That means you're the sole owner of your data.</p>
 	{{< /landing-feature >}}
 
-	{{< landing-feature security "Security">}}
+	{{< landing-feature security "Security" "-purple" >}}
 		<p class="card-text">Open source. The $2,000 reward for RCE vulnerability significantly increases security compared to conventional self-hosted solutions.</p>
 	{{< /landing-feature >}}
 
-	{{< landing-feature simplicity "Simplicity" "right">}}
+	{{< landing-feature simplicity "Simplicity" "-green" "right">}}
 		<p class="card-text">It is simple. Without console, complicated instructions, monitoring and involvement of specialists.</p>
 	{{< /landing-feature >}}
 
-	{{< landing-feature arrow "No license agreements">}}
+	{{< landing-feature arrow "No license agreements" "-blue" >}}
 		<p class="card-text">What is written in the license agreements that you accept without reading? It says that you allow companies to do anything with your data. SelfPrivacy has no license agreements.</p>
 	{{< /landing-feature >}}
 
-	{{< landing-feature coolhack3r "Save your time and money" "right">}}
+	{{< landing-feature coolhack3r "Save your time and money" "-purple" "right">}}
 		<p class="card-text">How to save $500 or two weeks of your life? Will it take the same time and money for a specialist to set everything up from scratch?</p>
 		<p class="card-text">SelfPrivacy team works continuously to speed up and simplify this process to a few clicks.</p>
 		<p class="card-text">Now anyone will be capable to set up their own data center.</p>
 	{{< /landing-feature >}}
 
-	{{< landing-feature thisisfine "Functionality">}}
+	{{< landing-feature thisisfine "Functionality" "-green">}}
 		<p class="card-text">Your data will not be lost thanks to regular automatic backups to a separate data center. </p>
 	{{< /landing-feature >}}
 
-	{{< landing-feature smartphonecomparison "Independence" "right">}}
+	{{< landing-feature smartphonecomparison "Independence" "-blue" "right">}}
 		<p class="card-text">Your communications on the internet no longer depend on Google, Facebook, Amazon and others E-Corps.</p>
 		<p class="card-text">Your services, your rules! You will not be blocked or disabled, accidentally or for any other reason. Your infrastructure and data will always remain with you.</p>
 	{{< /landing-feature >}}
 
-	{{< landing-feature datactrl "Data control">}}
+	{{< landing-feature datactrl "Data control" "-purple" >}}
 		<p class="card-text">Why do corporations need your data? To make you buy more and vote as they want. With SelfPrivacy, only you have your data.</p>
 	{{< /landing-feature >}}
 </section>
@@ -189,8 +189,8 @@ linkTitle = "SelfPrivacy"
 	<h2 class="mx-auto text-center">Supported by</h2>
 </div>
 
-<div class="card sp-supported-by-card h-100">
+<div class="container-fluid">
-	<div class="card-body sp-supported-by-list">
+	<div class="sp-supported-by-list">
 		<a href="https://nlnet.nl/project/SelfPrivacy/" target="_blank" rel="noopener noreferrer">
 			<object role="img" aria-label="NLnet foundation" class="d-flex justify-content-center align-items-center sp-supported-by-img" type="image/svg+xml" data="/images/logos/nlnet.svg">
                 <div class="error">

content/en/download/_index.html

@@ -2,8 +2,6 @@
 title: Downloads
 ---
 
-<!--add blocks of content here to add more sections to the community page -->
-
 {{< blocks/lead >}}
 	<div class="row w-100 my-4">
 		<h1 class="mx-auto text-center w-100">Downloads</h1>
@@ -12,7 +10,6 @@ title: Downloads
 	<p>
 		Get the latest version of SelfPrivacy app for your operating system.
 	</p>
-
 {{< /blocks/lead >}}
 
 {{< blocks/section color="white" type="section" >}}
@@ -23,26 +20,25 @@ title: Downloads
 
 	<div class="row w-100">
 		<div class="col-md-4">
-			<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="https://f-droid.org/en/packages/pro.kherel.selfprivacy/" rel="noopener noreferrer" target="_blank">
+			<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="https://f-droid.org/en/packages/pro.kherel.selfprivacy/" rel="noopener noreferrer" target="_blank">
 				F-Droid
 			</a>
-			<a class="btn btn-link w-100" href="https://fdroid.selfprivacy.org/" rel="noopener noreferrer" target="_blank">
+			<a class="w-100 btn btn-link w-100" href="https://fdroid.selfprivacy.org/" rel="noopener noreferrer" target="_blank">
 				Our F-Droid repository
 			</a>
 		</div>
 		<div class="col-md-4">
-			<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" rel="noopener noreferrer" target="_blank">
+			<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" rel="noopener noreferrer" target="_blank">
 				APK File
 			</a>
 		</div>
 		<div class="col-md-4">
-			<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="https://play.google.com/store/apps/details?id=org.selfprivacy.app" rel="noopener noreferrer" target="_blank">
+			<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="https://play.google.com/store/apps/details?id=org.selfprivacy.app" rel="noopener noreferrer" target="_blank">
 				Google Play
 			</a>
 		</div>
 	</div>
 
-
 {{< /blocks/section >}}
 
 {{< blocks/section color="white" type="section" >}}
@@ -63,17 +59,17 @@ title: Downloads
 
 <div class="row w-100">
 		<div class="col-md-4">
-			<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding disabled" href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" rel="noopener noreferrer" target="_blank">
+			<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" rel="noopener noreferrer" target="_blank">
 				Windows
 			</a>
 		</div>
 		<div class="col-md-4">
-			<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" rel="noopener noreferrer" target="_blank">
+			<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" rel="noopener noreferrer" target="_blank">
 				GNU/Linux
 			</a>
 		</div>
 		<div class="col-md-4">
-			<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding disabled" href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" rel="noopener noreferrer" target="_blank">
+			<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding disabled" href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" rel="noopener noreferrer" target="_blank">
 				MacOS
 			</a>
 		</div>
@@ -84,7 +80,7 @@ title: Downloads
 {{< blocks/section type="section" >}}
 
 	{{< landing-feature book "What to do next?" "right" >}}
-		<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="{{< relref "/docs/Getting started/" >}}">
+		<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="{{< relref "/docs/Getting started/" >}}">
 					Setup guide
 			</a>
 	{{< /landing-feature >}}

content/ru/_index.html

@@ -5,19 +5,10 @@ linkTitle = "SelfPrivacy"
 +++
 
 {{< blocks/section color="dark" type="section">}}
-	<div class="row">
+	<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
 		<div class="col-xs-12 col-md-4">
 			<div class="container rounded">
-				<div id="screenshotsCarouselControls" class="carousel slide" data-ride="carousel">
+				<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="carousel">
-					<ol class="carousel-indicators">
-						<li data-target="#screenshotsCarouselControls" data-slide-to="0" class="active"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="1"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="2"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="3"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="4"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="5"></li>
-						<li data-target="#screenshotsCarouselControls" data-slide-to="6"></li>
-					</ol>
 					<div class="carousel-inner rounded">
 						<div class="carousel-item">
 							<img class="d-block w-100" src="/images/screenshots/1-ru.png" alt="Первый слайд">
@@ -40,28 +31,34 @@ linkTitle = "SelfPrivacy"
 						<div class="carousel-item">
 							<img class="d-block w-100" src="/images/screenshots/7-ru.png" alt="Седьмой слайд">
 						</div>
-
 					</div>
-					<a class="carousel-control-prev" href="#screenshotsCarouselControls" role="button"
+					<ol class="carousel-indicators">
-						data-slide="prev">
+						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active"></li>
+						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></li>
+						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="2"></li>
+						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="3"></li>
+						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="4"></li>
+						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="5"></li>
+						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="6"></li>
+					</ol>
+					<button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
 						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
-						<span class="sr-only">Previous</span>
+						<span class="visually-hidden">Назад</span>
-					</a>
+					  </button>
-					<a class="carousel-control-next" href="#screenshotsCarouselControls" role="button"
+					  <button class="carousel-control-next" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="next">
-						data-slide="next">
 						<span class="carousel-control-next-icon" aria-hidden="true"></span>
-						<span class="sr-only">Next</span>
+						<span class="visually-hidden">Далее</span>
-					</a>
+					  </button>					
 				</div>
 			</div>
 		</div>
-		<div class="col-xs-12 col-md-8 my-auto">
+		<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
 			<div class="container my-4">
 				<h1>
 					Приложение SelfPrivacy поможет настроить селфхост-сервисы и управлять ими
 				</h1>
 				<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
-					href="{{< relref "/download">}}">
+					href="{{< relref "/download" >}}">
 					Скачать
 				</a>
 			</div>
@@ -69,12 +66,12 @@ linkTitle = "SelfPrivacy"
 	</div>
 	{{< /blocks/section>}}
 
-	<section class="container-fluid">
+	<section class="container">
-			<div class="row w-100">
+			<div class="w-100">
-				<h2 class="mx-auto text-center">Ваши личные сервисы</h2>
+				<h2 class="mx-auto text-center font-weight-bolder">Ваши личные сервисы</h2>
 			</div>
 
-			<div class="row w-100 mt-5 mb-3">
+			<div class="w-100 mt-5 mb-3">
 				<h3 class="mx-auto text-center">Для серьезных дел</h3>
 			</div>
 
@@ -99,7 +96,7 @@ linkTitle = "SelfPrivacy"
 				</div>
 			</div>
 
-			<div class="row w-100 mt-5 mb-3">
+			<div class="w-100 mt-5 mb-3">
 				<h3 class="mx-auto text-center">Для развлечений и общения</h3>
 			</div>
 
@@ -107,38 +104,36 @@ linkTitle = "SelfPrivacy"
 				<div class="col-md-4 col-xs-12 sp-services-row">
 					{{< landing-service "/images/services/deltachat.svg" "Мессенджер" >}}
 						<p class="card-text">Самый приватный мессенджер — это тот, у которого серверная часть находится
-							под вашим контролем. Это делает DeltaChat
+						под вашим контролем. Это делает DeltaChat
-							приватнее Telegram и Signal.</p>
+						приватнее Telegram и Signal.</p>
-						{{< /landing-service>}}
+					{{< /landing-service>}}
 				</div>
 
 				<div class="col-md-4 col-xs-12 sp-services-row">
 					{{< landing-service "/images/services/pleroma.svg" "Децентрализованная социальная сеть" >}}
 						<p class="card-text">Pleroma — социальная сеть в которой вы решаете, кого заблокировать и что
-							публиковать. Никакой больше рекламы и слежки.</p>
+						публиковать. Никакой больше рекламы и слежки.</p>
-						{{< /landing-service>}}
+					{{< /landing-service>}}
 				</div>
 
 				<div class="col-md-4 col-xs-12 sp-services-row">
 					{{< landing-service "/images/services/jitsi.svg" "Видеоконференция">}}
 						<p class="card-text">Zoom и Google-meet больше не нужны, когда есть Jitsi-meet. Очень простое и
-							удобное решение для видеоконференций.</p>
+						удобное решение для видеоконференций.</p>
-						{{< /landing-service>}}
+					{{< /landing-service>}}
 				</div>
 			</div>
 
 
-			<div class="row w-100 mt-5 mb-3">
+			<div class="w-100 mt-5 mb-3">
 				<h3 class="mx-auto text-center">Для хорошей жизни</h3>
 			</div>
 
 			<div class="row justify-content-md-center">
 				<div class="col-md-4 col-xs-12 sp-services-row">
 					{{< landing-service "/images/services/openconnect.svg" "VPN для друзей и близких" >}}
-				<p class=" card-text">Ни один публичный VPN не может быть приватным, если только он не расположен на вашем сервере.
+						<p class=" card-text">Ни один публичный VPN не может быть приватным, если только он не расположен на вашем сервере.	OpenConnect — подключайте неограниченное количество устройств.</p>
-						OpenConnect — подключайте
+					{{< /landing-service>}}
-						неограниченное количество устройств.</p>
-						{{< /landing-service>}}
 				</div>
 
 				<div class="col-md-4 col-xs-12 sp-services-row">
@@ -146,69 +141,69 @@ linkTitle = "SelfPrivacy"
 						<p class="card-text">Пароли больше не нужно запоминать, копировать между устройствами,
 							придумывать или вводить вручную.</p>
 						<p class="card-text">Bitwarden — надежный менеджер паролей для всех устройств.</p>
-						{{< /landing-service>}}
+					{{< /landing-service>}}
 				</div>
 			</div>
 </section>
 
 <section class="container-fluid">
-	<div class="row w-100">
+	<div class="w-100">
 		<h2 class="mx-auto text-center">Преимущества</h2>
 	</div>
 
-	{{< landing-feature privacy "Приватность">}}
+	{{< landing-feature privacy "Приватность" "-green">}}
 		<p class="card-text">Без регистрации, куков, телеметрии, логов, гугл аналитики и облаков.</p>
 	{{< /landing-feature>}}
 
-	{{< landing-feature zerotrust "Нулевое доверие" "right">}}
+	{{< landing-feature zerotrust "Нулевое доверие" "-blue" "right">}}
 		<p class="card-text">SelfPrivacy разработан по принципу "нулевого доверия", даже к самим разработчикам SelfPrivacy. Это значит, что вы — единственный владелец своих данных.</p>
 	{{< /landing-feature>}}
 
-	{{< landing-feature security "Безопасность">}}
+	{{< landing-feature security "Безопасность" "-purple" >}}
 		<p class="card-text">Открытый код. Вознаграждение $2000 за RCE-уязвимость значительно повышает безопасность в сравнении с обычными self-hosted решениями.</p>
 	{{< /landing-feature>}}
 
-	{{< landing-feature simplicity "Простота" "right">}}
+	{{< landing-feature simplicity "Простота" "-green" "right">}}
 		<p class="card-text">Это работает просто. Без консоли, сложных инструкций, мониторинга и привлечения специалистов.</p>
 	{{< /landing-feature>}}
 
-	{{< landing-feature arrow "Без лицензионных соглашений">}}
+	{{< landing-feature arrow "Без лицензионных соглашений" "-blue" >}}
 		<p class="card-text">Что написано в лицензионных соглашениях, которые вы принимаете, не читая? Там написано, что с вашими данными можно делать что угодно. В SelfPrivacy нет лицензионных соглашений.</p>
 	{{< /landing-feature>}}
 
-	{{< landing-feature coolhack3r "Экономия времени, денег и сил" "right">}}
+	{{< landing-feature coolhack3r "Экономия времени, денег и сил" "-purple" "right">}}
 		<p class="card-text">Как сэкономить $500 или две недели жизни? Столько понадобится времени и денег специалисту, чтобы настроить все самому с нуля?</p>
 		<p class="card-text">Команда SelfPrivacy непрерывно работает, чтобы ускорить и упростить этот процесс до нескольких кликов.</p>
 		<p class="card-text">Теперь создание личного дата-центра под силу любому желающему.</p>
 	{{< /landing-feature>}}
 
-	{{< landing-feature thisisfine "Функционал">}}
+	{{< landing-feature thisisfine "Функционал" "-green">}}
 		<p class="card-text">Ваши данные никуда не пропадут благодаря регулярному автоматическому резервному копированию в отдельный дата-центр.</p>
 	{{< /landing-feature>}}
 
-	{{< landing-feature smartphonecomparison "Независимость" "right" >}}
+	{{< landing-feature smartphonecomparison "Независимость" "-blue" "right" >}}
 		<p class="card-text">Ваши коммуникации в интернете не зависят от Google, Facebook, Amazon и прочих мегакорпораций.</p>
 		<p class="card-text">Ваши сервисы — ваши правила! Вас не заблокируют, не отключат, случайно или по какой-либо другой причине. Ваша инфраструктура и данные всегда останутся с вами.</p>
 	{{< /landing-feature>}}
 
-	{{< landing-feature datactrl "Контроль данных">}}
+	{{< landing-feature datactrl "Контроль данных" "-purple" >}}
 		<p class="card-text">Почему корпорациям так нужны ваши данные? Чтобы больше покупали, чтобы Вы голосовали, как им нужно. В SelfPrivacy ваши данные остаются только у вас.</p>
 	{{< /landing-feature>}}
 </section>
 
 
 <section class="container-fluid">
-<div class="row w-100">
+<div class="w-100">
 	<h2 class="mx-auto text-center">Нас поддерживают</h2>
 </div>
 
-<div class="card sp-supported-by-card h-100">
+<div class="container-fluid">
-	<div class="card-body sp-supported-by-list">
+	<div class="sp-supported-by-list">
 		<a href="https://nlnet.nl/project/SelfPrivacy/" target="_blank" rel="noopener noreferrer">
-			<img class="sp-supperted-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
+			<img class="sp-supported-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
 		</a>
 		<a href="https://privacyaccelerator.org" target="_blank" rel="noopener noreferrer">
-			<img class="sp-supperted-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
+			<img class="sp-supported-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
 		</a>
     </div>
 </div>

content/ru/docs/Getting started/_index.md

@@ -90,7 +90,7 @@ description: >
 
 1. Переходим по [ссылке](https://desec.io/domains), входим в аккаунт.
 2. Нажимаем на **плюс**.
-  
+
 {{< imgproc dns_add_domain Fill "626x287" />}}
 
 3. Вводим ваш домен. Нажимаем **Save**.
@@ -178,7 +178,7 @@ DigitalOcean имеет [хорошую инструкцию](https://docs.digit
 **_API ключи_ — это почти то же самое, что и логин с паролем, только для программы, а не человека.**
 Мобильное приложение SelfPrivacy с их помощью управляет сервисами во всех учётных записях вместо вас. Удобно!
 
-Нам не нужен токен для регистратора домена. Но нам понадобится токен DNS провайдера, чтобы управлять доменомом.
+Нам не нужен токен для регистратора домена. Но нам понадобится токен DNS провайдера, чтобы управлять доменом.
 
 {{< tabpane text=true >}}
   {{% tab "deSEC" %}}
@@ -186,7 +186,7 @@ DigitalOcean имеет [хорошую инструкцию](https://docs.digit
 ### Если вы выбрали deSEC: Как получить токен
 
 1. Авторизуемся в [deSEC](https://desec.io/login)
-  
+
 2. Переходим на страницу [Domains](https://desec.io/domains)
 
 3. Переходим на вкладку **Token management**.
@@ -256,7 +256,7 @@ DigitalOcean имеет [хорошую инструкцию](https://docs.digit
 
 13. Копируем созданный токен.
 
-{{% /tab %}}s
+{{% /tab %}}
 
   {{% tab "DigitalOcean DNS" %}}
 

content/ru/docs/Services/nextcloud.md

@@ -1,52 +0,0 @@
----
-title: "Nextcloud"
-date: 2023-01-11T17:08:23+03:00
-weight: 2
-description: >
-  Швейцарский нож в деле совместной работы
----
-
-Совместная работа - это хранение файлов, документооборот, видеоконференции, календарь общих мероприятий и прочее в этом духе. Как правило, люди склонны доверять личную жизнь и бизнес сторонним сервисам. Однако, есть возможность держать все это на своем сервере. 
-
-Мы выбираем [Nextcloud](https://nextcloud.com/) - свободное программное обеспечение для удобного планирования и хранения файлов. 
-
-- [Официальный сайт проекта](https://nextcloud.com/)
-
-
-## Аутентификация
-
-При создании сервера создается пользователь `admin` Nextcloud с паролем, который вы использовали для
-вашего основного пользователя. 
-
-Для добавления новых пользователей стоит перейти в админ панель управления пользователями, на веб-интерфейсе вашего Nextcloud.
-
-## Рекомендуемые клиенты
-
-- WEB-интерфейс: доступен после настройки сервера SelfPrivacy, по адресу `https://cloud.ВАШ.ДОМЕН`
-- [Официальное приложение](https://nextcloud.com/install/#install-clients) (GNU/Linux, Windows, macOS, Android, iOS)
-
-
-## Как сбросить админ пароль
-
-Для следующих действий вам нужно будет подключиться по ssh к серверу с правами администратора. Минимальное понимание работы командной строки приветствуется ;)
-
-Инструкцию по подключению вы можете [прочитать тут](http://selfprivacy.org/ru/docs/how-to-guides/root_ssh/). 
-
-
-После подключения введите команду:
-
-```nextcloud-occ user:resetpassword admin```
-
-Вас попросят ввести новый пароль, отображение символов будет скрыто.
-
-
-## ЧаВо
-
-### Не работает Nextcloud Updater
-Всё нормально, так и должно быть. Nextcloud обновляется через NixOS. Обновления зависят от нашего NixOS репозитория, всё  происходит без вашего участия.
-
-### Почему я не могу использовать мой Nextcloud в сторонних сервисах?
-Такое может быть, если в стороннем сервере стоит ограничение на привязку только к конкретному инстансу Nextcloud. 
-
-### Стоит ли мне использовать расширение для шифрования своего Nextcloud?
-Мы не рекомендуем. Ключи шифрования будут храниться на сервере, что делает такое шифрование практически бессмысленным. 

content/ru/docs/Services/nextcloud/_index.md

@@ -0,0 +1,126 @@
+---
+title: "Nextcloud"
+date: 2023-01-11T17:08:23+03:00
+description: >
+  Швейцарский нож в деле совместной работы
+---
+
+Совместная работа - это хранение файлов, документооборот, видеоконференции, календарь общих мероприятий и прочее в этом духе. Как правило, люди склонны доверять личную жизнь и бизнес сторонним сервисам. Однако, есть возможность держать все это на своем сервере.
+
+Мы выбираем [Nextcloud](https://nextcloud.com/) - свободное программное обеспечение для удобного планирования и хранения файлов.
+
+- [Официальный сайт проекта](https://nextcloud.com/)
+
+## Аутентификация
+
+При создании сервера создается пользователь `admin` Nextcloud с паролем, который вы использовали для вашего основного пользователя.
+
+Для добавления новых пользователей:
+
+1. Перейдите в админ панель управления пользователями, на веб-интерфейсе вашего Nextcloud.
+
+{{< imgproc nextcloud1 Fill "1275x853" />}}
+
+2. Нажмите кнопку "New user"
+
+{{< imgproc nextcloud2 Fill "1278x415" />}}
+
+## Рекомендуемые клиенты
+
+- WEB-интерфейс: доступен после настройки сервера SelfPrivacy, по адресу `https://cloud.ВАШ.ДОМЕН`
+- [Официальное приложение](https://nextcloud.com/install/#install-clients) (GNU/Linux, Windows, macOS, Android, iOS)
+
+## Как сбросить админ пароль
+
+Для следующих действий вам нужно будет подключиться по ssh к серверу с правами администратора. Минимальное понимание работы командной строки приветствуется ;)
+
+Инструкцию по подключению вы можете [прочитать тут](http://selfprivacy.org/ru/docs/how-to-guides/root_ssh/).
+
+После подключения введите команду:
+
+```nextcloud-occ user:resetpassword admin```
+
+Вас попросят ввести новый пароль, отображение символов будет скрыто.
+
+## ЧаВо
+
+### Не работает Nextcloud Updater
+
+Всё нормально, так и должно быть. Nextcloud обновляется через NixOS. Обновления зависят от нашего NixOS репозитория, всё  происходит без вашего участия.
+
+### Почему я не могу использовать мой Nextcloud в сторонних сервисах?
+
+Такое может быть, если в стороннем сервере стоит ограничение на привязку только к конкретному инстансу Nextcloud.
+
+### Стоит ли мне использовать расширение для шифрования своего Nextcloud?
+
+Мы не рекомендуем. Ключи шифрования будут храниться на сервере, что делает такое шифрование практически бессмысленным.
+
+## Настройка контактов и календаря в web-клиенте Nextcloud
+
+### Дополнение контактов
+
+1. Откройте ваш Nextcloud, справа вверху нажмите на иконку контактов. Далее нажмите на надпись "Install the Contacts app".
+
+{{< imgproc nextcloud_add_contact Fill "1276x610" />}}
+
+2. Нажмите "Download and enable".
+
+{{< imgproc nextcloud_add_contact2 Fill "1280x704" />}}
+
+3. Теперь у вас появился новый пункт в меню.
+
+{{< imgproc nextcloud_add_contact3 Fill "1278x726" />}}
+
+### Дополнение календаря
+
+1. Нажмите на аватарку вашего профиля, справа сверху.
+
+2. В выпадающем меню нажмите "Apps".
+
+3. Вы перешли в магазин дополнений, перейдите в категорию "Organization" и найдите там дополнение "Calendar".
+
+4. Нажмите "Download and enable".
+  
+{{< imgproc nextcloud_add_contact4 Fill "1275x1169" />}}
+
+5. У вас снова появился новый пункт в меню.
+
+{{< imgproc nextcloud_add_contact5 Fill "1281x465" />}}
+
+## Синхронизация Nextcloud на разных устройствах
+
+Скачайте [основное приложение Nextcloud](https://nextcloud.com/install/#install-clients) (GNU/Linux, Windows, macOS, Android, iOS). Оно поможет синхронизировать файлы.
+
+Как настроить синхронизацию контактов и календаря? Инструкции на русском для разных систем и приложений.
+
+- [iOS](https://docs.nextcloud.com/server/latest/user_manual/ru/groupware/sync_ios.html#)
+- [macOS](https://docs.nextcloud.com/server/latest/user_manual/ru/groupware/sync_osx.html)
+- [Windows 10](https://docs.nextcloud.com/server/latest/user_manual/ru/groupware/sync_windows10.html)
+- Android — читайте ниже
+
+- [Thunderbird](https://docs.nextcloud.com/server/latest/user_manual/ru/groupware/sync_thunderbird.html)
+- [KDE Kontact](https://docs.nextcloud.com/server/latest/user_manual/ru/groupware/sync_kde.html)
+- [Рабочий стол GNOME](https://docs.nextcloud.com/server/latest/user_manual/ru/groupware/sync_gnome.html)
+
+# Как синхронизировать Nextcloud c Android смартфоном?
+
+1. Скачайте приложение [DAVx⁵](https://www.davx5.com/download/) на ваше Android устройство, из [F-Droid](https://f-droid.org/de/packages/at.bitfire.davdroid/) или [Google Play Store](https://play.google.com/store/apps/details?id=at.bitfire.davdroid).
+
+2. Войдите в приложение, создайте новую учётную запись кнопкой "плюс".
+
+3. В меню создания аккаунта, выберете последний пункт "Nextcloud".
+
+4. Приложение предложит ввести ссылку на ваш экземпляр Nextcloud. Ссылка должна выглядить по примеру: `https://cloud.ВАШ.ДОМЕН`.
+
+5. Откроется браузер. Вам нужно войти в свой Nextcloud аккаунт, и разрешить доступ.
+
+{{< imgproc nextcloud3 Fill "1134x466" />}}
+
+6. Возвращаемся назад в приложение DAVx⁵. В качестве имени, введите свою почту которая зарегистрирована в настройках аккаунта Nextcloud.
+
+7. В пункте "Метод контактной группы" выберите вариант "Группы являются категориями контактов".
+
+{{< imgproc nextcloud4 Fill "1200x573" />}}
+
+8. Выберите данные, которые вы хотите синхронизировать.

content/ru/download/_index.html

@@ -2,8 +2,6 @@
 title: Скачать
 ---
 
-<!--add blocks of content here to add more sections to the community page -->
-
 {{< blocks/lead>}}
 	<div class="row w-100 my-4">
 		<h1 class="mx-auto text-center w-100">Загрузки</h1>
@@ -23,86 +21,76 @@ title: Скачать
 
 			<div class="row w-100">
 				<div class="col-md-4">
-					<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
+					<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
 						href="https://f-droid.org/en/packages/pro.kherel.selfprivacy/" rel="noopener noreferrer"
 						target="_blank">
 						F-Droid
 					</a>
 				</div>
 				<div class="col-md-4">
-					<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
+					<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
 						href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest"
 						rel="noopener noreferrer" target="_blank">
 						APK файл
 					</a>
 				</div>
 				<div class="col-md-4">
-					<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding disabled"
+					<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
 						href="https://play.google.com/store/apps/details?id=org.selfprivacy.app"
 						rel="noopener noreferrer" target="_blank">
 						Google Play
 					</a>
 				</div>
 				<div class="col-md-12">
-					<a class="btn btn-link w-100" href="https://fdroid.selfprivacy.org/" rel="noopener noreferrer"
+					<a class="w-100 btn btn-link w-100" href="https://fdroid.selfprivacy.org/" rel="noopener noreferrer"
 						target="_blank">
 						Наш F-Droid репозиторий
 					</a>
 				</div>
 			</div>
-
-
 			{{< /blocks/section>}}
 
-				{{< blocks/section color="white" type="section">}}
+			{{< blocks/section color="white" type="section">}}
-					<div class="row w-100">
+				<div class="row w-100">
-						<h1 class="mx-auto text-center w-100">iOS</h1>
+					<h1 class="mx-auto text-center w-100">iOS</h1>
-					</div>
+				</div>
-
+				<div class="row w-100">
-					<div class="row w-100">
+					<h4 class="mx-auto text-center w-100">Ждите скоро...</h4>
-						<h4 class="mx-auto text-center w-100">Ждите скоро...</h4>
+				</div>
-					</div>
+				{{< /blocks/section>}}
-
+					{{< blocks/section type="section" color="dark">}}
-					{{< /blocks/section>}}
+						<div class="row w-100">
-
+							<h1 class="mx-auto text-center w-100">Компьютер</h1>
-						{{< blocks/section type="section" color="dark">}}
+						</div>
-							<div class="row w-100">
+						<div class="row w-100">
-								<h1 class="mx-auto text-center w-100">Компьютер</h1>
+							<div class="col-md-4">
+								<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
+									href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest"
+									rel="noopener noreferrer" target="_blank">
+									Windows
+								</a>
 							</div>
-
+							<div class="col-md-4">
-							<div class="row w-100">
+								<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
-								<div class="col-md-4">
+									href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest"
-									<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
+									rel="noopener noreferrer" target="_blank">
-										href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest"
+									GNU/Linux
-										rel="noopener noreferrer" target="_blank">
+								</a>
-										Windows
-									</a>
-								</div>
-								<div class="col-md-4">
-									<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
-										href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest"
-										rel="noopener noreferrer" target="_blank">
-										GNU/Linux
-									</a>
-								</div>
-								<div class="col-md-4">
-									<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding disabled"
-										href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest"
-										rel="noopener noreferrer" target="_blank">
-										MacOS
-									</a>
-								</div>
 							</div>
-
+							<div class="col-md-4">
-							{{< /blocks/section>}}
+								<a class="w-100 btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding disabled"
-
+									href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest"
-								{{< blocks/section type="section">}}
+									rel="noopener noreferrer" target="_blank">
-
+									MacOS
-									{{< landing-feature book "Что делать дальше то?" "right">}}
+								</a>
-										<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
+							</div>
-											href="{{< relref "/docs/Getting started/">}}">
+						</div>
-											Гайд по установке
+				{{< /blocks/section>}}
-										</a>
+				{{< blocks/section type="section">}}
-										{{< /landing-feature>}}
+					{{< landing-feature book "Что делать дальше то?" "right">}}
-
+						<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
-											{{< /blocks/section>}}
+							href="{{< relref "/docs/Getting started/">}}">
+							Гайд по установке
+						</a>
+				{{< /landing-feature>}}
+				{{< /blocks/section>}}

go.mod

@@ -3,7 +3,6 @@ module github.com/google/docsy-example
 go 1.12
 
 require (
-	github.com/FortAwesome/Font-Awesome v0.0.0-20220831210243-d3a7818c253f // indirect
+	github.com/google/docsy v0.9.1 // indirect
-	github.com/google/docsy v0.5.1 // indirect
+	github.com/google/docsy/dependencies v0.5.1 // indirect
-	github.com/twbs/bootstrap v4.6.2+incompatible // indirect
 )

go.sum

@@ -1,7 +1,8 @@
-github.com/FortAwesome/Font-Awesome v0.0.0-20220831210243-d3a7818c253f h1:bvkUptSRPZBr3Kxuk+bnWCEmQ5MtEJX5fjezyV0bC3g=
 github.com/FortAwesome/Font-Awesome v0.0.0-20220831210243-d3a7818c253f/go.mod h1:IUgezN/MFpCDIlFezw3L8j83oeiIuYoj28Miwr/KUYo=
-github.com/google/docsy v0.5.1 h1:D/ZdFKiE29xM/gwPwQzmkyXhcbQGkReRS6aGrF7lnYk=
+github.com/FortAwesome/Font-Awesome v0.0.0-20240108205627-a1232e345536/go.mod h1:IUgezN/MFpCDIlFezw3L8j83oeiIuYoj28Miwr/KUYo=
-github.com/google/docsy v0.5.1/go.mod h1:maoUAQU5H/d+FrZIB4xg1EVWAx7RyFMGSDJyWghm31E=
+github.com/google/docsy v0.9.1 h1:+jqges1YCd+yHeuZ1BUvD8V8mEGVtPxULg5j/vaJ984=
+github.com/google/docsy v0.9.1/go.mod h1:saOqKEUOn07Bc0orM/JdIF3VkOanHta9LU5Y53bwN2U=
+github.com/google/docsy/dependencies v0.5.1 h1:JVVLjnjC5i7GN2ZXKJ0QDa8UY71JMoqkeKK8CS6R/C4=
 github.com/google/docsy/dependencies v0.5.1/go.mod h1:EDGc2znMbGUw0RW5kWwy2oGgLt0iVXBmoq4UOqstuNE=
-github.com/twbs/bootstrap v4.6.2+incompatible h1:TDa+R51BTiy1wEHSYjmqDb8LxNl/zaEjAOpRE9Hwh/o=
 github.com/twbs/bootstrap v4.6.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
+github.com/twbs/bootstrap v5.2.3+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=

layouts/partials/footer.html

@@ -1,7 +1,7 @@
 {{ $links := .Site.Params.links }}
 <div class="bg-dark pt-4 px-5 pb-5 row sp-footer">
 
-      <div class="col-12 order-last order-md-first py-4">
+      <div class="col-12 py-4">
           <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
             <span class="navbar-brand__logo navbar-logo">
               {{- if ne .Site.Params.ui.navbar_logo false -}}
@@ -52,7 +52,7 @@
         <h3 class="text-secondary">{{ T "footer_download_desktop" }}</h3>
           <ul class="list-unstyled">
             <li><a href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" class="nav-link" rel="noopener noreferrer" target="_blank"><span><i class="fa-brands fa-linux"></i></span> {{ T "footer_download_linux" }}</a></li>
-            <li><a href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" class="nav-link sp-coming-soon" rel="noopener noreferrer" target="_blank"><span><i class="fa-brands fa-windows"></i></span> {{ T "footer_download_windows" }}</a></li>
+            <li><a href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" class="nav-link" rel="noopener noreferrer" target="_blank"><span><i class="fa-brands fa-windows"></i></span> {{ T "footer_download_windows" }}</a></li>
             <li><a href="https://git.selfprivacy.org/kherel/selfprivacy.org.app/releases/latest" class="nav-link sp-coming-soon" rel="noopener noreferrer" target="_blank"><span><i class="fa-brands fa-apple"></i></span> {{ T "footer_download_macos" }}</a></li>
           </ul>
 

layouts/partials/navbar-lang-selector.html

@@ -1,10 +1,12 @@
 {{/* Link directly to documentation etc., if possible. */}}
 {{ $langPage := cond (gt (len .Translations) 0) . .Site.Home }}
-<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<div class="dropdown">
-	<i class="fas fa-globe ml-2"></i>
+	<a role="button" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-</a>
+		<i class="fas fa-globe ms-2"></i>
-<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+	</a>
-	{{ range $langPage.AllTranslations }}
+	<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-	<a class="dropdown-item" href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a>
+		{{ range $langPage.AllTranslations }}
-	{{ end }}
+		<li><a class="dropdown-item" href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a></li>
+		{{ end }}
+	</ul>
 </div>

layouts/shortcodes/justimg.html

@@ -1,2 +0,0 @@
-{{ $original := .Page.Resources.GetMatch (printf "**%s*" (.Get 0)) }}
-<img class="card-img-top rounded-img" src="{{ $original.RelPermalink }}">

layouts/shortcodes/landing-feature.html

@@ -1,30 +1,36 @@
 {{ $illustration := .Page.Resources.GetMatch (printf "**%s*" (.Get 0)) }}
 {{ $title := .Get 1 }}
-{{ $side := .Get 2 }}
+{{ $bg := .Get 2 }}
-<div class="row justify-content-md-center my-2 align-items-center w-100">
+{{ $side := .Get 3 }}
-    {{ if eq $side "right" }}
+{{ if eq $side "right" }}
-        <div class="col-md-8 col-xs-12 my-auto px-5">
+<div class="d-flex flex-column flex-lg-row flex-xl-row justify-content-center align-items-center sp-feature sp-feature{{ $bg }} my-auto">
+        <div class="col-xl-4 col-lg-6 col-md-8 col-xs-12 px-5">
             {{ if $title }}
                 <h2 class="sp-feature-title">{{ $title }}</h2>
             {{ end }}
             {{ .Inner }}
         </div>
         {{ if $illustration }}
-            <object role="img" class="col-md-4 col-xs-12 my-auto d-flex justify-content-center align-items-center card-img-top" type="image/svg+xml" data="{{ $illustration.RelPermalink }}">
+        <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
+            <object role="img" class="my-auto d-flex justify-content-center align-items-center card-img-top" type="image/svg+xml" data="{{ $illustration.RelPermalink }}">
                 <div class="error sp-feature-img">
                     <i class="fa-solid fa-triangle-exclamation"></i>
                 </div>
             </object>
+        </div>
         {{ end }}
     {{ else }}
+<div class="d-flex flex-column-reverse flex-lg-row flex-xl-row justify-content-center align-items-center sp-feature sp-feature{{ $bg }}">
         {{ if $illustration }}
-            <object role="img" class="col-md-4 col-xs-12 my-auto d-flex justify-content-center align-items-center card-img-top" type="image/svg+xml" data="{{ $illustration.RelPermalink }}">
+        <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
+            <object role="img" class="col-lg-4 col-md-6 col-sm-8 col-xs-12 my-auto d-flex justify-content-center align-items-center card-img-top" type="image/svg+xml" data="{{ $illustration.RelPermalink }}">
                 <div class="error sp-feature-img">
                     <i class="fa-solid fa-triangle-exclamation"></i>
                 </div>
             </object>
+        </div>
         {{ end }}
-        <div class="col-md-8 col-xs-12 my-auto px-5">
+        <div class="col-xl-4 col-lg-6 col-md-8 col-xs-12 px-5">
             {{ if $title }}
                 <h2 class="sp-feature-title">{{ $title }}</h2>
             {{ end }}

package.json

@@ -19,6 +19,6 @@
   "devDependencies": {
     "autoprefixer": "^10.4.0",
     "postcss": "^8.3.7",
-    "postcss-cli": "^9.0.2"
+    "postcss-cli": "^9.1.0"
   }
 }