187 lines
2.9 KiB
SCSS
187 lines
2.9 KiB
SCSS
$bg: #fff !default;
|
|
$bg2: darken($bg, 6) !default;
|
|
$fg: #000 !default;
|
|
$dim: lighten($fg, 50) !default;
|
|
$dimmer: darken($bg2, 10) !default;
|
|
$link: #09c !default;
|
|
|
|
html,
|
|
body {
|
|
background-color: $bg;
|
|
font-family: 'Roboto', roboto, Arial, sans-serif;
|
|
color: $fg;
|
|
font-weight: lighter;
|
|
overflow-x:hidden;
|
|
font-size:100%;
|
|
word-break: break-word;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a,
|
|
a * {
|
|
color: $link;
|
|
}
|
|
|
|
.meta {
|
|
//padding: 1rem;
|
|
background-color: $bg2;
|
|
}
|
|
|
|
.header{
|
|
display:flex;
|
|
background-size:cover;
|
|
min-height:8rem;
|
|
color:$fg;
|
|
.header-left,.header-right{
|
|
margin:0;
|
|
}
|
|
.header-left{
|
|
min-width:8rem;
|
|
position:relative;
|
|
text-align:center;
|
|
background:transparentize($bg,0.7);
|
|
.avatar{
|
|
width: 6rem;
|
|
height: 6rem;
|
|
position:relative;
|
|
top:calc(50% - 3rem);
|
|
}
|
|
}
|
|
.header-right{
|
|
flex-grow:1;
|
|
font-size:0.9rem;
|
|
padding:0.9rem;
|
|
background:transparentize($bg,0.15);
|
|
}
|
|
}
|
|
|
|
.item {
|
|
padding: 1rem;
|
|
border-top: solid 1px $dimmer;
|
|
}
|
|
|
|
.item-content,
|
|
.cw,
|
|
.title {
|
|
font-size: 1.1rem;
|
|
font-weight:lighter;
|
|
}
|
|
|
|
|
|
.item-content *,.cw{
|
|
margin: 1rem 0;
|
|
line-height:1.4rem;
|
|
}
|
|
|
|
.item-title,
|
|
.date,
|
|
.author-fullname {
|
|
color: $dim;
|
|
font-size: 0.9rem;
|
|
}
|
|
.date{
|
|
margin: 1rem 0 0 0;
|
|
}
|
|
|
|
.author {
|
|
display: flex;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.author-info {
|
|
margin: 0 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
.author-displayname {
|
|
font-size: 1.2rem;
|
|
color: $fg;
|
|
text-decoration: none;
|
|
display: block;
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border: none;
|
|
border-radius: 10%;
|
|
&.circular{
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
|
|
.enclosures {
|
|
padding: 0.5em 0;
|
|
display: flex;
|
|
flex-wrap:wrap;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.enclosure{
|
|
display:flex;
|
|
flex: 1 1 auto;
|
|
width:50%;
|
|
display: inline-block;
|
|
border: none;
|
|
max-height: 12rem;
|
|
}
|
|
a.enclosure{
|
|
cursor: zoom-in;
|
|
}
|
|
.enclosure>*{
|
|
flex: 1 1 auto;
|
|
width:100%;
|
|
height:100%;
|
|
object-fit: cover;
|
|
}
|
|
.meta .title{
|
|
font-weight:bold;
|
|
}
|
|
.hidden{
|
|
display:none;
|
|
}
|
|
.button{
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
margin: 1rem;
|
|
border-radius: 0.5rem;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
background:$link;
|
|
color:$fg;
|
|
font-weight:400;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
user-select: none;
|
|
}
|
|
label.button{
|
|
padding: 0.25rem 0.5rem;
|
|
margin:0.4rem;
|
|
background:$dimmer;
|
|
color:$bg;
|
|
font-size:0.8rem;
|
|
}
|
|
|
|
// checkbox hack stuff
|
|
input[type=checkbox] {
|
|
position: absolute;
|
|
left: -9999px;
|
|
}
|
|
input[type=checkbox]:checked ~ label::after{
|
|
content:" Less";
|
|
}
|
|
input[type=checkbox]:not(:checked) ~ label::after{
|
|
content:" More";
|
|
}
|
|
|
|
input[type=checkbox]:not(:checked) ~ div{
|
|
display:none;
|
|
}
|