diff --git a/website/README.md b/website/README.md index e6b7b23..a22bfcb 100644 --- a/website/README.md +++ b/website/README.md @@ -1,5 +1,5 @@ # impress.js.org website -This folder contains all the code for the impress.js.org website. You can find the source code for the demo presentation and the other examples in the folder *demo*. +This folder contains all the code for the [impress.js.org](https://impress.js.org) website. You can find the source code for the demo presentation and the other examples in the folder *demo*. ## Structure The also contains a folder for the docs (Documentation) for the project. @@ -11,4 +11,6 @@ What needs to be done: - Find good font - Create good background image for main page - use jQuery and maybe some other tools to do crazy CSS scroll animations -- Create nav bar \ No newline at end of file + +## Docs +If you want to contribute more documentation, then you may create a new MarkDown file in the docs/md folder, where all markdown files for the documentation reside. After you have written your documentation, you should run ```node build-docs.js``` to create the navigation menu entries. The title specified in the md file will be set as the navigation name. You may then change the navigation items in /docs/modules/nav.html \ No newline at end of file diff --git a/website/assets/apple-touch-icon.png b/website/assets/apple-touch-icon.png new file mode 100644 index 0000000..f610016 Binary files /dev/null and b/website/assets/apple-touch-icon.png differ diff --git a/website/main_bg_cut.png b/website/assets/main_bg_cut.png similarity index 100% rename from website/main_bg_cut.png rename to website/assets/main_bg_cut.png diff --git a/website/css/footerstyle.css b/website/css/footerstyle.css new file mode 100644 index 0000000..17513a0 --- /dev/null +++ b/website/css/footerstyle.css @@ -0,0 +1,76 @@ +/* +* +* footerstyle.css - impress.js Website +* +* Created 2023 by Janis Hutz +* +*/ + +/* Style the footer box */ + +.footer-container { + width: 100%; + height: 100%; + background-color: blue; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.footer-logo-container { + margin: 0.5%; + height: 45%; + display: inline-block; + width: fit-content; +} + +.footer-logo { + display: block; + width: auto; + height: 100%; +} + +.footer-wrapper { + width: 70%; + height: 45%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: white; +} + +.footer-big { + font-size: 1.6rem; + margin: 1%; + font-weight: bold; +} + +.footer-small { + margin: 1%; + font-size: 1.2rem +} + +.credits { + margin-top: 2%; + color: gray; + text-decoration: none; + font-style: italic; + font-size: 0.8rem; +} + +@media only screen and (min-width: 999px) { + .footer-container { + flex-direction: row; + } + + .footer-wrapper { + height: 80%; + justify-content: flex-start; + } + + .footer-logo-container { + height: 60%; + } +} \ No newline at end of file diff --git a/website/css/menustyle.css b/website/css/menustyle.css index d03471c..261e35a 100644 --- a/website/css/menustyle.css +++ b/website/css/menustyle.css @@ -1,36 +1,137 @@ -.Topmenu { - width: 101vw; - padding: 0.3%; +/* +* +* menustyle.css - impress.js Website +* +* Created 2023 by Janis Hutz +* +*/ + +/* + Default rules that are set for mobile interfaces +*/ +.nav-container { + width: 100%; + height: 100%; background-color: blue; - margin-left: -1%; - margin-top: -1%; } -.menubody { - width: 90%; - margin-top: 1.5%; - margin-left: 5%; -} - -.Menu { +.toggle-wrapper { display: inline-flex; + height: 100%; + width: 80%; + align-items: center; + justify-content: flex-end; +} + + +/* Logo image and logo link (aka logo-container)*/ +.logo-container { + margin: 0.5%; + height: 80%; + display: inline-block; + width: fit-content; +} + +.mobile-wrapper { + display: flex; justify-content: center; - align-content: center; - list-style-type: none; - width: 80vw; + align-items: center; + height: 100%; + width: 100%; +} + +.logo { + display: block; + width: auto; height: 100%; } -.mainitems { - padding: 1%; -} - -.mainitems:hover { - background-color: darkblue; -} - -.menubutton { +.listtoggle { text-decoration: none; - background-color: none; - color: white; -} \ No newline at end of file + color: black; + font-size: 5vh; + margin-right: 7%; + cursor: pointer; +} + +.active { + color: rgba(184, 214, 240, 1); +} + +/* Nav menu holder (contains the flex nav menu and has to exist because of jQuery */ +.nav-menu { + background-color: rgba(245, 245, 245, 0.9); + display: none; + width: 100%; +} + +/* This is the list actually containing the menu items */ +.nav-list { + display: flex; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; +} + +.navitem { + text-decoration: none; + text-align: center; + color: black; + font-size: 1.3rem; + padding: 2%; + width: 100%; +} +/* +.navitem:hover { + background-color: rgba(184, 214, 240, 1); +}*/ + + +/* + Media queries to optimise for desktop +*/ +@media only screen and (min-width: 999px) { + /* Top navigation bar container */ + .nav-container { + display: flex; + justify-content: center; + align-items: center; + } + + /* div containing the nav-menu unordered list */ + .nav-wrapper { + height: 100%; + width: 80%; + margin: auto; + display: inline-flex; + align-items: center; + justify-content: center; + } + + .listtoggle, .toggle-wrapper { + display: none; + } + + .nav-menu { + display: flex; + background-color: rgba(0, 0, 0, 0); + } + + .nav-list { + flex-direction: row; + } + + .mobile-wrapper { + width: fit-content; + margin-left: 3%; + } + + .navitem { + font-size: 0.9rem; + width: fit-content; + padding: 1%; + padding-left: 2%; + padding-right: 2% + } +} diff --git a/website/css/style.css b/website/css/style.css index ed50fa9..edfc638 100644 --- a/website/css/style.css +++ b/website/css/style.css @@ -7,6 +7,14 @@ * */ +html, body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + font-size: calc(14pt + 0.4vw); +} + body { background-color: #dcdcdc; /*TODO: Choose better font*/ @@ -25,14 +33,18 @@ body { /* This is the tile element with the background image and the title */ .title { - /* TODO: Add background image*/ - /* make div full width (well technically oversized and move it to -1% offset */ - display: block; - width: 101vw; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; height: 120vh; margin-top: -0.5vh; - margin-left: -0.5vw; text-align: center; + font-size: 2.5rem; + background-image: url("/assets/main_bg_cut.png"); + background-repeat: no-repeat; + background-size: cover; + background-position: center center; } .title-content { @@ -43,14 +55,28 @@ body { .title-buttons { position: relative; + font-size: 1.3rem; top: 30vh; } -.type-animation { - font-size: 600%; +.heading { color: white !important; } +.subheading { + color: white !important; + font-size: 1.7rem !important; +} + +#navbar { + height: 15vh; + position: relative; + z-index: 1; +} + +#footer { + height: 70vh; +} /* * @@ -61,10 +87,10 @@ body { /* Buttons */ .button { display: inline-block; - background-color: green; + background-color: rgba(0, 128, 0, 1); text-decoration: none; color: white; - font-size: 150%; + font-size: 1.2rem; margin: 5px; font-weight: bold; padding: 30px; @@ -73,10 +99,6 @@ body { border-radius: 50px; } -.button:hover { - background-color: lightgreen; -} - /* @@ -101,14 +123,22 @@ body { background-color: aqua; } -.features { +.centered { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; text-align: center; } -.feature-item { - display: inline-block; - width: 40%; - margin: 2%; +.sidebyside { + display: flex; + flex-direction: column; +} + +.sidebyside-element { + width: 100%; } @@ -123,4 +153,21 @@ body { .big-text { font-size: 200%; +} + +@media only screen and (min-width: 999px) { + #footer { + height: 40vh; + } + + .sidebyside { + width: 100%; + align-items: flex-start; + justify-content: space-between; + flex-direction: row; + } + + .sidebyside-element { + width: 40%; + } } \ No newline at end of file diff --git a/website/docs/index.html b/website/docs/index.html index e69de29..dd0e22f 100644 --- a/website/docs/index.html +++ b/website/docs/index.html @@ -0,0 +1,16 @@ + + + + Docs - impress.js + + + + + +
+ +
+ +
+ + \ No newline at end of file diff --git a/website/download.html b/website/download.html index e69de29..9125253 100644 --- a/website/download.html +++ b/website/download.html @@ -0,0 +1,40 @@ + + + + Download impress.js + + + + + + + + + +
+
+

Download impress.js

+

Ready to bring your presentations to the next level?

+
+
+ Watch the demo + Get started! +
+
+
+
+

Choose your download option!

+ +
+ From cdn (jsdelivr.net) + Full JavaScript File + Full source code + npmjs +
+

Note: The cdn link can be included directly in the HTML file of your presentation. See here for more info!

+
+


+
+ + + \ No newline at end of file diff --git a/website/footer.html b/website/footer.html new file mode 100644 index 0000000..b18253e --- /dev/null +++ b/website/footer.html @@ -0,0 +1,17 @@ + + + + + + + +
+
+
+

impress.js

+

The stunning javascript presentation framework

+ Created with ♥ by Janis Hutz +
+
+ + \ No newline at end of file diff --git a/website/index.html b/website/index.html index 3e8e3f2..c34df83 100644 --- a/website/index.html +++ b/website/index.html @@ -3,19 +3,12 @@ impress.js - the stunning javascript presentation framework - - - - - - - + + + + + + @@ -24,14 +17,13 @@
-

impress.js

+

impress.js

- Watch the demo + Watch the demo
- Get started! - - Download + Get started! + Download
@@ -49,22 +41,26 @@ -
-
-

FULL power of CSS.

-

Use the powerful styling tools CSS offers with only minimal restrictions. Because a tool should not restrict your options, such that the only limit is your imagination. (And your skills in CSS)

+
+
+
+

FULL power of CSS.

+

Use the powerful styling tools CSS offers with only minimal restrictions. Because a tool should not restrict your options, such that the only limit is your imagination. (And your skills in CSS)

+
+
+

Familiar.

+

impress.js presentations can be written in HTML with only a few simple to understand element attributes. Highly detailed Documentation helps you in getting started!

+
-
-

Familiar.

-

impress.js presentations can be written in HTML with only a few simple to understand element attributes. Highly detailed Documentation helps you in getting started!

-
-
-

Minimalist.

-

The framework only delivers what is essential, without compromising on functionality. You can expand on its functionality by writing some more javascript code or by using more CSS transitions and transforms.

-
-
-

Plugins.

-

It features extensive plugin-support to expand on its core functionality. Want a speaker console? Blank the screen? There's a plugin for it. If not, you may add your own!

+
+
+

Minimalist.

+

The framework only delivers what is essential, without compromising on functionality. You can expand on its functionality by writing some more javascript code or by using more CSS transitions and transforms.

+
+
+

Plugins.

+

It features extensive plugin-support to expand on its core functionality. Want a speaker console? Blank the screen? There's a plugin for it. If not, you may add your own!

+
@@ -74,19 +70,19 @@

Impressed?

Then you should try impress.js

*no rhyme intended

- Get started! + Get started! - Download + Download

Want to get more documentation or examples?

-

Then check out our documentation and examples

+

Then check out our documentation and examples

Want to help develop this project?

-

Then you should head over to our GitHub and take a look at our contributing Documentation and guidelines which you can find here

+

Then you should head over to our GitHub and take a look at our contributing Documentation and guidelines which you can find here

diff --git a/website/js/docs/loadDocPage.js b/website/js/docs/loadDocPage.js new file mode 100644 index 0000000..e69de29 diff --git a/website/js/index.js b/website/js/index.js index 9e164e6..4398743 100644 --- a/website/js/index.js +++ b/website/js/index.js @@ -1,6 +1,15 @@ -$(document).ready(function () { - $('#navbar').load('nav.html') - console.log("ok") +$( document ).ready( function () { + $( '#navbar' ).load( 'nav.html' ); + $( '#footer' ).load( 'footer.html' ); - // + $( document ).ready(function () { + $( '.button' ).mouseenter( function () { + $( this ).stop(); + $( this ).animate( { 'background-color':'rgba(65, 211, 65, 1)', 'border-radius': '0px' }, 200 ); + }); + $( '.button' ).mouseleave( function () { + $( this ).stop(); + $( this ).animate( { 'background-color':'rgba(0, 128, 0, 1)', 'border-radius': '500px' }, 200 ); + }); + }); }); \ No newline at end of file diff --git a/website/nav.html b/website/nav.html index 9c8a7d9..7bde880 100644 --- a/website/nav.html +++ b/website/nav.html @@ -1,18 +1,59 @@ - - - - - -
-
- - -
-
- \ No newline at end of file + + + + + +
+
+ +
+ ☰ +
+
+
+
+
+ Documentation + Download + GitHub +
+
+
+
+ + + \ No newline at end of file