0byt3m1n1
Path:
C:
/
Program Files
/
RStudio
/
resources
/
app
/
bin
/
quarto
/
share
/
projects
/
website
/
about
/
[
Home
]
File: about.scss
/*-- scss:mixins --*/ @mixin responsive-buttons { display: flex; @include media-breakpoint-up(lg) { flex-direction: row; column-gap: 0.8em; row-gap: 15px; flex-wrap: wrap; } @include media-breakpoint-down(lg) { flex-direction: column; row-gap: 1em; width: 100%; padding-bottom: 1.5em; } } @mixin responsive-button { @include media-breakpoint-up(lg) { font-size: 0.8em; padding: 0.25em 0.5em; border-radius: 4px; } @include media-breakpoint-down(lg) { font-size: 1.1em; padding: 0.5em 0.5em; text-align: center; border-radius: 6px; } color: lighten($body-color, 20%); text-decoration: none; &:hover { color: $link-color; } border: solid 1px; i.bi { margin-right: 0.15em; } } @mixin image-shapes { img.round { border-radius: 50%; } img.rounded { border-radius: 10px; } } /*-- scss:rules --*/ // Jolla div.quarto-about-jolla { display: flex !important; flex-direction: column; align-items: center; margin-top: 10%; padding-bottom: 1em; .about-image { object-fit: cover; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } @include image-shapes(); .quarto-title h1.title { text-align: center; } .quarto-title .description { text-align: center; } h2 { border-bottom: none; } .about-sep { width: 60%; } main { text-align: center; } .about-links { @include responsive-buttons(); } .about-link { @include responsive-button(); } } // Solana div.quarto-about-solana { display: flex !important; flex-direction: column; padding-top: 3em !important; padding-bottom: 1em; .about-entity { display: flex !important; @include media-breakpoint-up(lg) { flex-direction: row; } @include media-breakpoint-down(lg) { flex-direction: column-reverse; align-items: center; text-align: center; } align-items: start; justify-content: space-between; .entity-contents { display: flex; flex-direction: column; @include media-breakpoint-down(md) { width: 100%; } } .about-image { object-fit: cover; @include media-breakpoint-down(lg) { margin-bottom: 1.5em; } } @include image-shapes(); .about-links { @include responsive-buttons(); justify-content: left; padding-bottom: 1.2em; } .about-link { @include responsive-button(); } } .about-contents { padding-right: 1.5em; flex-basis: 0; flex-grow: 1; main.content { margin-top: 0; } h2 { border-bottom: none; } } } // Trestles div.quarto-about-trestles { display: flex !important; flex-direction: row; padding-top: 3em !important; padding-bottom: 1em; @include media-breakpoint-down(lg) { flex-direction: column; padding-top: 0em !important; } .about-entity { @include media-breakpoint-up(lg) { //max-width: 42%; flex: 0 0 42%; } display: flex !important; flex-direction: column; align-items: center; text-align: center; padding-right: 1em; .about-image { object-fit: cover; margin-bottom: 1.5em; } @include image-shapes(); .about-links { @include responsive-buttons(); justify-content: center; } .about-link { @include responsive-button(); } } .about-contents { flex-basis: 0; flex-grow: 1; h2 { border-bottom: none; } @include media-breakpoint-up(lg) { border-left: solid 1px $border-color; padding-left: 1.5em; } main.content { margin-top: 0; } } } // Marquee div.quarto-about-marquee { padding-bottom: 1em; .about-contents { display: flex; flex-direction: column; } .about-image { max-height: 550px; margin-bottom: 1.5em; object-fit: cover; } @include image-shapes(); h2 { border-bottom: none; } .about-links { @include responsive-buttons(); justify-content: center; padding-top: 1.5em; } .about-link { @include responsive-button(); @include media-breakpoint-up(lg) { border: none; } } } // Broadside div.quarto-about-broadside { display: flex; flex-direction: column; padding-bottom: 1em; .about-main { display: flex !important; padding-top: 0 !important; @include media-breakpoint-up(lg) { flex-direction: row; align-items: flex-start; } @include media-breakpoint-down(lg) { flex-direction: column; } .about-entity { @include media-breakpoint-down(lg) { flex-shrink: 0; width: 100%; height: 450px; margin-bottom: 1.5em; background-size: cover; background-repeat: no-repeat; } @include media-breakpoint-up(lg) { flex: 0 10 50%; margin-right: 1.5em; width: 100%; height: 100%; background-size: 100%; background-repeat: no-repeat; } } .about-contents { padding-top: 14px; flex: 0 0 50%; } } h2 { border-bottom: none; } .about-sep { margin-top: 1.5em; width: 60%; align-self: center; } .about-links { @include responsive-buttons(); justify-content: center; column-gap: 20px; padding-top: 1.5em; } .about-link { @include responsive-button(); @include media-breakpoint-up(lg) { border: none; } } }