-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
862 lines (812 loc) · 44.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
<!DOCTYPE html>
<html>
<head>
<title>Style Guide | Women&&Tech</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Twitter cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@WomenAndTech">
<meta name="twitter:creator" content="@WomenAndTech">
<meta name="twitter:title" content="Wome&&Tech Style Guide">
<meta name="twitter:description" content="This style guide provides the markup and CSS for the components used on http://womenandtech.com. These modules can be used to create full page layouts that are consistent and simple to put together.">
<meta name="twitter:image" content="assets/img/w&&t-styleguide.png">
<!-- Facebook Open Graph -->
<meta property="og:url" content="http://womenandtech.github.io/style_guide/">
<meta property="og:type" content="article">
<meta property="og:title" content="Wome&&Tech Style Guide">
<meta property="og:description" content="This style guide provides the markup and CSS for the components used on http://womenandtech.com. These modules can be used to create full page layouts that are consistent and simple to put together.">
<meta property="og:image" content="assets/img/w&&t-styleguide.png">
<link rel="shortcut icon" href="assets/img/favicon-32x32.ico" type="image/x-icon">
<link rel="stylesheet" href="assets/css/style.css">
<!-- Style guide only -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
<link rel="stylesheet" href="assets/css/style-guide.css">
</head>
<body class="style-guide theme-coral">
<header class="header-primary">
<a href="/" class="logo">
<img src="assets/img/W&&T-full-logo-outline.svg" alt="Women && Tech logo">
<h1 class="screen-readers">Women && Tech</h1>
</a>
<nav class="nav-primary" data-scroll-header>
<a data-scroll href="#templates">Templates & Themes</a>
<a data-scroll href="#headings">Headers & Footers</a>
<a data-scroll href="#images">Images</a>
<a data-scroll href="#video">Video</a>
<a data-scroll href="#content">Content</a>
<a data-scroll href="#helpers">Helpers</a>
</nav>
</header>
<main role="main">
<header class="no-border header-secondary">
<h2>Style Guide & Component Library</h2>
<p>When we redesigned the W&&T website, we refreshed the overall look and feel and also recreated the website architecture to make it easy to maintain and add new content. The goal was to keep the codebase as straightforward as possible, so all team members could add content without specialized or extensive development experience. We decided to follow a component based approach to be able to mix and match page elements to create different yet consistent page layouts.</p>
</header>
<!-- TEMPLATES & THEMES -->
<section class="module grid-wrapper">
<div class="grid-2-1">
<h2 id="templates">Templates</h2>
<ul>
<li><a href="base-template.html" target="_blank">Base Markup Template</a>
<ul>
<li>Base markup for all pages</li>
<li>Includes the global header, global footer and links to CSS & JS files</li>
</ul>
</li>
<li><a href="page-template.html" target="_blank">Page Template</a>
<ul>
<li>For non-interview content (e.g. About)</li>
</ul>
</li>
<li>
<a href="interview-template.html" target="_blank">Interview Template</a>
<ul>
<li>For interview pages</li>
</ul>
</li>
<li>
<a href="archive-template.html" target="_blank">Archives Template</a>
<ul>
<li>For interview archives page</li>
</ul>
</li>
</ul>
<p>Refer to the sections below for specific content module examples and code snippets.</p>
</div>
<div class="grid-2-1">
<h2 id="themes">Themes</h2>
<p>Select a button to view the theme colors.</p>
<button class="coral" data-theme="coral">.theme-coral</button>
<button class="purple" data-theme="purple">.theme-purple</button>
<button class="yellow" data-theme="yellow">.theme-yellow</button>
<button class="green" data-theme="green">.theme-green</button>
<button class="blue" data-theme="blue">.theme-blue</button>
<p>Theme changes include:</p>
<ul>
<li>page background</li>
<li>link, :hover and :focus colors</li>
</ul>
<p>Theme color classes are added to the <code><body></code> tag using one of five theme color codes.</p>
<pre><code class="xml"><body class="theme-coral"></code></pre>
<p>In the live website files, themes are added using PHP variables. Refer to the <a href="https://github.com/WomenAndTech/static-site">static site documentation</a> for more info.</p>
</div>
</section>
<!-- HEADERS & FOOTERS -->
<section class="module">
<h2 id="headings">Headers & Footers</h2>
<p>These modules can be used at the beginning or end of a page or interview template.</p>
<p>The global header and footer content are included in the base template and does not need to be added when creating a new page. Refer to the <a href="https://github.com/WomenAndTech/static-site">static site documentation</a> for more info about using templates and adding content.</p>
<div class="grid-wrapper">
<!-- Secondary header -->
<div class="grid-narrow">
<h3>Secondary Header</h3>
<p>The secondary header is used for pages that require introductory information before the main content.</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#header-secondary" data-copy>copy to clipboard</button>
<pre><code class="xml" id="header-secondary"><header class="no-border header-secondary">
<h2>We’re not endorsing the obvious. We’re commending the awesome.</h2>
<p>Our industry is filled with <a href="#">smart, interesting women</a> including developers, designers, entrepreneurs, and tech leaders. These women are a big deal, and we think you should know about them. We highlight them not for their gender, but because they are awesome by any kind of measure.</p>
</header>
</code></pre>
</div>
</div>
</section>
<!-- Example code: secondary header -->
<header class="no-border header-secondary">
<h2>We're not endorsing the obvious. We're commending the awesome.</h2>
<p>Our industry is filled with <a href="#">smart, interesting women</a> including developers, designers, entrepreneurs, and tech leaders. These women are a big deal, and we think you should know about them. We highlight them not for their gender, but because they are awesome by any kind of measure.</p>
</header>
<!-- Interview header -->
<section class="module grid-wrapper">
<div class="grid-narrow">
<h3>Interview Header</h3>
<p>This header is used at the beginning of all interviews. This code snippet is for reference only and is already included in the <strong>interview/template.php</strong> file in the static-site repo.</p>
<p>PHP variables are used to customize the template to update the author name and social media information. Use this template when adding new interviews and follow the customization instructions included in the file.</p>
<p>If you need to add additional information in the header, use the "italic" class, shown in the example, after the intro paragraph.</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#header-interview" data-copy>copy to clipboard</button>
<pre><code id="header-interview"><header class="border header-interview">
<div class="wrapper-sm">
<h2>Interviewee Name</h2>
<p class="intro">Intro paragraph.</p>
<p class="italic">Optional footnote to add extra info.</p>
<?php // Don't update. Using the same info as in Interview Credits. ?>
<p class="author">An interview with <a href="<?php echo $interviewer_url; ?>"><?php echo $interviewer; ?></a></p>
<?php // Don't update. Using the info from PHP variables at the top of the page. ?>
<ul class="social-share">
<li>
<a href="http://www.facebook.com/sharer.php?u=http://womenandtech.com/interview/<?php echo $interviewee_url;?>/" title="Share on Facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
<span class="screen-readers">Post the interview on Facebook</span>
</a>
</li>
<li>
<a href="http://twitter.com/share?text=Women and Tech Interviews <?php echo $interviewee_name; ?>&url=http://womenandtech.com/interview/<?php echo $interviewee_url; ?>/" title="Share on Twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
<span class="screen-readers">Tweet the interview</span>
</a>
</li>
<li>
<a href="mailto:?subject=Women and Tech Interviews <?php echo $interviewee_name; ?>&body=Women and Tech Interviews <?php echo $interviewee_name; ?> http://womenandtech.com/interview/<?php echo $interviewee_url; ?>/" title="Email the interview">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span class="screen-readers">Email interview</span>
</a>
</li>
</ul>
</div>
</header>
</code></pre>
</div>
</section>
<!-- Example code: interview header -->
<header class="border header-interview">
<div class="wrapper-sm">
<h2>Biying Miao</h2>
<p class="intro">Biying Miao is the co-founder of <a href="#">Hot Pop Factory</a>, a 3D Printing and Digital Fabrication Design Studio. The self- proclaimed art-geek has worked on projects exhibited at the Royal Ontario Museum, the <a href="#">Textile Museum of Canada</a> and the Art Gallery of Ontario.</p>
<p class="italic">Optional note to add extra info, e.g. whether the interviewee has changed jobs since the time of the interview and the publish date.</p>
<p class="author">An interview with <a href="#">Ruby Watson</a></p>
<ul class="social-share">
<li>
<a href="//facebook.com/WomenAndTech" title="Facebook @WomenAndTech">
<i class="fa fa-facebook" aria-hidden="true"></i>
<span class="screen-readers">Facebook</span>
</a>
</li>
<li>
<a href="//twitter.com/WomenAndTech" title="Twitter @WomenAndTech">
<i class="fa fa-twitter" aria-hidden="true"></i>
<span class="screen-readers">Twitter</span>
</a>
</li>
<li>
<a href="mailto:contact@womenandtech.com" title="Email contact@womenandtech.com">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span class="screen-readers">Email</span>
</a>
</li>
</ul>
</div>
</header>
<!-- Secondary footer -->
<section class="module grid-wrapper">
<div class="grid-narrow">
<h3>Secondary Footer</h3>
<p>This module may be be used for page content footers. Any kind of content can be added such as headings, paragraphs, links or images.</p>
<p>Refer to the <a href="#helpers">Helpers</a> section for additional content styles such as spacing and text styles.</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#footer-secondary" data-copy>copy to clipboard</button>
<pre><code id="footer-secondary"><footer class="no-border footer-secondary">
<div class="wrapper-sm">
<!-- ADD CONTENT HERE -->
<h2>Heading 2</h2>
<p>Paragraph text with a <a href="#">link</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum corrupti eius labore cumque expedita dicta tenetur ut, accusantium, eaque eum, veritatis quam quae officiis assumenda? Voluptatum placeat eaque.</p>
</div>
</footer>
</code></pre>
</div>
</section>
<!-- Example code: secondary footer -->
<footer class="no-border footer-secondary">
<div class=wrapper-sm>
<h2>H2 Heading</h2>
<p>Secondary footer example. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h3>H3 Heading</h3>
<p>Paragraph text with a <a href="#">link</a>.</p>
<p>Illum corrupti eius labore cumque expedita dicta tenetur ut, accusantium, eaque eum, veritatis quam quae officiis assumenda? Voluptatum placeat eaque.</p>
</div>
</footer>
<!-- Interview footer with credits -->
<section class="module grid-wrapper">
<div class="grid-narrow">
<h3>Interview Footer with Credits</h3>
<p>This code snippet is for reference only and is already included in the <strong>interview/template.php</strong> file in the <a href="https://github.com/WomenAndTech/static-site">static-site repo</a>.</p>
<p>Update the PHP variables to customize the credits. If you don't need a specific credit, delete the whole list item (<code><li></code>).</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#footer-interview" data-copy>copy to clipboard</button>
<pre><code id="footer-interview"><footer class="border credits">
<ul>
<li>
Interview by <a href="<?php echo $interviewer_url; ?>"><?php echo $interviewer; ?></a>
<?php if ($interviewer2): echo 'and <a href="'.$interviewer_url2 .'">'.$interviewer2.'</a>';endif; ?>
</li>
<li>
Photography by <a href="<?php echo $photos_url; ?>"><?php echo $photos; ?></a>
<?php if ($photos2): echo 'and <a href="'.$photos_url2 .'">'.$photos2.'</a>';endif; ?>
</li>
<li>
Editing by <a href="<?php echo $editor_url; ?>"><?php echo $editor; ?></a>
<?php if ($editor2): echo 'and <a href="'.$editor_url2 .'">'.$editor2.'</a>';endif; ?>
</li>
<li>
Art Direction by <a href="<?php echo $ad_url; ?>"><?php echo $ad; ?></a>
<?php if ($ad2): echo 'and <a href="'.$ad_url2 .'">'.$ad2.'</a>';endif; ?>
</li>
<li>
Design by <a href="<?php echo $design_url; ?>"><?php echo $design; ?></a>
<?php if ($design2): echo 'and <a href="'.$design_url2 .'">'.$design2.'</a>';endif; ?>
</li>
<li>
Development by <a href="<?php echo $dev_url; ?>"><?php echo $dev; ?></a>
<?php if ($dev2): echo 'and <a href="'.$dev_url2 .'">'.$dev2.'</a>';endif; ?>
</li>
<li>
Transcriptions by <a href="<?php echo $transcribe_url; ?>"><?php echo $transcribe; ?></a>
<?php if ($transcribe2): echo 'and <a href="'.$transcribe_url2 .'">'.$transcribe2.'</a>';endif; ?>
</li>
</ul>
<?php // Global site credits
include($path_inc."site-credits.php");
?>
</footer>
</code></pre>
</div>
</section>
<!-- Example code: interview footer with credits -->
<footer class="border credits">
<ul>
<li>Interview by <a href="#">Ruby Watson</a></li>
<li>Photography by <a href="#">Amanda Huang</a></li>
<li>Editing by <a href="#">Ruby Watson</a> and <a href="#">Ivonne Karamoy</a></li>
<li>Art Direction by <a href="#">Cassie Kaiser</a></li>
<li>Design by <a href="#">Cassie Kaiser</a></li>
<li>Development by <a href="#">Audrey Kuo</a> and <a href="#">Brett Bergmann</a></li>
<li>Transcriptions by <a href="#">Ruby Watson</a></li>
</ul>
<p>Don't miss another interview, <a href="#subscribe" class="bold">subscribe below</a>.</p>
<p class="italic">This site uses Monotype's Avenir Next by Adrian Fruteger and Akira Kobayashi, icon by Cathy Moser, Github, Cloudflare, and Windows Azure.</p>
</footer>
<!-- IMAGE MODULES -->
<section id="images" class="module">
<h2>Images</h2>
<p>The static site uses PHP to customize the templates so be sure to include the PHP snippet for image paths, shown in the example code below. View the documentation in the <a href="https://github.com/WomenAndTech/static-site">website repo</a> for more information about directory structures and file naming.</p>
<!-- Featured image -->
<div class="grid-wrapper">
<div class="grid-narrow">
<h3>Feature Image</h3>
<p>This image is used at the beginning of each interview.</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#img-feature" data-copy>copy to clipboard</button>
<pre><code id="img-feature"><div class="border img-feature">
<figure>
<img src="<?php echo $path_img; ?>featured-biying-miao.jpg" alt="Biying Miao">
</figure>
</div>
</code></pre>
</div>
</div>
</section>
<!-- Example code: featured image -->
<div class="border img-feature">
<figure>
<img src="assets/img/image-featured.jpg" alt="Biying Miao">
</figure>
</div>
<!-- Side by side images -->
<section class="module grid-wrapper">
<div class="grid-narrow">
<h3>Side by Side Images</h3>
<p>This image style can be used throughout the interview to highlight the content and to visually break up the text.</p>
<p>Delete the <figcaption></figcaption> if you don't need to include a caption.</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#img-sidebyside" data-copy>copy to clipboard</button>
<pre><code id="img-sidebyside"><div class="border img-side-by-side">
<figure>
<img src="<?php echo $path_img; ?>left-biying-miao.jpg" alt="Biying Miao">
</figure>
<figure>
<img src="<?php echo $path_img; ?>right-biying-miao.jpg" alt="Biying Miao">
<figcaption>
Optional caption goes here. <a href="#">Links</a> can also be included.
</figcaption>
</figure>
</div>
</code></pre>
</div>
</section>
<!-- Example code: side by side image -->
<div class="border img-side-by-side">
<figure>
<img src="assets/img/image-side-left.jpg" alt="Biying Miao">
</figure>
<figure>
<img src="assets/img/image-side-right.jpg" alt="Biying Miao">
<figcaption>
Optional caption goes here. <a href="#">Links</a> can also be included.
</figcaption>
</figure>
</div>
<!-- Single image options -->
<section class="module grid-wrapper">
<div class="grid-narrow">
<h3>Single Image: Portrait or Landscape</h3>
<p>If using a single image, you have the option to use a portait image or landscape image.</p>
<p>Delete the <figcaption></figcaption> if you don't need to include a caption.</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#img-portrait" data-copy>copy to clipboard</button>
<pre><code id="img-portrait"><!-- // Single Image - Portrait -->
<div class="border img-portrait">
<figure>
<img src="<?php echo $path_img; ?>portrait-biying-miao.jpg" alt="Biying Miao">
<figcaption>
Optional caption goes here.
</figcaption>
</figure>
</div>
</code></pre>
<hr>
<button class="btn-copy" data-clipboard-target="#img-landscape" data-copy>copy to clipboard</button>
<pre><code id="img-landscape"><!-- Single Image - Landscape -->
<div class="border img-landscape">
<figure>
<img src="<?php echo $path_img; ?>landscape-biying-miao.jpg" alt="Biying Miao">
<figcaption>
Optional caption goes here.
</figcaption>
</figure>
</div>
</code></pre>
</div>
</section>
<!-- Example code: single image - portrait -->
<div class="border img-portrait">
<figure>
<img src="assets/img/image-single-portrait.jpg" alt="Biying Miao">
<figcaption>
Optional caption goes here.
</figcaption>
</figure>
</div>
<!-- Example: Single Image - Landscape-->
<div class="border img-landscape">
<figure>
<img src="assets/img/image-single-landscape.jpg" alt="Biying Miao">
<figcaption>
Optional caption goes here.
</figcaption>
</figure>
</div>
<!-- VIDEO MODULES -->
<section class="module">
<h2 id="video">Video</h2>
<div class="grid-wrapper">
<div class="grid-narrow">
<p>To include a video, copy the video embed code from the platform (YouTube, Vimeo, etc.) and include it within the <code><div class="embed-container"></code> element, shown in the example code snippet.</p>
<p>The platform's embed code may include some markup that is not required such as <code>autoplay</code>, <code>width</code> or <code>height</code>. These extra attributes can be removed to match the example shown here.</p>
<p>Captions are addedin a paragraph tag below the embed container. Add the "widescreen" class if the aspect ratio of the video is wide enough to stretch to the same width as the landscape image.</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#video" data-copy>copy to clipboard</button>
<pre><code id="video"><div class="border video">
<div class="embed-container">
<!-- // Add video embed here -->
<iframe src="https://player.vimeo.com/video/25608606" frameborder="0" allowfullscreen></iframe>
</div>
<p class="caption">
Optional caption for video embed.
</p>
</div></code></pre>
<hr>
<button class="btn-copy" data-clipboard-target="#video-widescreen" data-copy>copy to clipboard</button>
<pre><code id="video-widescreen"><div class="border video widescreen">
<div class="embed-container">
<iframe src="https://www.youtube.com/embed/Xoz2EERmZZ8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<p class="caption">
Optional caption for widescreen video.
</p>
</div></code></pre>
</div>
</div>
</section>
<!-- Example: Video embed -->
<div class="border video">
<div class="embed-container">
<iframe src="https://player.vimeo.com/video/25608606" frameborder="0" allowfullscreen></iframe>
</div>
<p class="caption">
Example of a video embed.
</p>
</div>
<!-- Example: Video embed - widescreen -->
<div class="border video widescreen">
<div class="embed-container">
<iframe src="https://www.youtube.com/embed/Xoz2EERmZZ8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<p class="caption">
Example of a widescreen video embed.
</p>
</div>
<!-- TEXT BASED CONTENT MODULES -->
<section class="module">
<h2 id="content">Content Modules</h2>
<p>Use the following modules for your text-based content.</p>
<div class="grid-wrapper">
<div class="grid-narrow">
<h3>Default Text Styles</h3>
<p>Example of default text styles. See below for more content modules.</p>
<p>This is used mainly for non-interview pages such as an About page. Any type of content (headings, paragraphs, links, etc.) can be added <em>between</em> the <code>.wrapper-sm</code> container.</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#default" data-copy>copy to clipboard</button>
<pre><code id="default"><section class="border page-content">
<div class="wrapper-sm">
<!-- // ADD CONTENT BELOW -->
<h2>h2 Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
<h3>h3 Subheading</h3>
<p>Cupcake ipsum dolor. Sit amet biscuit dragée cotton candy icing croissant toffee bonbon. Tootsie roll <a href="#">chocolate cake</a> lollipop topping cake cake fruitcake. Halvah jelly beans pie muffin. Sweet roll cookie liquorice danish lemon drops pie apple pie donut lemon drops. Gingerbread gummies caramels. Oat cake sweet roll pie ice cream chocolate.</p>
</div><!-- // close .wrapper-sm -->
</section></code></pre>
</div>
</div>
</section>
<!-- Example: Default heading, paragraphs and links -->
<section class="border page-content">
<div class="wrapper-sm">
<!-- // ADD CONTENT BELOW -->
<h2>Letter to our Readers</h2>
<p>This little project launched in 2012; a time when gender equality conversations were just gaining momentum. We founded Women && Tech to challenge the idea of tech as a male-dominated field. Our goal was to invite and interview 50 women we admire out for a coffee, talk to them about their work, their experiences and their awesomeness, and share these conversations with the world. By sharing these stories, we wanted to recognize the efforts of women in this industry and contribute to a community that elevates one another.</p>
<h3>H3 Subheading</h3>
<p>Cupcake ipsum dolor. Sit amet biscuit dragée cotton candy icing croissant toffee bonbon. Tootsie roll <a href="#">link example</a> lollipop topping cake cake fruitcake. Halvah jelly beans pie muffin. Sweet roll cookie liquorice danish lemon drops pie apple pie donut lemon drops. Gingerbread gummies caramels. Oat cake sweet roll pie ice cream chocolate.</p>
<h2>H2 Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
</div>
</section>
<!-- // Q & A -->
<section class="module grid-wrapper">
<div class="grid-narrow">
<h3>Q & A</h3>
<p>Use this snippet for each Q & A block. You can add as many paragraphs as required for the answer portion. Just be sure to keep the paragraphs enclosed within the <code><dd class="interview-a"></dd></code> tags.</p>
<!-- TODO: CHECK STYLES -->
<p class="credits">More about the <code><dl></code> element <a href="http://html5doctor.com/the-dl-element/">here</a>.</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#qa" data-copy>copy to clipboard</button>
<pre><code id="qa"><dl class="border">
<dt class="interview-q">Question?</dt>
<dd class="interview-a">
<p>Answer</p>
<p>Break up long answers with additional paragraphs.</p>
</dd>
</dl>
<dl class="border">
<dt class="interview-q">Another question?</dt>
<dd class="interview-a">
<p>Answer</p>
</dd>
</dl></code></pre>
</div>
</section>
<!-- Example code: Q & A -->
<dl class="border">
<dt class="interview-q">Where did you grow up and what were you like as a child?</dt>
<dd class="interview-a">
<p>My family moved to Canada from Shanghai when I was in fourth grade, and I grew up in Toronto. I was a very creative child who loved drawing and making things with my hands. Coming from a Chinese family, I was encouraged to play music but gravitated toward freeform arts, so learning an instrument in the classical sense never became something that I honed. I actually wish that I had done that. My 3D printers sound like singing robots, so that’s the music I make now. I’m sure if I put the time in, I could remix it into a pretty sweet song.</p>
<p>I was always a bit of an art and music geek so when it came time to choose a career path I leaned toward architecture because it was a mix of art, science, and technology; all things that are very much a part of who I am.</p>
</dd>
</dl>
<div class="border">
<p class="wrapper-sm italic">[Optional note] For adding additional info within the interview. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<dl class="border">
<dt class="interview-q">Another question?</dt>
<dd class="interview-a">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</dd>
</dl>
<!-- // Pull quote -->
<section class="module grid-wrapper">
<div class="grid-narrow">
<h3>Pull Quote</h3>
<p>Highlight key points in the interview with pull quotes. Stick to one or two short sentences.</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#pullquote" data-copy>copy to clipboard</button>
<pre><code id="pullquote"><aside class="border pull-quote">
<p>Digital fabrication allows for a physical reality that’s much more transient, dynamic, and customized by the individual.</p>
</aside></code></pre>
</div>
</section>
<!-- Example: Pull quote -->
<aside class="border pull-quote">
<p>Digital fabrication allows for a physical reality that’s much more transient, dynamic, and customized by the individual.</p>
</aside>
<!-- // Team Related Content -->
<section class="module grid-wrapper">
<div class="grid-narrow">
<!-- // Team Signature -->
<h3>Team Signature</h3>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#signature" data-copy>copy to clipboard</button>
<pre><code id="signature"><div class="border signature">
<p>
with <i class="fa fa-heart-o theme-color" aria-hidden="true" title="love"></i><span class="screen-readers">love</span>
from <span class="team theme-color">the Women&&Tech team</span>
</p>
</div></code></pre>
</div>
</section>
<!-- Example: Team Signature -->
<div class="border signature">
<p>
with <i class="fa fa-heart-o theme-color" aria-hidden="true" title="love"></i><span class="screen-readers">love</span>
from <span class="team theme-color">the Women&&Tech team</span>
</p>
</div>
<!-- // Team Listing -->
<section class="module grid-wrapper">
<div class="grid-narrow">
<h3>Team Listing</h3>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#team" data-copy>copy to clipboard</button>
<pre><code id="team"><!-- // Team Listing -->
<aside class="border team-listing">
<ul>
<li>
<p class="name"><a href="#">Cassie Kaiser</a></p>
<p class="role">Managing Coordinator</p>
</li>
<li>
<p class="name"><a href="#">Ivonne Karamoy</a></p>
<p class="role">Managing Director</p>
</li>
<li>
<p class="name"><a href="#">Christina Truong</a></p>
<p class="role">Lead Developer</p>
</li>
<li>
<p class="name"><a href="#">Ray Kao</a></p>
<p class="role">Tech Lead</p>
</li>
</ul>
<p class="thanks">Special thanks to our founder Cassie McDaniel, past team members and supporters.</p>
</aside></code></pre>
</div>
</section>
<!-- Example code: team listing -->
<aside class="border team-listing">
<ul>
<li>
<p class="name"><a href="#">Cassie Kaiser</a></p>
<p class="role">Lead Designer, Coordinator</p>
</li>
<li>
<p class="name"><a href="#">Ray Kao</a></p>
<p class="role">Operations & Support</p>
</li>
<li>
<p class="name"><a href="#">Ivonne Karamoy</a></p>
<p class="role">Lead Designer, Director</p>
</li>
<li>
<p class="name"><a href="#">Ria Lupton</a></p>
<p class="role">Editor, Community Builder</p>
</li>
<li>
<p class="name"><a href="#">Christina Truong</a></p>
<p class="role">Front-End Architect & Developer</p>
</li>
<li>
<p class="name"><a href="#">Victoria Whang</a></p>
<p class="role">Designer, Social Media Engagement</p>
</li>
</ul>
<p class="italic type-xsm">All team members conduct interviews, produce content and shape the direction of W&&T.</p>
<p class="italic type-xsm">Special thanks to our founder <a href="#">Cassie McDaniel</a>, our founding team members, past team members and supporters. If you have ideas about how you can help, <a href="#">email us</a>.</p>
</aside>
<!-- // Interview Cards -->
<section class="module grid-wrapper">
<div class="grid-narrow">
<h3>Past Interview Cards</h3>
<p>This code snippet is for reference and is already included in the <strong>includes/latest-interviews.php</strong> file.</p>
<p>To update, revise the URL to the interviews, thumbnail image file and interview details. Only the latest three interviews are featured at a time.</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#past-interviews" data-copy>copy to clipboard</button>
<pre><code id="past-interviews"><aside class="interview-cards wrapper">
<h2>Latest Interviews</h2>
<a class="view-all" href="/archive/">view all</a>
<div class="grid-wrapper">
<article class="grid-3-1">
<a href="/interview/aashni-shah/" class="no-underline">
<img src="<?php echo $path_img; ?>thumbnail-aashni-shah.jpg" alt="Aashni Shah">
<h3>Aashni Shah</h3>
<p>with Cassie Kaiser</p>
<p>Computer Science student, organizer, leader and speaker within the tech community.</p>
</a>
</article>
<article class="grid-3-1">
<a href="/interview/sara-hicks/" class="no-underline">
<img src="<?php echo $path_img; ?>thumbnail-sara-hicks.jpg" alt="Sara Hicks">
<h3>Sara Hicks</h3>
<p>with Sophie He</p>
<p>Co-founder and CEO of Reaction Commerce, an open-source ecommerce platform.
</p>
</a>
</article>
<article class="grid-3-1">
<a href="/interview/mitchell-baker/" class="no-underline">
<img src="<?php echo $path_img; ?>thumbnail-mitchell-baker.jpg" alt="Mitchell Baker">
<h3>Mitchell Baker</h3>
<p>with Cassie McDaniel</p>
<p>Founder of the non-profit tech company Mozilla, creator of Firefox and champion of the open web.</p>
</a>
</article>
</div>
</aside></code></pre>
</div>
</section>
<!-- Example: Past interview cards -->
<aside class="interview-cards wrapper">
<h2>Latest Interviews</h2>
<a class="view-all" href="/archive/">view all</a>
<div class="grid-wrapper">
<article class="grid-3-1">
<a href="/interview/sara-hicks/" class="no-underline">
<img src="assets/img/thumbnail-sara-hicks.png" alt="Sara Hicks">
<h3>Sara Hicks</h3>
<p>with Sophie He</p>
<p>Cofounder and CEO of Reaction Commerce, an open-source ecommerce platform.</p>
</a>
</article>
<article class="grid-3-1">
<a href="/interview/mitchell-baker/" class="no-underline">
<img src="assets/img/thumbnail-mitchell-baker.png" alt="Mitchell Baker">
<h3>Mitchell Baker</h3>
<p>with Cassie McDaniel</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</article>
<article class="grid-3-1">
<a href="/interview/sandi-lin/" class="no-underline">
<img src="assets/img/thumbnail-sandi-lin.png" alt="Sandi Lin">
<h3>Sandi Lin</h3>
<p>with Sarah Sutherland</p>
<p>Co-founder and CEO of Seattle-based startup Skilljar, an online course delivery platform.</p>
</a>
</article>
</div>
</aside>
<!-- HELPER CLASSES -->
<section class="module">
<h2 id="helpers">Helper Classes [in progress]</h2>
<p>To make customizations and isolated style additions outside of the default and module styles, see below options.</p>
<div class="grid-wrapper">
<div class="grid-narrow">
<h3>Links</h3>
<p>Add a "no-underline" class to remove the underline style of links.</p>
<p>This class can be used for text or image links. (Example 1 and 2)</p>
<p>If you want to remove the underline for multiple elements, add the class to the parent element. (Example 3)</p>
</div>
<div class="grid-wide">
<button class="btn-copy" data-clipboard-target="#text-link" data-copy>copy to clipboard</button>
<pre><code id="text-link"><a href="#" class="no-underline">link</a></code></pre>
<hr>
<button class="btn-copy" data-clipboard-target="#img-link" data-copy>copy to clipboard</button>
<pre><code id="img-link"><a href="#" class="no-underline">
<img src="image.png" alt="image description">
</a></code></pre>
<hr>
<button class="btn-copy" data-clipboard-target="#multiple-links" data-copy>copy to clipboard</button>
<pre><code id="multiple-links"><div class="no-underline">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
</div>
</code></pre>
</div>
</div>
</section>
<!--
<p>The class can be added to the <a> a</a></p>
type-sm
italic - use <em> for content
<p class="type-xsm italic">Special thanks to our founder Cassie McDaniel, our founding team members, past team members and supporters.</p>
spacer30 - contributing
in interview header - use class for presentation -- note about semantic use of i or em
<p class="italic">Optional footnote to add extra info, e.g. whether the interviewee has changed jobs since the time time of the interview and the publish date.</p>
-->
<!-- <img class="spacer30" src="/assets/img/coffee-icon.png" alt="Coffee" width="50px">
<p><a href="https://www.patreon.com/WomenAndTech">Donate</a> a cup of coffee or tea and get first dibs on new content.</p>
<p>We also welcome contributors, volunteers and sponsors.</p>
<p>Check out our <a href="http://womenandtech.com/contributor-guidelines/">Contribute</a> page for more information.</p> -->
</main>
<footer class="footer-primary">
<section>
<p>© 2012 - <span data-year></span> Women&&Tech. <span class="nowrap">Made in Toronto. All Rights Reserved.</span></p>
</section>
<section id="mc_embed_signup">
<form action="//womenandtech.us5.list-manage.com/subscribe/post?u=1370c4a70b43a1285e806a56d&id=123c00728e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<label for="mce-EMAIL">Enter your email address to get updates:</label>
<input id="subscribe" type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe">
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_1370c4a70b43a1285e806a56d_123c00728e" tabindex="-1" value=""></div>
</form>
</section>
<section>
<p>Connect with us: </p>
<ul class="footer-links">
<li>
<a href="//facebook.com/womenandtech" title="Facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
<span class="screen-readers">Facebook</span>
</a>
</li>
<li>
<a href="//twitter.com/WomenAndTech" title="Twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
<span class="screen-readers">Twitter</span>
</a>
</li>
<li>
<a href="//instagram.com/WomenAndTech" title="Instagram">
<i class="fa fa-instagram" aria-hidden="true"></i>
<span class="screen-readers">Instagram</span>
</a>
</li>
<li>
<a href="mailto:contact@womenandtech.com" title="Email">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span class="screen-readers">Email</span>
</a>
</li>
</ul>
</section>
</footer>
<!-- for testing only -->
<!-- <p style="position:fixed;top:0px;right:10px;color:black;background:white;padding:5px;z-index:100;"><span id="width"></span> x <span id="height"></span> <span id="screen"></span></p> -->
<!-- Global files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="assets/js/jquery-2.2.3.min.js"><\/script>')</script>
<script src="assets/js/jquery.viewportchecker.min.js"></script>
<script src="assets/js/clipboard.min.js"></script>
<script src="assets/js/global-min.js"></script>
<!-- Style guide only -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script src="assets/js/smooth-scroll.min.js"></script>
<script>
// Only used in style guide
smoothScroll.init({
selectorHeader: '[data-scroll-header]',
offset: 120
});
</script>
<script src="assets/js/style-guide-min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>