diff --git a/public/css/components.css b/public/css/components.css index c5a7d97..6fb4f5d 100644 --- a/public/css/components.css +++ b/public/css/components.css @@ -12,7 +12,7 @@ body { overflow: hidden; } -main { +#main { display: grid; grid-template-columns: 80% 20%; height: calc(100% - 3em - 10px); @@ -32,4 +32,61 @@ main { direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; +} + + +#modal { + display: none; + position: fixed; + z-index: 100000; + padding-top: 50px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.8); +} + +#content { + background-color: #fefefe; + margin: auto; + padding: 20px; + border: 1px solid #888; + width: 90%; + height: calc(100% - 142px); + border-radius: 5px; +} + +.divider { + background: #585858; + height: 0.1em; + margin: 0.5em 0 0.5em; +} + +#modal_header { + display: grid; + grid-template-columns: 90% 10%; +} + +#modal_header #modal_title { + grid-column: 1; + margin: 0; +} + +#modal_header > span { + grid-column: 2; + display: flex; + justify-content: flex-end; + align-items: center; +} + +#modal_header span i { + cursor: pointer; +} + +#spielanleitung { + background-color: #fefefe; + width: 100%; + height: calc(100% - 50px); } \ No newline at end of file diff --git a/public/css/header.css b/public/css/header.css index 83b7b85..fb27675 100644 --- a/public/css/header.css +++ b/public/css/header.css @@ -12,6 +12,21 @@ header { grid-template-columns: 25% 40% 25%; } +.spielanleitung { + display: flex; + align-items: center; + font-size: 1.5em; + padding-left: 10px; +} + +.spielanleitung span { + background: #404040; + border: 1px solid #000000; + padding: 5px; + border-radius: 5px; + cursor: pointer; +} + .title { text-align: center; display: flex; diff --git a/public/data/Spielanleitung.pdf b/public/data/Spielanleitung.pdf new file mode 100644 index 0000000..33cacc8 Binary files /dev/null and b/public/data/Spielanleitung.pdf differ diff --git a/public/index.html b/public/index.html index 1c9a073..1ab98bb 100644 --- a/public/index.html +++ b/public/index.html @@ -16,37 +16,55 @@
-
+
Spielanleitung
PM-Game
DATE_TO_BE_REPLACEDCOMMIT_TO_BE_REPLACED
-
-
-

- - +
+
+ +

+ + - - + + - - -
-
- -
-
-
- -
-
- - - +
+
+ +
+
+
+ +
+
+ + + +
+
+
+
+