Skip to content

Commit ecb4347

Browse files
hakimelhakimel
committed
modularize themes and convert them to sass (closes #191)
1 parent 3413d99 commit ecb4347

18 files changed

+805
-624
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
log/*.log
44
tmp/**
55
node_modules/
6+
.sass-cache

‎css/reveal.css

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@charset "UTF-8";
22

3-
/**
3+
/*!
44
* reveal.js
55
* http://lab.hakim.se/reveal-js
66
* MIT licensed
@@ -196,7 +196,7 @@ body {
196196
display: block;
197197
position: relative;
198198
width: 90%;
199-
margin: 10px auto;
199+
margin: 15px auto;
200200

201201
text-align: left;
202202
font-size: 0.55em;
@@ -207,6 +207,9 @@ body {
207207

208208
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
209209
}
210+
.reveal pre code {
211+
padding: 5px;
212+
}
210213

211214
.reveal code {
212215
font-family: monospace;

‎css/theme/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Find out how to install Sass here http://sass-lang.com/, once Sass is installed run the follwing command to start monitoring the source files for changes.
2+
3+
```
4+
sass --watch css/theme/source/:css/theme --style expanded
5+
```

‎css/theme/beige.css

+81-135
Original file line numberDiff line numberDiff line change
@@ -1,190 +1,136 @@
1-
/**
2-
* A beige theme for reveal.js presentations, similar
3-
* to the default theme.
1+
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
2+
/*
3+
* Beige theme for reveal.js.
44
*
55
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
66
*/
7-
8-
/*********************************************
9-
* FONTS
10-
*********************************************/
11-
127
@font-face {
13-
font-family: 'League Gothic';
14-
src: url('../../lib/font/league_gothic-webfont.eot');
15-
src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
16-
url('../../lib/font/league_gothic-webfont.woff') format('woff'),
17-
url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
18-
url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
19-
20-
font-weight: normal;
21-
font-style: normal;
22-
}
23-
24-
.reveal {
25-
font-family: 'Lato', Times, 'Times New Roman', serif;
26-
font-size: 36px;
27-
font-weight: 200;
28-
letter-spacing: -0.02em;
8+
font-family: 'League Gothic';
9+
src: url("../../lib/font/league_gothic-webfont.eot");
10+
src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
11+
font-weight: normal;
12+
font-style: normal;
2913
}
3014

31-
.reveal h1,
32-
.reveal h2,
33-
.reveal h3,
34-
.reveal h4,
35-
.reveal h5,
36-
.reveal h6 {
37-
font-family: 'League Gothic', Impact, sans-serif;
38-
line-height: 0.9em;
39-
letter-spacing: 0.02em;
40-
41-
text-transform: uppercase;
42-
}
43-
44-
4515
/*********************************************
4616
* GLOBAL STYLES
4717
*********************************************/
48-
4918
body {
50-
color: #333;
51-
52-
background: #f7f3de;
53-
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
54-
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1)));
55-
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
56-
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
57-
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
58-
background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
19+
background: white;
20+
background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
21+
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
22+
background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
23+
background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
24+
background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
25+
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
5926
}
6027

61-
::-moz-selection {
62-
background:rgba(79, 64, 28, 0.99);
63-
color: white;
64-
}
65-
::-webkit-selection {
66-
background:rgba(79, 64, 28, 0.99);
67-
color: white;
28+
.reveal {
29+
font-family: "Lato", Times, "Times New Roman", serif;
30+
font-size: 36px;
31+
font-weight: 200;
32+
letter-spacing: -0.02em;
33+
color: #333333;
6834
}
35+
6936
::selection {
70-
background:rgba(79, 64, 28, 0.99);
71-
color: white;
37+
color: white;
38+
background: rgba(79, 64, 28, 0.99);
39+
text-shadow: none;
7240
}
7341

74-
7542
/*********************************************
7643
* HEADERS
7744
*********************************************/
78-
79-
.reveal h1,
80-
.reveal h2,
81-
.reveal h3,
82-
.reveal h4,
83-
.reveal h5,
45+
.reveal h1,
46+
.reveal h2,
47+
.reveal h3,
48+
.reveal h4,
49+
.reveal h5,
8450
.reveal h6 {
85-
margin: 0 0 20px 0;
86-
color: #333;
51+
margin: 0 0 20px 0;
52+
color: #333333;
53+
font-family: "League Gothic", Impact, sans-serif;
54+
line-height: 0.9em;
55+
letter-spacing: 0.02em;
56+
text-transform: uppercase;
57+
text-shadow: none;
8758
}
8859

8960
.reveal h1 {
90-
text-shadow: 0 1px 0 #ccc,
91-
0 2px 0 #c9c9c9,
92-
0 3px 0 #bbb,
93-
0 4px 0 #b9b9b9,
94-
0 5px 0 #aaa,
95-
0 6px 1px rgba(0,0,0,.1),
96-
0 0 5px rgba(0,0,0,.1),
97-
0 1px 3px rgba(0,0,0,.3),
98-
0 3px 5px rgba(0,0,0,.2),
99-
0 5px 10px rgba(0,0,0,.25),
100-
0 20px 20px rgba(0,0,0,.15);
61+
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
10162
}
10263

103-
10464
/*********************************************
10565
* LINKS
10666
*********************************************/
107-
10867
.reveal a:not(.image) {
109-
color: #8b743d;
110-
text-decoration: none;
68+
color: #8b743d;
69+
text-decoration: none;
70+
-webkit-transition: color .15s ease;
71+
-moz-transition: color .15s ease;
72+
-ms-transition: color .15s ease;
73+
-o-transition: color .15s ease;
74+
transition: color .15s ease;
75+
}
11176

112-
-webkit-transition: color .15s ease;
113-
-moz-transition: color .15s ease;
114-
-ms-transition: color .15s ease;
115-
-o-transition: color .15s ease;
116-
transition: color .15s ease;
77+
.reveal a:not(.image):hover {
78+
color: #c0a86e;
79+
text-shadow: none;
80+
border: none;
81+
border-radius: 2px;
11782
}
118-
.reveal a:not(.image):hover {
119-
text-shadow: none;
120-
border: none;
121-
border-radius: 2px;
122-
}
12383

12484
.reveal .roll span:after {
125-
color: #fff;
126-
background: #8b743d;
85+
color: #fff;
86+
background: #564826;
12787
}
12888

129-
13089
/*********************************************
13190
* IMAGES
13291
*********************************************/
133-
13492
.reveal section img {
135-
margin: 30px 0 0 0;
136-
background: rgba(255,255,255,0.12);
137-
border: 4px solid #eee;
138-
139-
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
140-
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
141-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
142-
143-
-webkit-transition: all .2s linear;
144-
-moz-transition: all .2s linear;
145-
-ms-transition: all .2s linear;
146-
-o-transition: all .2s linear;
147-
transition: all .2s linear;
93+
margin: 15px;
94+
background: rgba(255, 255, 255, 0.12);
95+
border: 4px solid #333333;
96+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
97+
-webkit-transition: all .2s linear;
98+
-moz-transition: all .2s linear;
99+
-ms-transition: all .2s linear;
100+
-o-transition: all .2s linear;
101+
transition: all .2s linear;
148102
}
149103

150-
.reveal a:hover img {
151-
background: rgba(255,255,255,0.2);
152-
border-color: #8b743d;
153-
154-
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
155-
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
156-
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
157-
}
158-
104+
.reveal a:hover img {
105+
background: rgba(255, 255, 255, 0.2);
106+
border-color: #8b743d;
107+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
108+
}
159109

160110
/*********************************************
161111
* NAVIGATION CONTROLS
162112
*********************************************/
163-
164113
.reveal .controls a {
165-
color: #fff;
114+
color: #333333;
166115
}
167-
.reveal .controls a.enabled {
168-
color: #8b743d;
169-
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
170-
}
171116

117+
.reveal .controls a.enabled {
118+
color: #c0a86e;
119+
text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3);
120+
}
172121

173122
/*********************************************
174123
* PROGRESS BAR
175124
*********************************************/
176-
177125
.reveal .progress {
178-
background: rgba(0,0,0,0.2);
126+
background: rgba(0, 0, 0, 0.2);
179127
}
180-
.reveal .progress span {
181-
background: #8b743d;
182-
183-
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
184-
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
185-
-ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
186-
-o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
187-
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
188-
}
189-
190128

129+
.reveal .progress span {
130+
background: #8b743d;
131+
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
132+
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
133+
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
134+
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
135+
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
136+
}

0 commit comments

Comments
 (0)