Skip to content

Commit

Permalink
feat(websites): improve sizes in home page of Platform website #7121 (#…
Browse files Browse the repository at this point in the history 
…7122)
  • Loading branch information
@msynk
msynk authored Mar 12, 2024
1 parent 8281a97 commit fc65a4a
Show file tree
Hide file tree
Showing 8 changed files with 123 additions and 48 deletions.
32 changes: 23 additions & 9 deletions src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/HomePage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<div class="page-container">
<img src="/images/home/hero-gradient-dark.svg" class="hero-gradient dark-theme" />
<img src="/images/home/hero-gradient-light.svg" class="hero-gradient light-theme" />

<section class="page-section hero-section">
<div class="page-section-content">
<div class="hero-section-content">
Expand All @@ -26,7 +27,9 @@
<section class="page-section text-section">
<div class="page-section-content">
<div class="section-title-container">
<BitTypography Variant="BitTypographyVariant.H6" Gutter>What is bit platform?</BitTypography>
<BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">
What is <span style="text-transform:lowercase">bit platform?</span>
</BitTypography>
<div class="section-title-line"></div>
</div>
<br />
Expand All @@ -48,7 +51,9 @@
<section class="page-section text-section">
<div class="page-section-content">
<div class="section-title-container">
<BitTypography Variant="BitTypographyVariant.H6" Gutter>Why bit platform?</BitTypography>
<BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">
Why <span style="text-transform:lowercase">bit platform?</span>
</BitTypography>
<div class="section-title-line"></div>
</div>
<br />
Expand All @@ -61,15 +66,17 @@
</BitTypography>
<br />
<BitTypography Variant="BitTypographyVariant.H5" Class="text-subtitle">
Instead of using miscellaneous packages, with bit platform, you have a set of comprehensive tools to cover any requirement.
Instead of using miscellaneous packages, you'll have
<br />
a set of comprehensive tools to cover any requirement.
</BitTypography>
</div>
</section>

<section class="page-section products-section" id="@OUR_PRODUCTS_SECTION_ID" @ref="ourProductsRef">
<div class="page-section-content">
<div class="section-title-container">
<BitTypography Variant="BitTypographyVariant.H6" Gutter>Our products</BitTypography>
<BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">Our products</BitTypography>
<div class="section-title-line"></div>
</div>
<br />
Expand All @@ -85,7 +92,12 @@

<section class="page-section tech-section">
<div class="page-section-content">
<BitTypography Variant="BitTypographyVariant.H3" Gutter>Tech we use</BitTypography>
<div class="section-title-container">
<div class="section-title-line reversed"></div>
<BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">Tech we use</BitTypography>
<div class="section-title-line"></div>
</div>
<br /><br /><br />
<div class="tech-list">
@* <a target="_blank" title=".NET" class="tech-item dotnet-item" href="https://dotnet.microsoft.com/en-us/"></a> *@
<a target="_blank" title="C#" class="tech-item csharp-item" href="https://dotnet.microsoft.com/en-us/languages/csharp"></a>
Expand All @@ -99,17 +111,19 @@
</a>
<a target="_blank" title="Sass" class="tech-item sass-item" href="https://sass-lang.com/"></a>
</div>
<br />
<BitTypography Variant="BitTypographyVariant.H4">
We've developed all of our websites with our own toolchain!
<br /><br />
<BitTypography Variant="BitTypographyVariant.H4" Class="tech-subtitle">
We've developed all of our websites
<br />
with our own toolchain!
</BitTypography>
</div>
</section>

<section class="page-section customer-section">
<div class="page-section-content">
<div class="section-title-container">
<BitTypography Variant="BitTypographyVariant.H6" Gutter>Our customers</BitTypography>
<BitTypography Variant="BitTypographyVariant.H6" Gutter Class="section-title">What customers say</BitTypography>
<div class="section-title-line"></div>
</div>
<br />
Expand Down
43 changes: 37 additions & 6 deletions src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/HomePage.razor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,10 +97,20 @@
align-items: center;
}

::deep .section-title {
font-size: 1rem;
text-transform: uppercase;
color: $bit-color-foreground-secondary;
}

.section-title-line {
height: 2px;
flex-grow: 1;
background-image: linear-gradient(351deg, transparent 20%, #8c85ff 100%);

&.reversed {
background-image: linear-gradient(351deg, #8c85ff 20%, transparent 100%);
}
}

.hero-section {
Expand Down Expand Up @@ -203,7 +213,7 @@
}

@include lt-md {
font-size: 2.2rem;
font-size: 2.1rem;
margin-bottom: 0.5rem;
}

Expand All @@ -215,17 +225,22 @@

.text-subtitle {
font-size: 2.25rem;
color: $bit-color-foreground-secondary;

@include lt-xl {
font-size: 2rem;
}

@include lt-lg {
font-size: 1.75rem;
font-size: 1.25rem;
}

@include lt-md {
font-size: 1rem;
font-size: 0.9rem;
}

@include lt-sm {
font-size: 0.75rem;
}
}
}
Expand All @@ -245,16 +260,32 @@
}

.tech-section {
margin: 5rem 0;
margin: 2rem 0;
padding: 5rem 0;
text-align: center;
box-shadow: $bit-box-shadow-callout;
background-color: $bit-color-background-secondary;

@include lt-md {
margin: 0;
}

::deep {
.tech-title {
@include lt-md {
font-size: 2.5rem;
}
}

.tech-subtitle {
@include lt-md {
font-size: 1.25rem;
}

@include lt-sm {
font-size: 1rem;
}
}
}

.tech-list {
width: 100%;
display: flex;
Expand Down
18 changes: 6 additions & 12 deletions src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/Products.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
<div class="header-container">
<BitIcon Class="header-icon" IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
<div>
<BitTypography Variant="BitTypographyVariant.H3" Class="header-title">Boilerplate</BitTypography>
<br />
<BitTypography Variant="BitTypographyVariant.H4" Class="header-title">Boilerplate</BitTypography>
<BitTypography Variant="BitTypographyVariant.H5" Class="header-subtitle">Feature-rich .NET project template</BitTypography>
</div>
</div>
Expand Down Expand Up @@ -39,8 +38,7 @@
<div class="header-container">
<BitIcon Class="header-icon" IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
<div>
<BitTypography Variant="BitTypographyVariant.H3" Class="header-title">Butil</BitTypography>
<br />
<BitTypography Variant="BitTypographyVariant.H4" Class="header-title">Butil</BitTypography>
<BitTypography Variant="BitTypographyVariant.H5" Class="header-subtitle">
Blazor utilities to use browser JS APIs in C#
</BitTypography>
Expand Down Expand Up @@ -71,8 +69,7 @@
<div class="header-container">
<BitIcon Class="header-icon" IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
<div>
<BitTypography Variant="BitTypographyVariant.H3" Class="header-title">Bswup</BitTypography>
<br />
<BitTypography Variant="BitTypographyVariant.H4" Class="header-title">Bswup</BitTypography>
<BitTypography Variant="BitTypographyVariant.H5" Class="header-subtitle">
Blazor utilities for Service Worker Update Progress
</BitTypography>
Expand All @@ -86,8 +83,7 @@
</BitTypography>
<br />
<div>
<img src="/images/bswup/bswup4-1.webp" style="max-width:100%;margin-bottom:0.5rem" />
<img src="/images/bswup/bswup4-2.webp" style="max-width:100%;" />
<img src="/images/home/bswup.webp" style="max-width:100%;" />
</div>
<br />
<a class="template-link" href="@Urls.Bswup">
Expand All @@ -102,8 +98,7 @@
<div class="header-container">
<BitIcon Class="header-icon" IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
<div>
<BitTypography Variant="BitTypographyVariant.H3" Class="header-title">Besql</BitTypography>
<br />
<BitTypography Variant="BitTypographyVariant.H4" Class="header-title">Besql</BitTypography>
<BitTypography Variant="BitTypographyVariant.H5" Class="header-subtitle">Blazor Entity Framework Sqlite</BitTypography>
</div>
</div>
Expand All @@ -128,8 +123,7 @@
<div class="header-container">
<BitIcon Class="header-icon" IconName="@(isExpanded ? BitIconName.ChevronDown : BitIconName.ChevronRight)" />
<div>
<BitTypography Variant="BitTypographyVariant.H3" Class="header-title">BlazorUI</BitTypography>
<br />
<BitTypography Variant="BitTypographyVariant.H4" Class="header-title">BlazorUI</BitTypography>
<BitTypography Variant="BitTypographyVariant.H5" Class="header-subtitle">Native Blazor UI components</BitTypography>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/Products.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

public partial class Products
{
private bool _boilerplateExpanded = true;
private bool _butilExpanded = false;
private bool _bswupExpanded = false;
private bool _besqlExpanded = false;
private bool _blazoruiExpanded = false;
private bool _boilerplateExpanded;
private bool _butilExpanded;
private bool _bswupExpanded;
private bool _besqlExpanded;
private bool _blazoruiExpanded;
}
60 changes: 48 additions & 12 deletions src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/Products.razor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
}

&.expanded {
background-color: $bit-color-action-hover-background-primary;
background-color: $bit-color-background-secondary;
}
}

Expand All @@ -27,14 +27,14 @@
align-items: flex-start;

&:hover {
background-color: $bit-color-action-hover-background-primary;
background-color: $bit-color-background-secondary;
}

::deep {
.header-icon {
font-size: 1.25rem;
margin-right: 1rem;
margin-top: 1.25rem;
margin-top: 0.8rem;
margin-right: 0.625rem;

@include lt-lg {
font-size: 1rem;
Expand All @@ -43,25 +43,34 @@

@include lt-md {
font-size: 0.75rem;
margin-top: 0.75rem;
margin-top: 0.6rem;
}

@include lt-sm {
margin-top: 0.5rem;
font-size: 0.6rem;
margin-top: 0.35rem;
}
}

.header-title, .header-subtitle {
color: $bit-color-foreground-secondary;
}

.header-title {
margin-bottom: 1rem;

@include lt-lg {
font-size: 2.5rem;
font-size: 2rem;
}

@include lt-md {
font-size: 1.75rem;
font-size: 1.25rem;
margin-bottom: 0.5rem;
}

@include lt-sm {
font-size: 1.5rem;
font-size: 1rem;
margin-bottom: 0.25rem;
}
}

Expand All @@ -75,7 +84,7 @@
}

@include lt-sm {
font-size: 1rem;
font-size: 0.75rem;
}
}
}
Expand All @@ -84,23 +93,50 @@
.content-container {
padding-left: 3rem;
padding-right: 3rem;

@include lt-lg {
padding-left: 2.75rem;
padding-right: 2.75rem;
}

@include lt-md {
padding-left: 2.5rem;
padding-right: 2.5rem;
}

@include lt-sm {
padding-left: 2.25rem;
padding-right: 2.25rem;
}

.code-box {
background-color: $bit-color-background-primary;
}
}

.template-terminal {
display: flex;
padding: 2rem;
color: #f0f0f0;
gap: rem2(12px);
flex-wrap: wrap;
padding: rem2(50px);
align-items: center;
margin: rem2(25px) 0;
border-radius: rem2(4px);
background-color: #0a153d;
background-color: $bit-color-background-primary;

@include lt-md {
padding: 1.5rem;
}

span {
white-space: nowrap;
font-size: rem2(18px);
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;

@include lt-md {
font-size: rem2(14px);
}
}

.animation-container {
Expand Down
Loading

0 comments on commit fc65a4a

Please sign in to comment.