-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyleguide.html
112 lines (112 loc) · 8 KB
/
styleguide.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
<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com -->
<!-- Last Published: Thu Apr 06 2023 22:21:42 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="640f776146882061b1ab79b9" data-wf-site="640f77614688201e84ab79a1">
<head>
<meta charset="utf-8">
<title>Styleguide</title>
<meta content="Styleguide" property="og:title">
<meta content="Styleguide" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/matewan-practice-site.webflow.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic","PT Serif:400,400italic,700,700italic","Playfair Display:regular,500,600,700,800,900,italic,500italic,600italic,700italic,800italic,900italic"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
<div data-collapse="medium" data-animation="default" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navigation w-nav">
<div class="navigation-wrap">
<a href="index.html" class="logo-link w-nav-brand">
<div><img src="images/low-opacity-streak.png" loading="lazy" sizes="80px" srcset="images/low-opacity-streak-p-500.png 500w, images/low-opacity-streak-p-800.png 800w, images/low-opacity-streak.png 814w" alt="" class="image-39 image-40 image-41 image-42 image-43 image-44 image-45 image-46 image-47 image-48 image-49 image-50 image-51 image-52 image-53 image-54 image-55 image-56 image-57 image-58 image-59 image-60 image-61 image-62 image-63 image-64 image-65 image-66 image-67 image-68 image-69 image-70 image-71 image-72 image-73 image-74 image-75 image-76 image-77 image-78 image-79 image-80 image-81 image-82 image-83 image-84 image-85 image-86 image-87 image-88 image-89 image-90 image-91 image-92 image-93 image-94 image-95 image-96 image-97 image-98 image-99 image-100 image-101 image-102 image-103 image-104 image-105 image-106 image-107 image-108 image-109 image-110 image-111 image-112 image-113 image-114 image-115 image-116 image-117 image-118 image-119 image-120 image-121 image-122"></div>
</a>
<div class="menu">
<nav role="navigation" class="navigation-items w-nav-menu">
<a href="about.html" class="navigation-item w-nav-link">VICTOR'S VERSION</a>
<a href="contact.html" class="navigation-item w-nav-link">SILENCED VOICES</a>
<a href="team.html" class="navigation-item w-nav-link">RESISTING ERASURE</a>
<a href="projects.html" class="navigation-item w-nav-link">LEARNING TO LISTEN</a>
</nav>
<div class="menu-button w-nav-button"><img src="images/menu-icon_1menu-icon.png" width="22" alt="" class="menu-icon"></div>
</div>
</div>
</div>
<div class="section">
<div class="styleguide-header-wrap">
<div class="heading-jumbo">Styleguide</div>
<div class="paragraph-bigger cc-bigger-light">Source of truth of this template.</div>
</div>
<div class="container">
<div class="styleguide-content-wrap">
<div class="styleguide-block">
<div class="label cc-styleguide-label">Headings</div>
<div class="heading-jumbo">Heading Jumbo</div>
<div class="heading-jumbo-small">Heading Jumbo</div>
<div class="heading-jumbo-tiny">Heading Jumbo</div>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<div class="divider"></div>
<div class="styleguide-block">
<div class="label cc-styleguide-label">Paragraphs & Links</div>
<p class="paragraph-bigger">Paragraph-bigger</p>
<p>Paragraph</p>
<p class="paragraph-light">Paragraph-de-emphasized</p>
<p class="paragraph-small">Paragraph-smaller</p>
<p class="paragraph-tiny">Paragraph-tiny</p>
<div class="label">Label</div>
<a href="#">A text link</a>
</div>
<div class="divider"></div>
<div class="styleguide-block">
<div class="label cc-styleguide-label">Buttons & Form Elements</div>
<div class="styleguide-button-wrap">
<a href="#" class="button w-inline-block">
<div>Explore</div>
</a>
</div>
<div class="styleguide-button-wrap">
<a href="#" class="button cc-jumbo-button w-inline-block">
<div>Explore</div>
</a>
</div>
</div>
<div class="divider"></div>
<div class="styleguide-block">
<div class="label cc-styleguide-label">Rich Text Element</div>
<div class="rich-text w-richtext">
<h2>What’s a Rich Text element?</h2>
<p>The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. </p>
<blockquote>The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.</blockquote>
<h4>Static and dynamic content editing</h4>
<p>A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!</p>
<figure style="max-width:1306px" class="w-richtext-align-fullwidth w-richtext-figure-type-image">
<div><img src="images/placeholder-1.svg" alt=""></div>
</figure>
<h4>How to customize formatting for each rich text</h4>
<p>Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.</p>
<ul role="list">
<li>The rich text element allows you to create and format headings</li>
<li>Headings, paragraphs, blockquotes, figures, images, and figure captions</li>
<li>A rich text element can be used with static or dynamic content.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=640f77614688201e84ab79a1" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>