change color

assets/scss/_styles_project.scss

@@ -9,9 +9,6 @@
   }
 }
 
-
-
-
 @media (min-width: 768px)  {
   .td-sidebar {
     padding-top: 5rem;
@@ -104,3 +101,25 @@
   border: none;
   margin-top: 1rem;
 }
+
+.sp-feature {
+  position: sticky;
+  top: 20vh;
+  height: 60vh;
+  align-items: center;
+}
+
+.sp-feature-green {
+  background-color: #e9f1da !important;
+}
+.sp-feature-blue {
+  background-color: #e1eaea !important;
+}
+.sp-feature-purple {
+  background-color: #ebe0e8 !important;
+}
+
+.sp-advantages-header {
+  position: sticky;
+  top: 14vh;
+}

content/en/_index.html

@@ -47,7 +47,7 @@ linkTitle = "SelfPrivacy"
 		<div class="col-xs-12 col-md-8 my-auto">
 			<div class="container my-4">
 				<h1>
-					SelfPrivacy app allows you to set up self-hosted services and manage them.
+					SelfPrivacy app allows you to set up self-hosted services and manage them
 				</h1>
 				<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding" href="{{< relref "/download" >}}">
 					Download
@@ -132,46 +132,46 @@ linkTitle = "SelfPrivacy"
 {{< /blocks/section >}}
 
 {{< blocks/section color="100" type="section" >}}
-	<div class="row w-100">
+	<div class="row 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 >}}
 

layouts/shortcodes/landing-feature.html

@@ -1,26 +1,28 @@
 {{ $illustration := .Page.Resources.GetMatch (printf "**%s*" (.Get 0)) }}
 {{ $title := .Get 1 }}
-{{ $side := .Get 2 }}
-<div class="row justify-content-md-center my-2 align-items-center w-100">
-    {{ if eq $side "right" }}
-        <div class="col-md-8 col-xs-12 my-auto px-5">
+{{ $bg := .Get 2 }}
+{{ $side := .Get 3 }}
+{{ if eq $side "right" }}
+<div class="d-flex flex-column flex-lg-row flex-xl-row justify-content-md-center pt-5 align-items-center sp-feature sp-feature{{ $bg }}">
+        <div class="col-xl-4 col-lg-6 col-md-8 col-xs-12 my-auto px-5">
             {{ if $title }}
                 <h2 class="sp-feature-title">{{ $title }}</h2>
             {{ end }}
             {{ .Inner }}
         </div>
         {{ if $illustration }}
-        <div class="col-md-4 col-xs-12 my-auto">
+        <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12 my-auto">
             <img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}">
         </div>
         {{ end }}
     {{ else }}
+<div class="d-flex flex-column-reverse flex-lg-row flex-xl-row justify-content-md-center pt-5 align-items-center sp-feature sp-feature{{ $bg }}">
         {{ if $illustration }}
-        <div class="col-md-4 col-xs-12 my-auto">
+        <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12 my-auto">
             <img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}">
         </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 my-auto 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"
   }
 }