v/0x76.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

first few things

Browse source
This commit is contained in:
Vivian 2022-05-09 16:58:56 +02:00
parent c0e7721a87
commit e3fff66bf6
No known key found for this signature in database
GPG key ID: F69440FC85CD66CD
4 changed files with 77 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitattributes vendored Normal file
View file

@ -0,0 +1 @@
*.ttf filter=lfs diff=lfs merge=lfs -text

BIN
assets/monogram.ttf (Stored with Git LFS) Normal file
View file

Binary file not shown.

11
index.html
View file

@ -4,16 +4,23 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Page - My Site</title>
<title>0x76.dev</title>
<meta name="description" content="Page description">
<link rel="stylesheet" href="/style.css">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<meta name="theme-color" content="#8000FF">
<meta name="theme-color" content="#0FO">
</head>
<body>
<script src="/script.js" type="module"></script>
<main>
<section id="main">
<h1>0x76.dev</h1>
<p>Hiiiii~</p>
<span class="blinking-cursor"></span>
</section>
</main>
</body>
</html>

64
style.css
View file

@ -0,0 +1,64 @@
:root {
--color: #7fffbf;
}
@font-face {
font-family: "monogram";
src: url("./assets/monogram.ttf");
}
body {
background-color: black;
color: var(--color);
font-family: "monogram", monospace;
/* x-offset y-offset blur color */
text-shadow: 0 0 2px #0f0, -2px 0 2px #f00, 2px 0 2px #00f;
}
h1 {
font-size: 6rem;
}
p {
font-size: 2rem;
}
main {
width: 100%;
height: 100%;
display: grid;
column-gap: 3rem;
row-gap: 3rem;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 25% 1fr 1fr;
}
main>section#main {
grid-column: 2;
grid-row: 2;
}
main>section {
text-align: center;
}
main>section>p:after {
content: "";
width: 1ch;
height: 0.6em;
background: var(--color);
display: inline-block;
animation: blink 1.5s steps(2) infinite;
}
@keyframes blink {
0% {
opacity: 0;
}
}