diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/index.vto | 104 | ||||
| -rw-r--r-- | www/tufte.css | 16 |
2 files changed, 64 insertions, 56 deletions
diff --git a/www/index.vto b/www/index.vto index 41ce3fd..6cdad59 100644 --- a/www/index.vto +++ b/www/index.vto @@ -6,72 +6,82 @@ contacts: description: Click me, trust me. - href: https://github.com/ivi-vink name: GitHub - description: CopilotHub? + description: Truely one of the gits of all time. - href: https://stackoverflow.com/users/16349137/carrot-the-king - name: stackoverflow + name: StackOverflow description: Nothing here, but I have one. --- <html> <head> <title>{{ title }}</title> <link rel="stylesheet" href="/tufte.css" /> + <meta charset="utf-8"> </head> <body> <header> - <h1 class="webpagetitle">{{ title }}'s Webpage</h1> + <h1 class="sans centered">{{ title }}'s Webpage</h1> </header> <main> <article> <section> - <header> - </header> - <section> - <figure class="centered"> - <a href="/picture-full.jpg"> - <img class="rounded" src="/picture.jpg" alt="/picture.jpg" /> - </a> - </figure> - <p> - <label for="sn-demo" - class="margin-toggle"> - </label> - <input type="checkbox" - id="sn-demo" - class="margin-toggle"/> - <span class="marginnote"> - <a href="/dunya-full.jpg" > - <img class="rounded" src="/dunya.jpg" alt="/dunya.jpg" /> + <figure class="centered"> + <a href="/picture-full.jpg"> + <img class="rounded" src="/picture.jpg" alt="/picture.jpg" /> + </a> + </figure> + <p> + Welcome, O, Surfer, I am Mike Vink and this is my webpage. + My cat's name is dunya. + <label for="dunya" + class="margin-toggle"> + 📎 (paperclips are clickable on small viewports) + </label> + <input type="checkbox" + id="dunya" + class="margin-toggle"/> + <span class="marginnote"> + <a href="/dunya-full.jpg" > + <img style="width: auto; max-height: 22vh; margin: 0 100% 0 0;" class="rounded" src="/dunya.jpg" alt="/dunya.jpg" /> Dunya - </a> - </span> - Welcome, O, Surfer, I am Mike Vink and this is my webpage. - That blue russian cat there is dunya. + </a> + </span> + </p> + </section> - </p> - </section> - <h2>Contact Info</h2> - <dl> - <dt> - email - </dt> - <dd> - ivi at this site's parent domain. - </dd> + <section> + <h2>Contact Info</h2> + <table class="sans"> + <tbody> + <tr> + <td> + <a rel="nofollow, noindex" href="email/">Email</a> + </td> + <td> + Feel free to send one. + </td> + </tr> {{ for link of contacts }} - <dt> - <a href="{{ link.href }}"> - {{ link.name }} - </a> - </dt> - <dd> - {{ link.description }} - </dd> + <tr> + <td> + <a href="{{ link.href }}"> + {{ link.name }} + </a> + </td> + <td> + {{ link.description }} + </td> + </tr> {{ /for }} - </dl> - </section> + </tbody> + </table> + </section> + </article> + <footer> + <a href="https://mike.vinkies.net"> + https://mike.vinkies.net + </a> + </footer> </main> - <footer> - </footer> </body> </html> diff --git a/www/tufte.css b/www/tufte.css index 7ee0540..067fb3c 100644 --- a/www/tufte.css +++ b/www/tufte.css @@ -457,15 +457,6 @@ html, body { margin: 0 } -h1.webpagetitle { - font-family: "Fira Sans",sans; - text-align: center; -} - -.imgfig { - text-align: center ; -} - img.rounded { border-radius: 50% ; } @@ -474,3 +465,10 @@ img.rounded { display: block; margin: auto; } +.centered { + text-align: center; +} + +table { + font-size: 1.4rem; +} |