Skip to content

Commit 7e408d1

Browse files
MeFoDyMeFoDy
committedApr 17, 2020
Add CSS cost talk draft
1 parent 643bae2 commit 7e408d1

7 files changed

+276
-0
lines changed
 

‎css-cost/images/load-css-fast-google.jpg

994 KB
Loading

‎css-cost/images/load-css-fast-yandex.jpg

1.44 MB
Loading

‎css-cost/images/load-js-fast-google.jpg

796 KB
Loading

‎css-cost/images/load-js-fast-yandex.jpg

1.79 MB
Loading

‎css-cost/images/wst-mc.jpg

93.1 KB
Loading

‎css-cost/index.html

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
4+
<head>
5+
<title>Дорогая цена стилей</title>
6+
<meta charset="utf-8">
7+
<meta http-equiv="x-ua-compatible" content="ie=edge">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<meta name="description" content="">
10+
<link rel="stylesheet" href="../src/shower/themes/ribbon-3/styles/styles.css">
11+
<link rel="stylesheet" href="../src/highlight/styles/github-gist.css">
12+
<link rel="stylesheet" href="style.css?v=0.0.0">
13+
</head>
14+
15+
<body class="shower list">
16+
17+
<header class="caption">
18+
<h1>Дорогая цена стилей</h1>
19+
<p>
20+
<a href="https://twitter.com/dark_mefody">Никита Дубко</a>, Яндекс
21+
</p>
22+
</header>
23+
24+
25+
<section class="slide clear" id="cover">
26+
<h2 style="font-size: 3em; font-weight: 400;text-shadow: 0 0 2px black;color: var(--yandex-yellow);">Дорогая цена стилей</h2>
27+
<p style="margin-top: 30%; color: white">
28+
<a href="https://twitter.com/dark_mefody" style="color: var(--yandex-red)">Никита Дубко</a>, Яндекс
29+
</p>
30+
</section>
31+
32+
33+
<section class="slide">
34+
<div>
35+
<h2>Кто я?</h2>
36+
<ul>
37+
<li>доброжелюбный бородач</li>
38+
<li>пятый голос подкаста «Веб-стандарты»</li>
39+
<li>редактор ленты новостей по фронтенду</li>
40+
<li>организатор митапов, конференций и воркшопов</li>
41+
<li>разработчик интерфейсов в <span style="color: red;">Я</span>ндекс.Поиске</li>
42+
</ul>
43+
</div>
44+
</section>
45+
46+
47+
<section class="slide clear black">
48+
<img src="./images/wst-mc.jpg" alt="" class="cover">
49+
</section>
50+
51+
52+
<section class="slide">
53+
<h2></h2>
54+
</section>
55+
56+
57+
<section class="slide clear" id="final">
58+
<h2>Спасибо за внимание!</h2>
59+
<a href="https://mefody.dev/talks/css-cost/">mefody.dev/talks/css-cost/</a>
60+
<br>
61+
<a href="https://twitter.com/dark_mefody">@dark_mefody</a>
62+
<br>
63+
<a href="mailto:mefody@yandex-team.ru">mefody@yandex-team.ru</a>
64+
<img src="./images/qr-code.gif" alt="" class="place bottom right" width="300">
65+
</section>
66+
67+
68+
<footer class="badge">
69+
<a href="https://github.com/shower/shower">Сделано в Shower</a>
70+
</footer>
71+
72+
<div class="progress"></div>
73+
74+
<script src="../src/shower/shower.min.js"></script>
75+
<script src="../src/highlight/highlight.pack.js"></script>
76+
<script>hljs.initHighlightingOnLoad();</script>
77+
</body>
78+
79+
</html>

‎css-cost/style.css

+197
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
:root {
2+
--color-inactive: #ddd;
3+
--color-active: orange;
4+
--color-checked: lightsteelblue;
5+
}
6+
7+
@font-face {
8+
font-family: Yandex Sans Text Web;
9+
font-weight: 100;
10+
src: url(../src/shower/themes/yandex2/fonts/yandex-sans-text-web-thin.woff) format("woff")
11+
}
12+
13+
@font-face {
14+
font-family: Yandex Sans Text Web;
15+
font-weight: 300;
16+
src: url(../src/shower/themes/yandex2/fonts/yandex-sans-text-web-light.woff) format("woff")
17+
}
18+
19+
@font-face {
20+
font-family: Yandex Sans Text Web;
21+
font-weight: 400;
22+
src: url(../src/shower/themes/yandex2/fonts/yandex-sans-text-web-regular.woff) format("woff")
23+
}
24+
25+
@font-face {
26+
font-style: italic;
27+
font-family: Yandex Sans Text Web;
28+
font-weight: 400;
29+
src: url(../src/shower/themes/yandex2/fonts/yandex-sans-text-web-regular-italic.woff) format("woff")
30+
}
31+
32+
@font-face {
33+
font-family: Yandex Sans Text Web;
34+
font-weight: 500;
35+
src: url(../src/shower/themes/yandex2/fonts/yandex-sans-text-web-medium.woff) format("woff")
36+
}
37+
38+
@font-face {
39+
font-family: Yandex Sans Text Web;
40+
font-weight: 700;
41+
src: url(../src/shower/themes/yandex2/fonts/yandex-sans-text-web-bold.woff) format("woff")
42+
}
43+
44+
.shadowed {
45+
box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.4);
46+
}
47+
48+
.slide h2, .caption h1 {
49+
font-family: 'Yandex Sans Text Web', 'PT Sans Narrow', sans-serif;
50+
font-weight: 300;
51+
}
52+
53+
.caption {
54+
color: white;
55+
}
56+
57+
.caption a {
58+
color: var(--yandex-yellow);
59+
}
60+
61+
.slide h2 {
62+
color: black;
63+
}
64+
65+
.shower.list {
66+
background: #444;
67+
}
68+
69+
.shower.list .slide.active {
70+
box-shadow: 0 0 5px 1px rgba(0,0,0, 0.5), 0 0 0 20px var(--yandex-yellow), 0 20px 50px rgba(0, 0, 0, 0.3);
71+
}
72+
73+
.slide .shout {
74+
font-size: 3em;
75+
line-height: 1.3;
76+
box-sizing: border-box;
77+
padding-left: 50px;
78+
padding-right: 50px;
79+
}
80+
81+
.slide s, .slide .strike {
82+
text-decoration: none;
83+
position: relative;
84+
}
85+
86+
.slide s::after, .slide .strike::after {
87+
content: '';
88+
display: block;
89+
background-color: var(--yandex-red);
90+
width: 110%;
91+
height: 0.1em;
92+
position: absolute;
93+
top: 50%;
94+
left: -5%;
95+
transform: rotate(-7deg);
96+
}
97+
98+
.slide blockquote::before {
99+
margin: -0.15em 0 0 -0.53em;
100+
color: var(--yandex-yellow);
101+
font-size: 6em;
102+
}
103+
104+
.slide::after {
105+
height: auto;
106+
width: calc(var(--ribbon-size) * 1.5);
107+
background-color: var(--yandex-yellow);
108+
color: black;
109+
background-image: none;
110+
margin-top: 1em;
111+
padding-right: 0.5em;
112+
padding-top: 0;
113+
left: auto;
114+
right: 0;
115+
}
116+
117+
.slide pre code {
118+
line-height: 1.4;
119+
font-size: 0.9em;
120+
}
121+
122+
.slide.title {
123+
background-color: var(--yandex-yellow);
124+
}
125+
126+
.slide.title::after {
127+
content: '';
128+
}
129+
130+
.slide.title h2 {
131+
color: black;
132+
text-align: left;
133+
padding: 0 100px;
134+
box-sizing: border-box;
135+
}
136+
137+
138+
:root {
139+
--yandex-yellow: #FFCC00;
140+
--yandex-blue: #0077FF;
141+
--yandex-red: #FF3333;
142+
}
143+
144+
.shower {
145+
font-family: 'Yandex Sans Text Web', 'PT Sans', sans-serif;
146+
line-height: 1.6;
147+
--color-blue: var(--yandex-yellow);
148+
}
149+
150+
.slide .mark-trigger:not(.active) + * mark {
151+
background: none;
152+
}
153+
154+
.slide .grey {
155+
color: #bbb;
156+
}
157+
158+
.slide ul li:lang(ru)::before {
159+
font-size: 1.4em;
160+
content: '›';
161+
line-height: 1.15em;
162+
color: black;
163+
font-weight: 300;
164+
}
165+
166+
.badge a {
167+
color: black;
168+
}
169+
170+
.slide a {
171+
color: var(--yandex-red);
172+
}
173+
174+
.slide .shout a {
175+
background-image: linear-gradient( to top, rgba(255, 51, 51, 0.6) 0.06em, transparent 0.06em );
176+
}
177+
178+
.danger {
179+
background-color: red;
180+
color: white;
181+
font-size: 0.7em;
182+
display: inline-block;
183+
padding: 0 0.3em;
184+
}
185+
186+
.title-number {
187+
background-color: white;
188+
display: inline-block;
189+
padding: 0 0.3em 0 20em;
190+
color: var(--yandex-blue);
191+
margin: 0 0 0.3em -20em;
192+
font-weight: 400;
193+
}
194+
195+
.slide .title-with-number {
196+
top: 40%;
197+
}

0 commit comments

Comments
 (0)
Please sign in to comment.