overleaf/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss

194 lines
3.4 KiB
SCSS
Raw Normal View History

.gallery.gallery-tagged {
.gallery-title {
display: block;
text-align: left;
}
.gallery-summary {
text-align: left;
}
}
.gallery {
margin-top: var(--spacing-10);
.filters {
float: right;
margin-bottom: var(--spacing-11);
display: flex;
gap: var(--spacing-04);
@include media-breakpoint-down(lg) {
float: none;
}
a {
text-decoration: none;
&:visited {
color: var(--green-50);
}
&:hover {
color: var(--green-60);
}
&.active {
font-weight: 600;
text-decoration: underline;
}
}
}
.gallery-header {
// padding: 0 is added when the screen size is much bigger than the $templates-search-max-width
// to remove unwanted padding
@include media-breakpoint-up(xl) {
padding: 0;
}
@include media-breakpoint-up(lg) {
max-width: $templates-search-max-width;
}
}
.gallery-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-06);
}
.gallery-summary {
@include body-lg;
text-align: center;
margin-bottom: var(--spacing-09);
max-width: 828px;
}
.top-picks-banner.container {
padding: 0;
margin: var(--spacing-16) auto;
}
.top-picks-banner {
// padding: var(--spacing-16) 90px;
// width: 100%;
h3 {
font-size: var(--font-size-08);
}
}
.no-articles-matching {
color: var(--neutral-90);
font-weight: 600;
@include heading-lg;
}
.template-summary {
margin-top: var(--spacing-02);
margin-bottom: var(--spacing-09);
@include body-lg;
}
@mixin line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.gallery-container {
--bs-gutter-y: var(--spacing-09);
.thumbnail {
background-color: var(--bg-light-secondary);
aspect-ratio: 1 / 1.414; // A4 Paper
object-fit: contain;
}
}
.gallery-thumbnail {
a {
@extend .link-black-text;
display: inline-block;
}
.thumbnail {
border-radius: var(--border-radius-base);
box-shadow: 0 var(--spacing-01) var(--spacing-02) rgb(0 0 0 / 10%);
margin: 0 0 var(--spacing-08) 0;
width: 100%;
}
.caption {
// Override Server Pro template styles
background: none;
border: none;
margin-top: var(--spacing-04);
}
.caption-description {
color: var(--neutral-70);
@include line-clamp;
}
.author-name {
margin-top: var(--spacing-04);
color: var(--neutral-70);
font-weight: 600;
}
.gallery-list-item-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-04);
.badge-container {
.badge:not(:first-child) {
margin-left: var(--spacing-04);
}
}
* {
flex-basis: content;
cursor: inherit;
}
}
.caption-title {
color: var(--neutral-90);
font-weight: 600;
@include heading-md;
@include line-clamp;
}
}
.pagination {
margin-top: var(--spacing-13);
}
.popular-tags {
margin-top: var(--spacing-16);
margin-bottom: var(--spacing-16);
h2 {
margin-bottom: var(--spacing-09);
}
.popular-tags-list {
row-gap: var(--spacing-11);
}
}
}