test123

src/components/Foot.css

@@ -0,0 +1,24 @@
+.foot-section {
+    position: sticky;
+	bottom: 0;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 5px;
+
+	font-size: 12px;
+	font-weight: 500;
+	color: #9190a5;
+	text-align: center;
+	background: #081624;
+	border-top: 1px solid #b01ba5;
+}
+
+.foot-section a {
+	text-decoration: none;
+	outline: none;
+	color: #9190a5;
+}
+
+.foot-section a:hover {
+	text-decoration: underline;
+}

src/components/Foot.js

@@ -0,0 +1,12 @@
+import './Foot.css';
+
+function Foot() {
+
+    return (
+        <footer className='foot-section'>
+	        <a href='/'>@letsstein.de</a> 2022 All rights reserved
+	    </footer>
+    );
+}
+
+export default Foot;

src/components/LogoText.css

@@ -0,0 +1,39 @@
+.logotext {
+    font-family: 'ALGER';
+    text-transform: uppercase;
+    color: #b01ba5;
+
+    text-decoration: none;
+	outline: none;
+
+    display: inline-block;
+}
+
+.logotext div:nth-child(1) {
+    font-size: 30px;
+    line-height: 1em;
+}
+
+.logotext div:nth-child(1) i {
+    color: #ddd;
+}
+
+.logotext div:nth-child(2) {
+    font-size: 15px;
+    line-height: 1em;
+    display: flex;
+}
+
+.logotext div:nth-child(2) i {
+    background-color: #b01ba550;
+}
+
+.logotext mark {
+    flex-grow: 1;
+    background-color: transparent;  /*remove default*/
+    background-image: linear-gradient(to right, transparent, #b01ba550);
+}
+
+.logotext i {
+    font-style: normal; /*remove default*/
+}

src/components/LogoText.js

@@ -0,0 +1,19 @@
+import '../font/ALGER.css';
+import './LogoText.css';
+
+function LogoText() {
+
+    return (
+        <div className='logotext'>
+            <div>
+                Lets<i>Stein</i>
+            </div>
+            <div>
+                <mark/>
+                <i>Gaming Server</i>
+            </div>
+        </div>
+    );
+}
+
+export default LogoText;

src/components/Menu.css

@@ -0,0 +1,90 @@
+.menu-section {
+	position: sticky;
+	top: 0;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 0.5em;
+
+	background: #081624;
+	border-bottom: 1px solid #b01ba5;
+
+	display: flex;
+	align-items: stretch;
+	justify-content: space-between;
+}
+
+.menu-section > div {
+	display: flex;
+	align-items: stretch;
+	gap: 1.5em;
+}
+
+.menu-section a {
+	text-decoration: none;
+	outline: none;
+}
+
+.menu-entry {
+	position: relative;
+	display: flex;
+	align-items: center;
+	color: #ddd;
+	font-size: 16px;
+	cursor: pointer;
+}
+
+.menu-entry:hover {
+	color: #b01ba5;
+}
+
+.menu-entry:hover nav {
+	display: flex;
+	gap: 0.2em;
+}
+
+.menu-entry:hover .menu-rotate {
+	transform: rotate(180deg);
+}
+
+.menu-entry label {
+	cursor: pointer;
+	font-weight: bold;
+}
+
+.menu-entry nav {
+	position: absolute;
+	right: 0;
+	top: 100%;
+	padding: 0.5em;
+	display: none;
+	flex-direction: column;
+	text-align: left;
+	background: #081624;
+	border-left: 0.1em solid #b01ba5;
+	border-right: 0.1em solid #b01ba5;
+	border-bottom: 0.1em solid #b01ba5;
+	border-radius: 0 0 1em 1em;
+}
+
+.menu-entry a {
+	color: #ddd;
+	font-weight: bold;
+}
+
+.menu-entry a:hover {
+	color: #b01ba5;
+}
+
+.menu-section svg {
+	height: 1.5em;
+	width: 1.5em;
+	margin-right: 0.25em;
+}
+
+/* Large Mobile :480px. */
+
+@media only screen and (max-width: 767px) {
+	.menu-entry label {
+		display: none;
+	}
+}

src/components/Menu.js

@@ -0,0 +1,36 @@
+import {ReactComponent as DownloadIcon} from '../images/cloud-download.svg';
+import {ReactComponent as CloudIcon} from '../images/cloud.svg';
+import {ReactComponent as Arrow} from '../images/arrow.svg';
+import LogoText from './LogoText';
+import './Menu.css';
+
+function Menu() {
+
+    return (
+        <header className='menu-section'>
+            <a href="/">
+                <LogoText/>
+            </a>
+            <div>
+                <a href="/download" className='menu-entry'>
+                    <DownloadIcon/>
+                    <label>Downloads</label>
+                </a>
+                <a href="https://cloud.letsstein.de" className='menu-entry'>
+                    <CloudIcon/>
+                    <label>Cloud</label>
+                </a>
+                <div className='menu-entry'>
+                    <Arrow className='menu-rotate'/>
+                    <label>Other</label>
+                    <nav>
+                        <a href="/polytopia">Polytopia</a>
+                        <a href="/civ">Civilization</a>
+                    </nav>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default Menu;