Skip to content

Commit

Permalink
initial css
Browse files Browse the repository at this point in the history
  • Loading branch information
aliceisjustplaying committed Sep 7, 2021
1 parent 8a863b7 commit d382890
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 7 deletions.
18 changes: 11 additions & 7 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,23 @@
<meta charset="utf-8" />
<title>iveble</title>
<script type="module" src="main.js"></script>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="main.css" />
<link rel="icon" type="image/png" href="bottom.png" />
<link rel="shortcut icon" type="image/png" href="bottom.png" />
<link rel="apple-touch-icon" type="image/png" href="bottom.png" />
</head>
<body>
<div id="container">
<div id="content"></div>
<a id="tweetit" href="#">tweet it</a>
<button id="newplsuwu">can i have a new one? 🥺</button>
<div id="footer">
created by <a href="https://twitter.com/__justplaying">alice</a>, inspired by
<a href="https://twitter.com/thingskatedid/status/1435166036475604994">@thingskatedid's tweet</a>. i am sorry.
<div id="page-container">
<div id="content-wrap">
<div id="content"></div>
<a id="tweetit" href="#"><img src="twitter.png" alt="twitter logo" width="0.8%" height="0.8%" /> tweet it</a>
<button id="newplsuwu">can i have a new one? 🥺</button>
</div>
<footer id="footer">
created by <a href="https://twitter.com/__justplaying">alice</a>, inspired by
<a href="https://twitter.com/thingskatedid/status/1435166036475604994">@thingskatedid's tweet</a>
</footer>
</div>
</body>
</html>
40 changes: 40 additions & 0 deletions main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

img {
display: inline-block;
}

#page-container {
position: relative;
min-height: 100vh;
}

#page-container {
}

#content {
font-size: 4rem;
font-weight: bold;
}

#content-wrap {
position: absolute;
top: 20%;
left: 50%;
text-align: center;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
padding-bottom: 2rem; /* Footer height */
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2rem; /* Footer height */
text-align: center;
font-size: 0.8rem;
}
74 changes: 74 additions & 0 deletions reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
list-style: none;
}

/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}

/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}

*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

0 comments on commit d382890

Please sign in to comment.