Elatteria
/
Elatteria-Website
mirror of https://github.com/Elatteria/Elatteria-Website.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Mobile improvements

This commit is contained in:
Ebsku 2023-05-12 13:41:16 +03:00
parent 10fdb7c1df
commit f016ffee6b
30 changed files with 47 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
Elatteria-Website/Images/Background2.png → src/Images/Background2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 282 B

After

Width:  |  Height:  |  Size: 282 B

0
Elatteria-Website/Images/Duck.png → src/Images/Duck.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.7 MiB

0
Elatteria-Website/Images/E-Cafe.png → src/Images/E-Cafe.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

0
Elatteria-Website/Images/E-CafeIcon.png → src/Images/E-CafeIcon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

0
Elatteria-Website/Images/Flagle.png → src/Images/Flagle.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

0
Elatteria-Website/Images/Screenshots/MinecraftBedwarsLobby.png → src/Images/Screenshots/MinecraftBedwarsLobby.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

0
Elatteria-Website/Images/Screenshots/addserver.png → src/Images/Screenshots/addserver.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

0
Elatteria-Website/Images/Screenshots/ip.png → src/Images/Screenshots/ip.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

0
Elatteria-Website/Images/Screenshots/serveradded.png → src/Images/Screenshots/serveradded.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

0
Elatteria-Website/Images/TopBarDay.png → src/Images/TopBarDay.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

0
Elatteria-Website/Images/TopBarNight.png → src/Images/TopBarNight.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

0
Elatteria-Website/Images/backgroundVertical.png → src/Images/backgroundVertical.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 92 KiB

0
Elatteria-Website/Images/backround.png → src/Images/backround.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

0
Elatteria-Website/Images/backroundMobile.png → src/Images/backroundMobile.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

0
Elatteria-Website/Images/discord.png → src/Images/discord.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

0
Elatteria-Website/Images/github.png → src/Images/github.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

0
Elatteria-Website/Images/logo.png → src/Images/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

0
Elatteria-Website/Images/logo.png~ → src/Images/logo.png~
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

0
Elatteria-Website/Images/minecraft.png → src/Images/minecraft.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

0
Elatteria-Website/Scripts/flagle.js → src/Scripts/flagle.js
View File

0
Elatteria-Website/Scripts/scroll.js → src/Scripts/scroll.js
View File

0
Elatteria-Website/about.html → src/about.html
View File

0
Elatteria-Website/favicon.ico → src/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

0
Elatteria-Website/flagle.html → src/flagle.html
View File

0
Elatteria-Website/gamedlestyles.css → src/gamedlestyles.css
View File

34
Elatteria-Website/index.html → src/index.html
View File

@ -3,46 +3,58 @@
<head> <head>
<title>Home | Elatteria</title> <title>Home | Elatteria</title>
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<!-- Open Graph Meta Tags -->
<meta property="og:url" content="https://www.elatteria.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="Home | Elatteria">
<meta property="og:description" content="Home">
<meta property="og:image" content="https://www.elatteria.com/Images/logo.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="elatteria.com">
<meta property="twitter:url" content="https://www.elatteria.com/">
<meta name="twitter:title" content="Home | Elatteria">
<meta name="twitter:description" content="Home">
<meta name="twitter:image" content="https://www.elatteria.com/Images/logo.png">
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<ul class="desktop"> <ul class="desktop">
<li class="logo"><a href="/"></a></li> <li class="logo"><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li> <li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li> <li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
</ul> </ul>
<ul class="mobile"> <ul class="mobile">
<li class="logo"><a href="/"></a></li> <li class="logo"><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li> <li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li> <li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul> </ul>
</nav> </nav>
</header> </header>
<h1 class="title">E-Cafe</h1> <h1 class="title">E-Cafe</h1>
<div class="description"> <div class="description">
<strong>Welcome to E-Cafe!<br/> Welcome to E-Cafe!<br/>
We're a small community on Discord.<br /> We're a small community on Discord.<br />
<button type="button" onclick="scrollDown(0, 10000)"> <button type="button" onclick="scrollDown(0, 10000)">
Learn More Learn More
</button> </button>
</div> </div>
<div style="margin-top: 1500px"></div>
<div style="margin-top: 1500px"></div>
<div class="description"> <div class="description">
<figure class="screenshots"> <figure class="screenshots">
<img <img
src="Images/Screenshots/MinecraftBedwarsLobby.png" src="Images/Screenshots/MinecraftBedwarsLobby.png"
alt="Screenshot from E-Cafe Minecraft server" alt="Screenshot from E-Cafe Minecraft server"
/> />
<br>
</figure> </figure>
</div> <div class="spacer"/>
<div class="description"</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim medicorum scientiam non ipsius artis, sed bonae valetudinis causa probamus, Ut enim medicorum scientiam non ipsius artis, sed bonae valetudinis causa probamus,
@ -51,6 +63,8 @@
<button onclick="location.href='/about';">About Elatteria</button> <button onclick="location.href='/about';">About Elatteria</button>
</div>
</body> </body>
<script src="Scripts/scroll.js"></script> <script src="Scripts/scroll.js"></script>
</html> </html>

0
Elatteria-Website/links.html → src/links.html
View File

0
Elatteria-Website/playnow.html → src/playnow.html
View File

0
Elatteria-Website/projects.html → src/projects.html
View File

39
Elatteria-Website/styles.css → src/styles.css
View File

@ -11,12 +11,16 @@ html {
.description { .description {
text-align: center; text-align: center;
font-size: 25px; font-size: 30px;
margin-bottom: 200px; margin-bottom: 200px;
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
} }
.spacer {
margin-top: 500px;
}
body { body {
background-image: url("Images/backround.png"); background-image: url("Images/backround.png");
background-repeat: no-repeat; background-repeat: no-repeat;
@ -33,34 +37,35 @@ body {
header { header {
background-color: rgb(32, 36, 59); background-color: rgb(32, 36, 59);
background-position: top; background-position: top;
padding: 5px;
text-align: center; text-align: center;
justify-content: left;
top: 0px; top: 0px;
padding: 1%;
height: 80px;
} }
header .logo a { header .logo a {
display: flex;
background-image: url("Images/logo.png"); background-image: url("Images/logo.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
height: 100px; height: 50px;
width: 100px; width: 50px;
text-indent: -9999999999999999; text-indent: -9999999%;
} }
ul { ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
text-align: left;
} }
li { li {
display: flex; display: inline-grid;
margin: 10px 10px 0px 0px; margin: 10px 10px 0px 0px;
font-size: 30px; font-size: 30px;
margin: 2%; margin: 1%;
justify-content: center; text-align: center;
float: left;
} }
button { button {
@ -77,7 +82,7 @@ button {
button:hover { button:hover {
background: rgb(146, 199, 249); background: rgb(146, 199, 249);
padding: 10px; padding: 5px;
border-radius: 8px; border-radius: 8px;
transition: 200ms; transition: 200ms;
} }
@ -90,7 +95,7 @@ a {
a:hover { a:hover {
border-radius: 15%; border-radius: 15%;
background: rgb(82, 109, 160); background: rgb(82, 109, 160);
padding: 20px; padding: 3px;
transition: 250ms; transition: 250ms;
} }
@ -129,13 +134,8 @@ a:hover {
overflow-x: scroll; overflow-x: scroll;
} }
.mobile a .logo {
width: 50px;
height: 50px;
}
.mobile li { .mobile li {
font-size: 50px; font-size: 30px;
} }
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
@ -152,7 +152,6 @@ a:hover {
header .mobile { header .mobile {
display: flex; display: flex;
flex-direction: row;
} }
header .desktop { header .desktop {
@ -166,7 +165,7 @@ a:hover {
body { body {
background-image: url("Images/backgroundVertical.png"); background-image: url("Images/backgroundVertical.png");
background-attachment: scroll; background-attachment: scroll;
} }
} }