Skip to content

Commit

Permalink
Fix Website on Mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@kgsensei
kgsensei committed Apr 30, 2023
1 parent f0a0008 commit 231ff50
Show file tree
Hide file tree
Showing 2 changed files with 292 additions and 113 deletions.
292 changes: 221 additions & 71 deletions docs/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,123 +8,176 @@ body {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
color: white;
overflow-x: hidden;
}

#titleContainer {
.fullSize {
height: 100%;
width: auto;
}

.centerText {
position: absolute;
left: 0px;
top: 0px;
top: 50%;
left: 0%;
width: 100%;
height: var(--iconSize);
text-align: center;
transform: translate(0%, -50%);
}

.fullSizeImg {
display: inline-block;
height: var(--iconSize);
width: var(--iconSize);
display: inline-block;
height: var(--iconSize);
width: var(--iconSize);
}

.fullSize {
height: 100%;
width: auto;
#gradient {
position: absolute;
left: var(--iconSize);
display: inline-block;
width: 200px;
height: 100%;
background: linear-gradient(90deg, #d42e3b 25%, rgba(0, 0, 0, 0) 100%);
font-size: calc(var(--iconSize) - 15px);
}

#gradient {
position: absolute;
left: var(--iconSize);
display: inline-block;
width: 25%;
height: 100%;
background: linear-gradient(90deg, #d42e3b 0%, rgba(0, 0, 0, 0) 100%);
font-size: calc(var(--iconSize) - 15px);
#titleContainer {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: var(--iconSize);
}

.centerText {
#cheat_name {
top: 25%;
transform: translate(0, 100px);
font-size: 3vw;
}

#cheat_author {
top: calc(27% + 3vw);
transform: translate(0, 80px);
font-size: 1.8vw;
animation-delay: 125ms;
}

.cheat_front_item {
position: absolute;
top: 50%;
left: 0%;
width: 100%;
text-align: center;
transform: translate(0%, -50%);
left: 0;
animation: fadeInUp 1s forwards;
opacity: 0;
}

.titleCenterText {
#stats_container {
display: flex;
position: absolute;
top: 50%;
left: 2%;
width: 80%;
transform: translate(0%, -50%);
width: 1200px;
top: 70%;
left: calc((100% - 1200px) / 2);
}

#contentSectionOne {
.stat {
flex-grow: 5;
position: relative;
border-radius: 15px;
height: 225px;
margin: 0px 50px 0px 50px;
background-color: #404253;
opacity: 0;
animation: fadeInUp 1s forwards;
}

.stat_num {
font-size: 65px;
width: 100%;
text-align: center;
position: absolute;
left: 5%;
width: 95%;
top: 10%;
height: 90%;
top: 50px;
}

#sectionOneImg {
.stat_desc {
font-size: 28px;
width: 100%;
text-align: center;
position: absolute;
top: 5%;
left: calc(90% - 960px);
width: 960px;
height: 480px;
border-radius: 10px;
overflow: hidden;
top: 120px;
}

#titleContent {
#download_title {
position: absolute;
font-size: 2vw;
top: 10%;
left: 0%;
width: 50%;
top: 120%;
width: 100%;
text-align: center;
left: 0;
font-size: 3vw;
}

#titleParagraph {
#download_text {
position: absolute;
font-size: 1.2vw;
top: 17.5%;
left: 0%;
width: calc(85% - 930px);
top: calc(122% + 3vw);
width: 100%;
text-align: center;
left: 0;
font-size: 1.8vw;
}

#downloadLinks {
display: flex;
position: absolute;
font-size: 1.5vw;
top: 50%;
left: 0%;
width: 32.5%;
width: 1200px;
top: 155%;
left: calc((100% - 1200px) / 2);
}

.download {
position: relative;
cursor: pointer;
display: inline-block;
flex-grow: 5;
background-color: rgb(221, 125, 0);
border-radius: 5px;
width: 25%;
width: 300px;
height: 40px;
transition: all 200ms;
margin: 0px 50px 0px 50px;
}

.download:hover {
background-color: rgb(255, 149, 0);
}

.downloadIcon {
position: absolute;
left: 17%;
top: 57.5%;
transform: translate(-50%, -50%);
}

.downloadText {
position: absolute;
left: 30%;
top: 50%;
width: 70%;
color: white;
font-size: 20px;
transform: translate(0%, -50%);
}

#copyright {
position: absolute;
font-size: 18px;
top: calc(100% - 22px);
font-size: 16px;
top: calc(200% - 20px);
left: 0%;
}

.downloadIcon {
position: absolute;
left: 50%;
top: 57.5%;
transform: translate(-50%, -50%);
@keyframes fadeInUp {
100% {
transform: translate(0, 0);
opacity: 1;
}
}

.returnLink {
Expand All @@ -136,22 +189,119 @@ body {
color: rgb(0, 183, 255);
}

#mobileBlock {
display: none;
}

a {
text-decoration: none;
}

@media only screen and (max-device-width: 1375px) {
#mobileBlock {
@media only screen and (max-device-width: 750px) {
#cheat_name {
top: 28%;
transform: translate(0, 100px);
font-size: 8vw;
}

#cheat_author {
top: calc(30% + 8vw);
transform: translate(0, 80px);
font-size: 6.8vw;
animation-delay: 125ms;
}

#stats_container {
display: block;
width: 80%;
top: 75%;
left: 10%;
}

.stat {
position: relative;
border-radius: 15px;
height: 225px;
width: 100%;
background-color: #404253;
opacity: 0;
animation: fadeInUp 1s forwards;
margin: 20px 0px 20px 0px;
}

.stat_num {
font-size: 45px;
width: 100%;
text-align: center;
position: absolute;
font-size: 3vw;
background-color: #2e3040;
top: 50px;
}

.stat_desc {
font-size: 20px;
width: 100%;
text-align: center;
position: absolute;
top: 120px;
}

#download_title {
position: absolute;
top: 200%;
width: 100%;
text-align: center;
left: 0;
font-size: 8vw;
}

#download_text {
position: absolute;
top: calc(202% + 8vw);
width: 100%;
text-align: center;
left: 0;
font-size: 6.8vw;
}

#downloadLinks {
display: block;
width: 80%;
top: 230%;
left: 10%;
}

.download {
position: relative;
cursor: pointer;
background-color: rgb(221, 125, 0);
border-radius: 5px;
width: 100%;
height: 100%;
z-index: 999999;
height: 40px;
transition: all 200ms;
margin: 20px 0px 15px 0px;
}

.download:hover {
background-color: rgb(255, 149, 0);
}

.downloadIcon {
position: absolute;
left: 17%;
top: 57.5%;
transform: translate(-50%, -50%);
}

.downloadText {
position: absolute;
left: 30%;
top: 50%;
width: 70%;
color: white;
font-size: 20px;
transform: translate(0%, -50%);
}

#copyright {
position: absolute;
font-size: 16px;
top: calc(290% - 18px);
left: 0%;
}
}
Loading

0 comments on commit 231ff50

Please sign in to comment.