iPERDance.github.io/styleguide.html at master · iPERDance/iPERDance.github.io · GitHub

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. http://www.webflow.com  -->
<!--  Last Published: Tue Nov 17 2020 15:53:36 GMT+0000 (Coordinated Universal Time)  -->
<html data-wf-page="5fac074bd8bc9401d0482dfc" data-wf-site="5fac074a6b2e910cf4d1b21c">
<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/piaos-business-starter.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: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,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" role="banner" class="navigation w-nav">
    <div class="navigation-wrap">
      <a href="index.html" class="logo-link w-nav-brand">
        <div class="text-block">impersonator</div>
      </a>
      <div class="menu">
        <nav role="navigation" class="navigation-items w-nav-menu">
          <a href="index.html" class="navigation-item w-nav-link">HOME</a>
          <a href="projects.html" class="navigation-item w-nav-link">PrOJECTS</a>
          <a href="https://discuss.impersonator.org/" target="_blank" class="navigation-item w-nav-link">DISCUSS</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>
      <a href="mailto:impersonator.org@gmail.com?subject=Hi" class="button cc-contact-us w-inline-block">
        <div>Contact US</div>
      </a>
    </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 &amp; 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 &amp; 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" id="w-node-e50305e3e80a-d0482dfc" 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 &quot;When inside of&quot; 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=5fac074a6b2e910cf4d1b21c" 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>