1 files changed, 84 insertions, 0 deletions
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%;
+}