Eclectic Media Git eclecticmedia.space / 24dae87
Added a jarallax splitter below About Us - Adds more logic to the jarallax widget - Adds styling to the widget's optional text Ariana Giroux 2 months ago
3 changed file(s) with 47 addition(s) and 52 deletion(s). Raw diff Collapse all Expand all
22 position: relative;
33 z-index: 0;
44 height: 32em;
5
6 .row { height: 100%; }
7
8 .col-6 {
9 background-color: $dark-grey-transparent;
10 }
11
12 h1, p {
13 position: relative;
14 color: white;
15 }
16
17 h1 {
18 top: 50%; left: 50%;
19 transform: translate(-50%, -50%);
20 }
21 p {
22 top: 60%; left: 60%;
23 transform: translate(-60%, -60%);
24 }
525 }
26
627 .jarallax > .jarallax-img {
728 position: absolute;
829 object-fit: cover;
1435 height: 100%;
1536 z-index: -1;
1637 }
17 .jarallax .bottom25-title {
18 background-color: $dark-grey-transparent;
19 box-shadow: 0 0 1em 2em $dark-grey-transparent;
20 }
21
22 .jarallax .jarallax-logo {
23 margin: 0;
24 background-color: $dark-grey-extra-transparent;
25 height: 100%;
26 .col-lg-8 { text-align: center; }
27 }
28
29 .jarallax .jarallax-logo-container {
30 background-color: $dark-grey-transparent;
31 @media only screen and (max-width: 767px) {
32 margin: 0 1em;
33 }
34 border-radius: 0.25em;
35 padding: 0.5em;
36 padding-bottom: 1.5em;
37
38 position: relative;
39 top: 50%;
40 transform: translateY(-50%);
41 img { width: 80%; }
42
43 div > p {
44 font-size: 2em; // MAKE RESPONSIVE!
45 color: $white;
46 }
47 button {
48 border-color: $white;
49 a { color: $white; }
50 font-size: 2em;
51 }
52 }
53 //
54 // .jarallax {
55 // .bottom25-title {
56 // background-color: $dark-grey-extra-transparent;
57 // }
58 // }
1515 {%- with %}
1616 {%- set body=about_us %}
1717 {%- include 'aboutus.jinja' with context %}
18 {%- endwith %}
19 {%- with %}
20 {%- set title='Just a few of our recent projects!' %}
21 {%- set img_uri='/static/coffee-cup.jpg' %}
22 {%- set tag_line='Only the most recently worked on projects are shown' %}
23 {%- include 'widgets/jarallax.jinja' %}
1824 {%- endwith %}
1925 {%- with %}
2026 {%- set demos=[
0 <div data-jarallax data-speed="0.2" class="jarallax" style="height: 100%">
1 <img class="jarallax-img" src="{{ img_uri }}" alt="">
2 <span>
3 {% if title | length > 0 %}
4 <h1>
5 {{ title | escape }}
6 </h1>
7 <p><a class="btn btn-outline-primary" href="#">{{ tag_line | escape }}</a></p>
8 {% endif %}
9 </span>
0 <div data-jarallax data-speed="0.2" class="jarallax" {% if full_size | length > 0 %}style="height: 100%"{% endif %}>
1 <img class="jarallax-img" src="{{ img_uri }}" alt="{{ img_alt }}">
2 {% if title | length > 0 %}
3 <div class="row">
4 <div class="col-3"></div>
5 <div class="col-6 text-center">
6 <h1>
7 {{ title | escape }}
8 </h1>
9 {%- if tag_line | length > 0 %}
10 {%- if tag_button | length > 0 %}
11 <p><a class="btn btn-outline-primary" href="#">{{ tag_line | escape }}</a></p>
12 {% else %}
13 <p><em>{{ tag_line }}</em></p>
14 {% endif %}
15 {%- endif %}
16 </div>
17 <div class="col-3"></div>
18 </div>
19 {% endif %}
1020 </div>