k/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better index

Browse Source
This commit is contained in:
k 2024-07-05 15:58:50 -04:00
parent 16d71b7e4c
commit e728b672e1
3 changed files with 48 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
css/index.css Normal file
View File

@ -0,0 +1,35 @@
.glass {
margin: auto;
margin-top: 2em;
width: 75%;
}
nav {
height: 2em;
text-align: center;
display: flex;
}
nav a {
display: inline-block;
margin: auto;
width: 4em;
height: 1.4em;
border-bottom-style: solid;
border-bottom-color: rgba(255, 255, 255, 0);
border-top-style: solid;
border-top-color: rgba(255, 255, 255, 0);
transition-duration: 0.25s;
color: white;
text-decoration: none;
}
nav a:hover {
border-bottom-color: rgba(255, 255, 255, 255)
}
h1{
border-bottom-style:dotted;
padding-right:1.25em;
width:fit-content
}

42
css/shared.css
View File

@ -1,45 +1,5 @@
:root { color: white; font-family:sans-serif }
body { margin: 0px; }
.artical {
margin: auto;
overflow: hidden;
transition-duration: 1.5s;
width:25%;
display: block;
}
.artical hr {
background: white;
border-color: white;
border-radius: 3em;
height: 0.3em;
}
.artical embed{
position: sticky;
height:100%;
width:100%;
overflow:hidden;
}
.artical:hover .preview {
display: none;
}
.content {
display: none;
color: white;
}
.artical:hover .content {
display: block;
}
.glass {
background: rgba(128, 128, 128, 0.35);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
@ -56,6 +16,8 @@ body { margin: 0px; }
width: 100vw;
position: fixed;
z-index: -1;
top:0;
left:0;
}
@keyframes gradient {

34
index.html
View File

@ -4,34 +4,22 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/shared.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/comic-mono@0.0.1/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A simple blog">
<link rel="stylesheet" href="css/shared.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="sunset"></div>
<div class=slide>
<span class="glass artical">
<h1>Test title #1</h1>
<hr>
<embed class="preview" type="text/html" src="snippet.html"></embed>
<embed class="content" type="text/html" src="snippet.html"></embed>
</span>
<span class="glass artical">
<h1>Test title #2</h1>
<hr>
<embed class="preview" type="text/html" src="snippet.html"></embed>
<embed class="content" type="text/html" src="snippet.html"></embed>
</span>
<span class="glass artical">
<h1>Test title #2</h1>
<hr>
<embed class="preview" type="text/html" src="snippet.html"></embed>
<embed class="content" type="text/html" src="snippet.html"></embed>
</span>
</div>
<div class="sunset"></div> <!--- ignore me --->
<nav class="glass">
<a href="https://google.com">test</a>
<a>test2</a>
</nav>
<main class="glass">
<h1>Hello world</h1>
<p>IDK what to put here lol</p>
</main>
</body>
</html>