Skip to content

Commit

Permalink
docs: updated styling and logo (#153)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KashifSaadat
KashifSaadat authored Aug 28, 2024
1 parent e2dfaf5 commit 9a52584
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 64 deletions.
84 changes: 57 additions & 27 deletions src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
*/

:root {
--ifm-color-primary: #3578e5;
--ifm-color-primary-dark: #788a80;
--ifm-color-primary-darker: #718278;
--ifm-color-primary-darkest: #5d6b63;
--ifm-color-primary-light: #96a49c;
--ifm-color-primary-lighter: #9eaba4;
--ifm-color-primary-lightest: #b5bfb9;
--ifm-color-primary: #1578E4;
--ifm-color-primary-dark: #66ADF8;
--ifm-color-primary-darker: #66ADF8;
--ifm-color-primary-darkest: #66ADF8;
--ifm-color-primary-light: #66ADF8;
--ifm-color-primary-lighter: #66ADF8;
--ifm-color-primary-lightest: #66ADF8;
--ifm-code-font-size: 95%;
--ifm-footer-background-color: #ffffff;
--ifm-footer-color: #fdbe9f;
Expand All @@ -20,42 +20,75 @@
--ifm-property-header-background-color: #e6ecf2;
--ifm-property-required-background-color: #f5bfbf;
--ifm-property-type-background-color: lightgray;
--ifm-color-content: #022859;
--ifm-hero-text-color: #022859;
--prism-color: #022859;
--ifm-menu-color: #022859;
--ifm-toc-link-color: #022859;
}

.codeBlockContainer_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Container-styles-module {
color: #022859 !important;
}

[data-theme='dark'] .codeBlockContainer_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Container-styles-module {
color: #fff !important;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
--ifm-color-primary: #fff;
--ifm-color-primary-dark: #66ADF8;
--ifm-color-primary-darker: #66ADF8;
--ifm-color-primary-darkest: #66ADF8;
--ifm-color-primary-light: #66ADF8;
--ifm-color-primary-lighter: #66ADF8;
--ifm-color-primary-lightest: #66ADF8;
--ifm-color-content: #fff;
--ifm-hero-text-color: #fff;
--prism-color: #fff;
--ifm-menu-color: #fff;
--ifm-toc-link-color: #fff;
}

[data-theme='dark'] footer {
background-color: #212020; /* Set your desired dark mode background color here */
color: #ddd; /* Set your desired text color for dark mode */
color: #fff; /* Set your desired text color for dark mode */
}

.darkToggleIcon_node_modules-\@docusaurus-theme-classic-lib-theme-ColorModeToggle-styles-module {
color: #fff; /* Set your desired link color for dark mode */
}

[data-theme='dark'] footer .theme-doc-footer-edit-meta-row {
background-color: #1b1b1d;
color: #fff; /* Set your desired link color for dark mode */
}

[data-theme='dark'] footer a {
color: #96a49c; /* Set your desired link color for dark mode */
color: #fff; /* Set your desired link color for dark mode */
}

[data-theme='dark'] footer .footer__title {
color: #9eaba4; /* Set your desired link color for dark mode */
color: #fff; /* Set your desired link color for dark mode */
}

[data-theme='dark'] .navbar {
background-color: #212020; /* Set your desired dark mode background color here */
color: #ddd; /* Set your desired text color for dark mode */
color: #fff; /* Set your desired text color for dark mode */
}

[data-theme='dark'] .navbar a {
color: #96a49c; /* Set your desired link color for dark mode */
color: #fff; /* Set your desired link color for dark mode */
}

.body {
color: #022859;
}

[data-theme='dark'] .button {
color: #fff;
}

/* Logo styles for dark mode */
[data-theme='dark'] .navbar__logo {
Expand All @@ -70,8 +103,8 @@
}

html[data-theme='dark'] {
--ifm-color-primary: #fdbe9f;
--ifm-property-header-background-color: #f09235;
--ifm-color-primary: #1578E4;
--ifm-property-header-background-color: #1578E4;
--ifm-property-required-background-color: rgb(102, 99, 99);
--ifm-property-type-background-color: green;
}
Expand Down Expand Up @@ -159,9 +192,6 @@ dl.crd-meta {
margin-right: 10px;
}

.crd-schema-version {
}

.property {
margin-bottom: 1em;
}
Expand Down Expand Up @@ -213,7 +243,7 @@ dl.crd-meta {
.navbar__title,
.navbar__link,
.navbar__items {
color: #000;
color: #022859;
}

.navbar__items--right > :last-child {
Expand All @@ -228,7 +258,7 @@ dl.crd-meta {
.footer,
.footer__title,
.footer__link-item {
color: black;
color: #022859;
}

.hero_src-pages-index-module {
Expand Down
45 changes: 17 additions & 28 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ function DynamicHeaderImage() {
? '/img/index/terranetes-dark.svg'
: '/img/index/terranetes-light.svg'
}
width="597" height="130"
height="100"
alt="Appvia Terranetes Controller"
/>
);
Expand All @@ -159,30 +159,16 @@ export default function App() {
})}
>
<header className={classNames('hero', styles.hero)}>
<div className={classNames(styles.heroBefore)}>
<div className={classNames(styles.heroSpaceContainer)}>
<img
className={classNames(styles.heroSpace)}
src="/img/index/hero-space-left.svg"
/>
</div>
<img
className={classNames(styles.heroPackage)}
src="/img/index/terraform.svg"
/>
<img
className={classNames(styles.heroPackage2)}
src="/img/index/opentofu.svg"
/>
</div>
<div className={classNames(styles.heroContainer)}>
<span className={classNames(styles.heroImage)}>
<DynamicHeaderImage />
</span>
<div className={classNames(styles.heroSubtitle, 'hero__subtitle')}>
<Translate>
Enabling developers to securely self-serve Cloud dependencies in a
controlled manner.
Enabling developers to securely self-serve
</Translate><br />
<Translate>
Cloud dependencies in a controlled manner
</Translate>
</div>

Expand All @@ -196,16 +182,19 @@ export default function App() {
>
<Translate>Quick Start</Translate>
</Link>
</div>
<div className={classNames(styles.heroAfter)}>
<img
className={classNames(styles.heroPackage)}
src="/img/index/kubernetes.svg"
/>
<div className={classNames(styles.heroSpaceContainer)}>
<br />
<div className={classNames(styles.productLogos)}>
<img
className={classNames(styles.heroPackage)}
src="/img/index/terraform.svg"
/>
<img
className={classNames(styles.heroPackage)}
src="/img/index/kubernetes.svg"
/>
<img
className={classNames(styles.heroSpace)}
src="/img/index/hero-space-right.svg"
className={classNames(styles.heroPackage)}
src="/img/index/opentofu.svg"
/>
</div>
</div>
Expand Down
24 changes: 20 additions & 4 deletions src/pages/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,13 +117,21 @@

.heroSubtitle {
max-width: 100vw;
padding: 0 1rem;
padding-top: 30px;
text-align: center;
font-weight: 600;
font-size: 2.5rem;
}

@media (max-width: 700px) {
@media (max-width: 900px) {
.heroSubtitle {
font-size: 2rem;
}
}

@media (max-width: 800px) {
.heroSubtitle {
font-size: 1.2rem;
font-size: 1.5rem;
}
}

Expand All @@ -133,6 +141,14 @@
max-width: 70rem;
}

.productLogos {
display: flex;
justify-content: center;
align-items: center;
gap: 10rem;
padding: 1rem 0;
}

/* Cards */
.cardContainer {
padding: 2rem 0;
Expand Down Expand Up @@ -205,4 +221,4 @@
position: unset;
max-height: 20vh;
}
}
}
3 changes: 1 addition & 2 deletions static/img/index/hero-space-left.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 9a52584

Please sign in to comment.