Skip to content

Commit 93aa82a

Browse files
simonsteigersimonsteiger
authored
first part of new landing page (#1)
* very basic redesign * make buttons interactive
1 parent 5f7f81c commit 93aa82a

File tree

10 files changed

+182
-6
lines changed

10 files changed

+182
-6
lines changed

‎_quarto.yml‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ website:
1717
navbar:
1818
logo: "assets/images/turing-logo.svg"
1919
logo-href: https://turinglang.org/
20-
background: "#073c44"
21-
foreground: "#ffffff"
20+
#background: "#073c44"
21+
#foreground: "#ffffff"
2222
left:
2323
- text: Get Started
2424
href: https://turinglang.org/docs/tutorials/docs-00-getting-started/
@@ -39,7 +39,7 @@ website:
3939
href: https://github.com/TuringLang/Turing.jl
4040

4141
page-footer:
42-
background: "#073c44"
42+
#background: "#073c44"
4343
left: |
4444
Turing is created by <a href="http://mlg.eng.cam.ac.uk/hong/" target="_blank">Hong Ge</a>, and lovingly maintained by the <a href="https://github.com/TuringLang/Turing.jl/graphs/contributors" target="_blank">core team</a> of volunteers. <br>
4545
The contents of this website are © 2024 under the terms of the <a href="https://github.com/TuringLang/Turing.jl/blob/master/LICENCE" target="_blank">MIT License</a>.
@@ -61,9 +61,8 @@ website:
6161
format:
6262
html:
6363
theme:
64-
light: cosmo
65-
dark: [cosmo, theming/theme-dark.scss]
66-
css: theming/styles.css
64+
light: [cosmo, theming/light.scss]
65+
dark: [cosmo, theming/dark.scss]
6766
toc: true
6867
smooth-scroll: true
6968
code-overflow: wrap

‎index.qmd‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,35 @@ description: |
88
Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language.
99
---
1010

11+
<div class="d-flex flex-column align-items-center gap-0" style="padding:7rem 0;">
12+
<image src="assets/images/turing-logo.svg" width="150px" alt="Three normal probability distributions">
13+
<span style="font-size:4rem;font-weight:700;">Turing.jl</span>
14+
<span style="font-size:2rem;padding-bottom:1.25rem;">Bayesian inference with probabilistic programming</span>
15+
<div class="d-flex flex-row gap-2">
16+
[Get Started](https://turinglang.org/docs/tutorials/docs-00-getting-started/){.button--fill .btn}
17+
18+
<!-- The empty line above makes quarto accept the div class -->
19+
[API reference](/library/){.button .btn}
20+
</div>
21+
</div>
22+
<div class="d-flex flex-row flex-wrap justify-content-center gap-3 pb-5">
23+
<div class="card">
24+
<div class="card-title">Intuitive</div>
25+
Turing models are easy to write and communicate — syntax is close to mathematical notations.
26+
</div>
27+
28+
<div class="card">
29+
<div class="card-title">General-purpose</div>
30+
Turing supports models with discrete parameters and stochastic control flow.
31+
</div>
32+
33+
<div class="card">
34+
<div class="card-title">Modular & composable</div>
35+
Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem.
36+
</div>
37+
</div>
38+
39+
<!--
1140
::: {.hero-banner}
1241
::: {.grid}
1342
::: {.g-col-1}
@@ -53,3 +82,4 @@ There's also a [tutorial in Bayesian Statistics using Julia and Turing.jl](https
5382
:::
5483
:::
5584
:::
85+
-->

‎theming/dark.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/*-- scss:defaults --*/
2+
// Cosmo 5.3.3
3+
// Bootswatch
4+
5+
$theme: "cosmo" !default;
6+
@import "variables/colorsdark";
7+
@import "variables/borders";
8+
9+
/*-- scss:rules --*/
10+
11+
@import "rules/cards";
12+
@import "rules/buttons";
13+
@import "rules/navbar";
14+
15+
//

‎theming/light.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/*-- scss:defaults --*/
2+
3+
@import "variables/colorslight";
4+
@import "variables/borders";
5+
6+
/*-- scss:rules --*/
7+
8+
@import "rules/cards";
9+
@import "rules/buttons";
10+
@import "rules/navbar";
11+

‎theming/rules/_buttons.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.button {
2+
padding: 0.5rem 1rem;
3+
//margin: 0.25rem;
4+
border-radius: 25px;
5+
border: solid $text-muted 1px;
6+
color: $color-fg;
7+
background-color: $body-bg;
8+
9+
&:hover {
10+
background-color: $color-mute-bg !important;
11+
border: solid $text-muted 1px;
12+
}
13+
14+
&--fill {
15+
@extend .button;
16+
background-color: $color-secondary;
17+
border: solid $color-secondary 1px;
18+
19+
&:hover {
20+
background-color: lighten($color-secondary, 10%) !important;
21+
border-color: lighten($color-secondary, 10%) !important;
22+
}
23+
}
24+
}

‎theming/rules/_cards.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.card {
2+
border-radius: $border-radius-sm;
3+
padding: 1rem;
4+
min-height: 120px;
5+
min-width: 200px;
6+
max-width: 300px;
7+
8+
color: $color-fg !important;
9+
background-color: $color-mute-bg !important;
10+
border: solid $color-mute-bg 0px !important;
11+
12+
.card-title {
13+
color: $color-fg !important;
14+
font-size: x-large;
15+
font-weight: 700;
16+
}
17+
}

‎theming/rules/_navbar.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.navbar {
2+
background-color: $body-bg;
3+
color: $text-muted;
4+
}

‎theming/variables/_borders.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
$border-radius-lg: 1rem;
2+
$border-radius-sm: 0.5rem;
3+
$border-width-lg: 2px;
4+
$border-width: 1px;
5+
$border-width-sm: 0.5px;
6+
$default-border-wide: $border-width solid $light-bg-offset;

‎theming/variables/_colorsdark.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
$white: #ffffff !default;
2+
$gray-100: #f8f9fa !default;
3+
$gray-200: #e9ecef !default;
4+
$gray-300: #dee2e6 !default;
5+
$gray-400: #ced4da !default;
6+
$gray-500: #adb5bd !default;
7+
$gray-600: #868e96 !default;
8+
$gray-700: #495057 !default;
9+
$gray-800: #373a3c !default;
10+
$gray-900: #212529 !default;
11+
$black: #000000 !default;
12+
13+
$dark-green: #073c44;
14+
$thistle: #E7CEED;
15+
$light-orange: darken(#FEEEEB, 5%); // the actual KI color is a little light for many potential use cases
16+
$light-blue: darken(#EDF4F4, 5%);
17+
$logo-plum: #870052;
18+
$medium-grey: #CCD1D5;
19+
20+
$color-primary: $thistle;
21+
$color-secondary: $dark-green;
22+
$color-highlight: lighten($dark-green, 10%);
23+
24+
$color-mute-bg: $gray-800;
25+
26+
$body-color: white;
27+
$body-bg: #201F24;
28+
$light-bg: #201F24;
29+
$light-bg-offset: $color-secondary;
30+
$color-fg: white;
31+
32+
$quarto-category-background-color: lighten($light-bg, 2%);
33+
$quarto-category-border-color: lighten($light-bg, 30%);
34+
$quarto-category-hover-background-color: darken($light-bg, 5%);
35+
$quarto-category-hover-border-color: lighten($light-bg, 50%);
36+
$quarto-category-highlight: $color-fg;

‎theming/variables/_colorslight.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
$white: #ffffff !default;
2+
$gray-100: #f8f9fa !default;
3+
$gray-200: #e9ecef !default;
4+
$gray-300: #dee2e6 !default;
5+
$gray-400: #ced4da !default;
6+
$gray-500: #adb5bd !default;
7+
$gray-600: #868e96 !default;
8+
$gray-700: #495057 !default;
9+
$gray-800: #373a3c !default;
10+
$gray-900: #212529 !default;
11+
$black: #000000 !default;
12+
13+
$dark-green: #073c44;
14+
$thistle: #E7CEED;
15+
$light-orange: darken(#FEEEEB, 5%); // the actual KI color is a little light for many potential use cases
16+
$light-blue: #EDF4F4;
17+
$logo-plum: #870052;
18+
$medium-grey: #CCD1D5;
19+
$color-fg: black;
20+
21+
$color-primary: $dark-green;
22+
$color-secondary: darken($light-blue, 20%);
23+
24+
$color-mute-bg: $gray-200;
25+
26+
$quarto-category-background-color: lighten($medium-grey, 10%);
27+
$quarto-category-border-color: darken($medium-grey, 5%);
28+
$quarto-category-hover-background-color: lighten($medium-grey, 15%);
29+
$quarto-category-hover-border-color: darken($medium-grey, 15%);
30+
$quarto-category-highlight: $color-fg;
31+
32+
33+
$light-bg: white;
34+
$light-bg-offset: $color-secondary;

0 commit comments

Comments
 (0)