diff options
Diffstat (limited to 'web/skeleton')
| -rw-r--r-- | web/skeleton/skeleton.go | 58 | ||||
| -rw-r--r-- | web/skeleton/style.css | 195 |
2 files changed, 253 insertions, 0 deletions
diff --git a/web/skeleton/skeleton.go b/web/skeleton/skeleton.go new file mode 100644 index 0000000..a3ba73e --- /dev/null +++ b/web/skeleton/skeleton.go @@ -0,0 +1,58 @@ +package skeleton + +import ( + _ "embed" + + . "maragu.dev/gomponents" + . "maragu.dev/gomponents/components" + . "maragu.dev/gomponents/html" +) + +//go:embed style.css +var styles string + +func Page(title string, children ...Node) Node { + return HTML5(HTML5Props{ + Title: title, + Language: "en", + Head: []Node{ + StyleEl(Raw(styles)), + }, + Body: []Node{ + Div(Class("container"), + Group(children), + footer(), + ), + }, + }) +} + +func footer() Node { + return Footer( + Hr(), + Text("scrapbook"), + ) +} + +func NavButton(label string, dest string) Node { + return A( + Class("button"), + Href(dest), + Text(label), + ) +} + +func Alert(label string, class string) Node { + return Div( + Class("alert "+class), + Text(label), + ) +} + +func AlertError(label string) Node { + return Alert(label, "error") +} + +func AlertSuccess(label string) Node { + return Alert(label, "success") +} diff --git a/web/skeleton/style.css b/web/skeleton/style.css new file mode 100644 index 0000000..b4cd0eb --- /dev/null +++ b/web/skeleton/style.css @@ -0,0 +1,195 @@ +html, body { + font-family: sans-serif; + +} +table { + border-collapse: collapse; +} + +th, td { + text-align: left; + padding: 8px; + border: black 1px solid; +} + +th { + background-color: #f2f2f2; +} + +a.button, input[type=submit] { + /* font-weight: bold; */ + border: 1px solid #000!important; + color: #000; + /* border: 2px solid #0074D9!important; + color: #0074D9; */ + padding: 3px 6px!important; + text-decoration: none; +} + +a.button:visited{ + color: #000; +} + +form { + display: flex; + flex-direction: column; +} + +fieldset { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1rem;; +} + +legend { + background-color: #000; + color: #fff; + padding: 3px 6px; + font-style: italic; +} + +label:not(input[type=checkbox]+label) { + font-weight: bold; +} + +input[type=checkbox] { + margin: 0 0.25rem 0 0; +} + +footer { + margin-top: 2rem; + color: gray; + font-size: smaller; +} + +button, input[type=submit] { + background: none!important; + font-family: sans-serif; + font-size: medium; + cursor: pointer; +} + +a.button:hover, button:hover, input[type=submit]:hover, button:active, a.button:active, input[type=submit]:active { + background: #000!important; + color: #fff!important; +} + +.form-help { + font-size: smaller; +} + +.container { + max-width: 800px; + margin: 0 auto; +} + +.control-group { + display: flex; + gap: 0.5rem; + flex-direction: row; +} + +.control-group.group-right { + justify-content: flex-end; +} + +.control-group a.button, .control-group button, .control-group input[type=submit] { + text-decoration: none; + width: initial; +} + +.table { + width: 100%; + align-items: center; + display: grid; + gap: 1rem; + margin-bottom: 1rem; +} + +.table > .header { + font-weight: bold; +} + +.files-table { + grid-template-columns: 1fr 1fr 1fr; + gap: 0.5rem; +} + +.files-table > a.name { + width: 100%; + border: none !important; + color: #0074D9 !important; + padding: 0 !important; + margin: 0 !important; + text-decoration: none; +} + +.sites-table { + grid-template-columns: 40% 1fr 1fr 1fr; +} + +.sites-table > .name { + display: flex; + flex-direction: column; +} + +.sites-table > .flags:not(.header) { + font-family: monospace; +} + +.sites-table > .name > span:nth-child(2) { + font-size: smaller; +} + +.sites-table > .actions, .versions-table > .actions { + display: flex; + gap: 0.5rem; + justify-self: flex-end; +} + +.versions-table { + grid-template-columns: 1fr 1fr; +} + +.versions-table > .span { + grid-column: 1 / span 2; +} + +.versions-table > .date { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.versions-table > .date > .current { + color: #0dbe22; + font-size: smaller; + font-style: italic; +} + +.alert { + background-color: #f2f2f2; + padding: 0.5rem 1rem; + border: 1px solid #e7e7e7; + margin-bottom: 1rem; + font-style: italic; +} + +.alert.success { + background-color: #aaffaa; + border: 1px solid #90ee90; +} + +.alert.error { + background-color: #ffcccb; + border: 1px solid #ff6666; +} + +.text-good { + color: #0dbe22; +} + +.text-bad { + color: #c02020; +}
\ No newline at end of file |