Browse Source

responsive CSS

main
crunk 11 months ago
parent
commit
843742140c
  1. 86
      static/css/base.css
  2. 2
      templates/index.html

86
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;
}
}

2
templates/index.html

@ -10,12 +10,14 @@
{% for column in columns %}
<div class="feed {{ column.title.replace(' ', '') }}">
<h1>{{ column.title }}</h1>
<div class="feeditems">
{% for feedtitle, text in column.entries.items() %}
<div class="feeditem" id="{{ column.title.replace(' ', '') + '_' + feedtitle.replace(' ', '') }}">
<h2>{{ feedtitle }}</h2>
<div>{{ text[0]|safe }}</div>
</div>
{% endfor%}
</div>
</div>
{% endfor%}
</div>

Loading…
Cancel
Save