modules/stanford_layout_paragraphs/scss/preview_paragraphs.scss
// Import Decanter Library:
@import 'decanter/core/src/scss/decanter-no-markup';
@mixin button {
display: inline-block;
font-size: 21px;
padding: 10px 20px;
background-color: $su-color-digital-red;
color: $su-color-white !important;
text-decoration: none;
transition: background-color 0.25s ease-in-out ease-in-out;
margin: 0 19px 19px 0;
&:hover {
background-color: $su-color-black !important;
text-decoration: underline;
}
}
.js-lpb-region {
font-family: Source Sans Pro,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
.su-wysiwyg-text {
p {
font-size: 21px;
margin-bottom: 38px;
&:last-child {
margin-bottom: 0;
}
&.su-intro-text {
font-size: 30px;
}
&.su-font-splash {
font-size: 46px;
line-height: 56px;
}
&.su-quote-text {
font-size: 37px;
line-height: 63px;
}
&.su-callout-text {
font-size: 28px;
line-height: 33px;
}
&.su-subheading {
font-size: 24px;
line-height: 40px;
}
&.su-drop-cap {
font-size: 32px;
line-height: 45px;
&::first-letter {
font-size: 66px;
}
}
}
blockquote {
&::before,
&::after {
content: "";
}
}
div,
ul,
ol,
li,
td,
.tablesaw-cell-content {
font-size: 21px;
}
h2 {
font-size: 37px;
line-height: 45px;
font-weight: 700;
margin-bottom: 19px;
padding-top: 38px;
}
h3 {
font-size: 29px;
line-height: 36px;
font-weight: 700;
margin-bottom: 13px;
padding-top: 19px;
}
h4 {
font-size: 24px;
line-height: 29px;
font-weight: 700;
margin-bottom: 13px;
padding-top: 19px;
}
h5 {
font-size: 19px;
line-height: 23px;
font-weight: 700;
margin-bottom: 13px;
padding-top: 13px;
}
table {
thead + tbody {
border-top: 1px solid #d2d3d4;
}
}
th {
background: transparent;
}
.su-link {
font-weight: 600;
}
.su-button {
@include button;
}
.su-button--secondary {
display: inline-block;
padding: 10px 20px;
border: 2px solid $su-color-digital-red;
color: $su-color-digital-red;
text-decoration: none;
margin: 0 19px 19px 0;
&:hover {
border: 2px solid $su-color-black;
color: $su-color-black;
text-decoration: underline;
}
}
.su-button--big {
@include button;
font-size: 30px;
padding: 15px 30px;
}
.su-link--action {
&::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054";
margin-left: 5px;
}
}
ul {
ul {
list-style-type: circle;
ul {
list-style-type: square;
}
}
}
li {
margin-bottom: 10px;
}
.align-center {
img,
picture {
display: block;
margin: 0 auto;
}
}
}
.su-news-edit-article,
.su-people-edit-article,
.su-events-edit-article,
.views-field-edit-node {
display: none;
}
.su-list-unstyled,
.su-list-unstyled > li {
list-style-type: none !important;
margin: 0;
padding: 0;
}
.su-media__caption {
max-width: 100%;
}
.su-button {
@include button;
}
}
// New layout paragraphs styles.
.js-lpb-component {
&[data-type="stanford_entity"],
&[data-type="stanford_wysiwyg"],
&[data-type="stanford_media_caption"],
&[data-type="stanford_cta_list"],
&[data-type="stanford_stories"],
&[data-type="stanford_lists"],
&[data-type="stanford_gallery"],
&[data-type="stanford_card"] {
margin: 0 auto;
width: 100%;
max-width: 880px;
@include grid-media('xl') {
max-width: 980px;
}
}
&[data-type="stanford_media_caption"] {
.su-media__caption {
width: 100%;
font-size: 16px;
}
.su-media {
margin: 0;
padding: 0;
}
}
&[data-type="stanford_entity"] {
container: entity-list/ inline-size;
a {
color: $su-color-digital-red;
text-decoration: none;
font-weight: 700;
&:hover {
color: $su-color-black;
}
}
.field--name-su-entity-item {
display: grid;
gap: 40px;
@container entity-list (min-width: 550px) {
grid-template-columns: repeat(2, 1fr);
} @container entity-list (min-width: 800px) {
grid-template-columns: repeat(3, 1fr);
}
}
}
&[data-type="stanford_gallery"] {
container-type: inline-size;
.field--name-su-gallery-images {
.layout--layout-paragraphs-one-column & {
display: grid;
grid-template-columns: repeat(3,
1fr);
grid-gap: 20px;
}
}
.field--name-su-gallery-caption {
text-align: right;
}
.field--name-su-gallery-button {
text-align: center;
}
}
&[data-type="stanford_lists"] {
.layout--layout-paragraphs-two-column &,
.layout--layout-paragraphs-three-column & {
.grid-container-2,
.grid-container-3 {
display: grid;
grid-template-columns: 1fr;
grid-gap: 20px;
}
}
.layout--layout-paragraphs-one-column & {
.grid-container-2 {
display: grid;
grid-template-columns: repeat(2,
1fr);
grid-gap: 20px;
}
.grid-container-3 {
display: grid;
grid-template-columns: repeat(3,
1fr);
grid-gap: 20px;
}
}
.view-content {
ul {
&.su-list-unstyled {
margin: 0;
padding: 0;
}
}
}
.views-infinite-scroll-content-wrapper {
margin: 0;
}
}
a {
&.button {
@include button;
font-size: 21px !important;
padding: 10px 20px !important;
}
}
// People Cards & views
.ds-entity--stanford-person {
container: person / inline-size;
.su-card {
@container person (min-width: 550px) {
display: flex;
align-items: center;
}
}
}
.field--name-su-person-photo {
max-width: 330px;
padding: 30px;
margin: 0 auto;
img {
border-radius: 50%;
}
}
.view-stanford-person {
h2 {
font-size: 24px !important;
}
.views-field-su-person-short-title {
font-size: 18px;
}
}
.ds-entity--stanford-person,
.field--name-su-entity-button,
.field--name-su-entity-headline,
.field--name-su-list-headline,
.field--name-su-list-button {
text-align: center;
}
.su-margin-bottom-1 {
margin-bottom: 27px;
}
.su-margin-bottom-2 {
margin-bottom: 30px;
}
.su-margin-bottom-3 {
margin-bottom: 47px;
}
.su-margin-bottom-4 {
margin-bottom: 60px;
}
.su-margin-bottom-5 {
margin-bottom: 75px;
}
.su-margin-bottom-6 {
margin-bottom: 95px;
}
.su-margin-bottom-7 {
margin-bottom: 114px;
}
// News Cards and Views
.ds-entity--stanford-news {
.su-media {
margin: 0;
}
.news-vertical-teaser__topics {
a {
font-size: 18px;
}
li {
margin: 0;
}
}
}
.view-stanford-news {
.su-news-list__item-date {
font-size: 18px;
}
h2 {
font-size: 30px;
}
.su-news-list__topics {
font-size: 19px;
ul,
li {
margin: 0;
padding: 0;
}
}
}
.su-news-list {
.su-news-article {
padding: 60px 0;
}
}
// Event Cards and Views
.ds-entity--stanford-event,
.view-stanford-events {
container: event / inline-size
}
.su-event-list-item {
margin-bottom: 0;
@container event (max-width: 550px) {
display: block;
}
}
.event-list-item__type a,
.views-field-su-event-date-time,
.views-field-su-event-location,
.views-field-su-event-address,
.address {
font-size: 18px !important;
line-height: 24px;
}
// Publications
.views-field-su-publication-citation {
font-size: 21px;
.csl-entry {
margin-left: 19px;
text-indent: -19px;
}
}
}