diff --git a/src/pictures/static/pictures/detail.css b/src/pictures/static/pictures/detail.css new file mode 100644 index 0000000..bec1a4c --- /dev/null +++ b/src/pictures/static/pictures/detail.css @@ -0,0 +1,5 @@ +img { + max-width: var(--max-width); + margin-top: 1em; + border-radius: 10px; +} diff --git a/src/pictures/static/pictures/list.css b/src/pictures/static/pictures/list.css new file mode 100644 index 0000000..3ac4f2e --- /dev/null +++ b/src/pictures/static/pictures/list.css @@ -0,0 +1,22 @@ +.message { + display: flex; + flex-direction: row; + margin-bottom: 2em; +} + +.message .picture-preview { + flex-grow: 0; +} + +.picture-preview > * { + height: 200px; + width: 200px; + object-fit: cover; + background-color: lightgray; + border-radius: 5px; +} + +.message .content-block { + flex-grow: 1; + margin-left: 1em; +} diff --git a/src/pictures/static/pictures/style.css b/src/pictures/static/pictures/style.css index 649df61..1b40baa 100644 --- a/src/pictures/static/pictures/style.css +++ b/src/pictures/static/pictures/style.css @@ -1,3 +1,7 @@ +:root { + --max-width: 750px; +} + body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } @@ -9,40 +13,17 @@ body { main { margin: 1em auto; - max-width: 750px; + max-width: var(--max-width); } -.message { - display: flex; - flex-direction: row; - margin-bottom: 2em; -} - -.message .picture-preview { - flex-grow: 0; -} - -.picture-preview > * { - height: 200px; - width: 200px; - object-fit: cover; - background-color: lightgray; - border-radius: 5px; -} - -.message .content-block { - flex-grow: 1; - margin-left: 1em; -} - -.message .content-block .metadata .name { +.message .metadata .name { font-size: 120%; } -.message .content-block .metadata .date { +.message .metadata .date { color: #626262; } -.message .content-block .text { +.message .text { margin-top: 1em; } diff --git a/src/pictures/templates/pictures/base.html b/src/pictures/templates/pictures/base.html index 376618d..52b2f05 100644 --- a/src/pictures/templates/pictures/base.html +++ b/src/pictures/templates/pictures/base.html @@ -7,6 +7,8 @@ Picture Display + {% block extend_head %} + {% endblock %}