responsive CSS
This commit is contained in:
parent
06954d018f
commit
843742140c
@ -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;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
/* Normalise section, things that css should always do but doesn't */
|
||||
a {
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
}
|
||||
img {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
@ -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…
Reference in New Issue
Block a user