Skip to content

Commit 1134f19

Browse files
author
antoine grelard
committed
added media components to spotlight example pages
1 parent c28499c commit 1134f19

File tree

11 files changed

+64
-45
lines changed

11 files changed

+64
-45
lines changed

‎src/site/_config-grunt.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,4 @@ kramdown:
1616
toc_levels: "2"
1717
include: ['.htaccess']
1818
exclude: ['config.rb']
19-
include_open_html: false
19+
include_open_html: true

‎src/site/_sass/_modules/_latest-spotlights.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666
.latest-spotlights__link {
6767
display: block;
6868
position: relative;
69+
background: #ffffff;
6970
}
7071

7172
.latest-spotlights__link img {
@@ -109,7 +110,7 @@
109110
}
110111

111112
img {
112-
opacity: .5;
113+
opacity: .8;
113114
}
114115
}
115116

‎src/site/_sass/_modules/_spotlight-header.scss

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,26 @@
1515

1616
@include medium {
1717
padding-bottom: $lineHeight*3;
18-
min-height: 312px;
1918
}
2019
}
2120

21+
.spotlight-header__excerpt {
22+
@include type--medium(true);
23+
font-family: $fontHighlight;
24+
}
25+
2226
// If we have a landscape image, we need overflow hidden
2327
.spotlight-header--landscape {
2428
overflow: hidden;
29+
@include medium {
30+
min-height: $lineHeight*18;
31+
}
2532
}
2633

2734

2835
.spotlight-header--portrait {
2936
@include medium {
30-
min-height: 390px;
37+
min-height: $lineHeight*15;
3138
}
3239
}
3340

‎src/site/css/styles.css

Lines changed: 39 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2494,28 +2494,46 @@ li > p {
24942494
/* line 13, ../_sass/_modules/_spotlight-header.scss */
24952495
.spotlight-header {
24962496
padding-bottom: 78px;
2497-
min-height: 312px;
24982497
}
24992498
}
25002499

2501-
/* line 23, ../_sass/_modules/_spotlight-header.scss */
2500+
/* line 21, ../_sass/_modules/_spotlight-header.scss */
2501+
.spotlight-header__excerpt {
2502+
color: #404040;
2503+
font-size: 20px;
2504+
font-weight: 300;
2505+
line-height: 1.3000em;
2506+
/* 26px */
2507+
padding-top: 1.3000em;
2508+
padding-bottom: 0;
2509+
letter-spacing: -0.3px;
2510+
font-family: "Roboto Condensed", Helvetica, sans-serif;
2511+
}
2512+
2513+
/* line 27, ../_sass/_modules/_spotlight-header.scss */
25022514
.spotlight-header--landscape {
25032515
overflow: hidden;
25042516
}
2517+
@media only screen and (min-width: 620px) {
2518+
/* line 27, ../_sass/_modules/_spotlight-header.scss */
2519+
.spotlight-header--landscape {
2520+
min-height: 468px;
2521+
}
2522+
}
25052523

25062524
@media only screen and (min-width: 620px) {
2507-
/* line 28, ../_sass/_modules/_spotlight-header.scss */
2525+
/* line 35, ../_sass/_modules/_spotlight-header.scss */
25082526
.spotlight-header--portrait {
25092527
min-height: 390px;
25102528
}
25112529
}
25122530

2513-
/* line 34, ../_sass/_modules/_spotlight-header.scss */
2531+
/* line 41, ../_sass/_modules/_spotlight-header.scss */
25142532
.spotlight-header__container {
25152533
position: relative;
25162534
}
25172535
@media only screen and (min-width: 800px) {
2518-
/* line 37, ../_sass/_modules/_spotlight-header.scss */
2536+
/* line 44, ../_sass/_modules/_spotlight-header.scss */
25192537
.spotlight-header__container:after {
25202538
content: "\e016";
25212539
font-family: "icons";
@@ -2530,48 +2548,48 @@ li > p {
25302548
}
25312549
}
25322550

2533-
/* line 57, ../_sass/_modules/_spotlight-header.scss */
2551+
/* line 64, ../_sass/_modules/_spotlight-header.scss */
25342552
.spotlight-header--detail .spotlight-header__container:after {
25352553
display: none;
25362554
}
25372555

2538-
/* line 65, ../_sass/_modules/_spotlight-header.scss */
2556+
/* line 72, ../_sass/_modules/_spotlight-header.scss */
25392557
.spotlight-header__copy {
25402558
position: relative;
25412559
z-index: 2;
25422560
}
25432561

2544-
/* line 70, ../_sass/_modules/_spotlight-header.scss */
2562+
/* line 77, ../_sass/_modules/_spotlight-header.scss */
25452563
.spotlight-header__cta {
25462564
margin-top: 26px;
25472565
}
25482566

2549-
/* line 74, ../_sass/_modules/_spotlight-header.scss */
2567+
/* line 81, ../_sass/_modules/_spotlight-header.scss */
25502568
.spotlight-header__media {
25512569
position: relative;
25522570
}
25532571

25542572
@media only screen and (min-width: 620px) {
2555-
/* line 78, ../_sass/_modules/_spotlight-header.scss */
2573+
/* line 85, ../_sass/_modules/_spotlight-header.scss */
25562574
.spotlight-header__image {
25572575
position: absolute;
25582576
}
25592577
}
2560-
/* line 83, ../_sass/_modules/_spotlight-header.scss */
2578+
/* line 90, ../_sass/_modules/_spotlight-header.scss */
25612579
.spotlight-header--portrait .spotlight-header__image {
25622580
width: 100%;
25632581
max-width: 100%;
25642582
}
25652583
@media only screen and (min-width: 620px) {
2566-
/* line 88, ../_sass/_modules/_spotlight-header.scss */
2584+
/* line 95, ../_sass/_modules/_spotlight-header.scss */
25672585
.spotlight-header--landscape .spotlight-header__image {
25682586
width: auto;
25692587
max-width: none;
25702588
height: 260px;
25712589
}
25722590
}
25732591
@media only screen and (min-width: 800px) {
2574-
/* line 88, ../_sass/_modules/_spotlight-header.scss */
2592+
/* line 95, ../_sass/_modules/_spotlight-header.scss */
25752593
.spotlight-header--landscape .spotlight-header__image {
25762594
height: 364px;
25772595
}
@@ -3804,9 +3822,10 @@ li > p {
38043822
.latest-spotlights__link {
38053823
display: block;
38063824
position: relative;
3825+
background: #ffffff;
38073826
}
38083827

3809-
/* line 71, ../_sass/_modules/_latest-spotlights.scss */
3828+
/* line 72, ../_sass/_modules/_latest-spotlights.scss */
38103829
.latest-spotlights__link img {
38113830
display: block;
38123831
width: 100%;
@@ -3819,7 +3838,7 @@ li > p {
38193838
-webkit-transform: translateZ(0) scale(1, 1);
38203839
}
38213840

3822-
/* line 81, ../_sass/_modules/_latest-spotlights.scss */
3841+
/* line 82, ../_sass/_modules/_latest-spotlights.scss */
38233842
.latest-spotlights__link p {
38243843
position: absolute;
38253844
left: 0;
@@ -3848,7 +3867,7 @@ li > p {
38483867
top: 0;
38493868
left: 0;
38503869
}
3851-
/* line 90, ../_sass/_modules/_latest-spotlights.scss */
3870+
/* line 91, ../_sass/_modules/_latest-spotlights.scss */
38523871
.latest-spotlights__link p:before {
38533872
padding-top: 13px;
38543873
padding-left: 16px;
@@ -3858,17 +3877,17 @@ li > p {
38583877
transition: opacity 0.2s ease-in-out;
38593878
}
38603879

3861-
/* line 103, ../_sass/_modules/_latest-spotlights.scss */
3880+
/* line 104, ../_sass/_modules/_latest-spotlights.scss */
38623881
.latest-spotlights__link:hover p {
38633882
background: #3372df;
38643883
}
3865-
/* line 106, ../_sass/_modules/_latest-spotlights.scss */
3884+
/* line 107, ../_sass/_modules/_latest-spotlights.scss */
38663885
.latest-spotlights__link:hover p:before {
38673886
color: #b7cdf4;
38683887
}
3869-
/* line 111, ../_sass/_modules/_latest-spotlights.scss */
3888+
/* line 112, ../_sass/_modules/_latest-spotlights.scss */
38703889
.latest-spotlights__link:hover img {
3871-
opacity: .5;
3890+
opacity: .8;
38723891
}
38733892

38743893
/**

‎src/site/css/styles.min.css

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

‎src/site/icons/icons.eot

8 Bytes
Binary file not shown.

‎src/site/icons/icons.svg

Lines changed: 1 addition & 11 deletions
Loading

‎src/site/icons/icons.ttf

8 Bytes
Binary file not shown.

‎src/site/icons/icons.woff

128 Bytes
Binary file not shown.

‎src/site/spotlights/example-showcase/index.markdown

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ showcase:
88
collection: showcase
99
---
1010

11-
<header class="spotlight-header spotlight-header--detail">
11+
<header class="spotlight-header spotlight-header--detail spotlight-header--landscape clear">
1212
<div class="spotlight-header__container container">
1313
<nav class="breadcrumbs">
1414
<p>
@@ -17,7 +17,10 @@ collection: showcase
1717
</nav>
1818
<div class="spotlight-header__copy g--half">
1919
<h2 class="xxlarge">Case study title</h2>
20-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, tempora, nesciunt blanditiis quos eaque facere quam vitae similique aliquid atque! Sequi, nemo odio quis nam adipisci repellat aliquid molestiae maxime.</p>
20+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, iste, natus, eius laborum error ad voluptatibus pariatur nihil fugiat repudiandae nostrum alias deserunt nemo quisquam harum. Dolores dolorum tempore voluptatem.</p>
21+
</div>
22+
<div class="spotlight-header__media g--half g--last">
23+
<img src="../../imgs/placeholder--device-landscape.jpg" class="spotlight-header__image">
2124
</div>
2225
</div>
2326
</header>

0 commit comments

Comments
 (0)