From 991fd7a6d67ee017c57beaaa21fc31c4bee7944d Mon Sep 17 00:00:00 2001 From: 简律纯 Date: Sat, 7 Oct 2023 06:48:07 +0800 Subject: feat(version): versions --- .../assets/stylesheets/custom/layout/_hero.scss | 123 +++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 src/overrides/assets/stylesheets/custom/layout/_hero.scss (limited to 'src/overrides/assets/stylesheets/custom/layout/_hero.scss') diff --git a/src/overrides/assets/stylesheets/custom/layout/_hero.scss b/src/overrides/assets/stylesheets/custom/layout/_hero.scss new file mode 100644 index 00000000..428cd37e --- /dev/null +++ b/src/overrides/assets/stylesheets/custom/layout/_hero.scss @@ -0,0 +1,123 @@ +//// +/// Copyright (c) 2016-2023 Martin Donath +/// +/// Permission is hereby granted, free of charge, to any person obtaining a +/// copy of this software and associated documentation files (the "Software"), +/// to deal in the Software without restriction, including without limitation +/// the rights to use, copy, modify, merge, publish, distribute, sublicense, +/// and/or sell copies of the Software, and to permit persons to whom the +/// Software is furnished to do so, subject to the following conditions: +/// +/// The above copyright notice and this permission notice shall be included in +/// all copies or substantial portions of the Software. +/// +/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL +/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER +/// DEALINGS +//// + +// ---------------------------------------------------------------------------- +// Rules +// ---------------------------------------------------------------------------- + +// Landing page container +.mdx-container { + padding-top: px2rem(20px); + background: + url("data:image/svg+xml;utf8,") no-repeat bottom, + linear-gradient( + to bottom, + var(--md-primary-fg-color), + hsla(280, 67%, 55%, 1) 99%, + var(--md-default-bg-color) 99% + ); + + // Adjust background for slate theme + [data-md-color-scheme="slate"] & { + background: + url("data:image/svg+xml;utf8,") no-repeat bottom, + linear-gradient( + to bottom, + var(--md-primary-fg-color), + hsla(230, 15%, 25%, 1) 99%, + var(--md-default-bg-color) 99% + ); + } +} + +// Landing page hero +.mdx-hero { + margin: 0 px2rem(16px); + color: var(--md-primary-bg-color); + + // Hero headline + h1 { + margin-bottom: px2rem(20px); + font-weight: 700; + color: currentcolor; + + // [mobile portrait -]: Larger hero headline + @include break-to-device(mobile portrait) { + font-size: px2rem(28px); + } + } + + // Hero content + &__content { + padding-bottom: px2rem(120px); + } + + // [tablet landscape +]: Columnar display + @include break-from-device(tablet landscape) { + display: flex; + align-items: stretch; + + // Adjust spacing and set dimensions + &__content { + max-width: px2rem(380px); + padding-bottom: 14vw; + margin-top: px2rem(70px); + } + + // Hero image + &__image { + order: 1; + width: px2rem(760px); + transform: translateX(#{px2rem(80px)}); + } + } + + // [screen +]: Columnar display and adjusted spacing + @include break-from-device(screen) { + + // Hero image + &__image { + transform: translateX(#{px2rem(160px)}); + } + } + + // Button + .md-button { + margin-top: px2rem(10px); + margin-right: px2rem(10px); + color: var(--md-primary-bg-color); + + // Button on focus/hover + &:is(:focus, :hover) { + color: var(--md-accent-bg-color); + background-color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); + } + + // Primary button + &--primary { + color: hsla(280, 37%, 48%, 1); + background-color: var(--md-primary-bg-color); + border-color: var(--md-primary-bg-color); + } + } +} -- cgit v1.2.3-70-g09d2