Skip to content

Commit a9c471f

Browse files
makemekmakemek
committed
automatically autoprefix and minify css in src/views/*.css
1 parent 7dba9b8 commit a9c471f

File tree

3 files changed

+346
-0
lines changed

3 files changed

+346
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# Project gitignore
22
src/config/settings.json
33
.env
4+
*.min.*
45

56
# Nodejs gitignore template
67
# Obtained from https://github.com/github/gitignore/blob/master/Node.gitignore

‎gulpfile.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use strict'
2+
3+
const gulp = require('gulp')
4+
const postcss = require('gulp-postcss')
5+
const autoprefixer = require('autoprefixer')
6+
const cleanCSS = require('gulp-clean-css')
7+
const rename = require('gulp-rename')
8+
9+
const css = 'src/views/*.css'
10+
11+
gulp.task('build', ['build:css'])
12+
13+
gulp.task('build:css', () => {
14+
return gulp.src(css)
15+
.pipe(rename({suffix: '.min'}))
16+
.pipe(postcss([autoprefixer()]))
17+
.pipe(cleanCSS())
18+
.pipe(gulp.dest('src/views/public/css'))
19+
})
20+
21+
gulp.task('watch', () => {
22+
gulp.watch(css, ['build:css'])
23+
})

‎src/views/style.css‎

Lines changed: 322 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,322 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
border: 0;
5+
}
6+
7+
/* background gitter fix for IE */
8+
html {
9+
overflow: hidden;
10+
height: 100%;
11+
}
12+
13+
body {
14+
overflow: auto;
15+
height: 100%;
16+
}
17+
/* --------- */
18+
19+
body {
20+
background-color: #eee;
21+
font-family: 'FontAwesome', san-serif;
22+
margin: 0;
23+
}
24+
25+
.clearfix {
26+
clear: both;
27+
}
28+
29+
.container {
30+
overflow: auto;
31+
padding: 0 4%;
32+
background-color: #eee;
33+
}
34+
35+
header {
36+
overflow: auto;
37+
}
38+
39+
#header-inner {
40+
max-width: 1200px;
41+
margin: 0 auto;
42+
}
43+
44+
/* Start Banner */
45+
.banner {
46+
position: relative;
47+
font-size: 2.0em;
48+
text-decoration: none;
49+
overflow: hidden;
50+
}
51+
.cover {
52+
background-attachment: fixed;
53+
position: relative;
54+
overflow: hidden;
55+
height: 100vh;
56+
}
57+
.background {
58+
position: fixed;
59+
z-index: -1;
60+
}
61+
.cloud {
62+
height: auto;
63+
top: 0;
64+
left: 0;
65+
min-height: 100%;
66+
min-width: 1024px;
67+
width: 100%;
68+
}
69+
.kaga {
70+
right: 0%;
71+
top: 5%;
72+
width: auto;
73+
height: 100%;
74+
75+
will-change: transform, opacity;
76+
transform: translate3d(0px,0px,0px);
77+
animation:
78+
fade-in .8s ease-out,
79+
slide-in 1.2s ease,
80+
bounce 3s 1.6s infinite;
81+
}
82+
@keyframes slide-in {
83+
0% { top: 100%; }
84+
70% { top: 0%; }
85+
100% { top: 5%; }
86+
}
87+
@keyframes fade-in {
88+
from { opacity: 0 }
89+
to { opacity: 1 }
90+
}
91+
@keyframes bounce {
92+
50% { transform: translate3d(0px,-20px,0px); }
93+
}
94+
.banner-content-wrapper {
95+
background: linear-gradient(to right, rgba(54,83,156,1) 0%, rgba(54,84,156,0.5) 65%, rgba(54,83,156,0) 100%);
96+
padding: 0 70px 20px 70px;
97+
position: absolute;
98+
bottom: 0%;
99+
height: 100%;
100+
}
101+
.logo {
102+
padding-bottom: 10px;
103+
}
104+
.banner-content {
105+
margin-top: 40%;
106+
width: 100%;
107+
color: #fff;
108+
text-align: center;
109+
text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
110+
}
111+
#launcher {
112+
margin-top: 20px;
113+
filter: drop-shadow(0px 0px 5px #f2e1f2);
114+
}
115+
#launcher:hover {
116+
filter: drop-shadow(0px 0px 15px #f2e1f2);
117+
cursor: pointer;
118+
119+
will-change: transform;
120+
animation: swing-half .5s, swing 3s .5s infinite;
121+
}
122+
@keyframes swing-half {
123+
100% { transform: rotate(-10deg); }
124+
}
125+
@keyframes swing {
126+
0% { transform: rotate(-10deg); }
127+
50% { transform: rotate(10deg); }
128+
100% { transform: rotate(-10deg); }
129+
}
130+
.hr-line {
131+
margin-top: 20px;
132+
border-bottom: 1px solid white;
133+
}
134+
.github {
135+
position: absolute;
136+
top: 85%;
137+
left: 90%;
138+
background-color: rgba(0,0,0,0.6);
139+
border-radius: 20%;
140+
padding: 10px;
141+
color: #fff;
142+
transition: background-color 0.2s ease;
143+
}
144+
.github:hover {
145+
background-color: rgba(0,0,0,0.8);
146+
}
147+
/* End Banner */
148+
149+
/* Start Feature */
150+
.one-third {
151+
width: 30%;
152+
height: 330px;
153+
text-align: center;
154+
background-color: #fff;
155+
border-radius: 40px;
156+
box-shadow: 5px 10px 20px 0px rgba(0,0,0,0.75);
157+
float: left;
158+
padding: 40px 0;
159+
margin: 50px 0;
160+
}
161+
.one-third:nth-child(2) {
162+
margin-left: 5%;
163+
margin-right: 5%;
164+
}
165+
.icon {
166+
font-size: 10em;
167+
color: #2C417C;
168+
}
169+
.one-third h1 {
170+
margin-top: 40px;
171+
}
172+
.one-third p {
173+
width: 80%;
174+
margin: 15px auto;
175+
font-size: 1.25em;
176+
font-weight: 550;
177+
}
178+
.one-third a {
179+
text-decoration: none;
180+
color: #2C417C;
181+
font-weight: 800;
182+
}
183+
.one-third a:hover {
184+
color: #5573c3;
185+
}
186+
/* End Feature */
187+
188+
/* Start Login Modal */
189+
.modal-dialog {
190+
position: fixed;
191+
top: 0;
192+
right: 0;
193+
bottom: 0;
194+
left: 0;
195+
background: rgba(0,0,0,0.8);
196+
z-index: 1;
197+
opacity:0;
198+
pointer-events: none;
199+
}
200+
.modal-dialog:target {
201+
opacity:1;
202+
transition: opacity 400ms ease-in;
203+
pointer-events: auto;
204+
}
205+
.modal-dialog > div {
206+
width: 41%;
207+
position: relative;
208+
margin: 10% auto;
209+
padding: 10px 20px 13px 20px;
210+
border-radius: 10px;
211+
background: #F0F0F0;
212+
background: linear-gradient(#fff, #999);
213+
}
214+
.close {
215+
background: #606061;
216+
color: #FFFFFF;
217+
line-height: 25px;
218+
position: absolute;
219+
right: -12px;
220+
text-align: center;
221+
top: -10px;
222+
width: 24px;
223+
text-decoration: none;
224+
font-weight: bold;
225+
border-radius: 12px;
226+
box-shadow: 1px 1px 3px #000;
227+
}
228+
.close:hover { background: #00d9ff; }
229+
230+
/* -- Start Tabs -- */
231+
.modal-dialog input.tabs, .modal-dialog section {
232+
display: none;
233+
}
234+
.modal-dialog section {
235+
border-top: 1px solid #ddd;
236+
}
237+
label.tabs {
238+
display: inline-block;
239+
margin: 0 0 -1px;
240+
padding: 15px 25px;
241+
font-weight: 600;
242+
text-align: center;
243+
color: #bbb;
244+
border: 1px solid transparent;
245+
}
246+
label.tabs:before {
247+
font-weight: normal;
248+
margin-right: 10px;
249+
}
250+
label.tabs:hover {
251+
color: #888;
252+
cursor: pointer;
253+
}
254+
input:checked + label.tabs {
255+
color: #555;
256+
border: 1px solid #ddd;
257+
border-top: 2px solid orange;
258+
border-bottom: 1px solid #fff;
259+
}
260+
#session:checked ~ #form-session,
261+
#account:checked ~ #form-account {
262+
display: block;
263+
}
264+
/* -- End Tabs -- */
265+
/* -- Start Form -- */
266+
.modal-dialog form {
267+
/*background-color: orange;*/
268+
width: 95%;
269+
padding: 25px 20px;
270+
}
271+
.modal-dialog input,
272+
.modal-dialog textarea {
273+
display: block;
274+
font-size: 1.25em;
275+
margin: 4px 0 25px 0;
276+
border-radius: 10px;
277+
}
278+
.modal-dialog span {
279+
font-size: 1.5em;
280+
font-weight: 600;
281+
}
282+
.modal-dialog input {
283+
padding: 10px 20px;
284+
width: 90%;
285+
}
286+
.modal-dialog button[type="submit"] {
287+
margin: 0 12%;
288+
width: 70%;
289+
height: 55px;
290+
border-radius: 10px;
291+
font-weight: 800;
292+
font-size: 1.3em;
293+
letter-spacing: 2px;
294+
background-color: #2280c3;
295+
color: #f5f5f5;
296+
transition: background-color 0.5s ease;
297+
}
298+
.modal-dialog button[type="submit"]:hover {
299+
background-color: #3c9add;
300+
cursor: pointer;
301+
}
302+
/* -- End Form -- */
303+
/* End Login Modal*/
304+
305+
/* Start Footer */
306+
footer.second {
307+
width: 100%;
308+
background: linear-gradient(#5070AD, #284F94);
309+
padding: 15px 0;
310+
letter-spacing: 2px;
311+
line-height: 25px;
312+
border-top: 5px solid hsl(0, 0%, 80%);
313+
}
314+
footer.second p, footer.second a {
315+
color: white;
316+
text-align: center;
317+
text-decoration: none;
318+
}
319+
footer.second a:hover {
320+
color: black;
321+
}
322+
/* End Footer */

0 commit comments

Comments
 (0)