Differential D14603 Diff 39067 autotests/html/review128925-1.scss.html

Changeset View

Standalone View

View Options

autotests/html/review128925-1.scss.html

Show All 22 Lines
23 23​
24<span style="color:#ff5500;">@charset</span> <span style="color:#bf0303;">&quot;UTF-8&quot;</span>; 24​<span style="color:#ff5500;">@charset</span> <span style="color:#bf0303;">&quot;UTF-8&quot;</span>;
25 25​
26<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;mixins/button&quot;</span>; 26​<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;mixins/button&quot;</span>;
27 27​
28<span style="color:#898887;">// Variable define</span> 28​<span style="color:#898887;">// Variable define</span>
29 29​
30<span style="color:#0057ae;">$image-path</span>: <span style="color:#bf0303;">&quot;../../static/images&quot;</span>; 30​<span style="color:#0057ae;">$image-path</span>: <span style="color:#bf0303;">&quot;../../static/images&quot;</span>;
31<span style="color:#0057ae;">$default-text-color</span>: <span style="color:#b08000;">#333</span> <span style="color:#0057ae;">!default</span>; <span style="color:#898887;">// Default can be overrided</span> 31​<span style="color:#0057ae;">$default-text-color</span>: <span style="color:#aa5500;">#333</span> <span style="color:#0057ae;">!default</span>; <span style="color:#898887;">// Default can be overrided</span>
32<span style="color:#0057ae;">$default-font-size</span>: <span style="color:#b08000;">16px</span> <span style="color:#0057ae;">!default</span>; 32​<span style="color:#0057ae;">$default-font-size</span>: <span style="color:#b08000;">16</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!default</span>;
33<span style="color:#0057ae;">$default-font-family</span>: Roboto, <span style="color:#bf0303;">&quot;Droid Sans&quot;</span>, <span style="color:#b08000;">sans-serif</span>; 33​<span style="color:#0057ae;">$default-font-family</span>: Roboto, <span style="color:#bf0303;">&quot;Droid Sans&quot;</span>, <span style="color:#b08000;">sans-serif</span>;
34<span style="color:#0057ae;">$default-font-weight</span>: <span style="color:#b08000;">400</span>; 34​<span style="color:#0057ae;">$default-font-weight</span>: <span style="color:#b08000;">400</span>;
35<span style="color:#0057ae;">$default-line-height</span>: <span style="color:#0057ae;">$default-font-size</span> * <span style="color:#b08000;">1.8</span>; 35​<span style="color:#0057ae;">$default-line-height</span>: <span style="color:#0057ae;">$default-font-size</span> * <span style="color:#b08000;">1.8</span>;
36<span style="color:#0057ae;">$shadow-transparence</span>: <span style="color:#b08000;">0.25</span>; 36​<span style="color:#0057ae;">$shadow-transparence</span>: <span style="color:#b08000;">0.25</span>;
37<span style="color:#0057ae;">$box-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">3px</span> <span style="color:#644a9b;font-weight:bold;">rgba</span>(<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#0057ae;">$shadow-transparence</span>); 37​<span style="color:#0057ae;">$box-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#0057ae;">$shadow-transparence</span><span style="color:#644a9b;">)</span>;
38<span style="color:#0057ae;">$page-width</span>: <span style="color:#b08000;">100rem</span>; <span style="color:#898887;">// kabab-case</span> 38​<span style="color:#0057ae;">$page-width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">rem</span>; <span style="color:#898887;">// kabab-case</span>
39<span style="color:#0057ae;">$gapOfArticle</span>: <span style="color:#b08000;">20px</span>; <span style="color:#898887;">// camelCase</span> 39​<span style="color:#0057ae;">$gapOfArticle</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>; <span style="color:#898887;">// camelCase</span>
40<span style="color:#0057ae;">$body_background_color</span>: <span style="color:#b08000;">white</span>; <span style="color:#898887;">// snake_case</span> 40​<span style="color:#0057ae;">$body_background_color</span>: <span style="color:#aa5500;">white</span>; <span style="color:#898887;">// snake_case</span>
41 41​
42<span style="color:#898887;">// Mixins</span> 42​<span style="color:#898887;">// Mixins</span>
43 43​
44<span style="color:#ff5500;">@mixin</span> border-radius(<span style="color:#0057ae;">$radius</span>) { 44​<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">border-radius</span>(<span style="color:#0057ae;">$radius</span>) {
45 <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#0057ae;">$radius</span>; 45​ <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#0057ae;">$radius</span>;
46 <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#0057ae;">$radius</span>; 46​ <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#0057ae;">$radius</span>;
47 -ms-border-radius: <span style="color:#0057ae;">$radius</span>; 47​ -ms-border-radius: <span style="color:#0057ae;">$radius</span>;
48 <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">$radius</span>; 48​ <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">$radius</span>;
49} 49​}
50 50​
51<span style="color:#644a9b;">.box</span> { <span style="color:#ff5500;">@include</span> border-radius(<span style="color:#b08000;">10px</span>); } 51​<span style="color:#644a9b;">.box</span> { <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">border-radius(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; }
52 52​
53<span style="color:#898887;">// Nesting</span> 53​<span style="color:#898887;">// Nesting</span>
54 54​
55<span style="color:#006e28;font-weight:bold;">#home-page</span> { 55​<span style="color:#006e28;font-weight:bold;">#home-page</span> {
56 56​
57 header { 57​ header {
58 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">80%</span>; 58​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">80</span><span style="color:#0057ae;">%</span>;
59 <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">auto</span>; 59​ <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span> <span style="color:#644a9b;font-weight:bold;">auto</span>;
60 60​
61 <span style="color:#644a9b;">.cover</span> { 61​ <span style="color:#644a9b;">.cover</span> {
62 <span style="color:#ff5500;">@include</span> border-radius(<span style="color:#b08000;">20px</span>); 62​ <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">border-radius(</span><span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
63 <span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">100%</span>; 63​ <span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
64 64​
65 &amp;<span style="color:#b08000;font-style:italic;">:hover</span> { 65​ &amp;<span style="color:#b08000;font-style:italic;">:hover</span> {
66 <span style="font-weight:bold;">background</span>: <span style="color:#b08000;">#ffffff</span>; 66​ <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">#ffffff</span>;
67 } 67​ }
68 68​
69 <span style="color:#644a9b;">.like-button</span> { 69​ <span style="color:#644a9b;">.like-button</span> {
70 <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$default-font-size</span> * <span style="color:#b08000;">0.8</span>; 70​ <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$default-font-size</span> * <span style="color:#b08000;">0.8</span>;
71 71​
72 <span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300px</span>) and (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">200px</span>) { 72​ <span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span>) <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">200</span><span style="color:#0057ae;">px</span>) {
73 <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$default-font-size</span> * <span style="color:#b08000;">0.8</span>; 73​ <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$default-font-size</span> * <span style="color:#b08000;">0.8</span>;
74 74​
75 <span style="color:#644a9b;">.icon</span> { 75​ <span style="color:#644a9b;">.icon</span> {
76 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">20px</span>; 76​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>;
77 <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">20px</span>; 77​ <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>;
78 } 78​ }
79 } 79​ }
80 80​
81 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> { 81​ <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
82 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>; 82​ <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>;
83 } 83​ }
84 } 84​ }
85 } 85​ }
86 } 86​ }
87} 87​}
88 88​
89<span style="color:#898887;">// Extend and inheritance</span> 89​<span style="color:#898887;">// Extend and inheritance</span>
90 90​
91<span style="color:#644a9b;">.message</span> { 91​<span style="color:#644a9b;">.message</span> {
92 <span style="font-weight:bold;">border</span>: <span style="color:#0057ae;">$border-light</span>; 92​ <span style="font-weight:bold;">border</span>: <span style="color:#0057ae;">$border-light</span>;
93 <span style="font-weight:bold;">background-color</span>: <span style="color:#b08000;">#f0f0f0</span>; 93​ <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#f0f0f0</span>;
94} 94​}
95 95​
96<span style="color:#644a9b;">.message-danger</span> { 96​<span style="color:#644a9b;">.message-danger</span> {
97 <span style="color:#ff5500;">@extend</span> <span style="color:#b08000;">.</span>message; 97​ <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;">.message</span>;
98} 98​}
99 99​
100 100​
101<span style="color:#898887;">// Control structures</span> 101​<span style="color:#898887;">// Control structures</span>
102 102​
103<span style="color:#ff5500;">@mixin</span> does-parent-exist { 103​<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">does-parent-exist</span> {
104 <span style="color:#ff5500;">@if</span> &amp; { 104​ <span style="color:#ff5500;">@if</span> &amp; {
105 &amp;<span style="color:#b08000;font-style:italic;">:hover</span> { 105​ &amp;<span style="color:#b08000;font-style:italic;">:hover</span> {
106 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">red</span>; 106​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
107 } 107​ }
108 } <span style="color:#ff5500;">@else</span> { 108​ } <span style="color:#ff5500;">@else</span> {
109 a { 109​ a {
110 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">red</span>; 110​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
111 } 111​ }
112 } 112​ }
113} 113​}
114 114​
115 115​
116<span style="color:#898887;">// Operators</span> 116​<span style="color:#898887;">// Operators</span>
117 117​
118<span style="color:#644a9b;">.container</span> { <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100%</span>; } 118​<span style="color:#644a9b;">.container</span> { <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>; }
119 119​
120article<span style="color:#0095ff;font-weight:bold;">[role=</span><span style="color:#bf0303;">&quot;main&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> { 120​article<span style="color:#0095ff;font-weight:bold;">[role</span>=<span style="color:#bf0303;">&quot;main&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
121 <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">left</span>; 121​ <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">left</span>;
122 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600px</span> / <span style="color:#b08000;">960px</span> * <span style="color:#b08000;">100%</span>; 122​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
123} 123​}
124 124​
125aside<span style="color:#0095ff;font-weight:bold;">[role=</span><span style="color:#bf0303;">&quot;complementary&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> { 125​aside<span style="color:#0095ff;font-weight:bold;">[role</span>=<span style="color:#bf0303;">&quot;complementary&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
126 <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">right</span>; 126​ <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">right</span>;
127 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300px</span> / <span style="color:#b08000;">960px</span> * <span style="color:#b08000;">100%</span>; 127​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
128} 128​}
129 129​
130 130​
131<span style="color:#898887;">// Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html</span> 131​<span style="color:#898887;">// Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html</span>
132 132​
133<span style="color:#0057ae;">$color1</span>: <span style="color:#644a9b;font-weight:bold;">hsl</span>(<span style="color:#b08000;">120deg</span>, <span style="color:#b08000;">100%</span>, <span style="color:#b08000;">50%</span>); 133​<span style="color:#0057ae;">$color1</span>: <span style="color:#644a9b;">hsl(</span><span style="color:#b08000;">120</span><span style="color:#0057ae;">deg</span>, <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>, <span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span>;
134<span style="color:#0057ae;">$color2</span>: <span style="color:#644a9b;font-weight:bold;">rgb</span>(<span style="color:#0057ae;">$red</span>, <span style="color:#0057ae;">$green</span>, <span style="color:#644a9b;font-weight:bold;">blue</span>(<span style="color:#0057ae;">$color1</span>)); 134​<span style="color:#0057ae;">$color2</span>: <span style="color:#644a9b;">rgb(</span><span style="color:#0057ae;">$red</span>, <span style="color:#0057ae;">$green</span>, <span style="color:#aa5500;">blue</span>(<span style="color:#0057ae;">$color1</span><span style="color:#644a9b;">)</span>);
135<span style="color:#0057ae;">$color3</span>: <span style="color:#644a9b;font-weight:bold;">mix</span>(<span style="color:#0057ae;">$color1</span>, <span style="color:#0057ae;">$color2</span>, [<span style="color:#0057ae;">$weight</span>]); 135​<span style="color:#0057ae;">$color3</span>: <span style="color:#644a9b;">mix(</span><span style="color:#0057ae;">$color1</span>, <span style="color:#0057ae;">$color2</span>, [<span style="color:#0057ae;">$weight</span>]<span style="color:#644a9b;">)</span>;
136 136​
137 137​
138<span style="color:#898887;">// Properties</span> 138​<span style="color:#898887;">// Properties</span>
139 139​
140html, body { 140​html, body {
141 <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Droid Sans&quot;</span>, Arial, <span style="color:#b08000;">sans-serif</span>; 141​ <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Droid Sans&quot;</span>, Arial, <span style="color:#b08000;">sans-serif</span>;
142 <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">11pt</span>; 142​ <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">11</span><span style="color:#0057ae;">pt</span>;
143 <span style="font-weight:bold;">line-height</span>: <span style="color:#b08000;">1.5em</span>; 143​ <span style="font-weight:bold;">line-height</span>: <span style="color:#b08000;">1.5</span><span style="color:#0057ae;">em</span>;
144 <span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300px</span> + <span style="color:#0057ae;">$page-width</span> - <span style="color:#0057ae;">$gap</span> / <span style="color:#b08000;">2</span>; 144​ <span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span> + <span style="color:#0057ae;">$page-width</span> - <span style="color:#0057ae;">$gap</span> / <span style="color:#b08000;">2</span>;
145 <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">$bg_color</span>; 145​ <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">$bg_color</span>;
146 <span style="font-weight:bold;">text-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">2px</span> <span style="color:#644a9b;font-weight:bold;">rgba</span>(<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>, <span style="color:#0057ae;">$transparence</span>); 146​ <span style="font-weight:bold;">text-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>, <span style="color:#0057ae;">$transparence</span><span style="color:#644a9b;">)</span>;
147 <span style="font-weight:bold;">box-sizing</span>: <span style="color:#b08000;">border-box</span>; 147​ <span style="font-weight:bold;">box-sizing</span>: <span style="color:#b08000;">border-box</span>;
148} 148​}
149 149​
150 150​
151<span style="color:#898887;">// Selectors</span> 151​<span style="color:#898887;">// Selectors</span>
152 152​
153blockquote { 153​blockquote {
154 <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span>; 154​ <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span>;
155} 155​}
156 156​
157header <span style="color:#006e28;font-weight:bold;">#logo</span> { 157​header <span style="color:#006e28;font-weight:bold;">#logo</span> {
158 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100px</span>; 158​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>;
159} 159​}
160 160​
161div<span style="color:#006e28;font-weight:bold;">#footer</span> <span style="color:#644a9b;">.link</span> { 161​div<span style="color:#006e28;font-weight:bold;">#footer</span> <span style="color:#644a9b;">.link</span> {
162 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 162​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
163} 163​}
164 164​
165sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span> input<span style="color:#0095ff;font-weight:bold;">[type=</span><span style="color:#bf0303;">&quot;text&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> { 165​sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span> input<span style="color:#0095ff;font-weight:bold;">[type</span>=<span style="color:#bf0303;">&quot;text&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
166 <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">20px</span>; 166​ <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>;
167} 167​}
168 168​
169sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span><span style="color:#b08000;font-style:italic;">:nth-child</span>(2n + 1)<span style="color:#b08000;font-style:italic;">:hover</span> input<span style="color:#0095ff;font-weight:bold;">[class*=</span><span style="color:#bf0303;">&quot;small-&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> { 169​sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span><span style="color:#b08000;font-style:italic;">:nth-child(2n + 1):hover</span> input<span style="color:#0095ff;font-weight:bold;">[class</span>*=<span style="color:#bf0303;">&quot;small-&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
170 <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>; 170​ <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
171} 171​}
172 172​
173 173​
174<span style="color:#898887;">// Media Queries</span> 174​<span style="color:#898887;">// Media Queries</span>
175 175​
176<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> { 176​<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
177 <span style="color:#644a9b;">.container</span> { 177​ <span style="color:#644a9b;">.container</span> {
178 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100%</span>; 178​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
179 } 179​ }
180} 180​}
181 181​
182<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> and (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768px</span>) { 182​<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768</span><span style="color:#0057ae;">px</span>) {
183 <span style="color:#644a9b;">.container</span> { 183​ <span style="color:#644a9b;">.container</span> {
184 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600px</span>; 184​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span>;
185 } 185​ }
186} 186​}
187 187​
188<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> and (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768px</span>) and (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">960px</span>) { 188​<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768</span><span style="color:#0057ae;">px</span>) <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span>) {
189 <span style="color:#644a9b;">.container</span> { 189​ <span style="color:#644a9b;">.container</span> {
190 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">720px</span>; 190​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">720</span><span style="color:#0057ae;">px</span>;
191 } 191​ }
192} 192​}
193 193​
194 194​
195<span style="color:#898887;">// Fontface</span> 195​<span style="color:#898887;">// Fontface</span>
196 196​
197<span style="color:#ff5500;">@font-face</span> { 197​<span style="color:#ff5500;">@font-face</span> {
198 <span style="font-weight:bold;">font-family</span>: MyHelvetica; 198​ <span style="font-weight:bold;">font-family</span>: MyHelvetica;
199 <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;font-weight:bold;">local</span>(<span style="color:#bf0303;">&quot;Helvetica Neue Bold&quot;</span>), 199​ <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">local(</span><span style="color:#bf0303;">&quot;Helvetica Neue Bold&quot;</span><span style="color:#644a9b;">)</span>,
200 <span style="color:#644a9b;font-weight:bold;">local</span>(<span style="color:#bf0303;">&quot;HelveticaNeue-Bold&quot;</span>), 200​ <span style="color:#644a9b;">local(</span><span style="color:#bf0303;">&quot;HelveticaNeue-Bold&quot;</span><span style="color:#644a9b;">)</span>,
201 <span style="color:#644a9b;font-weight:bold;">url</span>(MgOpenModernaBold<span style="color:#b08000;">.</span>ttf); 201​ <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">MgOpenModernaBold.ttf</span><span style="color:#644a9b;">)</span>;
202 <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>; 202​ <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
203} 203​}
204 204​
205<span style="color:#898887;">// Animation (Keyframes)</span> 205​<span style="color:#898887;">// Animation (Keyframes)</span>
206 206​
207<span style="color:#ff5500;">@keyframes</span> slidein { 207​<span style="color:#ff5500;">@keyframes</span> slidein {
208 from { 208​ <span style="color:#b08000;">from</span> {
209 <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100%</span>; 209​ <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
210 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300%</span>; 210​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span>;
211 } 211​ }
212 212​
213 to { 213​ <span style="color:#b08000;">to</span> {
214 <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0%</span>; 214​ <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span>;
215 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100%</span>; 215​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
216 } 216​ }
217} 217​}
218</pre></body></html> 218​</pre></body></html>