mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-03 00:59:34 +08:00
Docs/better homepage (#1591)
* Better carousel width * Learn more button * Learn more button * Fix button/width * Update introduction * Fix outline colour * remove custom css * remove default css
This commit is contained in:
Lea Anthony
GitHub
parent
1247c8aa28
commit
14a4a05fc5
@ -23,6 +23,9 @@
|
||||
"homepage.ButtonText": {
|
||||
"message": "Get Started"
|
||||
},
|
||||
"homepage.LearnMoreButtonText": {
|
||||
"message": "Learn More"
|
||||
},
|
||||
"theme.ErrorPageContent.title": {
|
||||
"message": "This page crashed.",
|
||||
"description": "The title of the fallback page when the page crashed"
|
||||
|
||||
@ -23,6 +23,9 @@
|
||||
"homepage.ButtonText": {
|
||||
"message": "快速入门"
|
||||
},
|
||||
"homepage.LearnMoreButtonText": {
|
||||
"message": "学到更多"
|
||||
},
|
||||
"theme.ErrorPageContent.title": {
|
||||
"message": "页面已崩溃。",
|
||||
"description": "The title of the fallback page when the page crashed"
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
filter: alpha(opacity=40);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 20px;
|
||||
top: 0px;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-size: 32px;
|
||||
@ -303,9 +303,9 @@
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.carousel-root {
|
||||
padding: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.carousel .slider-wrapper {
|
||||
width: 50%;
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,19 +4,6 @@
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #25c2a0;
|
||||
--ifm-color-primary-dark: rgb(33, 175, 144);
|
||||
--ifm-color-primary-darker: rgb(31, 165, 136);
|
||||
--ifm-color-primary-darkest: rgb(26, 136, 112);
|
||||
--ifm-color-primary-light: rgb(70, 203, 174);
|
||||
--ifm-color-primary-lighter: rgb(102, 212, 189);
|
||||
--ifm-color-primary-lightest: rgb(146, 224, 208);
|
||||
--ifm-code-font-size: 95%;
|
||||
--ifm-container-width-xl: 90%;
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: block;
|
||||
@ -39,7 +26,8 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
|
||||
--ifm-color-primary-lightest: rgb(146, 224, 208);
|
||||
--ifm-code-font-size: 95%;
|
||||
--ifm-button-color: white;
|
||||
--ifm-container-width-xl: 100%;
|
||||
--ifm-container-width-xl: 50%;
|
||||
--ifm-font-color-base-inverse: #df0000;
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
@ -55,6 +43,23 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
|
||||
|
||||
.container {
|
||||
padding-left: 2%;
|
||||
max-width: 1400px;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
.container {
|
||||
padding-left: 2%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
.container {
|
||||
padding-left: 2%;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.prism-code.language-js .token-line::before,
|
||||
|
||||
@ -5,17 +5,17 @@ import Link from "@docusaurus/Link";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import styles from "./index.module.css";
|
||||
import HomepageFeatures from "../components/HomepageFeatures";
|
||||
import { translate } from "@docusaurus/Translate"; // i18n component
|
||||
import {translate} from "@docusaurus/Translate"; // i18n component
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
|
||||
var Carousel = require("react-responsive-carousel").Carousel;
|
||||
|
||||
function HomepageHeader() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
return (
|
||||
<header className={clsx("hero", styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<Carousel
|
||||
<header className={clsx("hero", styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<Carousel
|
||||
showArrows={false}
|
||||
width={"100%"}
|
||||
showThumbs={false}
|
||||
@ -53,26 +53,23 @@ function HomepageHeader() {
|
||||
</div>
|
||||
</Carousel>
|
||||
|
||||
{/*<ThemedImage*/}
|
||||
{/* alt="Wails Logo"*/}
|
||||
{/* width="30%"*/}
|
||||
{/* sources={{*/}
|
||||
{/* light: useBaseUrl('/img/logo-light.svg'),*/}
|
||||
{/* dark: useBaseUrl('/img/logo-dark.svg'),*/}
|
||||
{/* }}*/}
|
||||
{/*/>*/}
|
||||
|
||||
<p className="hero__subtitle">
|
||||
{translate({ id: "homepage.Tagline" })}
|
||||
{translate({id: "homepage.Tagline"})}
|
||||
</p>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className="button button--primary button--lg"
|
||||
to="/docs/gettingstarted/installation"
|
||||
>
|
||||
{translate({ id: "homepage.ButtonText" })}
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className="button button--outline button--lg"
|
||||
to="/docs/introduction"
|
||||
>
|
||||
{translate({id: "homepage.LearnMoreButtonText"})}
|
||||
</Link>
|
||||
<Link
|
||||
className="button button--primary button--lg"
|
||||
to="/docs/gettingstarted/installation"
|
||||
>
|
||||
{translate({id: "homepage.ButtonText"})}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
@ -17,6 +18,7 @@
|
||||
}
|
||||
|
||||
.buttons {
|
||||
column-gap: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -11,14 +11,14 @@ Wails is a project that enables you to write desktop apps using Go and web techn
|
||||
Consider it a lightweight and fast Electron alternative for Go. You can easily build applications with the flexibility
|
||||
and power of Go, combined with a rich, modern frontend.
|
||||
|
||||
Wails doesn't hold back with the eye candy either! This is [xbar](https://xbarapp.com) - a desktop application for MacOS
|
||||
written using Wails. It has menus, supports light and dark desktop themes, and the main window uses translucency that
|
||||
gives it that 'frosty' effect of a native app.
|
||||
Wails doesn't hold back with the eye candy either! This is [varly](https://varlyapp.com) - a desktop application for
|
||||
MacOS & Windows written using Wails. Not only does it look great, it uses native menus and translucency - everything
|
||||
you'd expect from a modern native app.
|
||||
|
||||
<p class="text--center">
|
||||
<a href="https://xbarapp.com">
|
||||
<img src="/img/xbar-app-preview-2.png" width="75%" />
|
||||
</a>
|
||||
<a href="https://varly.app/">
|
||||
<img src="/img/varly.png" width="75%"/>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Quick Start Templates
|
||||
|
||||
@ -11,13 +11,13 @@ Wails is a project that enables you to write desktop apps using Go and web techn
|
||||
Consider it a lightweight and fast Electron alternative for Go. You can easily build applications with the flexibility
|
||||
and power of Go, combined with a rich, modern frontend.
|
||||
|
||||
Wails doesn't hold back with the eye candy either! This is [xbar](https://xbarapp.com) - a desktop application for MacOS
|
||||
written using Wails. It has menus, supports light and dark desktop themes, and the main window uses translucency that
|
||||
gives it that 'frosty' effect of a native app.
|
||||
Wails doesn't hold back with the eye candy either! This is [varly](https://varlyapp.com) - a desktop application for
|
||||
MacOS & Windows written using Wails. Not only does it look great, it uses native menus and translucency - everything
|
||||
you'd expect from a modern native app.
|
||||
|
||||
<p class="text--center">
|
||||
<a href="https://xbarapp.com">
|
||||
<img src="/img/xbar-app-preview-2.png" width="75%"/>
|
||||
<a href="https://varly.app/">
|
||||
<img src="/img/varly.png" width="75%"/>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user