hugo-theme-zzo/assets/sass/pages/_publication.scss

229 lines
3.8 KiB
SCSS

.pub {
padding: 0.75rem 1.5rem;
@media only screen and (max-width: 600px) {
padding: 1rem;
}
&__section {
@include flexbox();
@include flex-direction(column);
}
&__toolbar {
&--search {
width: 240px;
padding: 0 0.5rem;
margin-right: 1rem;
@media only screen and (max-width: 600px) {
width: 100%;
}
}
}
&__list {
margin: 1rem 0;
}
&__item {
margin: 1rem;
padding: 0.5rem 0;
@include flexbox();
@include flex-direction(column);
@media only screen and (max-width: 600px) {
margin: 1rem 0;
}
a {
@include themify($themes) {
color: themed('title-color');
@include on-event {
color: themed('link-hover');
}
}
}
}
&__meta {
margin: 0 0.25rem;
display: inline-block;
@include themify($themes) {
color: themed('meta-color');
}
}
&__summary {
margin-top: 0.75rem;
margin-bottom: 1rem;
font-size: 1rem;
}
&__btn {
padding: 0 0.4rem;
border-radius: 0.2rem;
@include themify($themes) {
color: themed('body-color') !important;
background-color: themed('donation-background-color');
@include on-event {
background-color: darken(themed('donation-background-color'), 5%);
}
}
}
&__metas {
margin-top: 0.25rem;
@include flexbox();
@include flex-wrap(wrap);
}
&__tags {
display: inline-block;
list-style-type: none;
z-index: z('card-outter');
@include flexbox();
@include align-items(center);
}
&__tag {
padding: 0 0.25rem;
@include themify($themes) {
color: themed('link') !important;
@include on-event {
color: themed('link-hover') !important;
}
}
}
&__box {
width: 100%;
height: auto;
border-radius: 0.2rem;
padding: 1rem;
position: relative;
@include flexbox();
@include flex-grow(1);
@include flex-direction(column);
@include justify-content(flex-start);
@include themify($themes) {
border: 1px solid themed('content-box-border-color');
background-color: themed('body-background-color');
}
@include on-event {
@include box-shadow(1px, 1px, 3px, 0px, rgba(0, 0, 0, 0.25));
background-color: rgba(125, 125, 125, 0.1);
}
&--title {
font-size: 1rem;
font-family: $title-font;
@include themify($themes) {
color: themed('title-color');
}
}
&--desc {
font-size: 0.9rem;
margin: 0.5rem 0;
}
&--links {
width: 100%;
font-size: 0.9rem;
@include flexbox();
@include flex-wrap(wrap);
a {
margin: 0.125rem;
z-index: z('card-outter');
@include themify($themes) {
color: themed('meta-color');
text-decoration: none;
@include on-event {
color: themed('link-hover');
}
}
}
&[data-dir="ltr"] {
a:not(.pub__tag) {
&:first-child {
margin-right: 1rem;
}
}
}
&[data-dir="rtl"] {
a:not(.pub__tag) {
&:first-child {
margin-left: 1rem;
}
}
}
}
}
}
.pgrid {
position: relative;
margin-bottom: 1rem;
.full {
width: 100%;
}
.half {
width: 50%;
}
}
/* clear fix */
.pgrid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.pgrid-sizer {
padding: 0.5rem;
}
.pgrid-sizer,
.pgrid-item {
width: 49.5%;
}
@media only screen and (max-width:769px) {
.pgrid-sizer,
.pgrid-item {
width: 100%;
}
}
.pgrid-item {
float: left;
border-radius: 0.25rem;
padding: 0.51rem;
position: relative;
opacity: 1;
height: auto;
cursor: pointer;
}
.pgrid-item img {
display: block;
max-width: 100%;
}