my Gemini inspired website small design

Miguel de Luis Espinosa enteka at fastmail.com
Sun Feb 7 19:02:29 GMT 2021


Thanks all for you help on solving my gemini/website fiasco. Anyway, I went and decided to use my space in the web to be an auxiliary site to my gemini capsule.

One thing I've done is to "geminify" my CSS which is just this bit:

```
* {
font-family: 'Courier New', courier, monospace;
font-size: 1.2rem;
line-height: 1.33;
margin: 0 auto;
font-weight: normal;
}
html {background: #003300;}
body { max-width: 800px; padding: 7vh 5vw; background: beige; min-height: 100vh;}
main { margin: 3vh auto;}
h1 {font-size: 1.55555rem; margin: 3rem auto;}
h2,h3 {margin: 1rem -.5rem;}
h2 {border-bottom: thick solid black;}
h3 {width: max-content; border-bottom: thick solid black;}
a {display: block; margin: .25rem auto; text-indent: 1rem; text-decoration: none;}
a::before {content: "=> ";}
p + a, a + p {margin-top: 1rem;}
p {margin: .5em auto}
p + p {text-indent: 1rem}
footer {font-size: 80%;}
```
All elements, but the main h1 and the footer will use the same font size. There is no bold letters, and it's all, hopefully on Courier New. Text background is beige to be easy on the eyes and still provide contrast, and our familiar => replace underline text as the visual mark of a link.

Which is nothing too weird but for the a {display:block} hack/trickery/me being naughty(?). The reason being I want to force links to go in separate lines, just as in Gemini, but without having to enclose them in either the over-used divs, li or p tags. 

It's all in Spanish, and there's not much content, but if any of you are interested enough I'm enteka.xyz on the three protocols.

~ Miguel 


More information about the Gemini mailing list