CrispyPin/blug
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

embed css in html

Browse source
This commit is contained in:
Crispy 2024-05-28 09:17:03 +02:00
parent 79ca764d52
commit 08b4234370
5 changed files with 88 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
site/humans/distracting.html
View file

@ -4,11 +4,28 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>something silly - distracting</title> <title>distracting</title>
<link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/cretin.png"> <link rel="icon" type="image/x-icon" href="/cretin.png">
<style>
html {
color-scheme: dark;
font-family: sans-serif;
background-color: #111;
}
main {
width: 800px;
background-color: #222;
margin: auto;
padding: 2px 32px 32px;
border-left: 4px solid #d3f;
}
@media screen and (max-width:900px) {
main {
width: calc(100% - 82px);
}
}
</style>
</head> </head>
<body> <body>
<main> <main>
<h1>distracting </h1> <h1>distracting </h1>
@ -25,5 +42,4 @@ go back to <a href="/">procrastinating</a><br>
</main> </main>
</body> </body>
</html> </html>

24
site/index.html
View file

@ -4,11 +4,28 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>something silly - index</title> <title>index</title>
<link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/cretin.png"> <link rel="icon" type="image/x-icon" href="/cretin.png">
<style>
html {
color-scheme: dark;
font-family: sans-serif;
background-color: #111;
}
main {
width: 800px;
background-color: #222;
margin: auto;
padding: 2px 32px 32px;
border-left: 4px solid #d3f;
}
@media screen and (max-width:900px) {
main {
width: calc(100% - 82px);
}
}
</style>
</head> </head>
<body> <body>
<main> <main>
<h1>crispys blug</h1> <h1>crispys blug</h1>
@ -36,5 +53,4 @@ this means it is<br>
</main> </main>
</body> </body>
</html> </html>

24
site/keyboards-are-fun.html
View file

@ -4,11 +4,28 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>something silly - keyboards-are-fun</title> <title>keyboards-are-fun</title>
<link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/cretin.png"> <link rel="icon" type="image/x-icon" href="/cretin.png">
<style>
html {
color-scheme: dark;
font-family: sans-serif;
background-color: #111;
}
main {
width: 800px;
background-color: #222;
margin: auto;
padding: 2px 32px 32px;
border-left: 4px solid #d3f;
}
@media screen and (max-width:900px) {
main {
width: calc(100% - 82px);
}
}
</style>
</head> </head>
<body> <body>
<main> <main>
<h1>keyboards!</h1> <h1>keyboards!</h1>
@ -32,5 +49,4 @@ this bit was written with 8vim<br>
</main> </main>
</body> </body>
</html> </html>

19
site/style.css
View file

@ -1,19 +0,0 @@
html {
color-scheme: dark;
font-family: sans-serif;
background-color: #111;
}
main {
width: 800px;
background-color: #222;
margin: auto;
padding: 2px 32px 32px;
border-left: 4px solid #d3f;
}
@media screen and (max-width:900px) {
main {
width: calc(100% - 82px);
}
}

24
template.html
View file

@ -4,15 +4,31 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>something silly - {FILENAME}</title> <title>{FILENAME}</title>
<link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/cretin.png"> <link rel="icon" type="image/x-icon" href="/cretin.png">
<style>
html {
color-scheme: dark;
font-family: sans-serif;
background-color: #111;
}
main {
width: 800px;
background-color: #222;
margin: auto;
padding: 2px 32px 32px;
border-left: 4px solid #d3f;
}
@media screen and (max-width:900px) {
main {
width: calc(100% - 82px);
}
}
</style>
</head> </head>
<body> <body>
<main> <main>
{CONTENT} {CONTENT}
</main> </main>
</body> </body>
</html> </html>