From 50a83798d1924df876474144bb93a6cedaf81a9b Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Thu, 23 Feb 2023 20:47:20 +0100 Subject: [PATCH] more beautiful examples index.html & fixes --- website/css/style.css | 23 +++++++++++++- website/demo/examples/index.html | 53 +++++++++++++++++++++++--------- website/docs/nav.html | 2 +- website/docs/src/build.js | 48 ++++++++++++++++++++++++----- website/index.html | 22 ++++++++++--- website/js/index.js | 4 +-- website/nav.html | 2 +- 7 files changed, 122 insertions(+), 32 deletions(-) diff --git a/website/css/style.css b/website/css/style.css index f796988..b6547d2 100644 --- a/website/css/style.css +++ b/website/css/style.css @@ -119,8 +119,29 @@ body { } /* This div will have crazy cool style, as this should represent that you can use (almost) all the CSS you want.*/ -.create .crazy-styled { +.create .special-style { background-color: aqua; + border-radius: 50px; + font-family: cursive; + padding: 5%; + animation-name: background; + animation-duration: 5s; + animation-iteration-count: 500; +} + +@keyframes background { + 0% { + background-color: aqua; + border-radius: 50px; + } + 50% { + background-color: rgba(0, 255, 255, 0.2); + border-radius: 200px; + } + 100% { + background-color: aqua; + border-radius: 50px; + } } .centered { diff --git a/website/demo/examples/index.html b/website/demo/examples/index.html index 7a533cf..8fdc2e7 100644 --- a/website/demo/examples/index.html +++ b/website/demo/examples/index.html @@ -1,16 +1,41 @@ + + - -Example presentations - -

Example presentations

- - + + + + Example presentations + + + + + + + +
+
+

Examples

+
+ +
+ + \ No newline at end of file diff --git a/website/docs/nav.html b/website/docs/nav.html index 32d13a9..526b64e 100644 --- a/website/docs/nav.html +++ b/website/docs/nav.html @@ -13,7 +13,7 @@ Getting Started API reference + HomeCSSHTMLJavaScriptPluginsindex Plugins diff --git a/website/docs/src/build.js b/website/docs/src/build.js index a9c5d02..66cbec9 100644 --- a/website/docs/src/build.js +++ b/website/docs/src/build.js @@ -372,16 +372,48 @@ function buildExamplesPage () { /* Auto generate an index.html that lists all the directories under examples/ * This is useful for gh-pages, so you can link to http://impress.github.io/impress.js/examples */ - var html_list = ' + + + +`; fs.writeFileSync( path.join( __dirname + '/../../demo/examples/index.html' ), html ); } \ No newline at end of file diff --git a/website/index.html b/website/index.html index 7dba61a..7f82a2a 100644 --- a/website/index.html +++ b/website/index.html @@ -9,8 +9,8 @@ - - + + @@ -42,9 +42,21 @@ -
-

And CSS

- +
+

And CSS

+ 
+                        
+.impress-supported .fallback-message {
+    display: none;
+}
+
+.step {
+    width: 80vw;
+    height: 80vh;
+    background-color: white;
+}
+                        
+

To create stunning presentations

diff --git a/website/js/index.js b/website/js/index.js index 4398743..5e5f278 100644 --- a/website/js/index.js +++ b/website/js/index.js @@ -1,6 +1,6 @@ $( document ).ready( function () { - $( '#navbar' ).load( 'nav.html' ); - $( '#footer' ).load( 'footer.html' ); + $( '#navbar' ).load( '/nav.html' ); + $( '#footer' ).load( '/footer.html' ); $( document ).ready(function () { $( '.button' ).mouseenter( function () { diff --git a/website/nav.html b/website/nav.html index 7bde880..debef2b 100644 --- a/website/nav.html +++ b/website/nav.html @@ -2,7 +2,7 @@ - +