halbear/HalbearNetDesktopSite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile support... kinda

Browse Source
This commit is contained in:
Halbear
2026-03-05 21:40:29 +00:00
parent 575890a42b
commit 637c329ac6
11 changed files with 704 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
HalbearNetLanding/StyleSheets/MainStyle.css
View File

@@ -63,51 +63,280 @@
background-position: center;
background-repeat: no-repeat;
}
.StaticContentContainer{
padding: 0;
filter: drop-shadow(0 0.5vh 3vh #8cefff);
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-right: rgba(32,120,155,1) 0.3vh solid;
border-bottom: rgba(32,120,155,1) 0.3vh solid;
text-shadow: #223342 0 0 2vh;
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.2) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.15)), linear-gradient(to bottom,rgba(52, 184, 254,0.2),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.15),rgba(22, 144, 254,0.075),rgba(12, 64, 124,0.125));
border-radius: 5vh;
transform: translateY(3vh);
display: flex;
flex-direction: column;
justify-content: left;
align-items: flex-start;
background-color: rgba(190,240,240,.1);
transition: 0.5s;
body{
overflow-x: hidden;
width: 100%;
}
.ContentContainer{
padding: 0;
filter: drop-shadow(0 0.5vh 3vh #8cefff);
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-right: rgba(32,120,155,1) 0.3vh solid;
border-bottom: rgba(32,120,155,1) 0.3vh solid;
text-shadow: #223342 0 0 2vh;
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.3) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.25)), linear-gradient(to bottom,rgba(52, 184, 254,0.2),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.15),rgba(22, 144, 254,0.075),rgba(12, 64, 124,0.125));
border-radius: 5vh;
transform: translateY(3vh);
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 22vw;
height: 70vh;
transition: 0.5s;
@media only screen and (max-aspect-ratio: 1.165/1) {
.EntireContentWrapper{
min-height: 100vh;
overflow-y: hidden;
}
.FadeIndex{
position: absolute;
height: 360vh;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}
.StaticSizeableContainer{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 100%;
min-height: 100%;
}
.StaticContentContainer{
padding: 0;
filter: drop-shadow(0 0.5vh 3vh #8cefff);
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-right: rgba(32,120,155,1) 0.3vh solid;
border-bottom: rgba(32,120,155,1) 0.3vh solid;
text-shadow: #223342 0 0 2vh;
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.2) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.15)), linear-gradient(to bottom,rgba(52, 184, 254,0.2),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.15),rgba(22, 144, 254,0.075),rgba(12, 64, 124,0.125));
border-radius: 10vw;
transform: translateY(3vh);
display: flex;
flex-direction: column;
justify-content: left;
align-items: flex-start;
background-color: rgba(190,240,240,.1);
transition: 0.5s;
}
.ContentContainer{
padding: 0;
filter: drop-shadow(0 0.5vh 3vh #8cefff);
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-right: rgba(32,120,155,1) 0.3vh solid;
border-bottom: rgba(32,120,155,1) 0.3vh solid;
text-shadow: #223342 0 0 2vh;
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.3) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.25)), linear-gradient(to bottom,rgba(52, 184, 254,0.2),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.15),rgba(22, 144, 254,0.075),rgba(12, 64, 124,0.125));
border-radius: 5vh;
transform: translateY(3vh);
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 92vw;
height: 70vh;
margin-top: 1vh;
margin-bottom: 1vh;
transition: 0.5s;
}
.LandingWrapper{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 100vw;
height: 200vh;
padding-bottom: 3vh;
}
.FooterFont{
cursor: pointer;
font-family: 'Lexend',serif; color:white; padding-left: 1vw !important;
font-size: 2vh !important;
}
.ShortcutButton{
font-size: 1vh !important;
margin: 0.5vh !important;
max-width: 21vw !important;
min-height: 7vh !important;
transform: translateY(-4.5vh);
border-radius: 5vw !important;
}
.InfoBoxButton{
min-width: 75vw !important;
min-height:6vh;
transform: translateY(-4.5vh);
}
.IntroWrapper{
margin-top: 15vh;
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
align-content: center;
}
.ShortcutButtonWrapper{
display: flex; flex-direction: row; justify-content: center; width: 100%; flex-wrap: wrap;
}
.FrontPageTextBox{
margin-top: 1vh;
margin-bottom: 1vh;
position: relative;
width: 94vw;
}
.WelcomeTitle{
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
}
.InfoBox{
height: 23vh;
flex-direction: row;
}
.ShortcutBox{
min-height: 24vh;
flex-direction: row;
}
.HotbarWrapper{
justify-content: flex-start !important;
flex-direction: column;
height: 13vh !important;
}
.TerrainGenBG{
margin-top: 5vh;
top:57vh;
height: 52.174vw;
width: 96vw;
aspect-ratio: 1.84;
}
.LargeWhiteFont{
font-size: 2.25vh !important;
}
.Title {
text-align: center;
font-size: 4vh !important;
}
.Logo{
height: 6vh !important;
width: 6vh !important;
}
.HotbarSection{
flex-wrap: wrap !important;
justify-content: center !important;
}
.HotbarButton{
margin: 0.1vh;
font-size: 1.85vh !important;
width: 22vw !important;
height: 5vh !important;
}
}
.LandingWrapper{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: 100vw;
height: 80vh;
padding-bottom: 3vh;
@media only screen and (min-aspect-ratio: 1.165/1) {
.FadeIndex{
height: 220vh !important;
}
.StaticSizeableContainer{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: 100%;
}
.StaticContentContainer{
padding: 0;
filter: drop-shadow(0 0.5vh 3vh #8cefff);
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-right: rgba(32,120,155,1) 0.3vh solid;
border-bottom: rgba(32,120,155,1) 0.3vh solid;
text-shadow: #223342 0 0 2vh;
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.2) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.15)), linear-gradient(to bottom,rgba(52, 184, 254,0.2),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.15),rgba(22, 144, 254,0.075),rgba(12, 64, 124,0.125));
border-radius: 5vh;
transform: translateY(3vh);
display: flex;
flex-direction: column;
justify-content: left;
align-items: flex-start;
background-color: rgba(190,240,240,.1);
transition: 0.5s;
}
.ContentContainer{
padding: 0;
filter: drop-shadow(0 0.5vh 3vh #8cefff);
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-right: rgba(32,120,155,1) 0.3vh solid;
border-bottom: rgba(32,120,155,1) 0.3vh solid;
text-shadow: #223342 0 0 2vh;
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.3) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.25)), linear-gradient(to bottom,rgba(52, 184, 254,0.2),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.15),rgba(22, 144, 254,0.075),rgba(12, 64, 124,0.125));
border-radius: 5vh;
transform: translateY(3vh);
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 22vw;
height: 70vh;
transition: 0.5s;
}
.LandingWrapper{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: 100vw;
height: 80vh;
padding-bottom: 3vh;
}
.FooterFont{
cursor: pointer;
font-family: 'Lexend',serif; color:white; padding-left: 2vh;
font-size: 3vh;
}
.ShortcutButtonWrapper{
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%
}
.ShortcutButton{
margin-left: 1vh;
height: 10vh !important;
transform: translateY(-4.5vh) !important;
}
.InfoBoxButton{
width: 80% !important;
height:10vh;
transform: translateY(-4.5vh) !important;
}
.IntroWrapper{
width: 100vw;
height: 100vh;
}
.WelcomeTitle{
top: 11vh;
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
}
.InfoBox{
top: 26vh;
height: 34vh;
flex-direction: row;
}
.ShortcutBox{
top: 63vh;
height: 24vh;
flex-direction: row;
}
.FrontPageTextBox{
position: absolute;
left: 3vh;
width: 45vw;
}
.HotbarWrapper{
flex-direction: row;
}
.TerrainGenBG{
position: absolute;
top:26vh;
height: auto;
width: 50vw;
aspect-ratio: 1.84;
left: 50vw;
}
}
.HotbarWrapper{
z-index: 100;
@@ -154,6 +383,7 @@
.RightFloat{
margin-right: 1vw;
min-width: 75vh;
max-width: 100vw;
}
.LargeWhiteFont{
font-family: "Lexend", system-ui;
@@ -241,9 +471,7 @@ Button{
top: 0;
z-index: -1;
width: 100vw;
height: 200vh;
background-image: linear-gradient(to bottom, RGBA(3, 29, 46, 0.0), RGBA(3, 29, 46, 0.1) , RGBA(3, 29, 46, 1.0), RGBA(3, 29, 46, 1.0));
}
.LandingWrapper{
//background-image: linear-gradient(to bottom right, RGBA(6, 54, 87,0), RGBA(6, 54, 87,0.5), RGBA(6, 54, 87,0.5),RGBA(3, 29, 46,1.0));
@@ -264,7 +492,6 @@ body{
margin: 0;
padding: 0;
height: 100%;
overflow-x:hidden;
}
::-webkit-scrollbar {
width: 1.5vh;