fix: width and height

This commit is contained in:
nevfy 2024-04-09 23:00:00 +03:00
parent f3ade3b43c
commit f55a659130
3 changed files with 21 additions and 24 deletions

View File

@ -91,7 +91,7 @@
} }
.sp-supported-by-img { .sp-supported-by-img {
max-height: 5rem; max-width: 15rem;
margin: 1rem; margin: 1rem;
} }
@ -102,9 +102,6 @@
column-gap: 5vw; column-gap: 5vw;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 2rem; margin-top: 2rem;
& > a > img {
max-width: 15vw;
}
} }
a.nav-link.sp-coming-soon { a.nav-link.sp-coming-soon {
@ -135,11 +132,16 @@ body {
row-gap: 0px; row-gap: 0px;
} }
.sp-advantages-header {
position: sticky;
top: 10vh;
margin-bottom: 5rem;
}
.sp-feature { .sp-feature {
position: sticky; position: sticky;
top: 20vh; top: 0;
min-height: 80vh; min-height: 100vh;
align-items: center;
} }
.sp-feature-green { .sp-feature-green {
@ -152,11 +154,6 @@ body {
background-color: #ebe0e8 !important; background-color: #ebe0e8 !important;
} }
.sp-advantages-header {
position: sticky;
top: 14vh;
}
.container-fluid { .container-fluid {
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;

View File

@ -5,7 +5,7 @@ linkTitle = "SelfPrivacy"
+++ +++
{{< blocks/section color="dark" type="section" >}} {{< blocks/section color="dark" type="section" >}}
<div class="row d-flex justify-content-center"> <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="col-xs-12 col-md-4">
<div class="container rounded"> <div class="container rounded">
<div id="screenshotsCarouselControls" class="carousel slide" data-ride="carousel"> <div id="screenshotsCarouselControls" class="carousel slide" data-ride="carousel">
@ -66,11 +66,11 @@ linkTitle = "SelfPrivacy"
{{< /blocks/section >}} {{< /blocks/section >}}
<section class="container"> <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> <h2 class="mx-auto text-center font-weight-bolder">Your personal services</h2>
</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 serious business</h3> <h3 class="mx-auto text-center">For serious business</h3>
</div> </div>
@ -94,7 +94,7 @@ linkTitle = "SelfPrivacy"
</div> </div>
</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> <h3 class="mx-auto text-center">For entertainment and communication</h3>
</div> </div>
@ -119,7 +119,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> <h3 class="mx-auto text-center">For a good life</h3>
</div> </div>
@ -140,7 +140,7 @@ linkTitle = "SelfPrivacy"
</section> </section>
<section class="container-fluid d-flex flex-column sp-advantages"> <section class="container-fluid d-flex flex-column sp-advantages">
<div class="row w-100 sp-advantages-header"> <div class="w-100 sp-advantages-header">
<h2 class="mx-auto text-center">Advantages</h2> <h2 class="mx-auto text-center">Advantages</h2>
</div> </div>

View File

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