@@ -10,7 +10,7 @@ $container-max-width: 1000px;
1010
1111@mixin media-max-width ($max-width ) {
1212 @media (max-width : $max-width ) {
13- @content ;
13+ @content ;
1414 }
1515}
1616
@@ -37,12 +37,17 @@ section {
3737 margin : 0 0 20px 0 ;
3838}
3939
40- h1 , h2 , h3 , h4 , h5 , h6 {
40+ h1 ,
41+ h2 ,
42+ h3 ,
43+ h4 ,
44+ h5 ,
45+ h6 {
4146 margin : 0 0 20px ;
4247}
4348
4449li {
45- line-height : 1.4 ;
50+ line-height : 1.4 ;
4651}
4752
4853/* Header, <header>
@@ -65,12 +70,13 @@ header h1 {
6570 margin : 0 0 0 -40px ;
6671 font-weight : bold ;
6772 font-family : Monaco, " Bitstream Vera Sans Mono" , " Lucida Console" , Terminal, monospace ;
68- color : default_colors .$conifer ;// $header;
73+ color : default_colors .$conifer ; // $header;
6974 text-shadow : 0 1px 1px rgba (0 , 0 , 0 , 0.1 ),
70- 0 0 5px rgba (181 , 232 , 83 , 0.1 ),
71- 0 0 10px rgba (181 , 232 , 83 , 0.1 );
75+ 0 0 5px rgba (181 , 232 , 83 , 0.1 ),
76+ 0 0 10px rgba (181 , 232 , 83 , 0.1 );
7277 letter-spacing : -1px ;
7378 -webkit-font-smoothing : antialiased ;
79+
7480 @include media-max-width ($container-max-width ) {
7581 margin-left : 0 ;
7682 }
@@ -101,18 +107,24 @@ header h2 {
101107 width : 100% ;
102108 -webkit-font-smoothing : antialiased ;
103109}
110+
104111section img {
105112 max-width : 100%
106113}
107114
108- h1 , h2 , h3 , h4 , h5 , h6 {
115+ h1 ,
116+ h2 ,
117+ h3 ,
118+ h4 ,
119+ h5 ,
120+ h6 {
109121 font-weight : normal ;
110122 font-family : Monaco, " Bitstream Vera Sans Mono" , " Lucida Console" , Terminal, monospace ;
111123 color : $header ;
112124 letter-spacing : -0.03em ;
113125 text-shadow : 0 1px 1px rgba (0 , 0 , 0 , 0.1 ),
114- 0 0 5px rgba (181 , 232 , 83 , 0.1 ),
115- 0 0 10px rgba (181 , 232 , 83 , 0.1 );
126+ 0 0 5px rgba (181 , 232 , 83 , 0.1 ),
127+ 0 0 10px rgba (181 , 232 , 83 , 0.1 );
116128}
117129
118130#main_content h1 {
150162}
151163
152164ul li {
153- list-style-image :url (' ../images/bullet.png' );
165+ list-style-image : url (' ../images/bullet.png' );
154166}
155167
156168blockquote {
@@ -172,7 +184,7 @@ pre {
172184}
173185
174186code .highlighter-rouge {
175- background : rgba (0 ,0 , 0 , 0.9 );
187+ background : rgba (0 , 0 , 0 , 0.9 );
176188 border : 1px solid rgba (255 , 255 , 255 , 0.15 );
177189 padding : 0px 3px ;
178190 margin : 0px -3px ;
@@ -245,17 +257,18 @@ a {
245257
246258/* Clearfix */
247259
248- .cf :before , .cf :after {
249- content :" " ;
250- display :table ;
260+ .cf :before ,
261+ .cf :after {
262+ content : " " ;
263+ display : table ;
251264}
252265
253266.cf :after {
254- clear :both ;
267+ clear : both ;
255268}
256269
257270.cf {
258- zoom :1 ;
271+ zoom : 1 ;
259272}
260273
261274#a-title {
@@ -265,17 +278,17 @@ a {
265278/* My added styles */
266279
267280nav {
268- padding : 1rem 2rem ;
281+ padding : 1rem 2rem ;
269282 min-height : 60px ;
270- box-sizing : border-box ;
283+ box-sizing : border-box ;
271284}
272285
273286.nav-link {
274287 padding-right : 2rem ;
275288}
276289
277290.demo-title {
278- text-align : center ;
291+ text-align : center ;
279292}
280293
281294#demo-container {
@@ -291,20 +304,20 @@ canvas#target {
291304
292305.demo-button-box {
293306 display : flex ;
294- justify-content :center ;
307+ justify-content : center ;
295308 /* margin-left: 35%; */
296309 /* margin-right: 35%; */
297310}
298311
299312.demo-button {
300- width :1em ;
301- height :1em ;
313+ width : 1em ;
314+ height : 1em ;
302315 border-radius : 50% ;
303316 background : deeppink ;
304317 padding : 0.25em ;
305318 font-size : 3em ;
306- cursor :pointer ;
307- user-select :none ;
319+ cursor : pointer ;
320+ user-select : none ;
308321
309322 display : flex ;
310323 justify-content : center ;
@@ -318,7 +331,9 @@ canvas#target {
318331h1 {
319332 margin-left : 2rem ;
320333}
321- h3 , p {
334+
335+ h3 ,
336+ p {
322337 margin-left : 3rem ;
323338}
324339
328343
329344.highlight {
330345 margin-left : 1.5rem ;
331- }
346+ }
0 commit comments