From ab67d0d3a0862bc69862932df2f5a5ae498f6bfe Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Mon, 28 Oct 2024 19:02:12 +0100 Subject: [PATCH 1/2] paste in svg --- index.qmd | 18 ++++++++++ theming/dark.scss | 1 + theming/light.scss | 2 +- theming/rules/_svg.scss | 78 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 theming/rules/_svg.scss diff --git a/index.qmd b/index.qmd index 502cd0d99..d8e3b61d7 100644 --- a/index.qmd +++ b/index.qmd @@ -21,6 +21,24 @@ description: | Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language. --- +```{=html} +
+
+

Turing.jl

+
+
+ + + + + +
+
+``` + ```{=html}
Three normal probability distributions diff --git a/theming/dark.scss b/theming/dark.scss index cdaef1065..aa4735b59 100644 --- a/theming/dark.scss +++ b/theming/dark.scss @@ -16,6 +16,7 @@ $theme: "cosmo" !default; @import "rules/hoverables-dark"; @import "rules/navbar"; @import "rules/quarto-tweaks"; +@import "rules/svg"; @import "old/old-styles"; diff --git a/theming/light.scss b/theming/light.scss index 434c7a626..15c6051e9 100644 --- a/theming/light.scss +++ b/theming/light.scss @@ -13,7 +13,7 @@ @import "rules/hoverables-light"; @import "rules/navbar"; @import "rules/quarto-tweaks"; +@import "rules/svg"; @import "old/old-styles"; -// \ No newline at end of file diff --git a/theming/rules/_svg.scss b/theming/rules/_svg.scss new file mode 100644 index 000000000..edb17d064 --- /dev/null +++ b/theming/rules/_svg.scss @@ -0,0 +1,78 @@ +.line-graph { + /* height: 85vh; */ + width: 100%; + padding-top: 5%; + position: relative; +} + +svg { + width: 100%; + height: 100%; +} + +@keyframes draw { + to { + stroke-dashoffset: 0; + } +} + +.line { + fill: none; + stroke-width: 7; + stroke-dasharray: 3900; + stroke-dashoffset: 3900; + animation: draw 6s forwards ease-in-out; + stroke-opacity: 1; +} + +.line1 { + stroke: #b352cc; + animation-delay: 0s; +} + +.line2 { + stroke: #cc3333; + animation-delay: 0.5s; +} + +.line3 { + stroke: #218921; + animation-delay: 1s; +} + +.upperContent { + width: 88%; + text-align: end; + padding-top: 7%; + padding-right: 10%; + position: absolute; + z-index: 5; + opacity: 0; + animation: fadeInText 2s forwards ease-in-out; + animation-delay: 3s; +} + +.upperContent > h1 { + font-size: 80px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.upperContent > p { + font-size: 25px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + margin-top: 5%; +} + +.upperContent > h1, + +.upperContent > p { + margin: 0; + padding: 0; +} + +@keyframes fadeInText { + to { + opacity: 1; + transform: translateY(0); + } +} From da119f5d7e681f26ed5f4e3cb7169b89cb6be69d Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Mon, 28 Oct 2024 20:13:33 +0100 Subject: [PATCH 2/2] responsive svg header --- index.qmd | 16 ++++++---------- theming/light.scss | 1 - theming/rules/_svg.scss | 13 ++++++++++++- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/index.qmd b/index.qmd index d8e3b61d7..10f871da7 100644 --- a/index.qmd +++ b/index.qmd @@ -37,17 +37,10 @@ description: |
-``` - -```{=html} -
- Three normal probability distributions - - Turing.jl - - + Bayesian inference with probabilistic programming - + +
Tutorials @@ -60,6 +53,9 @@ description: |
+``` + +```{=html}
diff --git a/theming/light.scss b/theming/light.scss index 15c6051e9..20b804e5a 100644 --- a/theming/light.scss +++ b/theming/light.scss @@ -16,4 +16,3 @@ @import "rules/svg"; @import "old/old-styles"; - diff --git a/theming/rules/_svg.scss b/theming/rules/_svg.scss index edb17d064..613d66735 100644 --- a/theming/rules/_svg.scss +++ b/theming/rules/_svg.scss @@ -50,11 +50,22 @@ svg { opacity: 0; animation: fadeInText 2s forwards ease-in-out; animation-delay: 3s; + + @media screen and (max-width: 768px) { + width: 100%; + padding-top: 0%; + padding-right: 0%; + text-align: center; + } } .upperContent > h1 { - font-size: 80px; + font-size: 5rem; font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + + @media screen and (max-width: 992px) { + font-size: 3.5rem; + } } .upperContent > p {