Skip to content

Commit 8353613

Browse files
ttaylordevttaylordev
committed
Sun is working better, there is dirt on the ground, clouds are happy.
1 parent cffd35b commit 8353613

File tree

4 files changed

+113
-43
lines changed

4 files changed

+113
-43
lines changed

‎main/mountain/inputSlider.scss‎

Lines changed: 64 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,38 @@
11
@import "./../variables";
2+
23
////////////////////////////
34
// <----- Trackbar -----> //
45
////////////////////////////
5-
6+
// .sliderWrapper {
7+
// width: 500px;
8+
// margin: 300px 0 0;
9+
// transition: all 1s;
10+
// transform-origin: 50% 50%;
11+
// }
12+
// #sliderSun {
13+
// transition: transform 1s;
14+
// }
15+
// html:active .sliderWrapper {
16+
// transform: rotate(180deg);
17+
// }
18+
// html:active #sliderSun {
19+
// transform: rotate(-180deg);
20+
// }
21+
// input[type=range]:focus::-webkit-slider-thumb {
22+
// background: $moonGrey;
23+
// }
624
input[type=range] {
725
-webkit-appearance: none;
8-
width: 70%;
26+
width: 75%;
927
margin: 2.05px 0;
28+
background: transparent;
29+
1030
}
1131
input[type=range]:focus {
1232
outline: none;
1333
}
14-
input[type=range]::-webkit-slider-runnable-track {
15-
width: 70%;
16-
height: 10.9px;
17-
cursor: pointer;
18-
background: $darkGrey;
19-
}
2034
input[type=range]::-webkit-slider-thumb {
2135
box-shadow: 0 0 0.1px $navFontColor, 0 0 0 $navFontColor;
22-
border: 0 solid rgba(0, 0, 0, 0);
2336
height: 8vw;
2437
width: 8vw;
2538
border-radius: 50%;
@@ -28,29 +41,48 @@ input[type=range]::-webkit-slider-thumb {
2841
-webkit-appearance: none;
2942
margin-top: 1.5em;
3043
}
31-
3244
input[type=range]::-moz-range-thumb {
3345
box-shadow: 0 0 0.1px $navFontColor, 0 0 0 $navFontColor;
34-
border: 0 solid rgba(0, 0, 0, 0);
3546
height: 8vw;
3647
width: 8vw;
3748
border-radius: 50%;
3849
background: $sunYellow;
3950
cursor: pointer;
4051
margin-top: 1.5em;
52+
}
53+
input[type=range]::-ms-thumb {
54+
box-shadow: 0 0 0.1px $navFontColor, 0 0 0 $navFontColor;
55+
height: 8vw;
56+
width: 8vw;
57+
border-radius: 50%;
58+
background: $sunYellow;
59+
cursor: pointer;
60+
margin-top: 1.5em;
61+
}
62+
input[type=range]:focus::-webkit-slider-runnable-track {
63+
// background: rgba(126, 126, 126, 0.9);
64+
background: transparent;
4165

66+
-webkit-transition-timing-function: cubic-bezier(0,0,1,1);
4267
}
68+
input[type=range]::-webkit-slider-runnable-track {
69+
width: 70%;
70+
height: 10.9px;
71+
cursor: pointer;
72+
background: transparent;
4373

44-
input[type=range]:focus::-webkit-slider-runnable-track {
45-
background: rgba(126, 126, 126, 0.9);
74+
// background: $darkGrey;
75+
-webkit-transition-timing-function: cubic-bezier(0,0,1,1);
4676
}
4777
input[type=range]::-moz-range-track {
4878
width: 70%;
4979
height: 10.9px;
5080
cursor: pointer;
51-
box-shadow: 0 0 15px rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
52-
background: $darkGrey;
53-
border: 2.6px solid rgba(152, 152, 152, 0.3) rgba(152, 152, 152, 0.3);
81+
background: transparent;
82+
83+
// box-shadow: 0 0 15px rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
84+
// background: $darkGrey;
85+
// border: 2.6px solid rgba(152, 152, 152, 0.3) rgba(152, 152, 152, 0.3);
5486
}
5587
input[type=range]::-ms-track {
5688
width: 70%;
@@ -61,31 +93,29 @@ input[type=range]::-ms-track {
6193
color: transparent;
6294
}
6395
input[type=range]::-ms-fill-lower {
64-
background: #000000;
65-
border: 2.6px solid rgba(152, 152, 152, 0.3);
96+
// background: #000000;
97+
// border: 2.6px solid rgba(152, 152, 152, 0.3);
6698
border-radius: 13px;
67-
box-shadow: 0 0 15px rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
99+
background: transparent;
100+
101+
// box-shadow: 0 0 15px rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
68102
}
69103
input[type=range]::-ms-fill-upper {
70-
background: $darkGrey;
71-
border: 2.6px solid rgba(152, 152, 152, 0.3);
104+
// background: $darkGrey;
105+
// border: 2.6px solid rgba(152, 152, 152, 0.3);
72106
border-radius: 13px;
73-
box-shadow: 0 0 15px rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
74-
}
75-
input[type=range]::-ms-thumb {
76-
box-shadow: 0 0 0.1px $navFontColor, 0 0 0 $navFontColor;
77-
border: 0 solid rgba(0, 0, 0, 0);
78-
height: 15px;
79-
width: 32px;
80-
border-radius: 5px;
81-
background: $darkBlue;
82-
cursor: pointer;
83-
height: 10.9px;
107+
background: transparent;
108+
109+
// box-shadow: 0 0 15px rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
84110
}
85111
input[type=range]:focus::-ms-fill-lower {
86-
background: $darkGrey;
112+
// background: $darkGrey;
113+
background: transparent;
114+
87115
}
88116
input[type=range]:focus::-ms-fill-upper {
89-
background: rgba(126, 126, 126, 0.9);
117+
// background: rgba(126, 126, 126, 0.9);
118+
background: transparent;
119+
90120
}
91121
// end of trackbar...

‎main/mountain/mountainDirective.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ angular.module( 'myApp' ).directive( 'mountainDirective', function () {
131131
let mSRight = document.getElementById( 'mountainScene-right' );
132132
let bgmLeft = document.getElementById( 'bgMountain-Left' );
133133
let bgmRight = document.getElementById( 'bgMountain-right' );
134+
let bgDirt = document.getElementById('bigDirt');
134135
var sk1 = document.createElement( 'i' );
135136
var gr1 = document.createElement( 'i' );
136137

@@ -160,6 +161,8 @@ angular.module( 'myApp' ).directive( 'mountainDirective', function () {
160161
mSRight.style.borderBottomColor = 'hsl(48, 15%, 40%)';
161162
bgmLeft.style.borderBottomColor = 'rgb( 82, 59, 40 )';
162163
bgmRight.style.borderBottomColor = 'rgb( 103, 95, 63 )';
164+
bgDirt.style.borderColor = 'rgb(66, 59, 45)';
165+
bgDirt.style.boxShadow = '13em -3.4em 1px -2.75em rgb(66, 59, 45)';
163166
sk1.style.backgroundColor = 'rgb(28, 24, 94)';
164167
gr1.style.backgroundColor = 'rgb(35, 48, 20)';
165168

@@ -168,6 +171,7 @@ angular.module( 'myApp' ).directive( 'mountainDirective', function () {
168171
mSRight.rgbColor = mSRight.style.borderBottomColor;
169172
bgmLeft.rgbColor = bgmLeft.style.borderBottomColor;
170173
bgmRight.rgbColor = bgmRight.style.borderBottomColor;
174+
bgDirt.rgbColor = bgDirt.style.borderColor;
171175
sk1.rgbColor = sk1.style.backgroundColor;
172176
gr1.rgbColor = gr1.style.backgroundColor;
173177

@@ -176,6 +180,10 @@ angular.module( 'myApp' ).directive( 'mountainDirective', function () {
176180
mSRight.style.borderBottomColor = daylight( slidePos, mSRight.rgbColor );
177181
bgmLeft.style.borderBottomColor = daylight( slidePos, bgmLeft.rgbColor );
178182
bgmRight.style.borderBottomColor = daylight( slidePos, bgmRight.rgbColor );
183+
bgDirt.style.borderColor = daylight( slidePos, bgDirt.rgbColor );
184+
bgDirt.style.boxShadow = (bgDirt.style.borderColor + '13em -3.4em 1px -2.75em' );
185+
console.log(bgDirt.style);
186+
console.log('what the fuck', bgDirt.style.borderColor);
179187
sk1.style.backgroundColor = daylight( slidePos, sk1.rgbColor );
180188
gr1.style.backgroundColor = daylight( slidePos, gr1.rgbColor );
181189
}
@@ -221,8 +229,6 @@ angular.module( 'myApp' ).directive( 'mountainDirective', function () {
221229
gr1.style.margin = '0px';
222230

223231
// distant horizon
224-
225-
// sun
226232
// moon
227233
// stars
228234

‎main/mountain/mountainStyles.scss‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@import "./../variables";
2-
@import "./inputSlider";
3-
/////////////////////////////
2+
@import "./inputSlider"; /////////////////////////////
43
// --- mountain styles --- //
54
/////////////////////////////
65
#mtn-wrapper {
@@ -78,6 +77,38 @@
7877
// margin-top: 4vh;
7978
z-index: -5;
8079
}
80+
#bigDirt,
81+
#bigDirt:after,
82+
#bigDirt:before {
83+
position: absolute;
84+
width: calc(26vw + 36em);
85+
height: 0;
86+
right: calc(25vw - 13em + 1px);
87+
top: calc(57vh - 4em);
88+
border: 5em solid #423b2d;
89+
border-radius: 60%;
90+
z-index: -7;
91+
}
92+
#bigDirt {
93+
-webkit-box-shadow: 13em -3.4em 1px -2.75em #423b2d;
94+
-moz-box-shadow: 13em -3.4em 1px -2.75em #423b2d;
95+
box-shadow: 13em -3.4em 1px -2.75em #423b2d;
96+
97+
}
98+
#bigDirt:before {}
99+
#bigDirt:after {}
100+
// #smallDirt{
101+
// position: absolute;
102+
// width: calc(20vw + 4em);
103+
// height: 0;
104+
// right: calc(25vw - 13em + 1px);
105+
// top: calc(53vh - 2em);
106+
// border: 70px solid rgb(103, 95, 63)
107+
// border-radius: 60%;
108+
// // margin-bottom: 4vh;
109+
// // margin-top: 4vh;
110+
// z-index: -7;
111+
// }
81112
.home-bottom {
82113
height: 70px;
83114
position: absolute;
@@ -119,7 +150,7 @@
119150
top: 0;
120151
}
121152
.spawnCloudsBtn {
122-
padding-top: 0;
123-
position: absolute;
124-
top: 92px;
153+
padding-top: 0;
154+
position: absolute;
155+
top: 92px;
125156
}

‎main/mountain/mountainTemplate.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<div id="mtn-wrapper">
22

3-
<input id="sliderSun" type="range" min="0" max="24" value="0" step="1" onchange="timePassing(this.value)">
3+
<!-- <div class="sliderWrapper"> -->
4+
<input id="sliderSun" type="range" min="0" max="24" value="0" step="1" onchange="timePassing(this.value)">
5+
<!-- </div> -->
46
<span id="range">0</span>
57
<!-- clouds -->
68
<button type="button" name="spawnClouds" class="spawnCloudsBtn" ng-click="spawnClouds(1)">Spawn Cloud</button>
@@ -17,13 +19,14 @@
1719
<!-- background -->
1820
<button type="button" name="spawnBackground" class="spawnBackgroundBtn" ng-click="spawnBackground(1)">Spawn Background</button>
1921

20-
2122
<!-- Scene at which the entire mountain is generated within -->
2223
<div id="mountainScene-left"></div>
2324
<div id="mountainScene-right"></div>
2425
<div id="bgMountain-Left"></div>
2526
<div id="bgMountain-right"></div>
2627
<div id="mountain-base"></div>
28+
<div id="bigDirt"></div>
29+
<div id="smallDirt"></div>
2730
<div class="cloud"></div>
2831

2932
<a ui-sref="lessons" class="home-bottom">

0 commit comments

Comments
 (0)