crunk
11 months ago
2 changed files with 76 additions and 12 deletions
@ -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; |
|||
} |
|||
} |
|||
|
Loading…
Reference in new issue