mirror of
https://github.com/LBRYFoundation/lbry.com.git
synced 2025-08-23 17:47:26 +00:00
113 lines
3.1 KiB
SCSS
113 lines
3.1 KiB
SCSS
@import "global";
|
|
|
|
.prev-next
|
|
{
|
|
margin-top: $spacing-vertical * 2;
|
|
margin-bottom: $spacing-vertical * 2;
|
|
|
|
.prev-next-label
|
|
{
|
|
font-weight: bold;
|
|
}
|
|
.next
|
|
{
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
|
|
.post-header
|
|
{
|
|
margin-bottom: $spacing-vertical * 2;
|
|
|
|
&.no-cover1 { // diagonal stripes
|
|
background-color: $color-primary;
|
|
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.08) 35px, rgba(255,255,255,.08) 70px);
|
|
}
|
|
&.no-cover2 { // argyle
|
|
background-color: $color-primary;
|
|
background-image:
|
|
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
|
|
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
|
|
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
|
|
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
|
|
background-size: 70px 120px;
|
|
}
|
|
&.no-cover3 { // polka dots
|
|
background-color: $color-primary;
|
|
background-image: radial-gradient(rgba(255,255,255,.1) 15%, transparent 16%),
|
|
radial-gradient(rgba(255,255,255,.1) 15%, transparent 16%);
|
|
background-size:60px 60px;
|
|
background-position: 0 0, 30px 30px;
|
|
}
|
|
&.no-cover4 { // pluses
|
|
background:
|
|
radial-gradient(circle, transparent 17%, $color-primary 17%, $color-primary 83%, transparent 83%, transparent),
|
|
radial-gradient(circle, transparent 17%, $color-primary 17%, $color-primary 83%, transparent 83%, transparent) 50px 50px,
|
|
linear-gradient(lighten($color-primary, 7%) 6px, transparent 6px) 0 -3px,
|
|
linear-gradient(90deg, lighten($color-primary, 7%) 6px, transparent 6px) -3px 0;
|
|
background-color: $color-primary;
|
|
background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;
|
|
}
|
|
&.with-cover {
|
|
@include background-size (cover);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
@include absolute-center();
|
|
|
|
.post-header-inner
|
|
{
|
|
margin: auto;
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
|
|
&.content-dark
|
|
{
|
|
text-shadow: 2px 2px 3px rgba(0,0,0,0.4), -1px -1px 0 rgba(0,0,0,0.4), 1px -1px 0 rgba(0,0,0,0.4), -1px 1px 0 rgba(0,0,0,0.4), 1px 1px 0 rgba(0,0,0,0.4);
|
|
}
|
|
&.content-light
|
|
{
|
|
text-shadow: 2px 2px 3px rgba(255,255,255,0.4), -1px -1px 0 rgba(255,255,255,0.4), 1px -1px 0 rgba(255,255,255,0.4), -1px 1px 0 rgba(255,255,255,0.4), 1px 1px 0 rgba(255,255,255,0.4);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-height: 500px) {
|
|
.post-header {
|
|
min-height: 500px;
|
|
&:not(.with-cover)
|
|
{
|
|
min-height: 250px;
|
|
}
|
|
}
|
|
}
|
|
@media (max-height: 500px) {
|
|
.post-header {
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
|
|
.post-content
|
|
{
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: $max-post-content-width;
|
|
margin-bottom: $spacing-vertical * 2;
|
|
a[href]
|
|
{
|
|
@include anchor($color-primary);
|
|
}
|
|
img + p
|
|
{
|
|
margin-top: $spacing-vertical;
|
|
}
|
|
}
|
|
|
|
.post-author-spotlight
|
|
{
|
|
h3 { text-transform: uppercase; margin-top: $spacing-vertical / 4 !important; }
|
|
}
|