-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyleguide.html
107 lines (107 loc) · 6.67 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
<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Sun Jun 19 2022 15:37:48 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="5fe7ecd4a1e86d12d82164d6" data-wf-site="5fe7ecd404bf076b0d4f76de">
<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/siyang-me.webflow.css" rel="stylesheet" type="text/css">
<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: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Droid Serif:400,400italic,700,700italic","Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic","Merriweather:300,300italic,400,400italic,700,700italic,900,900italic","Lora:regular","Roboto:regular"] }});</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.jpg" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.jpg" 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">
<a href="about.html" class="navi-icon w-nav-link">Siyang Ye</a>
<div class="navigation-wrap">
<div class="menu">
<nav role="navigation" class="navigation-items w-nav-menu">
<a href="index.html" class="navigation-item w-nav-link">Projects</a>
<a href="https://drive.google.com/file/d/1rz5inhxaZCAX3Jnw6q0solmjqkv_lwt0/view?usp=sharing" class="navigation-item w-nav-link">CV</a>
<a href="about.html" class="navigation-item w-nav-link">About me</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-1-cover-header">
<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=5fe7ecd404bf076b0d4f76de" 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>