toolshed/coopcloud.tech
toolshed/coopcloud.tech
1
0
Fork 2
Code Issues 1 Pull Requests Projects Releases Activity

case studies styling and dividers

Browse Source
This commit is contained in:
femmefaytale 2022-04-29 14:44:11 +01:00
parent e9e07cab49
commit e172696ec1
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
themes/coopcloud.tech/assets/scss/main.scss
View File

@ -280,15 +280,15 @@ footer .separator {
#case_studies-slide-body{ #case_studies-slide-body{
max-height: 1000px; max-height: 1000px;
overflow: hidden; overflow: hidden;
transition: max-height 500ms ease; transition: max-height 1s ease;
-moz-transition: max-height 500ms ease; -moz-transition: max-height 1s ease;
-ms-transition: max-height 500ms ease; -ms-transition: max-height 1s ease;
-o-transition: max-height 500ms ease; -o-transition: max-height 1s ease;
-webkit-transition: max-height 500ms ease; -webkit-transition: max-height 1s ease;
} }
.expanded { .expanded {
height: auto !important; height: auto !important;
max-height: 3000px !important; max-height: 4000px !important;
} }
.contracted { .contracted {
background: linear-gradient(to bottom, rgba(239, 239, 239, 0), rgba(239, 239, 239, 0) 80%, rgba(239, 239, 239, 0.25) 90%, rgba(239, 239, 239, 1)) !important; background: linear-gradient(to bottom, rgba(239, 239, 239, 0), rgba(239, 239, 239, 0) 80%, rgba(239, 239, 239, 0.25) 90%, rgba(239, 239, 239, 1)) !important;
@ -300,3 +300,12 @@ footer .separator {
margin: 10px; margin: 10px;
left: 50%; left: 50%;
} }
// Styling for divider
hr.divider {
border-top: 1px solid #1C1C1C;
border-radius: 3px;
height: 1px;
padding: 0;
}

17
themes/coopcloud.tech/layouts/partials/index/case_studies.html
View File

@ -4,9 +4,16 @@
<div id="case_studies-slide-body"> <div id="case_studies-slide-body">
{{ range $index, $item := .data | shuffle }} {{ range $index, $item := .data | shuffle }}
<div class="columns is-centered my-6 is-vcentered"> {{ if ne $index 0 }}
<div class="columns is-centered is-gapless">
<div class="column is-8">
<hr class="divider">
</div>
</div>
{{ end }}
<div class="columns my-6 is-vcentered">
{{ if eq (mod $index 2) 0 }} {{ if eq (mod $index 2) 0 }}
<div class="column is-one-quarter"> <div class="column is-one-quarter is-offset-1">
<div class="image mx-4"> <div class="image mx-4">
{{ with $item.thumbnail }} {{ with $item.thumbnail }}
<img src="{{ $item.thumbnail }}" class="is-rounded"> <img src="{{ $item.thumbnail }}" class="is-rounded">
@ -15,16 +22,16 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
<div class="column is-size-5 is-widescreen is-full-tablet is-half"> <div class="column is-size-5 is-offset-1 is-widescreen is-full-tablet is-half">
<h2 class="is-uppercase is-size-4 has-text-weight-medium">{{ $item.title | markdownify }}</h2> <h2 class="is-uppercase is-size-4 has-text-weight-medium">{{ $item.title | markdownify }}</h2>
<p>{{ $item.content | markdownify }}</p> <p>{{ $item.content | markdownify }}</p>
</div> </div>
{{ else }} {{ else }}
<div class="column is-size-5 is-widescreen is-full-tablet is-half"> <div class="column is-size-5 is-offset-1 is-widescreen is-full-tablet is-half">
<h2 class="is-uppercase is-size-4 has-text-weight-medium">{{ $item.title | markdownify }}</h2> <h2 class="is-uppercase is-size-4 has-text-weight-medium">{{ $item.title | markdownify }}</h2>
<p>{{ $item.content | markdownify }}</p> <p>{{ $item.content | markdownify }}</p>
</div> </div>
<div class="column is-one-quarter"> <div class="column is-one-quarter is-offset-1">
<div class="image mx-4"> <div class="image mx-4">
{{ with $item.thumbnail }} {{ with $item.thumbnail }}
<img src="{{ $item.thumbnail }}" class="is-rounded"> <img src="{{ $item.thumbnail }}" class="is-rounded">