mirror of
https://github.com/jgthms/bulma
synced 2026-03-20 20:24:30 -07:00
Bulma v9 website (#3249)
* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
This commit is contained in:
Jeremy Thomas
186
docs/_sass/pages/backers.scss
Normal file
186
docs/_sass/pages/backers.scss
Normal file
@@ -0,0 +1,186 @@
|
||||
.bd-backers {
|
||||
--spacing: 1.5rem;
|
||||
|
||||
padding-bottom: var(--spacing);
|
||||
padding-top: var(--spacing);
|
||||
}
|
||||
|
||||
.bd-backers-platforms {
|
||||
@extend %bd-backers-section;
|
||||
--spacing: 1.5rem;
|
||||
padding: var(--spacing);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bd-backers-platform {
|
||||
@extend %center;
|
||||
|
||||
.bd-backers-platform-logo {
|
||||
@extend %center;
|
||||
border-radius: $radius-large;
|
||||
padding: var(--spacing);
|
||||
transition-duration: $speed * 2;
|
||||
transition-property: box-shadow;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 2px var(--color);
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-is-patreon {
|
||||
--color: var(--patreon);
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
&.bd-is-github {
|
||||
--color: var(--github);
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
.bd-fat-button {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-backers-heading {
|
||||
@extend %center;
|
||||
|
||||
h2 {
|
||||
background-color: var(--sponsor-light);
|
||||
border-radius: $radius-large;
|
||||
color: var(--sponsor);
|
||||
font-size: 1em;
|
||||
font-weight: $weight-semibold;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-backers-group {
|
||||
@extend %bd-backers-section;
|
||||
padding: var(--spacing);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bd-backers-list {
|
||||
display: grid;
|
||||
grid-gap: 1em;
|
||||
|
||||
&.bd-is-patreon {
|
||||
grid-column: 2;
|
||||
|
||||
.icon-text {
|
||||
color: $text-light;
|
||||
font-size: 0.75em;
|
||||
|
||||
&.bd-is-twitter {
|
||||
color: var(--twitter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-is-github {
|
||||
grid-column: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tier {
|
||||
align-items: center;
|
||||
border-bottom: 2px solid $scheme-main-bis;
|
||||
display: grid;
|
||||
grid-gap: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.bd-tier-amount {
|
||||
color: $text-strong;
|
||||
font-size: 1.5em;
|
||||
font-weight: $weight-semibold;
|
||||
}
|
||||
|
||||
.bd-tier-frequency {
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
.bd-tiers-info {
|
||||
--spacing: 1.5em;
|
||||
background-color: $scheme-main-bis;
|
||||
color: $text-light;
|
||||
grid-gap: var(--spacing);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: var(--spacing);
|
||||
|
||||
strong {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tiers-info-question {
|
||||
justify-self: flex-end;
|
||||
max-width: 15em;
|
||||
}
|
||||
|
||||
.bd-tiers-info-answer {
|
||||
max-width: 25em;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.bd-backers-platform.bd-is-github {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
%bd-backers-section {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
1fr calc(var(--container-width) / 2) calc(var(--container-width) / 2)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.bd-backers {
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
transparent calc(50% - 2px),
|
||||
var(--sponsor-light) calc(50%),
|
||||
transparent calc(50% + 2px)
|
||||
);
|
||||
}
|
||||
|
||||
.bd-tier {
|
||||
grid-template-columns: 10em 8em 1fr;
|
||||
}
|
||||
|
||||
.bd-tier-amount {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bd-tiers-info {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.bd-tiers-info-question {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.bd-backers,
|
||||
.bd-tiers {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.bd-tiers-info {
|
||||
--spacing: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@include widescreen {
|
||||
.bd-backers,
|
||||
.bd-tiers {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
161
docs/_sass/pages/blog.scss
Normal file
161
docs/_sass/pages/blog.scss
Normal file
@@ -0,0 +1,161 @@
|
||||
$spacing: 2px;
|
||||
$icon-dimensions: 1.125em;
|
||||
|
||||
.bd-posts {
|
||||
--font-size-base: #{$size-6};
|
||||
--font-size-large: #{$size-5};
|
||||
--featured-font-size-base: 1.125rem;
|
||||
--featured-font-size-large: #{$size-4};
|
||||
--padding: 1.5rem;
|
||||
margin-top: $spacing;
|
||||
}
|
||||
|
||||
.bd-post {
|
||||
font-size: var(--font-size-base);
|
||||
position: relative;
|
||||
|
||||
&.is-featured {
|
||||
--font-size-base: var(--featured-font-size-base);
|
||||
--font-size-large: var(--featured-font-size-large);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
.bd-post-link {
|
||||
border-bottom: 2px solid $border-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-post-link {
|
||||
align-items: center;
|
||||
display: block;
|
||||
padding-bottom: calc(2 * var(--padding));
|
||||
padding-left: var(--padding);
|
||||
padding-right: var(--padding);
|
||||
padding-top: calc(2 * var(--padding));
|
||||
position: relative;
|
||||
transition-duration: $speed * 2;
|
||||
transition-property: background-color, border-bottom-color, box-shadow;
|
||||
|
||||
.icon {
|
||||
color: var(--color);
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
font-size: var(--font-size-large);
|
||||
height: $icon-dimensions;
|
||||
margin-right: 1em;
|
||||
width: $icon-dimensions;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $scheme-main-bis;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: $radius;
|
||||
box-shadow: 0 0 0 $spacing $scheme-main-bis;
|
||||
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-post-body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bd-post-content {
|
||||
code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-large);
|
||||
transition-duration: $speed * 2;
|
||||
transition-property: color;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: var(--font-size-base);
|
||||
color: $text-light;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-post-image {
|
||||
img {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-post-screenshot {
|
||||
img {
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.bd-post-image,
|
||||
.bd-post-screenshot {
|
||||
margin-top: var(--padding);
|
||||
}
|
||||
}
|
||||
|
||||
$second-column-width: (2 * 1.25rem * 1.125) + 1.5rem;
|
||||
|
||||
@include tablet {
|
||||
.bd-posts {
|
||||
--font-size-base: 1.125rem;
|
||||
--font-size-large: #{$size-4};
|
||||
--featured-font-size-base: #{$size-5};
|
||||
--featured-font-size-large: #{$size-3};
|
||||
--second-column-width: ((2 * #{$size-4} * 1.125) + 1.5rem);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr $second-column-width var(--container-width) $second-column-width 1fr;
|
||||
}
|
||||
|
||||
.bd-post {
|
||||
grid-column: 2 / span 3;
|
||||
}
|
||||
|
||||
.bd-post-link {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bd-post-body {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.bd-post-content {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.bd-post-image {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
height: 240px;
|
||||
margin-left: var(--padding);
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.bd-post-screenshot {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
height: 240px;
|
||||
justify-content: center;
|
||||
margin-left: var(--padding);
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
136
docs/_sass/pages/bootstrap.scss
vendored
Normal file
136
docs/_sass/pages/bootstrap.scss
vendored
Normal file
@@ -0,0 +1,136 @@
|
||||
$bootstrap: #6f5499;
|
||||
$bootstrap-invert: #fff;
|
||||
|
||||
.bd-bootstrap-table {
|
||||
margin: 3em 0;
|
||||
}
|
||||
|
||||
.bd-pros-heading {
|
||||
padding: 0 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bd-pros-icon {
|
||||
margin-bottom: 3em;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
height: 3em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-pros-list {
|
||||
margin: 0 auto;
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
.bd-pro {
|
||||
.icon {
|
||||
font-size: 1.25em;
|
||||
height: 1.125em;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
width: 1.125em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.25em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-pro + .bd-pro {
|
||||
margin-top: 2em;
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
.bd-pro-content {
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-pro.bd-is-bulma {
|
||||
.icon {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-pro.bd-is-bootstrap {
|
||||
.icon {
|
||||
color: $bootstrap;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-bootstrap-comparison {
|
||||
margin: 0 auto;
|
||||
max-width: 42em;
|
||||
|
||||
.table {
|
||||
color: $red;
|
||||
|
||||
thead,
|
||||
tfoot {
|
||||
th {
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1.5em;
|
||||
margin-right: 1em;
|
||||
position: relative;
|
||||
top: 0.25em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
th {
|
||||
font-size: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: $family-monospace;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-is-empty {
|
||||
background-color: $background;
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
.bd-is-unique {
|
||||
background-color: rgba($green, 0.25);
|
||||
color: $text-strong;
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-bootstrap-comparison-header {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.bd-bootstrap-table {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include widescreen {
|
||||
.bd-bootstrap-table {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
267
docs/_sass/pages/docs.scss
Normal file
267
docs/_sass/pages/docs.scss
Normal file
@@ -0,0 +1,267 @@
|
||||
.bd-docs {
|
||||
--docs-outer: 1.5rem;
|
||||
--docs-inner: 1.5rem;
|
||||
--docs-side-padding: 1rem;
|
||||
|
||||
border-top: 2px solid $scheme-main-ter;
|
||||
position: relative;
|
||||
|
||||
.bd-hero {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
%bd-docs-edge {
|
||||
background-color: $scheme-main-bis;
|
||||
width: $bd-edge-width;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.bd-docs-toggles {
|
||||
border-top: 2px solid $scheme-main-ter;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.bd-docs-overlay {
|
||||
@extend %overlay;
|
||||
background-color: black;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition-duration: 200ms;
|
||||
transition-property: opacity;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.bd-docs-main {
|
||||
padding-bottom: var(--docs-outer);
|
||||
padding-left: var(--docs-outer);
|
||||
padding-right: var(--docs-outer);
|
||||
|
||||
.bd-hero .hero-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-docs-nav {
|
||||
@extend %bd-docs-edge;
|
||||
}
|
||||
|
||||
.bd-docs-side {
|
||||
@extend %bd-docs-edge;
|
||||
}
|
||||
|
||||
.bd-docs-body {
|
||||
border-top: 2px solid $scheme-main-ter;
|
||||
padding-top: var(--docs-inner);
|
||||
}
|
||||
|
||||
.bd-docs-pagination {
|
||||
border-top: 2px solid $scheme-main-ter;
|
||||
margin-top: var(--docs-inner);
|
||||
padding-top: var(--docs-inner);
|
||||
}
|
||||
|
||||
.bd-docs-typo {
|
||||
margin-top: var(--docs-inner);
|
||||
}
|
||||
|
||||
.bd-side-sponsrs {
|
||||
@extend %block;
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bd-side-sponsor-label {
|
||||
color: $text-light;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.bd-side-sponsor {
|
||||
@extend %center;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.bd-docs-content {
|
||||
.bd-example.is-fullwidth,
|
||||
.section.is-fullwidth {
|
||||
margin-left: calc(-1 * var(--docs-outer));
|
||||
margin-right: calc(-1 * var(--docs-outer));
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
%bd-docs-edge {
|
||||
background-color: $scheme-main;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition-duration: 200ms;
|
||||
transition-property: transform;
|
||||
}
|
||||
|
||||
.bd-docs-overlay {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bd-docs {
|
||||
border-top: none;
|
||||
overflow: hidden;
|
||||
|
||||
&.bd-showing-overlay .bd-docs-overlay {
|
||||
opacity: 0.8;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-docs-nav {
|
||||
left: -1 * $bd-edge-width;
|
||||
|
||||
&.bd-is-shown {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-docs-side {
|
||||
right: -1 * $bd-edge-width;
|
||||
|
||||
&.bd-is-shown {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.bd-docs {
|
||||
--docs-outer: 3rem;
|
||||
--docs-inner: 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: $bd-edge-width 1fr $bd-edge-width;
|
||||
}
|
||||
|
||||
.bd-docs-main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bd-docs-toggles {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bd-docs.bd-is-fullwidth {
|
||||
display: block;
|
||||
|
||||
%bd-docs-edge {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
&.bd-is-stickied {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
background: none;
|
||||
overflow: hidden;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
.bd-categories {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-docs-nav {
|
||||
left: 0;
|
||||
|
||||
&:not(:hover) {
|
||||
left: $bd-edge-offset -$bd-edge-width;
|
||||
|
||||
.bd-categories-filter,
|
||||
.bd-categories-no-results {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-category-list {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.bd-category a {
|
||||
position: relative;
|
||||
text-indent: -9999px;
|
||||
width: 100%;
|
||||
|
||||
&::after {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
content: '•';
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
top: 0;
|
||||
width: $bd-edge-offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-docs-side {
|
||||
right: 0;
|
||||
|
||||
&:not(:hover) {
|
||||
right: $bd-edge-offset -$bd-edge-width;
|
||||
|
||||
.bd-features,
|
||||
.bd-anchors {
|
||||
padding-left: 0;
|
||||
padding-right: calc(2 * var(--docs-side-padding));
|
||||
}
|
||||
|
||||
.bd-features-title,
|
||||
.bd-feature,
|
||||
.bd-anchors-title,
|
||||
.bd-anchors-list li {
|
||||
position: relative;
|
||||
transform: translateX($bd-edge-offset);
|
||||
width: 100%;
|
||||
|
||||
&::after {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
content: '•';
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: $bd-edge-offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include touch {
|
||||
.bd-docs-pagination {
|
||||
.bd-fat-button {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.bd-docs {
|
||||
--docs-outer: 6rem;
|
||||
--docs-inner: 3rem;
|
||||
}
|
||||
}
|
||||
97
docs/_sass/pages/expo.scss
Normal file
97
docs/_sass/pages/expo.scss
Normal file
@@ -0,0 +1,97 @@
|
||||
$website-gap: 0px;
|
||||
$website-width: 672px;
|
||||
|
||||
.bd-websites {
|
||||
--gap: #{$website-gap};
|
||||
--width: #{$website-width};
|
||||
--spacing: 1.5rem;
|
||||
display: grid;
|
||||
grid-gap: var(--gap);
|
||||
grid-template-columns: 1fr;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: calc(
|
||||
calc(2 * calc(var(--width) + var(--spacing)) + calc(3 * var(--gap)))
|
||||
);
|
||||
padding-left: var(--spacing);
|
||||
padding-right: var(--spacing);
|
||||
}
|
||||
|
||||
.bd-website {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: calc(2 * var(--width));
|
||||
padding-bottom: var(--spacing);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--expo-light);
|
||||
|
||||
.title {
|
||||
color: var(--expo-dark);
|
||||
}
|
||||
|
||||
.bd-website-date {
|
||||
color: $text-strong;
|
||||
}
|
||||
|
||||
.bd-website-shadow {
|
||||
opacity: 0;
|
||||
}
|
||||
.bd-website-overlay {
|
||||
background-color: rgba($scheme-invert, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-is-highlighted {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-website-date {
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
.bd-website-image {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing);
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.b-lazy {
|
||||
opacity: 0;
|
||||
transition: opacity 500ms $easing;
|
||||
}
|
||||
|
||||
.b-loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-website-shadow {
|
||||
border: 1px solid rgba(#000, 0.04);
|
||||
transition: opacity 200ms $easing;
|
||||
}
|
||||
|
||||
.bd-website-overlay {
|
||||
background-color: transparent;
|
||||
border-radius: $radius;
|
||||
box-shadow: inset 0 0 0 1px rgba(#000, 0.04);
|
||||
transition: background-color 200ms $easing;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.bd-websites {
|
||||
--spacing: 3rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
|
||||
}
|
||||
}
|
||||
27
docs/_sass/pages/extensions.scss
Normal file
27
docs/_sass/pages/extensions.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
.bd-extension {
|
||||
border-bottom: 2px solid $scheme-main-bis;
|
||||
display: block;
|
||||
padding: 1.5rem;
|
||||
|
||||
.subtitle {
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $scheme-main-bis;
|
||||
|
||||
.title {
|
||||
color: $link;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: $text-strong;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.bd-extension {
|
||||
padding: 3rem 0;
|
||||
}
|
||||
}
|
||||
127
docs/_sass/pages/index.scss
Normal file
127
docs/_sass/pages/index.scss
Normal file
@@ -0,0 +1,127 @@
|
||||
:root {
|
||||
--bd-index-vertical: #{$block-spacing};
|
||||
--bd-index-gap: 3rem;
|
||||
}
|
||||
|
||||
$linear-gradient: linear-gradient(
|
||||
180deg,
|
||||
hsla(var(--bd-section-h), 100%, 67%, 0.1),
|
||||
transparent
|
||||
);
|
||||
|
||||
.bd-index-section {
|
||||
--bd-section-vertical: #{$block-spacing};
|
||||
--bd-section-horizontal: #{$block-spacing};
|
||||
--bd-section-h: 171deg;
|
||||
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
hsla(var(--bd-section-h), 100%, 67%, 0.1),
|
||||
transparent var(--bd-index-vertical)
|
||||
);
|
||||
// background-image: radial-gradient(
|
||||
// ellipse at top,
|
||||
// hsla(var(--bd-section-h), 100%, 67%, 0.1),
|
||||
// transparent calc(4 * var(--bd-index-vertical))
|
||||
// ), $linear-gradient;
|
||||
background-repeat: repeat-x;
|
||||
// background-size: 100% var(--bd-index-vertical);
|
||||
|
||||
.bd-tw {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 28em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-index-content {
|
||||
font-size: 1rem;
|
||||
|
||||
strong {
|
||||
font-weight: $weight-semibold;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $text-strong;
|
||||
font-size: 2em;
|
||||
font-weight: $weight-normal;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
height: 1.125em;
|
||||
position: absolute;
|
||||
right: calc(100% + #{$block-spacing});
|
||||
top: 0;
|
||||
width: 1.125em;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: $weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
strong {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
strong {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.bd-index-section {
|
||||
padding: ($block-spacing * 2) $block-spacing;
|
||||
|
||||
.bd-tws {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
:root {
|
||||
--bd-index-vertical: 3rem;
|
||||
}
|
||||
|
||||
.bd-index-section {
|
||||
padding-bottom: var(--bd-index-vertical);
|
||||
padding-top: var(--bd-index-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.bd-index-content {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include widescreen {
|
||||
:root {
|
||||
--bd-index-vertical: 6rem;
|
||||
}
|
||||
|
||||
.bd-index-content {
|
||||
font-size: 1.25rem;
|
||||
max-width: 23em;
|
||||
}
|
||||
}
|
||||
|
||||
@include fullhd {
|
||||
:root {
|
||||
--bd-index-vertical: 9rem;
|
||||
}
|
||||
|
||||
.bd-index-content {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
190
docs/_sass/pages/love.scss
Normal file
190
docs/_sass/pages/love.scss
Normal file
@@ -0,0 +1,190 @@
|
||||
.bd-tws {
|
||||
--tws-spacing: #{$block-spacing};
|
||||
--column-min-width: 100%;
|
||||
|
||||
padding-left: var(--tws-spacing);
|
||||
padding-right: var(--tws-spacing);
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.bd-tws {
|
||||
--column-min-width: 24em;
|
||||
}
|
||||
}
|
||||
|
||||
@include widescreen {
|
||||
.bd-tws {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tws-list {
|
||||
display: grid;
|
||||
grid-gap: var(--tws-spacing);
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--column-min-width), 1fr));
|
||||
}
|
||||
|
||||
.bd-tw {
|
||||
background-color: $scheme-main-bis;
|
||||
border-radius: $radius-large;
|
||||
flex-shrink: 0;
|
||||
font-size: 1em;
|
||||
padding: 1.25em;
|
||||
text-align: left;
|
||||
|
||||
&.bd-is-white {
|
||||
background-color: $scheme-main;
|
||||
}
|
||||
|
||||
> .mb-4 {
|
||||
float: right;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-header {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.bd-tw-author {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
line-height: 1.2;
|
||||
|
||||
&:hover {
|
||||
.bd-tw-fullname {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-avatar {
|
||||
flex-shrink: 0;
|
||||
height: 2.25em;
|
||||
margin-right: 0.5em;
|
||||
width: 2.25em;
|
||||
|
||||
img {
|
||||
border-radius: $radius-rounded;
|
||||
display: block;
|
||||
height: 2.25em;
|
||||
width: 2.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-fullname {
|
||||
color: $text-strong;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
|
||||
.bd-tw-username {
|
||||
color: $text-light;
|
||||
display: block;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.bd-tw-content {
|
||||
color: $text-strong;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
margin-top: 1em;
|
||||
|
||||
a {
|
||||
color: $link;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-date {
|
||||
font-size: 0.875em;
|
||||
line-height: 1.4;
|
||||
margin-top: 0.25em;
|
||||
|
||||
a {
|
||||
color: $text-light;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.bd-tw-action {
|
||||
margin-right: 1.25em;
|
||||
}
|
||||
|
||||
.bd-tw-action-link {
|
||||
align-items: center;
|
||||
color: $text-light;
|
||||
display: flex;
|
||||
height: 1.25em;
|
||||
min-width: 1.25em;
|
||||
}
|
||||
|
||||
.bd-tw-icon {
|
||||
background-size: contain;
|
||||
height: 1.25em;
|
||||
width: 1.25em;
|
||||
}
|
||||
|
||||
.bd-tw-action-stat {
|
||||
color: currentColor;
|
||||
font-size: 0.875em;
|
||||
margin-left: 0.5em;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.bd-tw-action.is-reply {
|
||||
.bd-tw-icon {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M14.046%202.242l-4.148-.01h-.002c-4.374%200-7.8%203.427-7.8%207.802%200%204.098%203.186%207.206%207.465%207.37v3.828c0%20.108.045.286.12.403.143.225.385.347.633.347.138%200%20.277-.038.402-.118.264-.168%206.473-4.14%208.088-5.506%201.902-1.61%203.04-3.97%203.043-6.312v-.017c-.006-4.368-3.43-7.788-7.8-7.79zm3.787%2012.972c-1.134.96-4.862%203.405-6.772%204.643V16.67c0-.414-.334-.75-.75-.75h-.395c-3.66%200-6.318-2.476-6.318-5.886%200-3.534%202.768-6.302%206.3-6.302l4.147.01h.002c3.532%200%206.3%202.766%206.302%206.296-.003%201.91-.942%203.844-2.514%205.176z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
|
||||
.bd-tw-action-link:hover {
|
||||
color: var(--info);
|
||||
|
||||
.bd-tw-icon {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%231DA1F2%22%20d%3D%22M14.046%202.242l-4.148-.01h-.002c-4.374%200-7.8%203.427-7.8%207.802%200%204.098%203.186%207.206%207.465%207.37v3.828c0%20.108.045.286.12.403.143.225.385.347.633.347.138%200%20.277-.038.402-.118.264-.168%206.473-4.14%208.088-5.506%201.902-1.61%203.04-3.97%203.043-6.312v-.017c-.006-4.368-3.43-7.788-7.8-7.79zm3.787%2012.972c-1.134.96-4.862%203.405-6.772%204.643V16.67c0-.414-.334-.75-.75-.75h-.395c-3.66%200-6.318-2.476-6.318-5.886%200-3.534%202.768-6.302%206.3-6.302l4.147.01h.002c3.532%200%206.3%202.766%206.302%206.296-.003%201.91-.942%203.844-2.514%205.176z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-action.is-retweet {
|
||||
.bd-tw-icon {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M23.77%2015.67c-.292-.293-.767-.293-1.06%200l-2.22%202.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414%200-.75.336-.75.75s.336.75.75.75h5.85c1.24%200%202.25%201.01%202.25%202.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06%200s-.294.768%200%201.06l3.5%203.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767%200-1.06zm-10.66%203.28H7.26c-1.24%200-2.25-1.01-2.25-2.25V6.46l2.22%202.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768%200-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06%200l-3.5%203.5c-.294.292-.294.767%200%201.06s.767.293%201.06%200l2.22-2.22V16.7c0%202.068%201.683%203.75%203.75%203.75h5.85c.414%200%20.75-.336.75-.75s-.337-.75-.75-.75z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
|
||||
.bd-tw-action-link:hover {
|
||||
color: var(--success);
|
||||
|
||||
.bd-tw-icon {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%2317BF63%22%20d%3D%22M23.77%2015.67c-.292-.293-.767-.293-1.06%200l-2.22%202.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414%200-.75.336-.75.75s.336.75.75.75h5.85c1.24%200%202.25%201.01%202.25%202.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06%200s-.294.768%200%201.06l3.5%203.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767%200-1.06zm-10.66%203.28H7.26c-1.24%200-2.25-1.01-2.25-2.25V6.46l2.22%202.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768%200-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06%200l-3.5%203.5c-.294.292-.294.767%200%201.06s.767.293%201.06%200l2.22-2.22V16.7c0%202.068%201.683%203.75%203.75%203.75h5.85c.414%200%20.75-.336.75-.75s-.337-.75-.75-.75z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-action.is-heart {
|
||||
.bd-tw-icon {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
|
||||
.bd-tw-action-link:hover {
|
||||
color: var(--danger);
|
||||
|
||||
.bd-tw-icon {
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23E0245E%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
}
|
||||
}
|
||||
43
docs/_sass/pages/made-with-bulma.scss
Normal file
43
docs/_sass/pages/made-with-bulma.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
.bd-mwb {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.bd-mwb-table {
|
||||
td {
|
||||
vertical-align: middle;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.bd-mwb {
|
||||
font-size: 1.125rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.bd-mwb {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-snippet-preview.bd-is-mwb {
|
||||
align-items: stretch;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.bd-snippet-code.bd-is-mwb {
|
||||
.highlight {
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-snippet-mwb {
|
||||
@extend %center;
|
||||
border-radius: $radius;
|
||||
flex-grow: 1;
|
||||
height: 10.5rem;
|
||||
}
|
||||
178
docs/_sass/pages/single.scss
Normal file
178
docs/_sass/pages/single.scss
Normal file
@@ -0,0 +1,178 @@
|
||||
.bd-single-header {
|
||||
--font-size-title: #{$size-3};
|
||||
--font-size-subtitle: #{$size-5};
|
||||
--font-size-date: #{$size-6};
|
||||
--margin: 3rem;
|
||||
--padding: 3rem;
|
||||
|
||||
margin-bottom: var(--margin);
|
||||
margin-top: var(--margin);
|
||||
padding-left: var(--padding);
|
||||
padding-right: var(--padding);
|
||||
text-align: center;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-title);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 16em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: $text-light;
|
||||
font-size: var(--font-size-subtitle);
|
||||
|
||||
&.is-date {
|
||||
font-size: var(--font-size-date);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-single-carbon {
|
||||
@extend %center;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.bd-single-body {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
|
||||
.bd-single-content {
|
||||
hr {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-single-hr {
|
||||
&:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-single-image {
|
||||
@extend %center;
|
||||
margin-bottom: 3rem;
|
||||
|
||||
div {
|
||||
flex-grow: 1;
|
||||
max-width: 1600px;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
figure {
|
||||
background: $background;
|
||||
padding-top: 56.25%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include touch() {
|
||||
.bd-single-body {
|
||||
&.bd-is-last {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet() {
|
||||
.bd-single-image {
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
|
||||
img {
|
||||
border-radius: $radius-large;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-single-content {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop() {
|
||||
.bd-single-header {
|
||||
--font-size-title: #{$size-2};
|
||||
--font-size-subtitle: #{$size-4};
|
||||
--font-size-date: #{$size-5};
|
||||
--margin: 4.5rem;
|
||||
--padding: 4.5rem;
|
||||
}
|
||||
|
||||
.bd-single-body {
|
||||
&.bd-is-last {
|
||||
padding-bottom: 4.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include widescreen() {
|
||||
.bd-single-header {
|
||||
--font-size-title: #{$size-1};
|
||||
--font-size-subtitle: #{$size-3};
|
||||
--font-size-date: #{$size-4};
|
||||
--margin: 6rem;
|
||||
--padding: 6rem;
|
||||
}
|
||||
|
||||
.bd-single-content {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.bd-single-body {
|
||||
&.bd-is-last {
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include fullhd() {
|
||||
.bd-single-header {
|
||||
--margin: 9rem;
|
||||
}
|
||||
|
||||
.bd-single-content {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.bd-single-body {
|
||||
&.bd-is-last {
|
||||
padding-bottom: 9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post stuff
|
||||
|
||||
.bd-post-fullwidth {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include from(60rem) {
|
||||
.bd-post-fullwidth {
|
||||
margin-left: calc(28rem - 50vw);
|
||||
margin-right: calc(28rem - 50vw);
|
||||
}
|
||||
}
|
||||
53
docs/_sass/pages/videos.scss
Normal file
53
docs/_sass/pages/videos.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
.bd-video {
|
||||
--spacing: 1.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
padding: var(--spacing);
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 2px solid var(--videos-light);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-video-figure {
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.bd-video {
|
||||
grid-gap: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.bd-video {
|
||||
--spacing: 3rem;
|
||||
grid-template-columns: 1fr 24em 4em calc(var(--container-width) - 28em) 1fr;
|
||||
}
|
||||
|
||||
.bd-video-info {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.bd-video-figure {
|
||||
grid-column: 4 / span 2;
|
||||
|
||||
img {
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
video {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.bd-video {
|
||||
--spacing: 4.5rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user