Eclectic Media Git eclecticmedia.space / b3b9ebf
Added scss styling for site - Base styling and color palette: eclecticmedia.scss - Footer styling in: _bottom.scss - Card Widget styling in: _carouselCards.scss - Content Page styling in: _content.scss - Demo Widget styling in: _demo.scss - Jarallax Widget styling in: _jarallax.scss - Middle Element styling in: _middle.scss - Palette Styling in: _palette.scss - Top of Page styling in: _top.scss Ariana Giroux 2 months ago
9 changed file(s) with 340 addition(s) and 0 deletion(s). Raw diff Collapse all Expand all
0 /******************************************************************************
1
2 GLOBALS SETUP
3
4 *******************************************************************************/
5
6 /* HSL */
7 $color1: hsla(226%, 60%, 10%, 1);
8 $color2: hsla(288%, 100%, 17%, 1);
9 $color3: hsla(288%, 100%, 34%, 1);
10 $color4: hsla(331%, 100%, 28%, 1);
11 $color5: hsla(357%, 84%, 95%, 1);
12
13 /* RGB */
14 $color1: rgba(10, 17, 40, 1);
15 $color2: rgba(68, 0, 85, 1);
16 $color3: rgba(137, 0, 173, 1);
17 $color4: rgba(142, 0, 69, 1);
18 $color5: rgba(253, 232, 233, 1);
19 $dark-grey: $color1;
20 $dark-grey-transparent: rgba($dark-grey, 0.5);
21 $dark-grey-extra-transparent: rgba($dark-grey, 0.2);
22 // $dark-grey-compliment: #C7C7C6;
23 $white: $color5;
24 // $white-transparent: rgba($white, 0.5);
25 $highlight: $color3;
26 // $highlight-transparent: rgba($highlight, 0.5);
27 $secondary: $color5;
28
29 $theme-colors: (
30 "primary": $color3,
31 "secondary": $color5,
32 "black": $color1,
33 );
34
35 html {
36 height: 100%;
37 width: 100%;
38 }
39
40 body {
41 height: 100%;
42 width: 100%;
43 padding: 0px;
44 margin: 0px;
45
46 // background-color: red; // MAKE ANY GAPS IN DESIGN VERY VISIBLE
47 // position: relative;
48 // font-family: 'Raleway', sans-serif;
49 }
50
51 h1,
52 h2,
53 h3,
54 h4,
55 h5,
56 h6 {
57 // font-family: 'Montserrat', sans-serif;
58 }
59
60 /******************************************************************************
61 UTILITY CLASSES AND SELECTORS
62
63 - #VerticalSeperator
64 - .animated
65 - .parallax
66 - .seperator
67 - .slick-border
68
69 *******************************************************************************/
70
71 // #VerticalSeperator {
72 // height: 2em;
73 // width: 1%;
74 // border-left: 2.5px solid $dark-grey-transparent;
75 // // border: 2.5px solid $dark-grey-transparent;
76 // }
77
78 // .animated { // CHANGE ANIMATION LENGTH GLOBALLY
79 // -webkit-animation-duration: 4s;
80 // animation-duration: 4s;
81 // -webkit-animation-fill-mode: both;
82 // animation-fill-mode: both;
83 // }
84
85 // .seperator .col-8 {
86 // border-top: 1px solid rgba(0, 0, 0, 0.5);
87 // border-radius: 1px;
88 // }
89
90 .slick-border {
91 border-radius: 0px;
92 border: 2.5px solid rgba(0, 0, 0, 0.5);
93 border-color: $highlight;
94 position: relative;
95 padding-right: 0px;
96 padding-left: 0px;
97 }
98
99 /*******************************************************************************
100
101 #TOP AND NAVBAR RESPONSIVE SWITCHER
102
103 *******************************************************************************/
104 // @import 'scss/_navbar.scss';
105 //
106 // @media only screen and (max-width: 767px) {
107 // #Top {
108 // display: none;
109 // }
110 // }
111 // @media only screen and (min-width: 768px) {
112 // #navbar {
113 // display: none;
114 // }
115 // }
116
117 /*******************************************************************************
118
119 #TOP AND NAVBAR RESPONSIVE SWITCHER
120
121 *******************************************************************************/
122 // @import 'scss/_accordian.scss';
123 //
124 // @media only screen and (max-width: 767px) {
125 // #services {
126 // display: none;
127 // }
128 // }
129 // @media only screen and (min-width: 768px) {
130 // #accordion {
131 // display: none;
132 // }
133 // }
134
135 @import 'scss/_carouselCards.scss';
136 @import 'scss/_jarallax.scss';
137 @import 'scss/_demo.scss';
138 @import 'scss/_content.scss';
139 @import 'scss/_top.scss';
140 @import 'scss/_middle.scss';
141 @import 'scss/_bottom.scss';
142 // @import 'scss/_top.scss';
143 // @import 'scss/_bottom_25.scss';
144 // @import 'scss/_wide_info.scss';
145 // @import 'scss/_two_column.scss';
146 // @import 'scss/_img_header.scss';
147 // @import 'scss/_reviews.scss';
148 // @import 'scss/_squeaky_wheel.scss';
149 // @import 'scss/_contact_footer.scss';
150 // @import 'scss/_carousel-services.scss';
151 @import "node_modules/bootstrap/scss/bootstrap";
0 #Footer {
1 bottom: 0;
2 position: fixed;
3 text-align: center;
4 width: 100%;
5 height: 5em;
6 animation-duration: 5s;
7 animation-delay: 0.5s;
8 background-color: $color1;
9 p {
10 color: $white;
11 }
12 }
13
14 .bottom-spacer {
15 background-color: $color1;
16 }
0 #carouselCards {
1 margin-top: 4em;
2 padding: 4em 0em;
3 height: 48em;
4 animation-duration: 3s;
5 animation-delay: 1s;
6 background-color: $color1;
7 color: black;
8 .carousel-inner {
9 top: 50%;
10 transform: translateY(-50%);
11 .hero-unit {
12 background-color: $white;
13 padding: 2em;
14 border-radius: 5px;
15 text-align: center;
16 .btn {
17 width: 100%;
18 }
19 }
20 }
21 }
0 #Content {
1 animation-duration: 1.5s;
2 animation-delay: 0.5s;
3 .row {
4 margin: 0;
5 }
6 .content-inner {
7 margin-top: 2em;
8 margin-bottom: 2em;
9 background-color: white;
10 border-radius: 5px;
11 h1 {
12 padding-bottom: 2em;
13 }
14 p {
15 padding: 0.75em 0em;
16 font-size: 1em;
17 }
18 }
19 .btn {
20 width: 100%;
21 padding: 1em 0em;
22 margin: 1em 0em;
23 }
24 }
0 #Demo {
1 margin: 0; padding: 0;
2 // height: 100%;
3 height: 48em;
4 width: 100%;
5
6 animation-duration: 3s;
7
8 .row {
9 height: 100%;
10 width: 100%;
11 margin: 0; padding: 0;
12 }
13
14 .col-8 {
15 padding: 0;
16 }
17
18 img {
19 width: 100%;
20 max-height: 48em;
21 }
22 }
23
24 .demo-header {
25 position: relative;
26 top: 50%;
27 transform: translateY(-50%);
28 }
29
30 .demo-body {
31 .btn { width: 100%; }
32 }
0
1 .jarallax {
2 position: relative;
3 z-index: 0;
4 height: 32em;
5 }
6 .jarallax > .jarallax-img {
7 position: absolute;
8 object-fit: cover;
9 /* support for plugin https://github.com/bfred-it/object-fit-images */
10 font-family: 'object-fit: cover;';
11 top: 0;
12 left: 0;
13 width: 100%;
14 height: 100%;
15 z-index: -1;
16 }
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 // }
0 #Middle {
1 padding-top: 1em;
2
3 p {
4 margin: 0; padding: 0;
5 font-size: 0.75em;
6 }
7 }
0 /* Coolors Exported Palette - coolors.co/0a1128-440055-8900ad-8e0045-fde8e9 */
1
2 /* HSL */
3 $color1: hsla(226%, 60%, 10%, 1);
4 $color2: hsla(288%, 100%, 17%, 1);
5 $color3: hsla(288%, 100%, 34%, 1);
6 $color4: hsla(331%, 100%, 28%, 1);
7 $color5: hsla(357%, 84%, 95%, 1);
8
9 /* RGB */
10 $color1: rgba(10, 17, 40, 1);
11 $color2: rgba(68, 0, 85, 1);
12 $color3: rgba(137, 0, 173, 1);
13 $color4: rgba(142, 0, 69, 1);
14 $color5: rgba(253, 232, 233, 1);
0 #logo {
1 text-align: center;
2 // position: fixed;
3 padding-top: 4em;
4 width: 100%;
5 h1 {
6 font-size: 4em;
7 }
8 }