paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 31 Packages Projects Releases Wiki Activity

feat(microsite): Add diagonal lines & small theme improvements to microsite

Browse Source 
Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
This commit is contained in:
Carlos Esteban Lopez
2023-03-15 19:54:36 -05:00
parent c0fd622a96
commit 2a2298f9c6
10 changed files with 70 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microsite/docusaurus.config.js
+1 -1
View File
@@ -55,7 +55,7 @@ module.exports = {
path: 'blog',
},
theme: {
customCss: 'src/css/customTheme.css',
customCss: 'src/theme/customTheme.scss',
},
gtag: {
trackingID: 'G-KSEVGGNCJW',
microsite/src/components/bannerSection/bannerSection.module.scss
+36
View File
@@ -1,5 +1,41 @@
@use 'src/theme/variables';
.bannerSection {
--diagonalBorderHeight: 40px;
display: block;
background: var(--ifm-background-color);
@media (min-width: variables.$desktopUpBreakpoint) {
--diagonalBorderHeight: 80px;
}
&:global(:is(.diagonalBorder, .diagonalBottomBorder)) {
padding-bottom: var(--diagonalBorderHeight);
& + section {
margin-top: calc(var(--diagonalBorderHeight) * -1);
padding-top: var(--diagonalBorderHeight);
}
}
&:global(.diagonalBorder) {
clip-path: polygon(
0 var(--diagonalBorderHeight),
100% 0,
100% calc(100% - var(--diagonalBorderHeight)),
0 100%
);
}
&:global(.diagonalBottomBorder) {
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--diagonalBorderHeight)),
0 100%
);
}
&:global(.greyBackground) {
background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%);
microsite/src/components/bannerSection/bannerSection.tsx
+6
View File
@@ -6,6 +6,8 @@ import bannerStyles from './bannerSection.module.scss';
export type IBannerSectionProps = PropsWithChildren<{
className?: string;
greyBackground?: boolean;
diagonalBorder?: boolean;
diagonalBottomBorder?: boolean;
greenGradientBackground?: boolean;
greenBottomGradientBackground?: boolean;
greenCallToActionGradientBackground?: boolean;
@@ -15,6 +17,8 @@ export const BannerSection = ({
children,
className,
greyBackground = false,
diagonalBorder = false,
diagonalBottomBorder = false,
greenGradientBackground = false,
greenBottomGradientBackground = false,
greenCallToActionGradientBackground = false,
@@ -22,6 +26,8 @@ export const BannerSection = ({
<section
className={clsx(bannerStyles.bannerSection, className, {
greyBackground,
diagonalBorder,
diagonalBottomBorder,
greenGradientBackground,
greenBottomGradientBackground,
greenCallToActionGradientBackground,
microsite/src/components/bannerSection/bannerSectionGrid.module.scss
+2 -2
View File
@@ -1,4 +1,4 @@
$desktopUpBreakpoint: 997px;
@use 'src/theme/variables';
.sectionGridContainer {
gap: 2rem;
@@ -14,7 +14,7 @@ $desktopUpBreakpoint: 997px;
display: grid;
align-items: center;
@media (min-width: $desktopUpBreakpoint) {
@media (min-width: variables.$desktopUpBreakpoint) {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
microsite/src/pages/community/index.tsx
+4 -4
View File
@@ -131,7 +131,7 @@ const Community = () => {
return (
<Layout>
<div className={clsx(communityStyles.communityPage)}>
<BannerSection greyBackground>
<BannerSection diagonalBottomBorder greyBackground>
<BannerSectionGrid>
<ContentBlock
className="padding-right--xl"
@@ -169,7 +169,7 @@ const Community = () => {
</BannerSectionGrid>
</BannerSection>
<BannerSection greenBottomGradientBackground>
<BannerSection diagonalBorder greenBottomGradientBackground>
<BannerSectionGrid
header={
<>
@@ -199,7 +199,7 @@ const Community = () => {
</BannerSectionGrid>
</BannerSection>
<BannerSection greyBackground>
<BannerSection diagonalBorder greyBackground>
<BannerSectionGrid
header={<h2 className="text--primary">Community initiatives</h2>}
>
@@ -223,7 +223,7 @@ const Community = () => {
</BannerSectionGrid>
</BannerSection>
<BannerSection>
<BannerSection diagonalBorder>
<BannerSectionGrid
header={
<h2 className="text--primary">Trainings and Certifications</h2>
microsite/src/pages/demos/index.tsx
+2
View File
@@ -167,6 +167,8 @@ const Demos = () => {
{demoItems.map((demoItem, index) => (
<BannerSection
key={index}
diagonalBottomBorder={index === 0}
diagonalBorder={index > 0 && index < demoItems.length - 1}
greyBackground={index % 2 === 0}
className={demosStyles.banner}
>
microsite/src/pages/home/_home.tsx
+14 -14
View File
@@ -28,7 +28,7 @@ const HomePage = () => {
return (
<Layout>
<div className={homeStyles.homePage}>
<BannerSection greyBackground>
<BannerSection diagonalBottomBorder greyBackground>
<BannerSectionGrid
header={
!hiddenNewsletterBanner && (
@@ -99,7 +99,7 @@ const HomePage = () => {
</BannerSectionGrid>
</BannerSection>
<BannerSection>
<BannerSection diagonalBorder>
<BannerSectionGrid>
<ContentBlock
title="The Speed Paradox"
@@ -125,7 +125,7 @@ const HomePage = () => {
</BannerSectionGrid>
</BannerSection>
<BannerSection greenGradientBackground>
<BannerSection diagonalBorder greenGradientBackground>
<div className={homeStyles.catalogContainer}>
<div className="catalogTitle">
<img
@@ -183,7 +183,7 @@ const HomePage = () => {
</div>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<BannerSection diagonalBorder greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Learn more about the software catalog</h1>
@@ -196,7 +196,7 @@ const HomePage = () => {
</div>
</BannerSection>
<BannerSection greenBottomGradientBackground>
<BannerSection diagonalBorder greenBottomGradientBackground>
<div className={homeStyles.softwareTemplatesContainer}>
<div className="softwareTemplatesTitle">
<img
@@ -247,7 +247,7 @@ const HomePage = () => {
</div>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<BannerSection diagonalBorder greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Build your own software templates</h1>
@@ -260,7 +260,7 @@ const HomePage = () => {
</div>
</BannerSection>
<BannerSection greenBottomGradientBackground>
<BannerSection diagonalBorder greenBottomGradientBackground>
<div className={homeStyles.softwareTemplatesContainer}>
<div className="softwareTemplatesTitle">
<img
@@ -307,7 +307,7 @@ const HomePage = () => {
</div>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<BannerSection diagonalBorder greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Learn more about TechDocs</h1>
@@ -320,7 +320,7 @@ const HomePage = () => {
</div>
</BannerSection>
<BannerSection greenGradientBackground>
<BannerSection diagonalBorder greenGradientBackground>
<div className={homeStyles.softwareTemplatesContainer}>
<div className="softwareTemplatesTitle">
<img
@@ -368,7 +368,7 @@ const HomePage = () => {
</div>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<BannerSection diagonalBorder greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Learn more about Backstage Search</h1>
@@ -381,7 +381,7 @@ const HomePage = () => {
</div>
</BannerSection>
<BannerSection greenBottomGradientBackground>
<BannerSection diagonalBorder greenBottomGradientBackground>
<BannerSectionGrid
className={homeStyles.kubernetesSectionContainer}
header={
@@ -424,7 +424,7 @@ const HomePage = () => {
</BannerSectionGrid>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<BannerSection diagonalBorder greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Learn more about the K8s plugin</h1>
@@ -437,7 +437,7 @@ const HomePage = () => {
</div>
</BannerSection>
<BannerSection greenBottomGradientBackground>
<BannerSection diagonalBorder greenBottomGradientBackground>
<div className={homeStyles.softwareTemplatesContainer}>
<div className="softwareTemplatesTitle">
<img
@@ -496,7 +496,7 @@ const HomePage = () => {
</div>
</BannerSection>
<BannerSection greenCallToActionGradientBackground>
<BannerSection diagonalBorder greenCallToActionGradientBackground>
<div className="padding--lg text--center">
<h1>Build a plugin</h1>
microsite/src/pages/home/home.module.scss
+3 -3
View File
@@ -1,4 +1,4 @@
$desktopUpBreakpoint: 997px;
@use '../../theme/variables.scss';
.homePage {
font-size: 1.25rem;
@@ -70,7 +70,7 @@ $desktopUpBreakpoint: 997px;
}
.catalogContainer {
@media (min-width: $desktopUpBreakpoint) {
@media (min-width: variables.$desktopUpBreakpoint) {
grid-template-columns: repeat(4, 1fr);
picture {
@@ -85,7 +85,7 @@ $desktopUpBreakpoint: 997px;
}
.softwareTemplatesContainer {
@media (min-width: $desktopUpBreakpoint) {
@media (min-width: variables.$desktopUpBreakpoint) {
grid: repeat(2, auto) / repeat(4, 1fr);
picture {
microsite/src/css/customTheme.css → microsite/src/theme/customTheme.scss
View File
microsite/src/theme/variables.scss
+2
View File
@@ -0,0 +1,2 @@
$xlUpBreakpoint: 1441px;
$desktopUpBreakpoint: 997px;