From 3250d6009a6788e2b9f7123b52d154b6b0c17ae3 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Fri, 22 Jul 2022 11:50:56 -0700 Subject: [PATCH] Updated colors and light styles of homepage --- .../src/stories/SquiggleChart.stories.mdx | 4 +- packages/website/docs/Api/DistSampleSet.md | 2 +- packages/website/docs/Discussions/Bugs.mdx | 2 +- packages/website/docs/Guides/Functions.mdx | 14 +--- packages/website/docs/Guides/Language.mdx | 2 +- packages/website/docusaurus.config.js | 7 +- .../components/HomepageFeatures.module.css | 5 ++ packages/website/src/css/custom.css | 81 +++++++++++++++---- packages/website/src/pages/index.js | 5 +- packages/website/src/pages/index.module.css | 5 +- 10 files changed, 92 insertions(+), 35 deletions(-) diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx index 2febfb6f..bc289c36 100644 --- a/packages/components/src/stories/SquiggleChart.stories.mdx +++ b/packages/components/src/stories/SquiggleChart.stories.mdx @@ -43,7 +43,7 @@ could be continuous, discrete or mixed. @@ -57,7 +57,7 @@ could be continuous, discrete or mixed. diff --git a/packages/website/docs/Api/DistSampleSet.md b/packages/website/docs/Api/DistSampleSet.md index cadc1496..eaed6942 100644 --- a/packages/website/docs/Api/DistSampleSet.md +++ b/packages/website/docs/Api/DistSampleSet.md @@ -38,7 +38,7 @@ Gets the internal samples of a sampleSet distribution. This is separate from the **Examples** ``` -toList(toSampleSet(normal(5,2))) +toList(SampleSet.fromDist(normal(5,2))) ``` ### map diff --git a/packages/website/docs/Discussions/Bugs.mdx b/packages/website/docs/Discussions/Bugs.mdx index db53a6f6..49bf347b 100644 --- a/packages/website/docs/Discussions/Bugs.mdx +++ b/packages/website/docs/Discussions/Bugs.mdx @@ -31,6 +31,6 @@ The means of sample set distributions can vary dramatically, especially as the n diff --git a/packages/website/docs/Guides/Functions.mdx b/packages/website/docs/Guides/Functions.mdx index a428ac7c..56a4929c 100644 --- a/packages/website/docs/Guides/Functions.mdx +++ b/packages/website/docs/Guides/Functions.mdx @@ -208,21 +208,15 @@ The `sample(distribution)` samples a given distribution. Recall the [three formats of distributions](https://develop--squiggle-documentation.netlify.app/docs/Discussions/Three-Types-Of-Distributions). We can force any distribution into `SampleSet` format - + Or `PointSet` format - - -### `toSampleSet` has two signatures - -Above, we saw the unary `toSampleSet`, which uses an internal hardcoded number of samples. If you'd like to provide the number of samples, it has a binary signature as well (floored) - - + #### Validity -- Second argument to `toSampleSet` must be a number. +- Second argument to `SampleSet.fromDist` must be a number. ## Normalization @@ -246,7 +240,7 @@ We provide a predicate `isNormalized`, for when we have simple control flow You may like to debug by right clicking your browser and using the _inspect_ functionality on the webpage, and viewing the _console_ tab. Then, wrap your squiggle output with `inspect` to log an internal representation. - + Save for a logging side effect, `inspect` does nothing to input and returns it. diff --git a/packages/website/docs/Guides/Language.mdx b/packages/website/docs/Guides/Language.mdx index 2f26cdd6..3a195c1f 100644 --- a/packages/website/docs/Guides/Language.mdx +++ b/packages/website/docs/Guides/Language.mdx @@ -18,7 +18,7 @@ import { SquiggleEditor } from "../../src/components/SquiggleEditor"; ### Arrays ### Records diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js index 68baf7c8..f811da95 100644 --- a/packages/website/docusaurus.config.js +++ b/packages/website/docusaurus.config.js @@ -10,7 +10,7 @@ const path = require("path"); /** @type {import('@docusaurus/types').Config} */ const config = { title: "Squiggle", - tagline: "An estimation language for forecasters", + tagline: "A simple programming language for intuitive probabilistic estimation", url: "https://squiggle-language.com", baseUrl: "/", onBrokenLinks: "throw", @@ -72,6 +72,11 @@ const config = { }, { to: "/blog", label: "Blog", position: "left" }, { to: "/playground", label: "Playground", position: "left" }, + { + href: "https://github.com/quantified-uncertainty/squiggle/discussions", + label: "Issues & Discussion", + position: "right", + }, { href: "https://github.com/quantified-uncertainty/squiggle", label: "GitHub", diff --git a/packages/website/src/components/HomepageFeatures.module.css b/packages/website/src/components/HomepageFeatures.module.css index b248eb2e..9a1b2eba 100644 --- a/packages/website/src/components/HomepageFeatures.module.css +++ b/packages/website/src/components/HomepageFeatures.module.css @@ -5,6 +5,11 @@ width: 100%; } +.features h3 { + font-family: "Lora", serif; + font-size: 1.5em; +} + .featureSvg { height: 200px; width: 200px; diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css index 02c5ff6b..b9126b2d 100644 --- a/packages/website/src/css/custom.css +++ b/packages/website/src/css/custom.css @@ -4,27 +4,29 @@ * work well for content-centric websites. */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Lato:wght@100;400;700;900&family=Lora:wght@400;500;600&display=swap'); + /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2488df; - --ifm-color-primary-dark: #176fcd; - --ifm-color-primary-darker: #1f58cb; - --ifm-color-primary-darkest: #1e2672; - --ifm-color-primary-light: #49acd3; - --ifm-color-primary-lighter: #4fb1c7; - --ifm-color-primary-lightest: #3dbfd3; + --ifm-color-primary: #e74c0f; + --ifm-color-primary-dark: #bb4b05; + --ifm-color-primary-darker: #9d0c02; + --ifm-color-primary-darkest: #5d2200; + --ifm-color-primary-light: #e6a036; + --ifm-color-primary-lighter: #e79d1d; + --ifm-color-primary-lightest: #f5e191; --ifm-code-font-size: 95%; } /* For readability concerns, you should choose a lighter palette in dark mode. */ html[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; + --ifm-color-primary: #df774d; + --ifm-color-primary-dark: #db8651; + --ifm-color-primary-darker: #d7584f; + --ifm-color-primary-darkest: #b3693e; + --ifm-color-primary-light: #edb25a; + --ifm-color-primary-lighter: #ebd489; + --ifm-color-primary-lightest: #faf2d4; } .docusaurus-highlight-code-line { @@ -37,3 +39,54 @@ html[data-theme="dark"] { html[data-theme="dark"] .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.3); } + +.hero h1{ + font-size: 4em; + font-weight: 900; + margin-bottom: 0.5rem; + color: rgb(230, 72, 79); + font-family: "Lato", sans-serif; +} + +.navbar__title { + font-family: "Lato", sans-serif; + font-weight: 900; + color: rgb(205, 88, 53); +} + +.hero__subtitle { + color: #888; + font-size:1.25em; +} + +.hero__subtitle2 { + color: #ba3e3e; + font-size: 1.5em; + font-family: "Lora"; + font-weight: 500; + margin-top: 1em; + margin-left: auto; + margin-right: auto; + max-width: 500px; +} + +h1 { + font-family: "Lora", serif; + font-size: 2.5em; +} + +h2 { + font-weight: 600; +} + +.menu__link, .navbar__item { + font-family: "Lora", serif; +} + +.navbar__item { + font-weight: 700; +} + +:root { + /* --ifm-font-family-base: 'Lora'; */ +} \ No newline at end of file diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js index c156bec0..616093d5 100644 --- a/packages/website/src/pages/index.js +++ b/packages/website/src/pages/index.js @@ -13,10 +13,9 @@ function HomepageHeader() {

{siteConfig.title}

- Early access + Early Access

-

{siteConfig.tagline}

-
+

{siteConfig.tagline}

); diff --git a/packages/website/src/pages/index.module.css b/packages/website/src/pages/index.module.css index 666feb6a..f4518419 100644 --- a/packages/website/src/pages/index.module.css +++ b/packages/website/src/pages/index.module.css @@ -4,10 +4,11 @@ */ .heroBanner { - padding: 4rem 0; + padding: 2rem 0; text-align: center; position: relative; overflow: hidden; + background: rgb(255, 246, 237) } @media screen and (max-width: 966px) { @@ -20,4 +21,4 @@ display: flex; align-items: center; justify-content: center; -} +} \ No newline at end of file