-
-
Notifications
You must be signed in to change notification settings - Fork 41
/
new.html
153 lines (121 loc) · 4.4 KB
/
new.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name = "description" content = "HTML starter reset file">
<meta name = "keywords" content = "html, css, events, mouse, keyboard, mobile first, media queries">
<meta name = "author" content = "You">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<!-- Note: type "module", not "javascript" -->
<script type = "module">
let make = function(payload) { return { method: 'post',
headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
body: JSON.stringify(payload) };
}
// Use and $ instead of dinosauric document.querySelector function
let $ = selector => document.querySelector(selector);
let $$ = selector => document.querySelectorAll(selector);
// fetch POST example; uses make function to create payload
/*
fetch("https://www.twitter.com/followers.json", make({token:token})).then( (response) => response.text().then(msg => {
console.log(msg); // Text message returned from the server
}));
*/
// Sort json by multiple properties
const sortFields = (fields, invert) => (a, b) => fields.map(o => { let dir = 1; if (o[0] === '-') { dir = -1; o=o.substring(1); } return a[o] > b[o] ? dir : a[o] < b[o] ? -(dir) : 0;}).reduce((p, n) => p ? p : n, 0);
window.addEventListener('DOMContentLoaded', event => {
/* Your DOM just loaded */
});
window.onload = event => {
/* Your media (images, etc.) just loaded */
const root = $(`#root`)
const elements = $$(`div`)
}
</script>
<style style = "text/css">
body {
}
#root {
}
main {
height: 100%;
}
* { font-family: Arial; }
/* padding shouldn't impact element width this is also CSS grid's default setting */
* { box-sizing: border-box }
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
/* vertical and horizontal align */
.f { display: flex; }
.v { align-items: center }
.vs { align-items: flex-start }
.ve { align-items: flex-end }
.h { justify-content: center }
.hs { justify-content: flex-start }
.he { justify-content: flex-end }
.r { flex-direction: row }
.rr { flex-direction: row-reverse }
.c { flex-direction: column }
.cr { flex-direction: column-reverse }
.s { justify-content: space-around }
.o { padding: 5px }
.p { padding: 10px }
.pp { padding: 20px }
.ppp { padding: 30px }
.pppp { padding: 50px }
.ppppp { padding: 100px }
.m { margin: 5px }
.mm { margin: 10px }
.mmm { margin: 20px }
.mmmm { margin: 30px }
.b { font-size: 28px }
.abs { position: absolute }
.rel { position: relative }
.zero-padding { padding: 0 !important; }
/* default test item */
.f section {
width: auto;
height: auto;
}
/* Chrome applies blue "usability" background to autofilled input boxes, but it's a nightmare for custom design */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important }
/* Remove Chrome outline (same reason as above) */
*:focus { outline: none }
/* Mobile first, means this media query first -- use min-width in ascending order
Smallest phone screen (iphone, android, etc.) */
@media screen and (min-width: 600px) {
* { }
}
/* Next wider view (iphone pro, etc) */
@media screen and (min-width: 800px) {
* { }
}
/* Next wider view (tablets) */
@media screen and (min-width: 1000px) {
* { }
}
/* Full screen desktop */
@media screen and (min-width: 1200px) {
* { }
}
/* Reasonably decent font */
* {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
}
</style>
</head>
<body>
<main id = "root">
<article class = "f v h">
<section class = "f v h">I am centered</section>
</article>
</main>
</body>
</html>