SelfPrivacy
/
selfprivacy.org
7
1
Fork 5
Code Issues 11 Pull Requests 4 Releases Activity

add sliding cards effect

pull/102/head
nevfy 2024-01-22 19:01:09 +04:00
parent 33ad44efad
commit 9b6f35391d
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/scss/_styles_project.scss
View File

@ -9,9 +9,6 @@
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.td-sidebar { .td-sidebar {
padding-top: 5rem; padding-top: 5rem;
@ -104,3 +101,16 @@
border: none; border: none;
margin-top: 1rem; margin-top: 1rem;
} }
.sp-feature {
background-color: lightgoldenrodyellow;
position: sticky;
top: 20vh;
height: 60vh;
align-items: center;
}
.sp-advantages-header {
position: sticky;
top: 14vh;
}

2
content/en/_index.html
View File

@ -132,7 +132,7 @@ linkTitle = "SelfPrivacy"
{{< /blocks/section >}} {{< /blocks/section >}}
{{< blocks/section color="100" type="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> <h2 class="mx-auto text-center">Advantages</h2>
</div> </div>

4
layouts/shortcodes/landing-feature.html
View File

@ -2,7 +2,7 @@
{{ $title := .Get 1 }} {{ $title := .Get 1 }}
{{ $side := .Get 2 }} {{ $side := .Get 2 }}
{{ if eq $side "right" }} {{ if eq $side "right" }}
<div class="d-flex flex-column flex-lg-row flex-xl-row justify-content-md-center mt-5 align-items-center"> <div class="d-flex flex-column flex-lg-row flex-xl-row justify-content-md-center pt-5 align-items-center sp-feature">
<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 my-auto px-5">
{{ if $title }} {{ if $title }}
<h2 class="sp-feature-title">{{ $title }}</h2> <h2 class="sp-feature-title">{{ $title }}</h2>
@ -15,7 +15,7 @@
</div> </div>
{{ end }} {{ end }}
{{ else }} {{ else }}
<div class="d-flex flex-column-reverse flex-lg-row flex-xl-row justify-content-md-center mt-5 align-items-center"> <div class="d-flex flex-column-reverse flex-lg-row flex-xl-row justify-content-md-center pt-5 align-items-center sp-feature">
{{ 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 my-auto">
<img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}"> <img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}">