Skip to content

Commit 31f4220

Browse files
espenakespenak
committed
Usable slideshow styling.
1 parent 174abb9 commit 31f4220

7 files changed

Lines changed: 233 additions & 86 deletions

File tree

‎images/assault.png‎

7.81 KB
Loading

‎images/dark_stripes.png‎

1.22 KB
Loading

‎images/office.png‎

2.05 KB
Loading

‎images/rebel.png‎

44.2 KB
Loading

‎index.html‎

Lines changed: 63 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -42,58 +42,71 @@
4242

4343

4444

45-
<div id="imageCarousel" class="carousel slide">
46-
<div class="carousel-inner">
47-
48-
<div class="item active">
49-
<img src="slideshowimages/frontpage.png" alt="">
50-
<div class="container">
51-
<div class="carousel-caption">
52-
<p>
53-
Devilry is a flexible and powerful system for handling electronic deliveries.
54-
</p>
55-
<!--<a class="btn btn-large btn-primary" href="#">Sign up today</a>-->
56-
</div>
57-
</div>
58-
</div>
59-
60-
<div class="item">
61-
<img src="slideshowimages/courseadmin-assignmentoverview.png" alt="">
62-
<div class="container">
63-
<div class="carousel-caption">
64-
<p>
65-
Devilry is a complete tool for course administrators that want to have full control over their assignments, students and examiners.
66-
</p>
67-
</div>
68-
</div>
69-
</div>
70-
71-
<div class="item">
72-
<img src="slideshowimages/opensource.png" alt="">
73-
<div class="container">
74-
<div class="carousel-caption">
75-
<p>
76-
Devilry is powered on the principles of open source
77-
development.
78-
</p>
79-
</div>
80-
</div>
81-
</div>
82-
83-
<div class="item">
84-
<img src="slideshowimages/community.png" alt="">
85-
<div class="container">
86-
<div class="carousel-caption">
87-
<p>An open community is essential for
88-
maintaining the highest level of quality.
89-
</p>
45+
<div class="container">
46+
<div class="row">
47+
<div class="span12">
48+
<div id="imageCarousel" class="carousel slide">
49+
<div class="carousel-inner">
50+
<div class="item active">
51+
<img src="slideshowimages/frontpage.png" alt="">
52+
<div class="container">
53+
<div class="carousel-caption">
54+
<p>
55+
Devilry is a flexible and powerful system for handling electronic deliveries.
56+
</p>
57+
<!--<a class="btn btn-large btn-primary" href="#">Sign up today</a>-->
58+
</div>
59+
</div>
60+
</div>
61+
62+
<div class="item">
63+
<img src="slideshowimages/courseadmin-assignmentoverview.png" alt="">
64+
<div class="container">
65+
<div class="carousel-caption">
66+
<p>
67+
Devilry is a complete tool for course administrators that want to have full control over their assignments, students and examiners.
68+
</p>
69+
</div>
70+
</div>
71+
</div>
72+
73+
<div class="item">
74+
<img src="slideshowimages/opensource.png" alt="">
75+
<div class="container">
76+
<div class="carousel-caption">
77+
<p>
78+
Devilry is powered on the principles of open source
79+
development.
80+
</p>
81+
</div>
82+
</div>
83+
</div>
84+
85+
<div class="item">
86+
<img src="slideshowimages/community.png" alt="">
87+
<div class="container">
88+
<div class="carousel-caption">
89+
<p>An open community is essential for
90+
maintaining the highest level of quality.
91+
</p>
92+
</div>
93+
</div>
94+
</div>
95+
96+
</div>
97+
<div class="carousel-controls">
98+
<ol class="carousel-indicators">
99+
<li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
100+
<li data-target="#imageCarousel" data-slide-to="1"></li>
101+
<li data-target="#imageCarousel" data-slide-to="2"></li>
102+
<li data-target="#imageCarousel" data-slide-to="3"></li>
103+
</ol>
104+
<a class="left carousel-control" href="#imageCarousel" data-slide="prev">&lsaquo;</a>
105+
<a class="right carousel-control" href="#imageCarousel" data-slide="next">&rsaquo;</a>
106+
</div>
107+
</div>
90108
</div>
91-
</div>
92109
</div>
93-
94-
</div>
95-
<a class="left carousel-control" href="#imageCarousel" data-slide="prev">&lsaquo;</a>
96-
<a class="right carousel-control" href="#imageCarousel" data-slide="next">&rsaquo;</a>
97110
</div>
98111
</div>
99112

‎less/header.less‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
#header {
2-
//background-color: #333;
3-
//padding-top: 30px;
4-
//padding-bottom: 30px
2+
background-color: #333;
3+
//background-image: url(../images/office.png);
4+
background-image: url(../images/dark_stripes.png);
5+
padding-top: 30px;
6+
padding-bottom: 30px;
7+
.box-sizing(border-box);
8+
@media (max-width: 767px) { /* Phones to portrait tablet */
9+
margin: 0 -20px 0 -20px;
10+
padding-bottom: 0;
11+
padding-left: 20px;
12+
padding-right: 20px;
13+
}
514
}

‎less/imageCarousel.less‎

Lines changed: 158 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,160 @@
1+
2+
//@imageCarouselCaptionWidth: 400px;
3+
@imageCarouselSidePadding: 20px;
4+
5+
.imageCarouselSizes (@imageCarouselCaptionWidth, @imageWidth) {
6+
.item {
7+
img {
8+
margin-left: @imageCarouselCaptionWidth + 20px;
9+
width: @imageWidth;
10+
}
11+
.box-sizing(border-box);
12+
.carousel-caption {
13+
width: @imageCarouselCaptionWidth;
14+
}
15+
}
16+
17+
.carousel-controls {
18+
width: @imageCarouselCaptionWidth;
19+
}
20+
}
21+
122
#imageCarousel {
2-
display: none;
3-
margin: 20px auto 20px auto;
4-
width: 702px;
5-
height: 429px;
6-
border: 1px solid #eee;
7-
8-
//.container {
9-
//position: relative;
10-
//z-index: 9;
11-
//}
12-
.item {
13-
width: 100%;
14-
height: 100%;
15-
overflow: hidden;
16-
17-
.carousel-caption {
18-
font-size: @baseFontSize * 1.5;
19-
font-weight: 200;
20-
line-height: @baseLineHeight * 1.5;
21-
}
22-
}
23-
24-
.carousel-control {
25-
top: 160px;
26-
margin-top: 0;
27-
//height: 80px;
28-
//margin-top: 0;
29-
//font-size: 120px;
30-
//text-shadow: 0 1px 1px rgba(0,0,0,.4);
31-
//background-color: transparent;
32-
//border: 0;
33-
//z-index: 10;
34-
}
23+
margin: 0;
24+
//height: 450px;
25+
position: relative;
26+
27+
.item {
28+
width: 100%;
29+
height: 100%;
30+
overflow: hidden;
31+
img {
32+
display: block;
33+
//margin-left: @imageCarouselCaptionWidth;
34+
}
35+
.box-sizing(border-box);
36+
.carousel-caption {
37+
position: absolute;
38+
top: 0;
39+
left: 0;
40+
bottom: auto;
41+
//width: @imageCarouselCaptionWidth;
42+
height: 100%;
43+
//background-color: rgba(255, 255, 255, 0.4);
44+
background: none;
45+
.box-sizing(border-box);
46+
padding: 0 @imageCarouselSidePadding 0 @imageCarouselSidePadding;
47+
p {
48+
font-size: 18px;
49+
line-height: 23px;
50+
font-weight: 200;
51+
color: rgba(255, 255, 255, .8);
52+
}
53+
}
54+
}
55+
56+
.carousel-controls {
57+
position: absolute;
58+
bottom: 0;
59+
top: auto;
60+
left: 0;
61+
.box-sizing(border-box);
62+
//background-color: red;
63+
//width: @imageCarouselCaptionWidth;
64+
height: 42px;
65+
ol.carousel-indicators {
66+
position: static;
67+
.box-sizing(border-box);
68+
margin: 0;
69+
padding: 16px 0 0 0;
70+
width: 100%;
71+
text-align: center;
72+
display: block;
73+
width: 100%;
74+
height: 15px;
75+
li {
76+
float: none;
77+
display: inline-block;
78+
}
79+
}
80+
.carousel-control {
81+
position: absolute
82+
top: 0;
83+
left: @imageCarouselSidePadding;
84+
font-size: 120px;
85+
text-shadow: 0 1px 1px rgba(0,0,0,.4);
86+
background-color: transparent;
87+
border: 0;
88+
z-index: 10;
89+
&.right {
90+
right: @imageCarouselSidePadding;
91+
left: auto;
92+
}
93+
}
94+
}
95+
96+
.imageCarouselSizes(@imageCarouselCaptionWidth: 310px, @imageWidth: 605px);
97+
98+
@media (min-width: 1200px) { /* Large desktop */
99+
.imageCarouselSizes(@imageCarouselCaptionWidth: 400px, @imageWidth: 745px);
100+
}
101+
@media (min-width: 768px) and (max-width: 979px) { /* Portrait tablet to landscape and desktop */
102+
.imageCarouselSizes(@imageCarouselCaptionWidth: 245px, @imageWidth: 455px);
103+
}
104+
@media (max-width: 767px) { /* Tablets */
105+
.item {
106+
img {
107+
margin-left: 0;
108+
width: 100%;
109+
}
110+
.carousel-caption {
111+
position: absolute;
112+
top: auto;
113+
left: 0;
114+
bottom: 0;
115+
width: 100%;
116+
height: auto;
117+
.box-sizing(border-box);
118+
padding: 20px 50px 50px 50px;
119+
background-color: rgba(0, 0, 0, 0.8);
120+
p {
121+
text-align: center;
122+
font-size: 18px;
123+
line-height: 23px;
124+
font-weight: 200;
125+
color: rgba(255, 255, 255, .8);
126+
}
127+
}
128+
}
129+
.carousel-controls {
130+
width: 100%;
131+
//top: 0;
132+
bottom: 10px;
133+
.carousel-control {
134+
&.left {
135+
left: 0;
136+
}
137+
&.right {
138+
right: 0;
139+
}
140+
}
141+
}
142+
}
143+
@media (max-width: 500px) { /* Phones */
144+
.item {
145+
.carousel-caption {
146+
padding: 12px 50px 12px 50px;
147+
min-height: 60px;
148+
p {
149+
font-size: 13px;
150+
line-height: 16px;
151+
}
152+
}
153+
}
154+
.carousel-controls {
155+
ol.carousel-indicators {
156+
display: none;
157+
}
158+
}
159+
}
35160
}

0 commit comments

Comments
 (0)