[READ-ONLY] Mirror of https://github.com/probablykasper/canvas-experiments. Just me learning to use HTML canvas
canvas-experiments.kasper.space
canvas
html5-canvas
website
init
+144
+31
css/global.css
+31
css/global.css
···
1
+
html body { background-color: white; margin: 0px; font-family: 'Roboto', Arial, sans-serif; color: black; }
2
+
3
+
html p, html h1, html h2, html h3, html h4, html h5, html h6 { margin: 0px; font-weight: normal; }
4
+
5
+
html .metadata { display: none; }
6
+
7
+
html h1 { font-size: 50px; }
8
+
9
+
html h2 { font-size: 35px; }
10
+
11
+
html h3 { font-size: 30px; }
12
+
13
+
html h4 { font-size: 25px; }
14
+
15
+
html h5 { font-size: 20px; }
16
+
17
+
html a, html a:link, html a:visited, html a:link:active, html a:visited:active { text-decoration: none; outline: none; color: white; }
18
+
19
+
html img { display: block; }
20
+
21
+
html input:focus, html button:focus, html textarea:focus, html div, html p { outline: none; }
22
+
23
+
html input, html textarea, html button { font-family: 'Roboto', Arial, sans-serif; border: none; font-size: 16px; }
24
+
25
+
html input[type="range"] { display: none; }
26
+
27
+
html .flex-row { display: flex; justify-content: center; flex-direction: row; width: 100%; }
28
+
29
+
html .flex-col { display: flex; justify-content: center; flex-direction: column; height: 100%; }
30
+
31
+
html .invisible { visibility: none; }
+49
css/global.sass
+49
css/global.sass
···
1
+
@import "variables.sass"
2
+
// defaults
3
+
html
4
+
body
5
+
background-color: white
6
+
margin: 0px
7
+
font-family: 'Roboto', Arial, sans-serif
8
+
color: $c-text
9
+
p, h1, h2, h3, h4, h5, h6
10
+
margin: 0px
11
+
font-weight: normal
12
+
.metadata
13
+
display: none
14
+
h1
15
+
font-size: 50px
16
+
h2
17
+
font-size: 35px
18
+
h3
19
+
font-size: 30px
20
+
h4
21
+
font-size: 25px
22
+
h5
23
+
font-size: 20px
24
+
a, a:link, a:visited, a:link:active, a:visited:active
25
+
text-decoration: none
26
+
outline: none
27
+
color: white
28
+
img
29
+
display: block
30
+
input:focus, button:focus, textarea:focus, div, p
31
+
outline: none
32
+
input, textarea, button
33
+
font-family: 'Roboto', Arial, sans-serif
34
+
border: none
35
+
font-size: 16px
36
+
input[type="range"]
37
+
display: none
38
+
.flex-row
39
+
display: flex
40
+
justify-content: center
41
+
flex-direction: row
42
+
width: 100%
43
+
.flex-col
44
+
display: flex
45
+
justify-content: center
46
+
flex-direction: column
47
+
height: 100%
48
+
.invisible
49
+
visibility: none
+1
css/home.css
+1
css/home.css
···
1
+
canvas { border: 1px solid #BFADDF; }
+40
css/variables.sass
+40
css/variables.sass
···
1
+
// !compileOnSave
2
+
3
+
// COLOR
4
+
// material color palette gen: https://material.io/color
5
+
6
+
// Color palette
7
+
$c-primary: #00e676
8
+
$c-primary-light: #66ffa6
9
+
$c-primary-dark: #00b248
10
+
// $c-secondary: #00e676
11
+
// $c-secondary-light: #66ffa6
12
+
// $c-secondary-dark: #00b248
13
+
14
+
$c-text: black
15
+
16
+
// Palette
17
+
$bg-1: $bg-md-light-1
18
+
$bg-2: $bg-md-light-2
19
+
$bg-3: $bg-md-light-3
20
+
$bg-4: $bg-md-light-4
21
+
// BG Palette - Material Light
22
+
$bg-md-light-1: #E0E0E0 // status bar
23
+
$bg-md-light-2: #F5F5F5 // nav bar
24
+
$bg-md-light-3: #FAFAFA // bg
25
+
$bg-md-light-4: #FFFFFF // cards/dialogs
26
+
// BG Palette - Material Dark
27
+
$bg-md-dark-1: #000000 // status bar
28
+
$bg-md-dark-2: #212121 // nav bar
29
+
$bg-md-dark-3: #303030 // bg
30
+
$bg-md-dark-4: #424242 // cards/dialogs
31
+
32
+
// shadow-elevation
33
+
$shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
34
+
$shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
35
+
$shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
36
+
$shadow-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
37
+
$shadow-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)
38
+
39
+
// transitions
40
+
$transition: .15s cubic-bezier(0.4, 0.0, 0.2, 1)
+18
index.php
+18
index.php
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta charset="utf-8">
5
+
<meta name="theme-color" content="#db5945">
6
+
<title>Canvas</title>
7
+
<!--Roboto--> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
8
+
<!--Favicon: http:/#F986DF/realfavicongenerator.net -->
9
+
<link rel="stylesheet" type="text/css" href="/css/global.css?r=<?=rand(0,999)?>">
10
+
<link rel="stylesheet" type="text/css" href="/css/home.css?r=<?=rand(0,999)?>">
11
+
</head>
12
+
13
+
<body>
14
+
<canvas width="200px" height="100px"></canvas>
15
+
<!--jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
16
+
<!--js.cookie--> <script src="/js/js.cookie-2.1.4.min.js"></script>
17
+
</body>
18
+
</html>