diff --git a/assets/css/index.css b/assets/css/index-common.css similarity index 68% rename from assets/css/index.css rename to assets/css/index-common.css index ac84f39..e1283d9 100644 --- a/assets/css/index.css +++ b/assets/css/index-common.css @@ -9,8 +9,29 @@ margin-top: 3em; } -.group { - width: 100%; +@media screen and (min-width: 600px) { + .page { + padding: 2em 10em + } + .row { + gap: 4em; + } +} + +.controls { + display: flex; + flex-wrap: wrap; + gap: 1em; +} + +.controls a { + display: flex; + gap: 8px; + align-items: center; +} + +.controls a img { + filter: invert(100%); } h2 { @@ -18,23 +39,6 @@ h2 { margin-bottom: 6px; } -div > a { - display: flex; - padding-top: 6px; - padding-bottom: 6px; - align-items: center; - gap: 8px; -} - -div > a > img { +img { filter: invert(100%); } - -@media screen and (min-width: 600px) { - .page { - padding: 2em 10em - } - .group { - max-width: 230px; - } -} diff --git a/assets/css/index-list.css b/assets/css/index-list.css new file mode 100644 index 0000000..92da401 --- /dev/null +++ b/assets/css/index-list.css @@ -0,0 +1,12 @@ +.group { + width: 100%; + max-width: max-content; +} + +.links > a { + display: flex; + padding-top: 6px; + padding-bottom: 6px; + align-items: center; + gap: 8px; +} diff --git a/assets/css/index-tiles.css b/assets/css/index-tiles.css new file mode 100644 index 0000000..9a88226 --- /dev/null +++ b/assets/css/index-tiles.css @@ -0,0 +1,37 @@ +.group { + width: 100%; + max-width: max-content; +} + +.links { + width: 100%; + display: flex; + flex-wrap: wrap; + gap: 5px; +} + +.links > a { + display: flex; + flex-direction: column; + justify-content: center; + width: 130px; + height: 130px; + padding-top: 6px; + padding-bottom: 6px; + align-items: center; + gap: 8px; + border: 2px solid #444; + border-radius: 5px; + text-align: center; +} + +.links > a:hover { + border-color: #812abd; + text-decoration: none; +} + +.links img { + flex-grow: 1; + width: 30px; + height: 30px; +} diff --git a/templates/index.html.tmpl b/templates/index.html.tmpl index f3bf377..403d109 100644 --- a/templates/index.html.tmpl +++ b/templates/index.html.tmpl @@ -2,32 +2,54 @@
{{template "head" .}} - + +- You don't have any links. - Go to settings and create one. -
- {{else}} - Settings - {{end}} + ++ You don't have any links. + Go to settings and create one. +
+ {{else}} + + Settings + + {{end}} + + {{ if ne .style "list" }} + + List + + {{ end }} + + {{ if ne .style "tiles" }} + + Tiles + + {{ end }} +