Tobias/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

test123

Browse Source
This commit is contained in:
Tobias
2022-12-30 15:01:16 +01:00
parent c04af44c34
commit f0d6c6b442
24 changed files with 1383 additions and 1034 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/App.css
View File

@@ -1,38 +1,10 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
height: 100vh;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.App-body {
flex-grow: 1;
overflow: auto;
}

26
src/App.js
View File

@@ -1,23 +1,19 @@
import logo from './logo.svg';
import Menu from './components/Menu.js';
import Foot from './components/Foot';
import './App.css';
//import {ReactComponent as NotFound} from './images/not_found.svg';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<Menu/>
<div className='App-body'>
start
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>1
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>2
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>end
</div>
<Foot/>
</div>
);
}

24
src/components/Foot.css Normal file
View File

@@ -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;
}

12
src/components/Foot.js Normal file
View File

@@ -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;

39
src/components/LogoText.css Normal file
View File

@@ -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*/
}

19
src/components/LogoText.js Normal file
View File

@@ -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;

90
src/components/Menu.css Normal file
View File

@@ -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;
}
}

36
src/components/Menu.js Normal file
View File

@@ -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;

6
src/font/ALGER.css Normal file
View File

@@ -0,0 +1,6 @@
@font-face {
font-family: 'ALGER';
src: url('./ALGER.eot');
src: local('ALGER'), url('./ALGER.woff') format('woff'), url('./ALGER.ttf') format('truetype');
}
/* Font downloaded from FontsForWeb.com */

BIN
src/font/ALGER.eot Normal file
View File

Binary file not shown.

BIN
src/font/ALGER.ttf Normal file
View File

Binary file not shown.

BIN
src/font/ALGER.woff Normal file
View File

Binary file not shown.

7
src/images/arrow.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(5.1967e-17 .84868 -1.444 8.8421e-17 106.98 -46.596)">
<path d="m64.331 74.088v-22.16l18.852 11.08-18.852 11.08z" fill="currentColor"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 506 B

4
src/images/cloud-download.svg Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="m1194.7 974.53q0-13.066-8.4-21.466t-21.467-8.4h-209.07v-328.53q0-12.133-8.866-21-8.867-8.866-21-8.866h-179.2q-12.134 0-21 8.866-8.867 8.867-8.867 21v328.53h-209.07q-12.133 0-21 8.866-8.866 8.867-8.866 21 0 13.067 8.4 21.467l328.53 328.53q8.4 8.4 21.467 8.4 13.066 0 21.466-8.4l327.6-327.6q9.334-11.2 9.334-22.4zm597.33 209.07q0 148.4-105 253.4t-253.4 105h-1015.5q-172.67 0-295.4-122.73-122.73-122.73-122.73-295.4 0-121.33 65.333-224 65.334-102.67 175.47-154-1.867-28-1.867-40.134 0-197.87 140-337.87t337.87-140q145.6 0 266.47 81.2 120.87 81.2 175.93 215.6 66.267-57.867 154.93-57.867 98.934 0 168.93 70t70 168.93q0 70.934-38.267 128.8 121.33 28.934 199.27 126.47 77.933 97.533 77.933 222.6z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 834 B

4
src/images/cloud.svg Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="m1792 1173.6q0 148.4-105 253.4t-253.4 105h-1015.5q-172.67 0-295.4-122.73-122.73-122.73-122.73-295.4 0-123.2 66.267-225.4 66.266-102.2 174.53-152.6-1.867-26.134-1.867-40.134 0-197.87 140-337.87t337.87-140q147.47 0 267.4 82.133t175 214.67q65.333-57.867 154.93-57.867 98.934 0 168.93 70t70 168.93q0 70-38.267 128.8 120.4 28 198.8 125.53 78.4 97.533 78.4 223.53z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

116
src/images/not_found.svg Normal file
View File

@@ -0,0 +1,116 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 256 256" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/">
<g transform="translate(93.112 97.58)">
<path d="m84.858-70.564h-102.95v50.141h-27.133v50.818h26.733v51.618l-7.615 11.376h-18.555v12.979h25.7v26.214h77.915v-26.214h26.025v-24.622l26-0.124v-17.866h-16.924l-9.585-8.566v-50.763h26.509v-23.993h-26.053l-0.063-50.998z"/>
</g>
<g transform="translate(148.11 98.58)">
<rect x="39.115" y="121.61" width="16.871" height="9.922"/>
</g>
<g transform="translate(0 98.58)">
<rect x="22.334" y="62.538" width="14.648" height="17.956"/>
</g>
<g transform="translate(170.11 19.58)">
<rect x="46.986" y="112.48" width="13.041" height="20.737"/>
</g>
<rect x="22.164" y="51.814" width="14.648" height="20.061"/>
<path d="m178.03 78.014h1.377l-36.437 152.15h-68.827v-26.213h-23.338l3.087-12.98h13.106l7.615-11.376v-51.618h-5.613l20.831-86.985 88.199 21.122v15.902zm-68.716 35.605-12.687-3.046-9.562 39.828 12.879 3.092 3.006-12.52 22.644 5.436-3.141 13.085 12.491 2.999 9.562-39.828-12.141-2.915 3.141-13.085-23.186-5.567-3.006 12.521zm9.938-39.235-23.762-5.705-6.369 26.525 23.763 5.705 6.368-26.525zm46 11-23.762-5.705-6.369 26.525 23.763 5.705 6.368-26.525z" fill="url(#a)"/>
<g serif:id="Cutout">
<g transform="matrix(.45646 0 0 .047652 68.508 14.27)">
<path d="m257.41-5.567h-258.49l15.334 273.06h225.69l17.468-273.06z" fill="#97989c"/>
</g>
<g transform="matrix(.45646 0 0 .047652 180.59 76.227)">
<path d="m77.402-46.146h-65.543l-17.468 83.66h57.076l25.935-83.66z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 173.63 136.48)">
<path d="m72.394-53.008h-51.29v78.017l51.29 13.169v-91.186z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 182.63 166.48)">
<path d="m114.65 19.532h-139.53l49.11 15.05h153.66l-63.247-15.05z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 154.63 198.48)">
<path d="m125.34 8.398h-139.04l21.378 23.018h166.16l-48.491-23.018z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 121.63 226.48)">
<path d="m162.6 5.656h-416.28l-37.555 28.773h475.21l-21.377-28.773z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 57.627 203.48)">
<path d="m88.255 0.723h-137.3l-61.148 23.129h160.9l37.555-23.129z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 57.627 134.48)">
<path d="m90.77-9.981h-142.83l-59.342 5.014h161.48l40.685-5.014z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 59.627 85.478)">
<path d="m44.825-20.38h-166.91l59.342 7.608h144.96l-37.393-7.608z" fill="#97989c"/>
</g>
<g transform="matrix(.029597 0 0 .24616 178.35 14.906)">
<path d="m258.63-3.665-269.41 52.858v207.17l269.41-16.195v-243.84z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 204.56 74.496)">
<path d="m258.63-4.365-269.41 37.15v223.58h269.41v-260.73z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 204.56 161.5)">
<path d="m258.63-1.365h-269.41v166.36l269.41 91.369v-257.73z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 178.56 190.5)">
<path d="m195.77-13.874-206.56-90.216v229.45l206.56 139.74v-278.97z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 149.56 224.5)">
<path d="m147.98-51.733-91.061-139.74v244.28l91.061 174.68v-279.21z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 59.56 224.5)">
<path d="m331.94-191.47-159.97 140.41v278.54l159.97-174.68v-244.28z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 23.56 203.5)">
<path d="m566.36-116.73h-260.47v261.36l260.47-140.41v-120.95z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 53.56 164.5)">
<path d="m479.19-340.33-173.3 30.443v556.58l173.3-106.01v-481.01z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 18.56 108.5)">
<path d="m667.33-292.04-252.78-46.188v550.18l252.78-30.442v-473.56z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 29.56 43.496)">
<path d="m1034.5-153.57-159.28-121.25v542.31l159.28 46.188v-467.24z" fill="#3d3d40"/>
</g>
</g>
<g serif:id="Hole4">
<g transform="matrix(.18717 0 0 .65148 192.63 223.48)">
<path d="m61.288 10.18h-90.137v29.105h153.91l-63.777-29.105z" fill="#97989c"/>
</g>
<g transform="matrix(.043941 0 0 .10731 209.56 219.5)">
<path d="m147.36 6.445h-271.67v92.461l271.67 176.69v-269.15z" fill="#3d3d40"/>
</g>
</g>
<g serif:id="Hole3">
<g transform="matrix(.18717 0 0 .65148 9.6266 213.48)">
<path d="m146.15-52.807h-78.258l-77.619 18.1h155.88v-18.1z" fill="#97989c"/>
</g>
<g transform="matrix(.043941 0 0 .10731 26.56 165.5)">
<path d="m-96.183-40.793h-330.63v277.21l330.63-109.89v-167.33z" fill="#3d3d40"/>
</g>
</g>
<g serif:id="Hole2">
<g transform="matrix(.18717 0 0 .65148 215.63 136.48)">
<path d="m77.538 25.051h-69.675v12.505h149.1l-79.425-12.505z" fill="#97989c"/>
</g>
<g transform="matrix(.043941 0 0 .10731 232.56 132.5)">
<path d="m283.24-4.053h-338.32v193.24l338.32 75.917v-269.15z" fill="#3d3d40"/>
</g>
</g>
<g serif:id="Hole1">
<g transform="matrix(.18717 0 0 .65148 5.6266 126.48)">
<path d="m166.61-127.92h-154.07l75.814 13.314h78.258v-13.314z" fill="#97989c"/>
</g>
<g transform="matrix(.043941 0 0 .10731 22.56 78.496)">
<path d="m-9.018-248.64-322.94-80.83v267.77c113.45-0.132 258.01-0.972 322.94 0v-186.94z" fill="#3d3d40"/>
</g>
</g>
<defs>
<linearGradient id="a" x2="1" gradientTransform="matrix(-52.589 186.54 -186.54 -52.589 136.93 52.258)" gradientUnits="userSpaceOnUse"><stop stop-color="#4dcb40" offset="0"/><stop stop-color="#4dcb40" stop-opacity="0" offset="1"/></linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

1
src/logo.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB