near/computersandblues.lodestone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add lodestone image and page styling

Browse source
This commit is contained in:
arne 2025-11-09 08:08:05 +01:00
commit 7f185c15fe
2 changed files with 96 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/img/lodestone_attracting_nails.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 181 KiB

96
public/index.html
View file

@ -3,8 +3,104 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Lodestone</title> <title>Lodestone</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
*, *:before, *:after { box-sizing: border-box; }
html, body { padding: 0; margin: 0; }
body {
margin: 24px;
min-height: 100vh;
max-width: 1000px;
background: #fbf5de;
color: #222;
font-family: sans-serif;
font-size: 16px;
line-height: 1.2;
}
@media screen and (min-width: 768px) {
body {
margin: 24px;
}
}
h1, h2, h3 {
font-family: serif;
margin: 0;
}
h1 {
font-size: 36px;
line-height: 48px;
margin-bottom: 12px;
}
h2 {
font-size: 24px;
line-height: 30px;
margin-bottom: 6px;
}
h3 {
clear: both;
font-size: 18px;
line-height: 24px;
margin-bottom: 6px;
}
img {
max-width: 100%;
height: auto;
}
p {
margin: 16px 0;
}
img.illustration {
width: 150px;
height: auto;
float: left;
margin-right: 24px;
margin-bottom: 24px;
mix-blend-mode: luminosity;
vertical-align: middle;
}
#root {
clear: both;
}
input {
margin: 3px 0;
padding: 3px;
}
.controls {
padding: 0 0 36px;
}
ul.results {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.results li {
padding: 36px 0;
border-top: 2px dotted #dccb8b;
}
.content p:last-child {
margin-bottom: 0
}
</style>
</head> </head>
<body> <body>
<img class="illustration" src="./img/lodestone_attracting_nails.png" width="150" />
<h1>Lodestone</h1>
<p>Lodestone is an application to help you navigate the fediverse. It surfaces things you enjoyed and provides a search that runs fully in your own browser.</p>
<div id="root"></div> <div id="root"></div>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
</body> </body>