From 843742140cc488419110a39770933f53f9e8762f Mon Sep 17 00:00:00 2001 From: crunk Date: Sun, 5 Nov 2023 17:35:00 +0100 Subject: [PATCH] responsive CSS --- static/css/base.css | 86 +++++++++++++++++++++++++++++++++++++------- templates/index.html | 2 ++ 2 files changed, 76 insertions(+), 12 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index 33bf07a..7c1316d 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -1,39 +1,101 @@ +html { + margin: 0; + padding: 0; +} body { text-rendering: optimizelegibility; -moz-text-size-adjust: none; - margin: 0px; + margin: 0; + padding: 0; + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ } + .crunkcolumns { display: grid; grid-auto-flow: column; - grid-gap: 1px; - grid-template-columns: repeat(auto-fill, 336px); - margin-left: 6px; + grid-gap: 0.3em; + grid-template-columns: fit-content(24%); + height: 100%; + min-height: 99%; + max-height: 100%; + width: 99%; + justify-content: center; + margin-bottom: 1em; + float: left; + object-fit: contain; } .feed { - grid-template-columns: inherit; + width: 23em; + height: 94vh; } +.feeditems { + height: 92%; + overflow-y: scroll; + border-bottom: 1px solid black; +} .feeditem { display: flex; - width: 336px; position: relative; flex-direction: column; box-sizing: border-box; border: 1px solid black; - margin-top: 1px; - padding: 3px; + margin-top: 0.2em; + padding: 1em; + vertical-align: top; } .feeditem h2, p{ - margin-bottom: 3px; - margin-top: 3px; + margin-bottom: 1em; + margin-top: 0.5em; } .feeditem p a { word-break: break-all; } +/* Normalise section, things that css should always do but doesn't */ +a { + display: inline-block; + background-color: transparent; +} img { - max-width: 100%; - max-height: 100%; + border-style: none; + max-width: 100%; + max-height: 100%; +} +* { + box-sizing: border-box; +} + +/* Extra small devices (phones, 600px and down) */ +@media only screen and (max-width: 700px) { + .crunkcolumns { + display: block; + } + .feed { + width: 98%; + height: inherit; + } + .feeditems { + height: inherit; + overflow-y: visible; + } +} +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 700px) and (max-width: 1365px) { + .crunkcolumns { + position: relative; + grid-template-columns: 1fr 1fr; + grid-auto-flow: row; + margin: 1em; + } + .feed { + height: inherit; + width: 48vw; + } + .feeditems { + height: inherit; + overflow-y: visible; + } } diff --git a/templates/index.html b/templates/index.html index 801b5f4..e466e1a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -10,12 +10,14 @@ {% for column in columns %}

{{ column.title }}

+
{% for feedtitle, text in column.entries.items() %}

{{ feedtitle }}

{{ text[0]|safe }}
{% endfor%} +
{% endfor%}