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

tweeks

Browse Source
This commit is contained in:
k 2024-06-25 13:34:55 -04:00
parent 22038c9264
commit 16d71b7e4c
3 changed files with 114 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
css/shared.css
View File

@ -1,37 +1,13 @@
html { :root { color: white; font-family:sans-serif }
height: 100vh;
width: 100vw;
background: linear-gradient(45deg, gold 2%, purple);
overflow: hidden;
margin: 0px;
animation: gradient 35s linear infinite;
background-size: 180% 180%;
}
body {
display: flex;
color: white;
margin: 0px;
}
body { margin: 0px; }
.artical { .artical {
width: min(calc(100vw - 4em), 55em);
margin: auto; margin: auto;
margin-top: 2em;
height: 25em;
overflow: hidden; overflow: hidden;
transition-duration: 1.5s; transition-duration: 1.5s;
} width:25%;
display: block;
.artical:hover {
width: calc(100% - 8em);
height: calc(100vh - 6em);
overflow: scroll;
}
.artical h1 {
margin: auto auto 0px auto;
} }
.artical hr { .artical hr {
@ -41,18 +17,29 @@ body {
height: 0.3em; height: 0.3em;
} }
.artical embed{
position: sticky;
height:100%;
width:100%;
overflow:hidden;
}
.artical:hover .preview { .artical:hover .preview {
display: none; display: none;
} }
.content { .content {
display: none; display: none;
color: white;
} }
.artical:hover .content { .artical:hover .content {
display: block; display: block;
} }
.glass { .glass {
background: rgba(128, 128, 128, 0.35); background: rgba(128, 128, 128, 0.35);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
@ -60,6 +47,16 @@ body {
padding: 1em 2em; padding: 1em 2em;
} }
.sunset {
background: linear-gradient(45deg, gold 2%, purple);
margin: 0px;
animation: gradient 35s linear infinite;
background-size: 180% 180%;
height: 100vh;
width: 100vw;
position: fixed;
z-index: -1;
}
@keyframes gradient { @keyframes gradient {
0% { 0% {

22
index.html
View File

@ -5,16 +5,32 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="css/shared.css"> <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="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A simple blog"> <meta name="description" content="A simple blog">
</head> </head>
<body> <body>
<div class="glass artical"> <div class="sunset"></div>
<div class=slide>
<span class="glass artical">
<h1>Test title #1</h1> <h1>Test title #1</h1>
<hr> <hr>
<p class="preview">test text</p> <embed class="preview" type="text/html" src="snippet.html"></embed>
<p class="content">test content</p> <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>
</body> </body>

68
snippet.html Normal file
View File

@ -0,0 +1,68 @@
<link rel="stylesheet" href="css/shared.css">
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>
<p>hello mario</p>