Skip to content

Commit 6e71306

Browse files
VincentLoyVincentLoy
committed
Make demo responsive
1 parent 1d89995 commit 6e71306

File tree

3 files changed

+220
-22
lines changed

3 files changed

+220
-22
lines changed

‎css/demo.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/scss/demo.scss

Lines changed: 119 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,19 @@ $color-white: #fff;
1313

1414
$spacing: 20px;
1515

16+
$tablet: "screen and (min-width: 970px)";
17+
1618
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
1719

20+
* {
21+
box-sizing: border-box;
22+
}
23+
1824
body, html {
1925
font-family: 'Lato', sans-serif;
2026
font-weight: 400;
27+
overflow-x: hidden;
28+
font-size: 16px;
2129
}
2230

2331
p {
@@ -27,32 +35,46 @@ p {
2735
}
2836

2937
header {
30-
height: 450px;
3138
display: flex;
3239
align-items: center;
3340
justify-content: center;
3441
background: $color-blue-darken;
3542
border-bottom: 5px solid $color-blue;
43+
padding: $spacing;
44+
45+
@media #{$tablet} {
46+
height: 450px;
47+
}
3648

3749
.header-content {
3850
text-align: center;
51+
3952
h1 {
4053
font-style: italic;
41-
font-size: 60px;
54+
font-size: 2rem;
4255
font-weight: 400;
4356
color: $color-gray-lighten;
57+
58+
@media #{$tablet} {
59+
font-size: 4rem;
60+
}
4461
}
4562

4663
h2 {
47-
font-size: 25px;
64+
font-size: 1.33rem;
4865
color: $color-gray-lighten;
49-
margin: ($spacing * 2) 0 ($spacing * 3) 0;
66+
margin: $spacing 0;
67+
68+
@media #{$tablet} {
69+
font-size: 1.75rem;
70+
margin: ($spacing * 2) 0 ($spacing * 3) 0;
71+
}
5072
}
5173

5274
.repo-buttons {
53-
.button {
54-
margin: 0 $spacing;
55-
}
75+
display: flex;
76+
align-items: center;
77+
justify-content: center;
5678
}
5779
}
5880
}
@@ -64,9 +86,25 @@ header {
6486
text-decoration: none;
6587
padding: $spacing / 2;
6688
transition: 0.1s ease-in-out all;
89+
display: block;
90+
margin: 0 $spacing $spacing $spacing;
91+
92+
span {
93+
display: none;
94+
}
95+
96+
@media #{$tablet} {
97+
margin-bottom: 0;
98+
99+
span {
100+
display: inline;
101+
}
102+
}
67103

68104
> i {
69-
margin-right: $spacing / 2;
105+
@media #{$tablet} {
106+
margin-right: $spacing / 2;
107+
}
70108
}
71109

72110
&:hover {
@@ -76,8 +114,13 @@ header {
76114
}
77115

78116
.container {
79-
width: 960px;
117+
width: 100%;
118+
padding: 0 $spacing;
80119
margin: auto;
120+
121+
@media #{$tablet} {
122+
width: 960px;
123+
}
81124
}
82125

83126
.note {
@@ -89,18 +132,33 @@ header {
89132
}
90133

91134
main {
135+
> section:not(:last-of-type) {
136+
border-bottom: 1px solid $color-blue-darken;
137+
padding-bottom: $spacing;
138+
}
139+
92140
h2 {
93-
font-size: 33px;
141+
font-size: 26px;
94142
color: $color-blue;
95143
font-weight: 700;
96-
margin: $spacing * 2 0;
144+
margin: $spacing 0;
145+
146+
@media #{$tablet} {
147+
font-size: 33px;
148+
margin: $spacing * 2 0;
149+
}
97150
}
98151

99152
h3 {
100-
font-size: 25px;
153+
font-size: 20px;
101154
color: $color-blue;
102155
font-weight: 700;
103-
margin: ($spacing * 2) 0 ($spacing / 2) 0;
156+
margin: $spacing 0;
157+
158+
@media #{$tablet} {
159+
font-size: 25px;
160+
margin: ($spacing * 2) 0;
161+
}
104162

105163
a {
106164
color: $color-blue-lighten;
@@ -110,17 +168,63 @@ main {
110168
}
111169
}
112170
}
171+
172+
a {
173+
font-weight: bold;
174+
text-decoration: none;
175+
color: $color-blue-lighten;
176+
transition: 0.2s ease all;
177+
178+
&:hover {
179+
color: $color-blue-darken;
180+
text-decoration: underline;
181+
}
182+
}
183+
}
184+
185+
.changelog {
186+
187+
h3 {
188+
&:before {
189+
content: "\1d";
190+
display: inline-block;
191+
margin-right: $spacing / 2;
192+
transform: translateY(-2px);
193+
}
194+
195+
&:after {
196+
content: "\1d";
197+
display: inline-block;
198+
margin-left: $spacing / 2;
199+
transform: rotate(180deg);
200+
}
201+
}
202+
203+
ul {
204+
list-style-type: disc;
205+
padding-left: $spacing;
206+
207+
li {
208+
margin-bottom: $spacing / 2;
209+
font-size: 16px;
210+
}
211+
}
113212
}
114213

115214
footer {
116215
background: $color-blue-darken;
117216
color: $color-white;
118217
text-align: center;
119218
padding: $spacing;
120-
margin-top: $spacing;
219+
margin-top: $spacing * 2;
220+
font-weight: 600;
121221

122222
a {
123-
color: $color-blue-lighten;
223+
color: lighten($color-blue-lighten, 25%);
124224
text-decoration: none;
225+
226+
&:hover{
227+
text-decoration: underline;
228+
}
125229
}
126230
}

‎index.html

Lines changed: 100 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head lang="en">
44
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
56
<title>simplyCountdown.js</title>
67
<link href='http://fonts.googleapis.com/css?family=Lato:300,400italic' rel='stylesheet' type='text/css'>
78
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"/>
@@ -19,10 +20,10 @@ <h2>A Tiny Javascript Countdown Library</h2>
1920

2021
<div class="repo-buttons">
2122
<a href="https://github.com/VincentLoy/simplyCountdown.js" class="button">
22-
<i class="fa fa-github"></i> View on GitHub
23+
<i class="fa fa-github"></i> <span>View on GitHub</span>
2324
</a>
2425
<a href="https://github.com/VincentLoy/simplyCountdown.js/archive/master.zip" class="button">
25-
<i class="fa fa-download"></i> Download Sources
26+
<i class="fa fa-download"></i> <span>Download Sources</span>
2627
</a>
2728
</div>
2829
</div>
@@ -46,12 +47,15 @@ <h2>Why another countdown ?</h2>
4647
<section class="getting-started">
4748
<h2>Getting Started</h2>
4849

49-
<h3>install via npm, bower or <a href="https://github.com/VincentLoy/simplyCountdown.js/archive/master.zip">direct download</a></h3>
50+
<h3>install via yarn, npm, <a href="https://github.com/VincentLoy/simplyCountdown.js/archive/master.zip">direct download</a></h3>
5051

5152
<pre>
5253
<code class="language-console">
53-
$ bower install simplycountdown.js
5454
$ npm install simplycountdown.js
55+
56+
// or
57+
58+
$ yarn add simplycountdown.js
5559
</code>
5660
</pre>
5761

@@ -174,15 +178,105 @@ <h3>Custom</h3>
174178
<h3>Inline</h3>
175179
<div class="simply-countdown-inline"></div>
176180
</section>
181+
182+
<section class="changelog">
183+
<h2>Changelog</h2>
184+
185+
<h3>1.4.0</h3>
186+
<ul>
187+
<li>Remove bower support</li>
188+
<li>migrate from LESS to SASS (scss) / for demo and themes</li>
189+
<li>migrate lib from ES5 to a really basic ES6</li>
190+
<li>Remove JSLint support</li>
191+
<li>
192+
Add ESLint support based on customized
193+
[airbnb rules](https://www.npmjs.com/package/eslint-config-airbnb-base)
194+
</li>
195+
</ul>
196+
197+
<h3>1.3.2</h3>
198+
<ul>
199+
<li>
200+
add zeroPad parameter
201+
</li>
202+
<li>
203+
fixed Flash of Unstyled Content
204+
</li>
205+
</ul>
206+
207+
<h3>1.3.1</h3>
208+
<ul>
209+
<li>
210+
clean some code
211+
</li>
212+
<li>
213+
add refresh parameter
214+
</li>
215+
</ul>
216+
217+
<h3>1.3.0</h3>
218+
<ul>
219+
<li>
220+
Add onEnd callback
221+
</li>
222+
</ul>
223+
224+
<h3>1.2.0</h3>
225+
<ul>
226+
<li>
227+
<a href="https://github.com/VincentLoy/simplyCountdown.js/issues/4"
228+
rel="nofollow noopener"
229+
target="_blank">
230+
Resolve #4
231+
</a> - Add UTC support adding enableUtc parameter
232+
</li>
233+
</ul>
234+
235+
<h3>1.1.1</h3>
236+
<ul>
237+
<li>
238+
<a href="https://github.com/VincentLoy/simplyCountdown.js/issues/3"
239+
rel="nofollow noopener"
240+
target="_blank">
241+
Resolve #3
242+
</a> - Remove ID Only compatibility
243+
</li>
244+
</ul>
245+
246+
<h3>1.1.0</h3>
247+
<ul>
248+
<li>
249+
Add hours, minutes, seconds in available settings to set the target Date
250+
</li>
251+
</ul>
252+
253+
<h3>1.0.1</h3>
254+
<ul>
255+
<li>
256+
Fix console error when not using jQuery
257+
</li>
258+
</ul>
259+
260+
<h3>1.0.0</h3>
261+
<ul>
262+
<li>initial release</li>
263+
</ul>
264+
</section>
177265
</main>
178266

179267
<footer>
180-
<p>Made with &#x2764; by <a href="https://github.com/VincentLoy">Vincent Loy</a></p>
268+
<p>
269+
Made with &#x2764; by
270+
<a href="https://github.com/VincentLoy"
271+
target="_blank">
272+
Vincent Loy
273+
</a>
274+
</p>
181275
</footer>
182276

183277
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
184278
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
185-
<script src="dist/simplyCountdown.min.js"></script>
279+
<script src="dev/simplyCountdown.js"></script>
186280
<script>
187281
/**
188282
* WARNING: I set this coundtown to be running until the end of times.

0 commit comments

Comments
 (0)