+
diff --git a/media/PSD/diamond.psd b/media/PSD/diamond.psd
new file mode 100644
index 0000000..45f7437
Binary files /dev/null and b/media/PSD/diamond.psd differ
diff --git a/media/PSD/logo.psd b/media/PSD/logo.psd
new file mode 100644
index 0000000..f85f92d
Binary files /dev/null and b/media/PSD/logo.psd differ
diff --git a/media/PXD/diamond.pxd b/media/PXD/diamond.pxd
new file mode 100644
index 0000000..58148a2
Binary files /dev/null and b/media/PXD/diamond.pxd differ
diff --git a/media/PXD/logo.pxd b/media/PXD/logo.pxd
new file mode 100644
index 0000000..925d84b
Binary files /dev/null and b/media/PXD/logo.pxd differ
diff --git a/press-kit/rectangle/rectangle-rendered.jpg b/press-kit/rectangle/rectangle-rendered.jpg
new file mode 100644
index 0000000..9857ad9
Binary files /dev/null and b/press-kit/rectangle/rectangle-rendered.jpg differ
diff --git a/press-kit/rectangle/rectangle.pxd b/press-kit/rectangle/rectangle.pxd
index 52af9c5..2835a2d 100644
Binary files a/press-kit/rectangle/rectangle.pxd and b/press-kit/rectangle/rectangle.pxd differ
diff --git a/press-kit/square/square.pxd b/press-kit/square/square.pxd
index b96067c..c17cd16 100644
Binary files a/press-kit/square/square.pxd and b/press-kit/square/square.pxd differ
diff --git a/press-kit/square/square_rendered.jpg b/press-kit/square/square_rendered.jpg
new file mode 100644
index 0000000..3a5d4dc
Binary files /dev/null and b/press-kit/square/square_rendered.jpg differ
diff --git a/website/css/lightbox.css b/website/css/lightbox.css
deleted file mode 100644
index 01110b7..0000000
--- a/website/css/lightbox.css
+++ /dev/null
@@ -1,203 +0,0 @@
-@charset "utf-8";
-/* line 7, ../sass/lightbox.sass */
-body:after {
- content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
- display: none;
-}
-
-/* line 11, ../sass/lightbox.sass */
-.lightboxOverlay {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 9999;
- background-color: black;
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
- opacity: 0.8;
- display: none;
-}
-
-/* line 20, ../sass/lightbox.sass */
-.lightbox {
- position: absolute;
- left: 0;
- width: 100%;
- z-index: 10000;
- text-align: center;
- line-height: 0;
- font-weight: normal;
-}
-/* line 28, ../sass/lightbox.sass */
-.lightbox .lb-image {
- display: block;
- height: auto;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- -ms-border-radius: 3px;
- -o-border-radius: 3px;
- border-radius: 3px;
-}
-/* line 32, ../sass/lightbox.sass */
-.lightbox a img {
- border: none;
-}
-
-/* line 35, ../sass/lightbox.sass */
-.lb-outerContainer {
- position: relative;
- background-color: white;
- *zoom: 1;
- width: 250px;
- height: 250px;
- margin: 0 auto;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- -ms-border-radius: 4px;
- -o-border-radius: 4px;
- border-radius: 4px;
-}
-/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
-.lb-outerContainer:after {
- content: "";
- display: table;
- clear: both;
-}
-
-/* line 44, ../sass/lightbox.sass */
-.lb-container {
- padding: 4px;
-}
-
-/* line 47, ../sass/lightbox.sass */
-.lb-loader {
- position: absolute;
- top: 43%;
- left: 0%;
- height: 25%;
- width: 100%;
- text-align: center;
- line-height: 0;
-}
-
-/* line 56, ../sass/lightbox.sass */
-.lb-cancel {
- display: block;
- width: 32px;
- height: 32px;
- margin: 0 auto;
- background: url(../img/loading.gif) no-repeat;
-}
-
-/* line 63, ../sass/lightbox.sass */
-.lb-nav {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- z-index: 10;
-}
-
-/* line 71, ../sass/lightbox.sass */
-.lb-container > .nav {
- left: 0;
-}
-
-/* line 74, ../sass/lightbox.sass */
-.lb-nav a {
- outline: none;
-}
-
-/* line 77, ../sass/lightbox.sass */
-.lb-prev, .lb-next {
- width: 49%;
- height: 100%;
- cursor: pointer;
- /* Trick IE into showing hover */
- display: block;
-}
-
-/* line 84, ../sass/lightbox.sass */
-.lb-prev {
- left: 0;
- float: left;
-}
-/* line 87, ../sass/lightbox.sass */
-.lb-prev:hover {
- background: url(../img/prev.png) left 48% no-repeat;
-}
-
-/* line 90, ../sass/lightbox.sass */
-.lb-next {
- right: 0;
- float: right;
-}
-/* line 93, ../sass/lightbox.sass */
-.lb-next:hover {
- background: url(../img/next.png) right 48% no-repeat;
-}
-
-/* line 96, ../sass/lightbox.sass */
-.lb-dataContainer {
- margin: 0 auto;
- padding-top: 5px;
- *zoom: 1;
- width: 100%;
- -moz-border-radius-bottomleft: 4px;
- -webkit-border-bottom-left-radius: 4px;
- border-bottom-left-radius: 4px;
- -moz-border-radius-bottomright: 4px;
- -webkit-border-bottom-right-radius: 4px;
- border-bottom-right-radius: 4px;
-}
-/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
-.lb-dataContainer:after {
- content: "";
- display: table;
- clear: both;
-}
-
-/* line 103, ../sass/lightbox.sass */
-.lb-data {
- padding: 0 4px;
- color: #bbbbbb;
-}
-/* line 106, ../sass/lightbox.sass */
-.lb-data .lb-details {
- width: 85%;
- float: left;
- text-align: left;
- line-height: 1.1em;
-}
-/* line 111, ../sass/lightbox.sass */
-.lb-data .lb-caption {
- font-size: 13px;
- font-weight: bold;
- line-height: 1em;
-}
-/* line 115, ../sass/lightbox.sass */
-.lb-data .lb-number {
- display: block;
- clear: left;
- padding-bottom: 1em;
- font-size: 12px;
- color: #999999;
-}
-/* line 121, ../sass/lightbox.sass */
-.lb-data .lb-close {
- display: block;
- float: right;
- width: 30px;
- height: 30px;
- background: url(../img/close.png) top right no-repeat;
- text-align: right;
- outline: none;
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
- opacity: 0.7;
-}
-/* line 130, ../sass/lightbox.sass */
-.lb-data .lb-close:hover {
- cursor: pointer;
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
-}
diff --git a/website/css/line.css b/website/css/line.css
deleted file mode 100644
index 701c626..0000000
--- a/website/css/line.css
+++ /dev/null
@@ -1,54 +0,0 @@
-@charset "utf-8";
-img.diamondGreen{
- content:url('../img/template/diamond_green.png');
- width:25px;
-
- -webkit-transition: all 1s ease-in-out;
- -moz-transition: all 1s ease-in-out;
- -o-transition: all 1s ease-in-out;
- -ms-transition: all 1s ease-in-out;
-
-}
-img.diamondGreen:hover
-{
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
-}
-
-img.diamondYellow{
- content:url('../img/template/diamond_yellow.png');
- width:25px;
-
- -webkit-transition: all 1s ease-in-out;
- -moz-transition: all 1s ease-in-out;
- -o-transition: all 1s ease-in-out;
- -ms-transition: all 1s ease-in-out;
-
-}
-img.diamondYellow:hover
-{
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
-}
-
-img.diamondGreenMini{
- content:url('../img/template/diamond_green.png');
- width:10px;
-
- -webkit-transition: all 1s ease-in-out;
- -moz-transition: all 1s ease-in-out;
- -o-transition: all 1s ease-in-out;
- -ms-transition: all 1s ease-in-out;
-
-}
-img.diamondGreenMini:hover
-{
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
-}
\ No newline at end of file
diff --git a/website/css/normalize.css b/website/css/normalize.css
new file mode 100755
index 0000000..77feb20
--- /dev/null
+++ b/website/css/normalize.css
@@ -0,0 +1 @@
+article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
\ No newline at end of file
diff --git a/website/css/polaroid.css b/website/css/polaroid.css
deleted file mode 100644
index 1939f36..0000000
--- a/website/css/polaroid.css
+++ /dev/null
@@ -1,79 +0,0 @@
-@charset "utf-8";
-/* CSS Document */
-
-/**
-* Polaroid Images
-*/
-.polaroid-images
-{
- margin:10px 0;
- float: left;
- align-items: center;
- align-content: center;
- align-self: center;
-}
-.polaroid-images a
-{
- background: white;
- display: inline;
- float: left;
- margin: 0 15px 30px;
- padding: 10px 10px 25px;
- text-align: center;
- text-decoration: none;
- -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
- -moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
- box-shadow: 0 4px 6px rgba(0,0,0,.3);
- -webkit-transition: all .15s linear;
- -moz-transition: all .15s linear;
- transition: all .15s linear;
- z-index:0;
- position: relative;
-}
-.polaroid-images a:after {
- color: #333;
- font-size: 20px;
- content: attr(title);
- position: relative;
- top:15px;
-}
-.polaroid-images img {
- display: block;
- width: inherit;
-}
-
-.polaroid-images a:nth-child(2n)
-{
- -webkit-transform: rotate(4deg);
- -moz-transform: rotate(4deg);
- transform: rotate(4deg);
-}
-.polaroid-images a:nth-child(3n) {
- -webkit-transform: rotate(-24deg);
- -moz-transform: rotate(-24deg);
- transform: rotate(-24deg);
-}
-.polaroid-images a:nth-child(4n)
-{
- -webkit-transform: rotate(14deg);
- -moz-transform: rotate(14deg);
- transform: rotate(14deg);
-}
-.polaroid-images a:nth-child(5n)
-{
- -webkit-transform: rotate(-18deg);
- -moz-transform: rotate(-18deg);
- transform: rotate(-18deg);
-}
-.polaroid-images a:hover{
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- transform: rotate(0deg);
- -webkit-transform: scale(1.2);
- -moz-transform: scale(1.2);
- transform: scale(1.2);
- z-index:10;
- -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
- -moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
- box-shadow: 0 10px 20px rgba(0,0,0,.7);
-}
\ No newline at end of file
diff --git a/website/css/rotate.css b/website/css/rotate.css
deleted file mode 100644
index 4186d0c..0000000
--- a/website/css/rotate.css
+++ /dev/null
@@ -1,42 +0,0 @@
-@charset "utf-8";
-
-
-/* ALT
-.rotate{
- -webkit-transition-duration: 0.8s;
- -moz-transition-duration: 0.8s;
- -o-transition-duration: 0.8s;
- transition-duration: 0.8s;
- -webkit-transition-property: -webkit-transform;
- -moz-transition-property: -moz-transform;
- -o-transition-property: -o-transform;
- transition-property: transform;
- overflow: hidden;
-}
-.rotate:hover
-{
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- text-align: left;
- font-size: 12px;
-}
-*/
-
-.rotate
-{
-
-
--webkit-transition: all 1s ease-in-out;
--moz-transition: all 1s ease-in-out;
--o-transition: all 1s ease-in-out;
--ms-transition: all 1s ease-in-out;
-}
-
-.rotate:hover
-{
--webkit-transform: rotate(360deg);
--moz-transform: rotate(360deg);
--o-transform: rotate(360deg);
--ms-transform: rotate(360deg);
-}
\ No newline at end of file
diff --git a/website/css/showhide.css b/website/css/showhide.css
deleted file mode 100644
index 7c7eaae..0000000
--- a/website/css/showhide.css
+++ /dev/null
@@ -1,189 +0,0 @@
-@charset "UTF-8";
-/* CSS Document */
-
-/* css only show/hide
-
-*/
-
-
-article {
- margin-bottom: 3rem;
- position: relative;
- *zoom: 1;
-}
-
-article:before, article:after {
- content: "";
- display: table;
-}
-
-article:after { clear: both }
-
-article figure {
- float: left;
- width: 32.5%;
-}
-
-article section:first-of-type {
- float: right;
- width: 62.5%;
-}
-
-article section:last-of-type {
- display: none;
- visibility: hidden;
-}
-
-section {
- -webkit-transition: .125s linear;
- -moz-transition: .125s linear;
- -ms-transition: .125s linear;
- -o-transition: .125s linear;
- transition: .125s linear;
-}
-
-input[type=checkbox] {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- width: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
-}
-
-input[type=checkbox]:checked ~ section {
- display: block;
- visibility: visible;
- width: 100%;
- text-align: center;
-}
-
-input[type=checkbox]:checked ~ figure { width: 100% }
-
-
-/* read_more1 */
-[for="read_more1"] {
- position: absolute;
- bottom: -3rem;
- left: 0;
- width: 100%;
- text-align: center;
- padding: .65rem;
- box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
-}
-
-[for="read_more1"]:hover {
- background: rgba(0,0,0,.5);
- color: rgb(255,255,255);
-}
-
-[for="read_more1"] span:last-of-type {
- display: none;
- visibility: hidden;
-}
-
-input[type=checkbox]:checked ~ [for="read_more1"] span:first-of-type {
- display: none;
- visibility: hidden;
-}
-
-input[type=checkbox]:checked ~ [for="read_more1"] span:last-of-type {
- display: block;
- visibility: visible;
-}
-
-/* read_more2 */
-[for="read_more2"] {
- position: absolute;
- bottom: -3rem;
- left: 0;
- width: 100%;
- text-align: center;
- padding: .65rem;
- box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
-}
-
-[for="read_more2"]:hover {
- background: rgba(0,0,0,.5);
- color: rgb(255,255,255);
-}
-
-[for="read_more2"] span:last-of-type {
- display: none;
- visibility: hidden;
-}
-
-input[type=checkbox]:checked ~ [for="read_more2"] span:first-of-type {
- display: none;
- visibility: hidden;
-}
-
-input[type=checkbox]:checked ~ [for="read_more2"] span:last-of-type {
- display: block;
- visibility: visible;
-}
-
-/* read_more3 */
-[for="read_more3"] {
- position: absolute;
- bottom: -3rem;
- left: 0;
- width: 100%;
- text-align: center;
- padding: .65rem;
- box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
-}
-
-[for="read_more3"]:hover {
- background: rgba(0,0,0,.5);
- color: rgb(255,255,255);
-}
-
-[for="read_more3"] span:last-of-type {
- display: none;
- visibility: hidden;
-}
-
-input[type=checkbox]:checked ~ [for="read_more3"] span:first-of-type {
- display: none;
- visibility: hidden;
-}
-
-input[type=checkbox]:checked ~ [for="read_more3"] span:last-of-type {
- display: block;
- visibility: visible;
-}
-
-
-/* read_more4 */
-[for="read_more4"] {
- position: absolute;
- bottom: -3rem;
- left: 0;
- width: 100%;
- text-align: center;
- padding: .65rem;
- box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
-}
-
-[for="read_more4"]:hover {
- background: rgba(0,0,0,.5);
- color: rgb(255,255,255);
-}
-
-[for="read_more4"] span:last-of-type {
- display: none;
- visibility: hidden;
-}
-
-input[type=checkbox]:checked ~ [for="read_more4"] span:first-of-type {
- display: none;
- visibility: hidden;
-}
-
-input[type=checkbox]:checked ~ [for="read_more4"] span:last-of-type {
- display: block;
- visibility: visible;
-}
diff --git a/website/css/style.css b/website/css/style.css
new file mode 100755
index 0000000..71deac5
--- /dev/null
+++ b/website/css/style.css
@@ -0,0 +1,549 @@
+@font-face {
+ font-family: 'icons';
+ src: url('../fonts/icons/icons.eot');
+ src: url('../fonts/icons/icons.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/icons/icons.woff') format('woff'),
+ url('../fonts/icons/icons.ttf') format('truetype'),
+ url('../fonts/icons/icons.svg#icons') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;600;700&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ list-style: none;
+ text-decoration: none;
+}
+
+body {
+ background: #222222;
+ color: white;
+ font-family: 'Inconsolata', monospace;
+}
+
+img {
+ max-width: 100%;
+}
+
+.container {
+ max-width: 950px;
+ margin: auto;
+ padding: 0 20px;
+}
+
+section {
+ padding: 2rem 0;
+}
+
+/* Body part css */
+
+.navbar {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+.nav_menu {
+ display: flex;
+ /* flex-wrap: wrap; */
+ align-items: center;
+ gap: 20px;
+ margin-top: 0px;
+}
+
+.nav_menu li {
+ margin-top: 30px;
+ width: 100px !important;
+ text-align: center;
+}
+.nav_menu li a {
+ padding: 10px 15px;
+ background: #67B32E;
+ border-radius: 8px;
+ cursor: pointer;
+ font-size: 18px;
+ color: #222222;
+ display: block;
+
+}
+
+.nav_menu li a:hover{
+ text-decoration: underline;
+}
+
+.nav_menu li a.active,
+.nav_menu li a.active:hover {
+ background: #F2E600;
+}
+
+
+.sm-card{
+ display: math !important;
+ flex-direction: row;
+ height: 60px;
+ overflow: hidden;
+}
+
+.bt_sm_card{
+ height: 60px;
+ overflow: hidden;
+}
+
+.bt_sm_card img:hover,
+.sm-card img:hover {
+ rotate: 360deg;
+ transition: all 0.5s ease-in-out;
+}
+
+.logo {
+ margin-top: 30px;
+}
+
+
+.codeQuartett_part_2{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+.codeQuartett_part_2 .text{
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-bottom: 50px;
+}
+
+.codeQuartett_part_2 .text p{
+ text-align: justify;
+}
+
+.bottom_text .title{
+margin: 30px 0;
+color: #F2E600;
+font-size: 22px;
+}
+
+.bottom_text .green_title{
+margin: 10px 0;
+color: #67B32E;
+font-size: 18px;
+}
+
+.property-entry{
+ margin-top: 30px;
+}
+
+.property-entry ul{
+ margin-top: 15px;
+}
+
+.property-entry ul li{
+ list-style: disc;
+ margin-left: 18px;
+}
+
+
+.bottom_text a{
+ color: #67B32E;
+}
+
+a{
+ color: #67B32E;
+}
+
+
+/* photostack */
+
+
+.photostack {
+ background: #262729;
+ position: relative;
+ text-align: center;
+ overflow: hidden;
+ border: 10px solid #5c5b5b;
+ border-left: none;
+ border-right: none;
+}
+
+.js .photostack {
+ height: 80vh;
+}
+
+
+@media screen and (max-width: 768px){
+ .js .photostack{
+ height: 95vh !important;
+ }
+
+}
+
+.photostack-start {
+ cursor: pointer;
+}
+button{
+ border: none;
+}
+
+.photostack-nav-button{
+ width: 50px;
+ height: 50px;
+ border-radius: 100px;
+ background: rgba(103, 179, 46, 0.5);
+}
+
+/* Wrapper and figures */
+
+/* The size of this wrapper can be smaller if the items should not be scattered across the whole container */
+.photostack>div {
+ width: 100%;
+ height: 100%;
+ margin: 0 auto;
+}
+
+.photostack figure {
+ width: 320px;
+ position: relative;
+ display: inline-block;
+ background: transparent;
+ padding: 20px;
+ text-align: center;
+ margin: 5px;
+ /* -webkit-perspective: 600px;
+ -moz-perspective: 600px; */
+}
+
+.js .photostack figure {
+ position: absolute;
+ display: block;
+ margin: 0;
+}
+
+.photostack figcaption h2 {
+ margin: 20px 0 0 0;
+ color: #a7a0a2;
+ visibility: collapse;
+ font-size: 16px;
+}
+
+.photostack-img {
+ outline: none;
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ object-fit: cover
+}
+
+.photostack-back {
+ display: none;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background: transparent;
+ font-family: "Give You Glory", cursive;
+ color: #a7a0a2;
+ padding: 50px 40px;
+ text-align: left;
+ font-size: 22px;
+ line-height: 1.25;
+ z-index: 1;
+}
+
+.photostack-back p {
+ margin: 0;
+}
+
+.photostack-back p span {
+ text-decoration: line-through;
+}
+
+/* Navigation dots */
+.photostack nav {
+ position: absolute;
+ width: 45px;
+ bottom: 10px;
+ z-index: 90;
+ text-align: center;
+ left: 50%;
+ transform: translate(-50%);
+ -webkit-transition: opacity 0.3s;
+ transition: opacity 0.3s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 30px;
+ margin: auto;
+}
+
+.photostack-start nav {
+ opacity: 0;
+}
+
+.photostack nav span {
+ position: relative;
+ display: inline-block;
+ margin: 0px 5px;
+ width: 30px;
+ height: 30px;
+ cursor: pointer;
+ background: #aaa;
+ border-radius: 50%;
+ text-align: center;
+ -webkit-transition: -webkit-transform 0.6s ease-in-out, background 0.3s;
+ transition: transform 0.6s ease-in-out, background 0.3s;
+ -webkit-transform: scale(0.48);
+ transform: scale(0.48);
+ display: none;
+}
+
+.photostack nav span:last-child {
+ margin-right: 0;
+}
+
+.photostack nav span::after {
+ content: "\e600";
+ font-family: 'icons';
+ font-size: 80%;
+ /* speak: none; */
+ display: inline-block;
+ vertical-align: top;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 30px;
+ color: #fff;
+ opacity: 0;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-transition: opacity 0.3s;
+ transition: opacity 0.3s;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+
+.photostack nav span.current {
+ background: #67B32E;
+ -webkit-transform: scale(1.5);
+ transform: scale(1.5);
+ display: block;
+}
+
+.photostack nav span.current.flippable.flip,
+.photostack nav span.current.flip {
+ -webkit-transform: scale(1) rotateY(-180deg) translateZ(-1px);
+ transform: scale(1) rotateY(-180deg) translateZ(-1px);
+ background: #555;
+}
+
+.photostack nav span.flippable::after {
+ opacity: 1;
+ -webkit-transition-delay: 0.4s;
+ transition-delay: 0.4s;
+}
+
+figure.flip_card.photostack-current .photostack-back{
+padding: 16px;
+}
+
+.flip_card{
+ border-radius: 20px;
+}
+
+.flip_card img{
+ border-radius: 20px;
+ border: solid;
+ border-color: #252525;
+ border-width: 1px;
+}
+/* Overlays */
+
+/* Initial overlay on photostack container */
+.js .photostack::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ top: 0;
+ left: 0;
+ z-index: 100;
+ -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
+ transition: opacity 0.3s, visibility 0s 0.3s;
+}
+
+.js .photostack-start::before {
+ -webkit-transition: opacity 0.3s;
+ transition: opacity 0.3s;
+}
+
+/* Button on photostack container */
+.js .photostack::after {
+ content: 'View Gallery';
+ font-weight: 400;
+ position: absolute;
+ border: 3px solid transparent;
+ text-align: center;
+ white-space: nowrap;
+ left: 50%;
+ top: 50%;
+ -webkit-transform: translateY(-50%) translateX(-50%);
+ transform: translateY(-50%) translateX(-50%);
+ padding: 10px 20px;
+ color: transparent;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ cursor: pointer;
+ z-index: 101;
+}
+
+.js .photostack::before,
+.js .photostack::after {
+ opacity: 0;
+ visibility: hidden;
+}
+
+.js .photostack-start::before,
+.js .photostack-start:hover::after,
+.touch .photostack-start::after {
+ opacity: 1;
+ visibility: visible;
+}
+
+/* Overlay on figure */
+.photostack figure::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 20px;
+ top: 0;
+ left: 0;
+ visibility: visible;
+ opacity: 1;
+ background: rgba(0, 0, 0, 0.05);
+ -webkit-transition: opacity 0.6s;
+ transition: opacity 0.6s;
+}
+
+/* Hide figure overlay when it becomes current */
+figure.photostack-current::after {
+ -webkit-transition: opacity 0.6s, visibility 0s 0.6s;
+ transition: opacity 0.6s, visibility 0s 0.6s;
+ opacity: 0;
+ visibility: hidden;
+}
+
+/* Special classes for transitions and perspective */
+.photostack-transition figure {
+ -webkit-transition: -webkit-transform 0.6s ease-in-out;
+ transition: transform 0.6s ease-in-out;
+}
+
+.photostack-perspective {
+ -webkit-perspective: 1800px;
+ perspective: 1800px;
+}
+
+.photostack-perspective>div,
+.photostack-perspective figure {
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+}
+
+.photostack-perspective figure,
+.photostack-perspective figure div {
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+
+.photostack-perspective figure.photostack-flip {
+ -webkit-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
+}
+
+.csstransformspreserve3d figure.photostack-flip .photostack-back {
+ -webkit-transform: rotateY(180deg);
+ transform: rotateY(180deg);
+ display: block;
+}
+
+.no-csstransformspreserve3d figure.photostack-showback .photostack-back {
+ display: block;
+}
+
+/* The no-JS fallback look does not need to be boring ;) */
+.no-js .photostack figure {
+ box-shadow: -2px 2px 20px rgba(0, 0, 0, 0.05);
+}
+
+.no-js .photostack figure::after {
+ display: none;
+}
+
+.no-js .photostack figure:nth-child(3n) {
+ -webkit-transform: translateX(-10%) rotate(5deg);
+ transform: translateX(-10%) rotate(5deg);
+}
+
+.no-js .photostack figure:nth-child(3n-2) {
+ -webkit-transform: translateY(10%) rotate(-3deg);
+ transform: translateY(10%) rotate(-3deg);
+}
+
+/* Some custom styles for the demo */
+
+/* Since we don't have back sides for the first photo stack, we don't want the current dot to become too big */
+#photostack-1 nav span.current {
+ background: #888;
+ -webkit-transform: scale(0.61);
+ transform: scale(0.61);
+}
+
+.empty_card_for_btn{
+ background: transparent !important;
+ display: none;
+}
+
+.photostack figure.empty_card_for_btn::after{
+ background: transparent !important;
+ display: none;
+}
+
+figure.flip_card.photostack-current.photostack-flip{
+ z-index: 1000;
+}
+
+
+.photostack nav span.current.flippable.flip, .photostack nav span.current.flip{
+ transform: scale(1.6) rotateY(-180deg) translateZ(-1px);
+ background: #67B32E;
+}
+
+.btn_area{
+ position: relative;
+ top: -36px;
+ height: 30px;
+}
+
+.btn_area .back,
+.btn_area .next{
+ padding: 9px 11px;
+ border-radius: 100px;
+ margin: 20px 40px;
+ background: #67B32E;
+}
+
+
+
+#shadow-host-companion{
+ display: none;
+}
diff --git a/website/css/styles.css b/website/css/styles.css
deleted file mode 100644
index e89c54e..0000000
--- a/website/css/styles.css
+++ /dev/null
@@ -1,134 +0,0 @@
-@charset "UTF-8";
-/* CSS Document */
-a{
- font-size: 14px;
- color: #ccc;
- transition: all 0.3s ease-in;
- text-decoration: underline;
- border-top-left-radius: 0px;
-}
-a:hover{
- -webkit-stroke-width: 5.3px;
- -webkit-stroke-color: #FFFFFF;
- -webkit-fill-color: #FFFFFF;
- color: #E8DC00;
- text-shadow: 1px 0px 20px #66B32D;
-}
-a:active
-{
- -webkit-stroke-width: 5.3px;
- -webkit-stroke-color: #FFFFFF;
- -webkit-fill-color: #FFFFFF;
- color: #E8DC00;
- text-shadow: 1px 0px 20px #66B32D;
-}
-a:focus
-{
- -webkit-stroke-width: 5.3px;
- -webkit-stroke-color: #FFFFFF;
- -webkit-fill-color: #FFFFFF;
- color: #FF0;
- text-shadow: 1px 0px 20px #66B32D;
- font-weight: bold;
-}
-
-.midtext {
- padding-left: 30px;
- padding-right: 30px;
- line-height: 18px;
- text-align: left;
-}
-
-.h1 {
- padding-left: 30px;
- padding-right: 30px;
- line-height: 18px;
- text-transform: uppercase;
- color: #F4E700;
- font-size: 18px;
- text-align: left;
-}
-.h2 {
- padding-left: 30px;
- padding-right: 30px;
- line-height: 0px;
- text-transform: uppercase;
- color: #67B32D;
- font-size: 14px;
- text-align: left;
-}
-
-.menu {
- padding-right: 30px;
- padding-top: 0px;
- padding-left: 30px;
- font-size: 14px;
- text-shadow: 0px 0px;
- text-align: center;
-}
-
-.midtextCenter {
- text-align: left;
-}
-
-body,td,th {
- font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
- font-style: normal;
- font-weight: normal;
- font-size: 14px;
- color: #fff;
-}
-body {
- background-color: #222;
- text-align: center;
-}
-
-::selection {
- background: #66B22D; /* Safari */
-}
-::-moz-selection {
- background: #66B22D; /* Firefox */
-}
-
-.product-details__general-info {
- visibility: collapse;
- height: 0;
-}
-
-
-table {
- padding: 0;
- word-break: initial;
-}
-
-table tr {
- margin: 0;
- padding: 0;
-}
-
-
-table th {
- font-weight: bold;
- border-bottom: 0;
- margin: 0;
- padding: 6px 13px;
-}
-
-table td {
- margin: 0;
- padding: 6px 13px;
-}
-
-table th:first-child,
-table td:first-child {
- margin-top: 0;
-}
-
-table th:last-child,
-table td:last-child {
- margin-bottom: 0;
-}
-
-.CodeMirror-lines {
- padding-left: 4px;
-}
diff --git a/website/favicon.ico b/website/favicon.ico
deleted file mode 100644
index baa04c8..0000000
Binary files a/website/favicon.ico and /dev/null differ
diff --git a/website/fonts/codropsicons/codropsicons.eot b/website/fonts/codropsicons/codropsicons.eot
new file mode 100755
index 0000000..f46c7f4
Binary files /dev/null and b/website/fonts/codropsicons/codropsicons.eot differ
diff --git a/website/fonts/codropsicons/codropsicons.svg b/website/fonts/codropsicons/codropsicons.svg
new file mode 100755
index 0000000..d202d21
--- /dev/null
+++ b/website/fonts/codropsicons/codropsicons.svg
@@ -0,0 +1,24 @@
+
+
+
\ No newline at end of file
diff --git a/website/fonts/codropsicons/codropsicons.ttf b/website/fonts/codropsicons/codropsicons.ttf
new file mode 100755
index 0000000..72bed1f
Binary files /dev/null and b/website/fonts/codropsicons/codropsicons.ttf differ
diff --git a/website/fonts/codropsicons/codropsicons.woff b/website/fonts/codropsicons/codropsicons.woff
new file mode 100755
index 0000000..1003218
Binary files /dev/null and b/website/fonts/codropsicons/codropsicons.woff differ
diff --git a/website/fonts/codropsicons/license.txt b/website/fonts/codropsicons/license.txt
new file mode 100755
index 0000000..88a5cbc
--- /dev/null
+++ b/website/fonts/codropsicons/license.txt
@@ -0,0 +1,6 @@
+Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
+License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
+
+
+Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
+License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
\ No newline at end of file
diff --git a/website/fonts/icons/icons.eot b/website/fonts/icons/icons.eot
new file mode 100755
index 0000000..cc3a87c
Binary files /dev/null and b/website/fonts/icons/icons.eot differ
diff --git a/website/fonts/icons/icons.svg b/website/fonts/icons/icons.svg
new file mode 100755
index 0000000..a0e78b5
--- /dev/null
+++ b/website/fonts/icons/icons.svg
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/website/fonts/icons/icons.ttf b/website/fonts/icons/icons.ttf
new file mode 100755
index 0000000..68217b1
Binary files /dev/null and b/website/fonts/icons/icons.ttf differ
diff --git a/website/fonts/icons/icons.woff b/website/fonts/icons/icons.woff
new file mode 100755
index 0000000..008dbee
Binary files /dev/null and b/website/fonts/icons/icons.woff differ
diff --git a/website/highlight.min.js b/website/highlight.min.js
deleted file mode 100644
index b3c8bcd..0000000
--- a/website/highlight.min.js
+++ /dev/null
@@ -1 +0,0 @@
-var hljs=new function(){function m(p){return p.replace(/&/gm,"&").replace(/"}while(y.length||w.length){var v=u().splice(0,1)[0];z+=m(x.substr(q,v.offset-q));q=v.offset;if(v.event=="start"){z+=t(v.node);s.push(v.node)}else{if(v.event=="stop"){var p,r=s.length;do{r--;p=s[r];z+=("")}while(p!=v.node);s.splice(r,1);while(r"+y.value+"|
-
 
-
- |
-
|
-
-
- 
-
-
- The CodeQuartett is the game which detroys the never ending war "which programming-language is the
- best?". The cards are perfectly for programmer-noobs or for technical interested people, who want to know the - difference between all the languages. -You are allowed to print the cards or change the design, or make your own version of CodeQuartett. -- You can find the files on GitHub in - differenz formats, the hello-world examples as well. - -- |
-
-     |
-
|
- Properties -Appeared -The year when the language was released, older is better. - Distribution -This property was measured on the basis of the Tiobe Index. - Rounded to values of 1 to 8. The higher one wins. -- Dialects - The count of dialects a language has. More are better. Possible values:
-
-
-
- Nerdfactor -This is a index created by myself to show how crazy/nerdy/bazzinga a language is. The
- number is printed in binary format. The higher on wins the match. Possible values:
-
-
- HelloWorld.Length -The character count of the hello-world example. Source was Wikipedia. -- |
-
| - |
|
- Cards - - |
-
|
- Imprint - |
-
|
-
- Johann Weiher Contact: Sales tax identification number - |
-
| - |
|
-
- |
-
|
-
-
- |
-
|
-
-
-
-
- Mit dem CodeQuartett kannst Du zusammen mit deinen Freunden die ewige Diskussion, welche
- Sprache die bessere ist, beenden. Aber auch für Programmier-Neulinge oder einfach technisch Interessierte, ist es eine ideale Möglichkeit die - Unterschiede der einzelnen Sprachen kennen zu lernen. -Ganz nach dem Open Source Gedanken sind die Daten komplett auf GitHub frei verfügbar. - |
-
|
- |
-
|
- Eigenschaften -Erscheinungsjahr (Appeared) -Je früher eine Programmiersprache erschien, desto stärker ist sie im Duell. - Verbreitung (Distribution) -Diese Eigenschaft wurde anhand des Tiobe Index - bestimmt. Dieser wurde auf Werte von 1-8 vereinfacht. Die höhere Zahl gewinnt. -- Dialekte (Dialects) - Anzahl der Dialekte einer Programmiersprache. Je mehr umso besser. Mögliche Werte:
-
-
-
- Nerdfactor -Messzahl wie verrückt/nerdig/abgefahren/bazinga eine Sprache ist. Umso höher der
- Zahlenwert, desto besser. Mögliche Werte (wer die Werte nicht lesen kann, sollte sich schämen, aber für
- Euch habe ich den Integer-Wert dazugeschrieben):
-
-
-
- HelloWorld.Length -Zeichenlänge des bekannten Hello World Programms. Als Quelle diente die Übersicht auf - Wikipedia. - |
-
| - |
|
- Karten - - |
-
|
- Impressum - |
-
|
- - Angaben gemäß § 5 TMG - - - -Vertreten durch: Kontakt: Umsatzsteuer-ID: Wirtschafts-ID: - |
-
| - |
|
-
- |
-
| t |
- 
+ 
+ 
+ 
+ 
+ 
+ 
