/
styleguide.html
58 lines (45 loc) · 3.22 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Legalese</title>
<meta name="description" content="legalese.com">
<meta name="author" content="legalese">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Alegreya:400,700|Open+Sans:300,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" href="css/landingpage.css">
<link rel="stylesheet" media="(max-width: 768px)" href="css/landingpage-max-768.css">
</head>
<body>
<h1>General Aesthetics</h1>
<ul><li>neon punk / neon grunge / fluor / <a class="a-link" href="https://www.google.com/search?q=tiger+girl+movie&safe=off&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj9oOWbo8LYAhUDtlMKHZwSBVoQ_AUICygC&biw=1280&bih=1321">Tiger Girl</a> / colour swatches: <a class="a-link" href="https://www.pinterest.com.au/pin/543176405043760297/">pinterest</a> / <a class="a-link" href="https://unsplash.com/search/photos/neon/">unsplash dowhatyouwant photos</a> /<a class="a-link" href="https://www.awwwards.com/neon-fluor-could-be-a-new-trend-in-webdesign.html/"> awwwards</a> / <a class="a-link" href="http://www.cybercitypunk.com/wallpapers/"> cybercitypunk wallpaper of Singapore</a></li>
<li><a class="a-link" href="https://designshack.net/articles/graphics/neon-colors-web-design/">guidelines from designshack</a></li></ul>
<h1>Colours</h1>
<ul> <li>links use the "a-link" class</li>
<li style='color: #0000FF'>Neon blue for links is #0000FF (0,0,255)</li>
<li style='color: #333333'>Dark grey in place of black for better readability; #333333</li>
<li style='color: rgba(255,255,0,0.8)'>Neon yellow for highlights rgba(255,255,0,0.8)</li>
<li style='color: #82fece'>Seafoam green rgb(82, 254, 206), #82fece</li>
<li style='color: #10e7ff'>Aqua blue: #10e7ff</li>
<li style='color: #2befed'>Fluor greenish blue: #2befed</li>
<li style='color: #f6fc2d'>Fluor yellow: #f6fc2d</li>
<li style='color: #10e7ff'>brighter blue: #ff006b</li>
<li style='color: #ff38d1'>Fluor pink: #ff38d1</li>
<li style='color: #ff00b2'>Fluor pink alternative #ff00b2</li>
<li style='color: #8b51f5'>Purpur #8b51f5</li>
</ul>
<h1>Fonts</h1>
<ul>
<li style='font-family: Alegreya, serif'>Legalese: "Alegreya", serif</li>
<li style='font-family: Lato, san-serif'>Body: "Lato", san-serif</li>
</ul>
<h1>Images</h1>
<ul>
<li><a class="a-link" target="_blank" href="https://streamlineicons.com/">Streamline</a> vector icons used in most of the static pages</li>
<li><a class="a-link" target="_blank" href="https://www.streamlineicons.com/ux/">Streamline</a> UX drawings used in the static pages. Stored on-site.</li>
</ul>
</body></html>