lew/guestbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

styles: semantic html rather than all being pre-wrapped to generalise for others

Browse source
This commit is contained in:
Lewis Wynne 2026-04-10 19:25:53 +01:00
parent 9f0e3aae6d
commit a7c74241a0
7 changed files with 52 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

50
templates/default.css
View file

@ -3,22 +3,32 @@
max-width: 70ch;
margin: 0 auto;
padding: 1rem;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Form */
.guestbook-prompt {}
.guestbook-prompt {
display: block;
margin-bottom: 1em;
}
.guestbook-form {}
.guestbook-label {}
.guestbook-input {}
.guestbook-label {
display: block;
}
.guestbook-input {
display: block;
margin-bottom: 0.5em;
}
.guestbook-textarea {
display: block;
box-sizing: border-box;
max-width: 100%;
margin-bottom: 0.5em;
}
.guestbook-button {
display: block;
margin-top: 1em;
margin-bottom: 1.5em;
}
/* Drawings */
@ -35,12 +45,19 @@
.guestbook-canvas-tools a {
cursor: pointer;
}
.guestbook-drawing-wrap {
display: block;
margin-bottom: 0.5em;
}
.guestbook-drawing-inline a {
cursor: pointer;
}
.guestbook-drawing-content:empty {
display: none;
}
.guestbook-drawing-content {
display: block;
margin-bottom: 1em;
margin-bottom: 0.5em;
}
.guestbook-swatch {
display: inline-block;
@ -65,6 +82,10 @@
}
/* Voice notes */
.guestbook-voice-wrap {
display: block;
margin-bottom: 0.5em;
}
.guestbook-voice-record.recording {
color: red;
}
@ -80,14 +101,25 @@
}
audio {
display: block;
margin-top: 0.6em;
margin-bottom: 0.3em;
height: 2em;
}
/* Entries */
.entry-header {}
.entry {
margin: 0.5em 0;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
}
.entry:last-child {
border-bottom: none;
}
.entry-header {
margin-bottom: 0.2em;
}
.entry-date {}
.entry-name {}
.entry-website {}
.entry-body {}
.entry-separator {}
.entry-body {
white-space: pre-wrap;
}

5
templates/success.html
View file

@ -20,9 +20,8 @@
</head>
<body>
<div class="page-container">
Thanks! Your message is pending approval.
<a href="/">&#8592; back</a>
<p>Thanks! Your message is pending approval.</p>
<p><a href="/">&#8592; back</a></p>
</div>
</body>
</html>