Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixing Mobile Responsiveness of the Website #286

Merged
merged 3 commits into from
Dec 27, 2023
Merged

Fixing Mobile Responsiveness of the Website #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0d48846
website index page: fix table responsiveness
naskio Dec 18, 2023
f9286ff
website index page: fix hero section responsiveness
naskio Dec 18, 2023
8d7bc30
Merge branch 'master' into website-mobile
marcin-krystianc Dec 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 22 additions & 23 deletions docs/src/pages/Index/Index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,34 @@

/*banner*/

.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
.heroBackground {
background: linear-gradient(90deg, #00458d 0%, #00356d 100%);
color: white;
}

@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
}
}

.logoContainer {
.heroWrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 120px;
overflow: hidden;
}

.logoSvgBox {
width: 380px;
overflow: clip;
}

@media screen and (max-width: 996px) {
.logoSvgBox {
width: 100%;
}
}

.buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}

.badges {
Expand Down Expand Up @@ -85,16 +84,16 @@


/*compatibilities*/
.compatibilities {
padding: 2rem 0;
text-align: center;
.markdownWrapper table {
border-collapse: separate;
}

.compatibilities table {
display: inline;
margin-left: auto;
margin-right: auto;
border-collapse: separate;
.markdownWrapper table th:nth-child(1), .markdownWrapper table th:nth-child(4) {
width: 10%;
}

.markdownWrapper table th:nth-child(2), .markdownWrapper table th:nth-child(3) {
width: 30%;
}

td:first-child:not(:empty) {
Expand Down
45 changes: 22 additions & 23 deletions docs/src/pages/Index/Index.view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import CodeBlock from '@theme/CodeBlock';
import styles from './Index.module.css';
import ConsulDotNetLogoSvg from '@site/static/project/logo/svg/Consul.NET_SignatureLogo_RGB-Color.svg';
import LogoSvg from '@site/static/project/logo/svg/Consul.NET_SignatureLogo_RGB-Color.svg';
import badgeList from "@site/src/data/badges";
import FeatureList from "@site/src/data/features";
import MDXContent from '@theme/MDXContent';
Expand All @@ -27,17 +27,15 @@ function HomepageBadges() {
function HomepageBanner() {
const {siteConfig} = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
<div className={clsx(styles.logoContainer)}>
<ConsulDotNetLogoSvg fill='transparent' transform="scale(1.8 1.8)"/>
<header className={clsx('hero hero--primary text--center padding-vert--lg', styles.heroBackground)}>
<div className={clsx('container', styles.heroWrapper)}>
<div className={clsx(styles.logoSvgBox)}>
<LogoSvg fill='transparent' transform="scale(1.3 1.3)" preserveAspectRatio="xMinYMin meet"/>
</div>
<h1 className="hero__title" style={{display: 'none'}}>{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<HomepageBadges/>
<CodeBlock language="bash">
{`dotnet add package Consul`}
</CodeBlock>
<CodeBlock language="bash" className="col">dotnet add package Consul</CodeBlock>
<p>{`Curious about what's next? try the `}
<Link className={styles.previewLink} to='/docs/next/'>
⚡ preview version
Expand All @@ -55,14 +53,13 @@ function HomepageBanner() {
🚀 Get Started
</Link>
</div>
<div className={clsx('margin-top--md')}>
<iframe
src="https://ghbtns.com/github-btn.html?user=G-Research&repo=consuldotnet&type=star&count=true&size=large"
width={170}
height={30}
title="GitHub Stars"
/>
</div>
<iframe
src="https://ghbtns.com/github-btn.html?user=G-Research&repo=consuldotnet&type=star&count=true&size=large"
className="margin-top--md padding-left--md"
width={170}
height={30}
title="GitHub Stars"
/>
</div>
</header>
);
Expand Down Expand Up @@ -99,16 +96,18 @@ function HomepageFeatures(): JSX.Element {

function HomepageCompatibilities(): JSX.Element {
return (
<section className={styles.compatibilities}>
<section className="padding-top--md padding-bottom--xl text--center">
<div className="container">
<div className="text--center">
<h1>Supported APIs</h1>
</div>
<div className="row">
<div className="col">
<MDXContent>
<SupportedAPIs/>
</MDXContent>
<header>
<h1>Supported APIs</h1>
</header>
<span className={styles.markdownWrapper}>
<MDXContent>
<SupportedAPIs/>
</MDXContent>
</span>
</div>
</div>
</div>
Expand Down
Loading