Merge pull request 'added timetable for infobeamer' (#3) from marvin/tdf-webseite:main into main

Reviewed-on: #3

style/reset.css

@@ -0,0 +1,61 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+box-sizing: border-box;
+}
+/* Remove default padding */
+ul[class],
+ol[class] {
+padding: 0;
+}
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+margin: 0;
+}
+/* Set core body defaults */
+body {
+min-height: 100vh;
+scroll-behavior: smooth;
+text-rendering: optimizeSpeed;
+line-height: 1.5;
+}
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+list-style: none;
+}
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+text-decoration-skip-ink: auto;
+}
+/* Make images easier to work with */
+img {
+max-width: 100%;
+display: block;
+}
+/* Natural flow and rhythm in articles by default */
+article > * + * {
+margin-top: 1em;
+}
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+font: inherit;
+}
+

style/style.css

@@ -0,0 +1,245 @@
+* {
+ box-sizing: border-box;
+}
+html {
+ font-family: "IBM Plex Mono", "Sometype Mono", "Office Code Pro", "Cousine",
+  "Courier New", "Courier", monospace;
+ font-size: 1.3vw;
+ background: #2d95ab;
+ background-image: url("/style/bg.png");
+ min-height: 100%;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-size: cover;
+ color: #FFFFFF;
+}
+body {
+ width: 80%;
+ min-height: 100%;
+ margin: 0% auto;
+}
+header {
+ width: 100%;
+ text-align: center;
+}
+header img {
+ width: 50%;
+ margin: 1%;
+ border: none;
+}
+nav {
+ width: 100%;
+ text-align: center;
+ z-index: 1;
+ background: #000000;
+ color: #FFFFFF;
+ text-wrap: balance;
+ position: sticky;
+ top: 0px;
+ padding:0.2rem;
+}
+main {
+ width: 100%;
+}
+article {
+ padding: 1rem;
+ background: rgba(0, 0, 0, 0.7);
+}
+footer {
+ width: 100%;
+ text-align: center;
+ background: #000000;
+ color: #FFFFFF;
+}
+div.cont{
+ white-space: break-spaces;
+}
+div.h-box {
+ display: flex;
+ flex-wrap: wrap;
+}
+div.h-2items,li.pagefind-ui__result {
+ width: 48%;
+ display: inline-block;
+ margin: 2.5% 1%;
+ text-align: center;
+ border: solid 1px;
+ background: rgba(0, 0, 0, 0.5);
+}
+div.box{
+ border: solid 1px;
+ background: rgba(0, 0, 0, 0.5);
+ margin: 1%;
+ padding: 0% 0.5% 0.5% 0.5%;
+ img{
+  max-height:15rem; max-width:15rem;
+ }
+}
+h1 {
+ text-align: center;
+ color: yellow;
+}
+h2{
+ color: yellow;
+ font-weight: bold;
+ font-size: unset;
+}
+img {
+ display: inline;
+}
+p.desc{
+ text-align: center;
+}
+p.bar, a.pagefind-ui__result-link{
+ display: block;
+ text-align: center;
+ background: darkblue;
+ font-size: smaller;
+ margin: 0px 1px;
+}
+small{
+ text-align: center;
+ display: block;
+}
+a {
+ color: #FFFFFF;
+}
+nav a {
+ text-decoration: none;
+}
+a:hover {
+ color: #808080;
+}
+a.current {
+ color: #808080;
+}
+a.btn{
+ border: 1px solid;
+ border-radius: 0.2rem;
+ padding: 0.25rem;
+ margin: 0.25rem;
+ text-decoration: none;
+}
+a.btn:hover{
+ color: #808080;
+}
+@media (max-width: 1250px) {
+ html {
+  font-size: 16px;
+ }
+ body, nav {
+  width: 100%;
+ }
+}
+@media (max-width: 600px) {
+ html {
+  font-size: 16px;
+ }
+ html,body,nav {
+  max-width: 100%;
+  min-width: 100%;
+  width: 100%;
+ }
+ div.h-2items,li.pagefind-ui__result {
+  width: 98%;
+ }
+}
+@media print {
+ * {
+  box-sizing: border-box;
+  color: #000000 !important;
+  background: #FFFFFF !important;
+ }
+ a {
+  text-decoration: underline !important
+ }
+}
+form.pagefind-ui__form{
+ text-align: center;
+ white-space: initial;
+}
+img.pagefind-ui__result-image{
+ display: none;
+}
+div.tt{
+ position: relative;
+ height: 7600px;
+ div{
+  padding: 0% 0.5% 0.5% 0.5%;
+  position: absolute;
+  width: 20%;
+  border: solid 1px;
+  overflow: hidden;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.5);
+ }
+ div.loc1{
+  left:0%;
+ }
+ div.loc2{
+  left:20%;
+ }
+ div.loc3{
+  left:40%;
+ }
+ div.loc6{
+  left:80%;
+ }
+ div.loc7{
+  left:60%;
+ }
+  div.loc8{
+  display:none;
+ }
+
+ #marker{
+  display:none;
+  color: red; 
+  padding-top: 20px;
+  background:none;
+  background-image: url("/style/fire.gif");
+  background-repeat: repeat-x;
+  background-position-y: bottom;
+  font-size: 2rem;
+  width: 100%;
+  height: 3.5rem;
+  max-height: 3.5rem;
+  border: none;
+  border-bottom: solid 3px;
+  opacity: 0.7;
+ }
+}
+#status{
+ position: fixed; 
+ top: 5%;
+ left:5%; 
+ width:90%; 
+ height: 90%;
+ background: black;
+ border: solid 5px;
+ margin: 1%;
+ padding: 0% 0.5% 0.5% 0.5%;
+ display: none;
+ overflow: hidden;
+ white-space: break-spaces;
+ font-size: 1.5rem;
+ z-index:888;
+ img{
+  max-height:15rem;
+  margin: 0.5%;
+ }
+}
+#touchBlocker{
+ position: fixed;
+ top:0%;
+ left:0%;
+ width:100%;
+ height:100%;
+ z-index:999;
+}
+canvas{
+ background: unset !important;
+}
+.invisible{
+ display: none;
+}