Eclectic Media Git eclecticmedia.space / 54a3cd4
Added design logic for mobile layout Ariana Giroux 2 months ago
11 changed file(s) with 131 addition(s) and 68 deletion(s). Raw diff Collapse all Expand all
2121
2222 .blog-splitter {
2323 margin-top: 4em;
24 animation-duration: 1.5s;
25 animation-delay: 0.5s;
2426 }
00 #ContactMe {
1 background-color: $dark-grey-transparent;
21 margin: 0;
32 .contact-inner {
43 margin: 4em 0;
54 }
5 @media screen and (max-width: 768px) {
6 hr {
7 display: none;
8 }
9 }
610 }
00 #Demo {
11 margin: 0; padding: 0;
22 // height: 100%;
3 height: 48em;
3 @media screen and (min-width: 768px) {
4 height: 48em;
5 }
46 width: 100%;
57
68 animation-duration: 3s;
2325 top: 50%; left: 50%;
2426 transform: translate(-50%, -50%);
2527 }
28
29 @media screen and (min-width: 768px) {
30 hr {
31 display: none;
32 }
33 }
2634 }
2735
28 .demo-header {
29 position: relative;
30 top: 50%;
31 transform: translateY(-50%);
36 @media screen and (min-width: 768px) {
37 .demo-header {
38 position: relative;
39 top: 50%;
40 transform: translateY(-50%);
41 }
42
43 .demo-body {
44 .btn { width: 100%; }
45 }
3246 }
3347
34 .demo-body {
35 .btn { width: 100%; }
48 .demo-thin {
49 .row {
50 margin: 0; padding: 0;
51 .col-11, .col-1 {
52 margin: 0; padding: 0;
53 }
54 }
55
56 .demo-img {
57 img {
58 max-height: 100%;
59 max-width: 100%;
60 }
61 }
62
63
64 .demo-header {
65 padding: 2rem;
66 }
67 .demo-first {
68 padding: 0 0 0 2rem;
69 }
70 .demo-alt {
71 }
3672 }
73
74 @media screen and (max-width: 768px) {
75 .demo-wide {
76 display: none;
77 }
78 }
79 @media screen and (min-width: 767px) {
80 .demo-thin {
81 display: none;
82 }
83 }
11 height: 28em;
22 background-color: $color1;
33 margin: 0; padding: 0;
4 margin-top: 4em;
4 margin-top: 4rem;
55
66 blockquote {
77 position: relative;
00 <div id="AboutUs" class="row animated fadeIn">
1 <div class="col-3"></div>
2 <div class="col-6">
1 <div class="col-md-3"></div>
2 <div class="col-md-6">
33 {{ body }}
44 </div>
5 <div class="col-3"></div>
5 <div class="col-md-3"></div>
66 </div>
99 {%- with %}
1010 {%- include 'middle.jinja' with context %}
1111 {%- endwith %}
12 <div class="blog-splitter">
12 <div class="blog-splitter animated fadeIn">
1313 {%- with %}
1414 {%- set title='Our most recent blog articles' %}
1515 {%- set img_uri='/static/journal.jpg' %}
1919 {%- with %}
2020 <div id="Blog" class="animated fadeIn">
2121 <div class="row">
22 <div class="col-3"></div>
23 <div class="col-6 content-inner">
22 <div class="col-md-3"></div>
23 <div class="col-md-6 content-inner">
2424 <ul>
2525 {% for item in items %}
2626 <li><a href="/blog/{{ item[1] }}">{{ item[0] }}</a></li>
2929 </ul>
3030 <a class="btn btn-large btn-primary" href="/">Back to the Index</a>
3131 </div>
32 <div class="col-3"></div>
32 <div class="col-md-3"></div>
3333 </div>
3434 </div>
3535 <div class="bottom-spacer" style="height: 5em;"></div>
0 <div id="ContactMe" class="row">
1 <div class="col-3"></div>
2 <div class="col-6 contact-inner">
3 <div class="row">
4 <div class="col-6 contact-left">
5 <p>Phone</p>
6 <p>Email</p>
7 <p>Keybase</p>
8 <p>Fediverse</p>
9 </div>
10 <div class="col-6 contact-right" style='text-align: right;'>
11 <p><a href="tel:3065374120">(306)537-4120</a></p>
12 <p><a href="mailto?ariana.giroux@gmail.com">ariana.giroux@gmail.com</a></p>
13 <p><a href="https://keybase.io/arianagiroux">arianagiroux</a></p>
14 <p><a href="https://fosstodon.org/web/accounts/114879">@EclecticEclipse</a></p>
15 </div>
0 <div id="ContactMe" class="row contact-wide">
1 <div class="col-md-3 col-xs-1"></div>
2 <div class="col-md-6 col-xs-10 contact-inner">
3 <p class="text-left">Phone</p>
4 <p class="text-right"><a href="tel:3065374120">(306)537-4120</a></p>
5 <hr>
6 <p class="text-left">Email</p>
7 <p class="text-right"><a href="mailto?ariana.giroux@gmail.com">ariana.giroux@gmail.com</a></p>
8 <hr>
9 <p class="text-left">Keybase</p>
10 <p class="text-right"><a href="https://keybase.io/arianagiroux">arianagiroux</a></p>
11 <hr>
12 <p class="text-left">Fediverse</p>
13 <p class="text-right"><a href="https://fosstodon.org/web/accounts/114879">@EclecticEclipse</a></p>
1614 </div>
1715 </div>
18 <div class="col-3"></div>
16 <div class="col-md-3"></div>
1917 </div>
00 <div id="Testimonial" class="row animated fadeIn">
1 <div class="col-3"></div>
2 <div class="col-6">
1 <div class="col-md-3"></div>
2 <div class="col-md-6">
33 <blockquote class="blockquote text-center">
44 <p>{{ body }}</p>
55 <footer class="blockquote-footer">Bernard Secker, Owner of <em>Accurate Accounting Services</em></footer>
66 </blockquote>
77 </div>
8 <div class="col-3"></div>
8 <div class="col-md-3"></div>
99 </div>
1010 {%- set content_title='The Open Source Difference' %}
1111 <div id="Content" class="animated fadeInUp">
1212 <div class="row">
13 <div class="col-3"></div>
14 <div class="col-6 content-inner">
13 <div class="col-md-3"></div>
14 <div class="col-md-6 content-inner">
1515 {{ body }}
1616 <a class="btn btn-large btn-primary" href="/blog/">Back to the Blog Index</a>
1717 </div>
18 <div class="col-3"></div>
18 <div class="col-md-3"></div>
1919 </div>
2020 </div>
2121 <div class="bottom-spacer" style="height: 5em;"></div>
00 {% for demo in demos %}
11 {% if loop.cycle('odd', 'even') is eq('even') %}
2 <div id="Demo">
3 <div class="row">
4 <div class="col-8">
5 <img src="{{ demo['img_uri'] }}" alt="a screenshot of the site in question" class="animated fadeIn slick-border">
6 </div>
7 <div class="col-4">
8 <div class="demo-header animated rotateInUpLeft">
9 <h1>{{ demo['title'] }}</h1>
10 <p>{{ demo['tag_line'] }}</p>
11 <p><a class="btn btn-large btn-primary" href="{{ demo['cta_target'] }}">{{ demo['cta_tagline'] }}</a></p>
12 </div>
13 </div>
14 </div>
2 <div id="Demo" class="demo-wide">
3 <div class="row">
4 <div class="col-md-8">
5 <img src="{{ demo['img_uri'] }}" alt="a screenshot of the site in question" class="animated fadeIn slick-border">
6 </div>
7 <hr>
8 <div class="col-md-4">
9 <div class="demo-header animated rotateInUpLeft">
10 <h1>{{ demo['title'] }}</h1>
11 <p>{{ demo['tag_line'] }}</p>
12 <p><a class="btn btn-large btn-primary" href="{{ demo['cta_target'] }}">{{ demo['cta_tagline'] }}</a></p>
13 </div>
14 </div>
15 </div>
1516 </div>
1617 {% else %}
17 <div id="Demo">
18 <div class="row">
19 <div class="col-4">
20 <div class="demo-header animated rotateInUpLeft">
21 <h1>{{ demo['title'] }}</h1>
22 <p>{{ demo['tag_line'] }}</p>
23 <p><a class="btn btn-large btn-primary" href="{{ demo['cta_target'] }}">{{ demo['cta_tagline'] }}</a></p>
24 </div>
25 </div>
26 <div class="col-8">
27 <img src="{{ demo['img_uri'] }}" alt="a screenshot of the site in question" class="animated fadeIn slick-border">
28 </div>
29 </div>
18 <div id="Demo" class="demo-wide">
19 <div class="row">
20 <div class="col-md-4">
21 <div class="demo-header animated rotateInUpLeft">
22 <h1>{{ demo['title'] }}</h1>
23 <p>{{ demo['tag_line'] }}</p>
24 <p><a class="btn btn-large btn-primary" href="{{ demo['cta_target'] }}">{{ demo['cta_tagline'] }}</a></p>
25 </div>
26 </div>
27 <hr>
28 <div class="col-md-8">
29 <img src="{{ demo['img_uri'] }}" alt="a screenshot of the site in question" class="animated fadeIn slick-border">
30 </div>
31 </div>
3032 </div>
3133 {% endif %}
34 <div class="demo-thin{% if loop.first %} demo-first{% else %} demo-alt{% endif %}">
35 <div class="demo-img">
36 <img src="{{ demo['img_uri'] }}" alt="a screenshot of the site in question" class="animated fadeIn">
37 </div>
38 <div class="demo-header animated fadeIn">
39 <h1>{{ demo['title'] }}</h1>
40 <p>{{ demo['tag_line'] }}</p>
41 <p><a class="btn btn-large btn-primary" href="{{ demo['cta_target'] }}">{{ demo['cta_tagline'] }}</a></p>
42 </div>
43 </div>
3244 {% endfor %}
11 <img class="jarallax-img" src="{{ img_uri }}" alt="{{ img_alt }}">
22 {% if title | length > 0 %}
33 <div class="row">
4 <div class="col-3"></div>
5 <div class="col-6 text-center">
4 <div class="col-md-3"></div>
5 <div class="col-md-6 text-center">
66 <h1>
77 {{ title | escape }}
88 </h1>
1717 </div>
1818 {%- endif %}
1919 </div>
20 <div class="col-3"></div>
20 <div class="col-md-3"></div>
2121 </div>
2222 {% endif %}
2323 </div>