diff options
Diffstat (limited to 'basicsuite/webengine/content')
-rw-r--r-- | basicsuite/webengine/content/common/ddg.png | bin | 0 -> 29990 bytes | |||
-rw-r--r-- | basicsuite/webengine/content/common/open-sans.css | 131 | ||||
-rw-r--r-- | basicsuite/webengine/content/common/opensans/Light/OpenSans-Light.woff | bin | 0 -> 62844 bytes | |||
-rw-r--r-- | basicsuite/webengine/content/common/opensans/Regular/OpenSans-Regular.woff | bin | 0 -> 63712 bytes | |||
-rw-r--r-- | basicsuite/webengine/content/common/osm.png | bin | 0 -> 418498 bytes | |||
-rw-r--r-- | basicsuite/webengine/content/common/qt-io.png | bin | 0 -> 489628 bytes | |||
-rw-r--r-- | basicsuite/webengine/content/common/reddit.png | bin | 0 -> 397780 bytes | |||
-rw-r--r-- | basicsuite/webengine/content/common/style.css | 84 | ||||
-rw-r--r-- | basicsuite/webengine/content/common/youtube-tv.png | bin | 0 -> 465148 bytes | |||
-rw-r--r-- | basicsuite/webengine/content/index.html | 37 |
10 files changed, 228 insertions, 24 deletions
diff --git a/basicsuite/webengine/content/common/ddg.png b/basicsuite/webengine/content/common/ddg.png Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew file mode 100644 index 0000000..489167e --- /dev/null +++ b/basicsuite/webengine/content/common/youtube-tv.png diff --git a/basicsuite/webengine/content/index.html b/basicsuite/webengine/content/index.html index 98c6df3..9610cbf 100644 --- a/basicsuite/webengine/content/index.html +++ b/basicsuite/webengine/content/index.html @@ -4,34 +4,23 @@ <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>Qt WebEngine Demo</title> - <style> - a, a:link, a:active, a:visited { - text-decoration:none; - font-family: "Helvetica"; - font-size: 18px; - color: rgb(0,0,0) - } - .bookmark { - margin: 28px; - } - .example { - display: inline-block; - } - .example_image { - width: 300px; - height: 175px; - } - </style> + <link rel="stylesheet" type="text/css" href="common/open-sans.css"> + <link rel="stylesheet" type="text/css" href="common/style.css"> </head> - <body bgcolor="#AAAAAA"> - <div style="text-align: center; padding-top: 100px;"> - <div class="bookmark"><a href="http://www.qt.io">http://www.qt.io</a></div> - <div class="bookmark"><a href="http://qt-project.org/doc/qt-5">http://qt-project.org/doc/qt-5</a></div> - <div class="bookmark"><a href="http://www.google.com">http://www.google.com</a></div> + <body> + <div id="links-container"> + <a href="http://www.qt.io"><div class="bookmark" id="qt-io"><span>The Qt Company</span></div></a> + <a href="https://www.youtube.com/tv"><div class="bookmark" id="youtube-tv"><span>YouTube TV</span></div></a> + <a href="http://www.openstreetmap.org"><div class="bookmark" id="osm"><span>OpenStreetMap</span></div></a> + <a href="http://www.duckduckgo.com"><div class="bookmark" id="ddg"><span>DuckDuckGo</span></div></a> + <a href="http://www.reddit.com"><div class="bookmark" id="reddit"><span>Reddit</span></div></a> + </div> + <h1>Offline demos</h1> + <div id="examples-container"> <!-- <div class="example"><a href="../content/webgl/helloqt.html"><img class="example_image" src="../content/webgl/screenshot.png"></a></div> --> <div class="example"><a href="../content/csstetrahedron/index.html"><img class="example_image" src="../content/csstetrahedron/screenshot.png"></a></div> <div class="example"><a href="../content/rubiks/index.html"><img class="example_image" src="../content/rubiks/screenshot.png"></a></div> <div class="example"><a href="../content/morphingcubes/index.html"><img class="example_image" src="../content/morphingcubes/screenshot.png"></a></div> - </div> + </div> </body> </html> |