9 files changed, 215 insertions, 0 deletions
diff --git a/basicsuite/webengine/content/common/ddg.png b/basicsuite/webengine/content/common/ddg.png
new file mode 100644
index 0000000..06ebe7c
--- /dev/null
+++ b/basicsuite/webengine/content/common/ddg.png
diff --git a/basicsuite/webengine/content/common/open-sans.css b/basicsuite/webengine/content/common/open-sans.css
new file mode 100644
index 0000000..6342492
--- /dev/null
+++ b/basicsuite/webengine/content/common/open-sans.css
@@ -0,0 +1,131 @@
+/* Open Sans @font-face kit */
+
+/* BEGIN Light */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/Light/OpenSans-Light.eot');
+  src: url('opensans/Light/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
+       url('opensans/Light/OpenSans-Light.woff') format('woff'),
+       url('opensans/Light/OpenSans-Light.ttf') format('truetype'),
+       url('opensans/Light/OpenSans-Light.svg#OpenSansLight') format('svg');
+  font-weight: 300;
+  font-style: normal;
+}
+/* END Light */
+
+/* BEGIN Light Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/LightItalic/OpenSans-LightItalic.eot');
+  src: url('opensans/LightItalic/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
+       url('opensans/LightItalic/OpenSans-LightItalic.woff') format('woff'),
+       url('opensans/LightItalic/OpenSans-LightItalic.ttf') format('truetype'),
+       url('opensans/LightItalic/OpenSans-LightItalic.svg#OpenSansLightItalic') format('svg');
+  font-weight: 300;
+  font-style: italic;
+}
+/* END Light Italic */
+
+/* BEGIN Regular */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/Regular/OpenSans-Regular.eot');
+  src: url('opensans/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
+       url('opensans/Regular/OpenSans-Regular.woff') format('woff'),
+       url('opensans/Regular/OpenSans-Regular.ttf') format('truetype'),
+       url('opensans/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* END Regular */
+
+/* BEGIN Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/Italic/OpenSans-Italic.eot');
+  src: url('opensans/Italic/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
+       url('opensans/Italic/OpenSans-Italic.woff') format('woff'),
+       url('opensans/Italic/OpenSans-Italic.ttf') format('truetype'),
+       url('opensans/Italic/OpenSans-Italic.svg#OpenSansItalic') format('svg');
+  font-weight: normal;
+  font-style: italic;
+}
+/* END Italic */
+
+/* BEGIN Semibold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/Semibold/OpenSans-Semibold.eot');
+  src: url('opensans/Semibold/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
+       url('opensans/Semibold/OpenSans-Semibold.woff') format('woff'),
+       url('opensans/Semibold/OpenSans-Semibold.ttf') format('truetype'),
+       url('opensans/Semibold/OpenSans-Semibold.svg#OpenSansSemibold') format('svg');
+  font-weight: 600;
+  font-style: normal;
+}
+/* END Semibold */
+
+/* BEGIN Semibold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/SemiboldItalic/OpenSans-SemiboldItalic.eot');
+  src: url('opensans/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
+       url('opensans/SemiboldItalic/OpenSans-SemiboldItalic.woff') format('woff'),
+       url('opensans/SemiboldItalic/OpenSans-SemiboldItalic.ttf') format('truetype'),
+       url('opensans/SemiboldItalic/OpenSans-SemiboldItalic.svg#OpenSansSemiboldItalic') format('svg');
+  font-weight: 600;
+  font-style: italic;
+}
+/* END Semibold Italic */
+
+/* BEGIN Bold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/Bold/OpenSans-Bold.eot');
+  src: url('opensans/Bold/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
+       url('opensans/Bold/OpenSans-Bold.woff') format('woff'),
+       url('opensans/Bold/OpenSans-Bold.ttf') format('truetype'),
+       url('opensans/Bold/OpenSans-Bold.svg#OpenSansBold') format('svg');
+  font-weight: bold;
+  font-style: normal;
+}
+/* END Bold */
+
+/* BEGIN Bold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/BoldItalic/OpenSans-BoldItalic.eot');
+  src: url('opensans/BoldItalic/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
+       url('opensans/BoldItalic/OpenSans-BoldItalic.woff') format('woff'),
+       url('opensans/BoldItalic/OpenSans-BoldItalic.ttf') format('truetype'),
+       url('opensans/BoldItalic/OpenSans-BoldItalic.svg#OpenSansBoldItalic') format('svg');
+  font-weight: bold;
+  font-style: italic;
+}
+/* END Bold Italic */
+
+/* BEGIN Extrabold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/ExtraBold/OpenSans-ExtraBold.eot');
+  src: url('opensans/ExtraBold/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
+       url('opensans/ExtraBold/OpenSans-ExtraBold.woff') format('woff'),
+       url('opensans/ExtraBold/OpenSans-ExtraBold.ttf') format('truetype'),
+       url('opensans/ExtraBold/OpenSans-ExtraBold.svg#OpenSansExtrabold') format('svg');
+  font-weight: 800;
+  font-style: normal;
+}
+/* END Extrabold */
+
+/* BEGIN Extrabold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot');
+  src: url('opensans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
+       url('opensans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff') format('woff'),
+       url('opensans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf') format('truetype'),
+       url('opensans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.svg#OpenSansExtraboldItalic') format('svg');
+  font-weight: 800;
+  font-style: italic;
+}
+/* END Extrabold Italic */
diff --git a/basicsuite/webengine/content/common/opensans/Light/OpenSans-Light.woff b/basicsuite/webengine/content/common/opensans/Light/OpenSans-Light.woff
new file mode 100644
index 0000000..937323d
--- /dev/null
+++ b/basicsuite/webengine/content/common/opensans/Light/OpenSans-Light.woff
diff --git a/basicsuite/webengine/content/common/opensans/Regular/OpenSans-Regular.woff b/basicsuite/webengine/content/common/opensans/Regular/OpenSans-Regular.woff
new file mode 100644
index 0000000..bd0f824
--- /dev/null
+++ b/basicsuite/webengine/content/common/opensans/Regular/OpenSans-Regular.woff
diff --git a/basicsuite/webengine/content/common/osm.png b/basicsuite/webengine/content/common/osm.png
new file mode 100644
index 0000000..d6390aa
--- /dev/null
+++ b/basicsuite/webengine/content/common/osm.png
diff --git a/basicsuite/webengine/content/common/qt-io.png b/basicsuite/webengine/content/common/qt-io.png
new file mode 100644
index 0000000..1596e73
--- /dev/null
+++ b/basicsuite/webengine/content/common/qt-io.png
diff --git a/basicsuite/webengine/content/common/reddit.png b/basicsuite/webengine/content/common/reddit.png
new file mode 100644
index 0000000..5f6aaef
--- /dev/null
+++ b/basicsuite/webengine/content/common/reddit.png
diff --git a/basicsuite/webengine/content/common/style.css b/basicsuite/webengine/content/common/style.css
new file mode 100644
index 0000000..ceecf60
--- /dev/null
+++ b/basicsuite/webengine/content/common/style.css
@@ -0,0 +1,84 @@
+a, a:link, a:active, a:visited {
+    text-decoration:none;
+}
+
+body {
+    margin: 2px;
+    background-color: black;
+    font-family: "Open Sans";
+    font-weight: 300;
+    color: white;
+}
+
+h1 {
+    font-size: 56px;
+    font-weight: 500;
+    margin: 0.7em;
+    text-align: center;
+}
+
+.bookmark {
+    margin-top: 4px;
+    padding-top: 9%;
+    padding-bottom: 2%;
+    -webkit-filter: grayscale(80%);
+    transition: -webkit-filter 0.5s;
+}
+.bookmark:hover {
+/*  -webkit-filter: none;*/
+    -webkit-filter: saturate(130%);
+}
+.bookmark span{
+    font-size: 48px;
+    color: #eee;
+    margin-left: 10%;
+    text-shadow: black 6px 4px 8px ;
+    background: rgba(160, 160, 160,0.3);
+    padding: 5px;
+    border-radius: 0.2em;
+}
+/*
+ * url(attr()) is not really such a good combo. expand by hand
+ */
+#qt-io {
+    background-image: url("qt-io.png");
+    background-size: 100% auto;
+}
+#youtube-tv {
+    background-image: url("youtube-tv.png");
+    background-size: 100% auto;
+}
+#osm {
+    background-image: url("osm.png");
+    background-size: 100% auto;
+}
+#ddg {
+    background-image: url("ddg.png");
+    background-position: 0% 25%;
+    background-size: 100% auto;
+}
+#reddit {
+    background-image: url("reddit.png");
+    background-size: 100% auto;
+}
+/* Flexbox stuff */
+#links-container {
+    display:flex;
+    flex-direction: column;
+}
+#examples-container {
+    display:flex;
+    flex-direction: row;
+}
+.example {
+    flex-grow: 1;
+    transition: flex-grow 0.5s;
+    width: 15%;
+    margin:2px;
+}
+.example:hover {
+    flex-grow: 3;
+}
+.example_image{
+        width: 100%;
+}
diff --git a/basicsuite/webengine/content/common/youtube-tv.png b/basicsuite/webengine/content/common/youtube-tv.png
new file mode 100644
index 0000000..489167e
--- /dev/null
+++ b/basicsuite/webengine/content/common/youtube-tv.png