Fsh-plus/branding.html at main · fsh-org/Fsh-plus · 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
<!-- what are you doing here? theres nothing to see -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Branding Fsh</title>
    <!-- Boiler plate------ -->
    <link rel="icon" href="/fsh.png" type="image/png">
    <meta name="description" content="Fsh branding">
    <!-- ------- -->
    <link rel="stylesheet" href="/media/style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:image" content="https://fsh.plus/fsh.png"/>
    <meta name="theme-color" content="#a89c9b">
    <!-- ------------------ -->
    <script src="https://account.fsh.plus/script.js"></script>
    <style>
      body {
        text-align: center;
      }
      .color {
        display: inline-block;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <h1>Branding</h1>
    <h2>Brand</h2>
    <img src="/fsh.png" alt="Fsh logo static" height="60">
    <img src="/fsh.gif" alt="Fsh logo rotating gif" height="60">
    <span style="font-size:60px">Fsh</span>
    <p>Font family: Lexend (OFL)</p>
    <h2>Colors</h2>
    <p>Colors are organized via name-tone</p>
    <p>Tone 1 is default, 0 more potent and any other more washed out/darker</p>
    <span>Text: </span>
    <span class="color" style="color:var(--bg-0);background:var(--text-0);">text-0</span>
    <span class="color" style="color:var(--bg-0);background:var(--text-1);">text-1</span>
    <span class="color" style="color:var(--bg-0);background:var(--text-2);">text-2</span>
    <span class="color" style="color:var(--bg-0);background:var(--text-3);">text-3</span>
    <br>
    <span>Background: </span>
    <span class="color" style="background:var(--bg-0)">bg-0</span>
    <span class="color" style="background:var(--bg-1)">bg-1</span>
    <span class="color" style="background:var(--bg-2)">bg-2</span>
    <span class="color" style="background:var(--bg-3)">bg-3</span>
    <span class="color" style="background:var(--bg-4)">bg-4</span>
    <br>
    <span>Generic: </span>
    <span class="color" style="background:linear-gradient(to bottom,var(--black-1) 0%,var(--black-1) 50%,var(--black-2) 50%,var(--black-2) 100%);color:var(--text-0);">black-1/2</span>
    <span class="color" style="background:linear-gradient(to bottom,var(--white-1) 0%,var(--white-1) 50%,var(--white-2) 50%,var(--white-2) 100%);color:var(--bg-0);">white-1/2</span>
    <span class="color" style="background:linear-gradient(to bottom,var(--red-1) 0%,var(--red-1) 50%,var(--red-2) 50%,var(--red-2) 100%)">red-1/2</span>
    <span class="color" style="background:linear-gradient(to bottom,var(--yellow-1) 0%,var(--yellow-1) 50%,var(--yellow-2) 50%,var(--yellow-2) 100%);color:var(--bg-0);">yellow-1/2</span>
    <span class="color" style="background:linear-gradient(to bottom,var(--green-1) 0%,var(--green-1) 50%,var(--green-2) 50%,var(--green-2) 100%);color:var(--bg-0);">green-1/2</span>
    <span class="color" style="background:linear-gradient(to bottom,var(--blue-1) 0%,var(--blue-1) 50%,var(--blue-2) 50%,var(--blue-2) 100%)">blue-1/2</span>
    <span class="color" style="background:linear-gradient(to bottom,var(--purple-1) 0%,var(--purple-1) 50%,var(--purple-2) 50%,var(--purple-2) 100%)">purple-1/2</span>
  </body>
</html>