this repo has no description
initial css
+125
-7
+11
-7
index.html
+11
-7
index.html
···
4
4
<meta charset="utf-8" />
5
5
<title>iveble</title>
6
6
<script type="module" src="main.js"></script>
7
+
<link rel="stylesheet" href="reset.css" />
8
+
<link rel="stylesheet" href="main.css" />
7
9
<link rel="icon" type="image/png" href="bottom.png" />
8
10
<link rel="shortcut icon" type="image/png" href="bottom.png" />
9
11
<link rel="apple-touch-icon" type="image/png" href="bottom.png" />
10
12
</head>
11
13
<body>
12
-
<div id="container">
13
-
<div id="content"></div>
14
-
<a id="tweetit" href="#">tweet it</a>
15
-
<button id="newplsuwu">can i have a new one? 🥺</button>
16
-
<div id="footer">
17
-
created by <a href="https://twitter.com/__justplaying">alice</a>, inspired by
18
-
<a href="https://twitter.com/thingskatedid/status/1435166036475604994">@thingskatedid's tweet</a>. i am sorry.
14
+
<div id="page-container">
15
+
<div id="content-wrap">
16
+
<div id="content"></div>
17
+
<a id="tweetit" href="#"><img src="twitter.png" alt="twitter logo" width="0.8%" height="0.8%" /> tweet it</a>
18
+
<button id="newplsuwu">can i have a new one? 🥺</button>
19
19
</div>
20
+
<footer id="footer">
21
+
created by <a href="https://twitter.com/__justplaying">alice</a>, inspired by
22
+
<a href="https://twitter.com/thingskatedid/status/1435166036475604994">@thingskatedid's tweet</a>
23
+
</footer>
20
24
</div>
21
25
</body>
22
26
</html>
+40
main.css
+40
main.css
···
1
+
body {
2
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
3
+
}
4
+
5
+
img {
6
+
display: inline-block;
7
+
}
8
+
9
+
#page-container {
10
+
position: relative;
11
+
min-height: 100vh;
12
+
}
13
+
14
+
#page-container {
15
+
}
16
+
17
+
#content {
18
+
font-size: 4rem;
19
+
font-weight: bold;
20
+
}
21
+
22
+
#content-wrap {
23
+
position: absolute;
24
+
top: 20%;
25
+
left: 50%;
26
+
text-align: center;
27
+
-moz-transform: translateX(-50%) translateY(-50%);
28
+
-webkit-transform: translateX(-50%) translateY(-50%);
29
+
transform: translateX(-50%) translateY(-50%);
30
+
padding-bottom: 2rem; /* Footer height */
31
+
}
32
+
33
+
#footer {
34
+
position: absolute;
35
+
bottom: 0;
36
+
width: 100%;
37
+
height: 2rem; /* Footer height */
38
+
text-align: center;
39
+
font-size: 0.8rem;
40
+
}
+74
reset.css
+74
reset.css
···
1
+
/* Box sizing rules */
2
+
*,
3
+
*::before,
4
+
*::after {
5
+
box-sizing: border-box;
6
+
}
7
+
8
+
/* Remove default margin */
9
+
body,
10
+
h1,
11
+
h2,
12
+
h3,
13
+
h4,
14
+
p,
15
+
figure,
16
+
blockquote,
17
+
dl,
18
+
dd {
19
+
margin: 0;
20
+
}
21
+
22
+
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
23
+
ul[role="list"],
24
+
ol[role="list"] {
25
+
list-style: none;
26
+
}
27
+
28
+
/* Set core root defaults */
29
+
html:focus-within {
30
+
scroll-behavior: smooth;
31
+
}
32
+
33
+
/* Set core body defaults */
34
+
body {
35
+
min-height: 100vh;
36
+
text-rendering: optimizeSpeed;
37
+
line-height: 1.5;
38
+
}
39
+
40
+
/* A elements that don't have a class get default styles */
41
+
a:not([class]) {
42
+
text-decoration-skip-ink: auto;
43
+
}
44
+
45
+
/* Make images easier to work with */
46
+
img,
47
+
picture {
48
+
max-width: 100%;
49
+
display: block;
50
+
}
51
+
52
+
/* Inherit fonts for inputs and buttons */
53
+
input,
54
+
button,
55
+
textarea,
56
+
select {
57
+
font: inherit;
58
+
}
59
+
60
+
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
61
+
@media (prefers-reduced-motion: reduce) {
62
+
html:focus-within {
63
+
scroll-behavior: auto;
64
+
}
65
+
66
+
*,
67
+
*::before,
68
+
*::after {
69
+
animation-duration: 0.01ms !important;
70
+
animation-iteration-count: 1 !important;
71
+
transition-duration: 0.01ms !important;
72
+
scroll-behavior: auto !important;
73
+
}
74
+
}