larryh/corso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify colors between docs and the website (#932)

Browse Source 
## Description

Unify colors between docs and the website.

This PR also brings some more color to the homepage

## Type of change

<!--- Please check the type of change your PR introduces: --->
- [x] 🌻 Feature
- [x] 🗺️ Documentation

## Test Plan

- [x] 💪 Manual
This commit is contained in:
Niraj Tolia 2022-09-21 23:50:26 -07:00 committed by GitHub
parent 9a419634ab
commit c9224aa773
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docusaurus.config.js
View File

@ -126,7 +126,7 @@ const config = {
colorMode: { colorMode: {
defaultMode: 'dark', defaultMode: 'dark',
disableSwitch: true, disableSwitch: true,
respectPrefersColorScheme: true, respectPrefersColorScheme: false,
}, },
zoom: { zoom: {

41
docs/src/css/custom.scss
View File

@ -6,29 +6,42 @@
/* You can override the default Infima variables here. */ /* You can override the default Infima variables here. */
:root { :root {
--ifm-color-primary: #2e8555; --ifm-color-primary: #1e204e;
--ifm-color-primary-dark: #29784c; --ifm-color-primary-dark: #1b1d46;
--ifm-color-primary-darker: #277148; --ifm-color-primary-darker: #1a1b42;
--ifm-color-primary-darkest: #205d3b; --ifm-color-primary-darkest: #151637;
--ifm-color-primary-light: #33925d; --ifm-color-primary-light: #212356;
--ifm-color-primary-lighter: #359962; --ifm-color-primary-lighter: #23255a;
--ifm-color-primary-lightest: #3cad6e; --ifm-color-primary-lightest: #272a65;
--ifm-code-font-size: 95%; --ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
} }
/* For readability concerns, you should choose a lighter palette in dark mode. */ /* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] { [data-theme='dark'] {
--ifm-color-primary: #25c2a0; --ifm-color-primary: #cdd4f9;
--ifm-color-primary-dark: #21af90; --ifm-color-primary-dark: #a4b1f4;
--ifm-color-primary-darker: #1fa588; --ifm-color-primary-darker: #90a0f2;
--ifm-color-primary-darkest: #1a8870; --ifm-color-primary-darkest: #536bea;
--ifm-color-primary-light: #29d5b0; --ifm-color-primary-light: #f6f7fe;
--ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lighter: #ffffff;
--ifm-color-primary-lightest: #4fddbf; --ifm-color-primary-lightest: #ffffff;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
} }
html[data-theme='dark'] {
--ifm-background-color: #111629;
}
.navbar {
background-color: var(--ifm-background-color);
}
.footer {
--ifm-footer-background-color: #1b2131;
}
.guideImages { .guideImages {
max-width: 650px; max-width: 650px;
width: 100%; width: 100%;

2
docs/src/pages/index.module.css
View File

@ -8,6 +8,8 @@
text-align: center; text-align: center;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
--ifm-hero-text-color: #ffffff;
--ifm-color-primary: #4f46e5;
} }
@media screen and (max-width: 996px) { @media screen and (max-width: 996px) {

4
website/src/assets/scss/custom/pages/_hero.scss
View File

@ -192,6 +192,10 @@
@apply before:content-[''] before:absolute before:-top-[30%] before:-left-80 before:right-0 before:w-[140rem] before:h-[65rem] before:-rotate-12 before:bg-indigo-600/5 dark:before:bg-indigo-600/10 before:z-1; @apply before:content-[''] before:absolute before:-top-[30%] before:-left-80 before:right-0 before:w-[140rem] before:h-[65rem] before:-rotate-12 before:bg-indigo-600/5 dark:before:bg-indigo-600/10 before:z-1;
} }
.dark .home-wrapper::before {
background-color: #4f46e5;
}
@media (min-width: 769px) and (max-width: 1024px) { @media (min-width: 769px) and (max-width: 1024px) {
.home-wrapper { .home-wrapper {
@apply before:-top-[50%]; @apply before:-top-[50%];

4
website/src/index.html
View File

@ -29,11 +29,11 @@
<div class="grid grid-cols-1 md:mt-44 mt-32 text-center"> <div class="grid grid-cols-1 md:mt-44 mt-32 text-center">
<div class="wow animate__animated animate__fadeIn"> <div class="wow animate__animated animate__fadeIn">
<h4 class="font-bold lg:leading-normal leading-normal text-4xl lg:text-5xl mb-5">Free, Secure, and Open-Source</br> Backup for Microsoft 365</h4> <h4 class="font-bold lg:leading-normal leading-normal text-4xl lg:text-5xl mb-5">Free, Secure, and Open-Source</br> Backup for Microsoft 365</h4>
<p class="text-slate-400 text-lg max-w-xl mx-auto">The #1 open-source backup tool for Microsoft 365.</p> <p class="text-slate-300 text-xl max-w-xl mx-auto">The #1 open-source backup tool for Microsoft 365.</p>
</div> </div>
<div class="mt-6"> <div class="mt-6">
<a href="" class="text-2xl font-bold btn bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md">Download Now</a> <a href="" class="text-2xl font-bold btn bg-indigo-800 hover:bg-indigo-900 border-indigo-800 hover:border-indigo-900 text-white rounded-md">Download Now</a>
</div> </div>
<div class="home-dashboard mt-8 z-3 wow animate__animated animate__fadeIn"> <div class="home-dashboard mt-8 z-3 wow animate__animated animate__fadeIn">