Skip to content

Commit

Permalink
docs: Overhaul the webpage to reflect this fork.
Browse files Browse the repository at this point in the history 
FreeJ2ME-Plus should be treated as its own thing, and since the
original repo still doesn't have its own page as of yet, using
their icons and references could mislead some users into thinking
that this is the original since it is the most "complete".

This also comes with an all-new logo for FreeJ2ME-Plus as well,
which is also lighter than the previous one (partially because
a simplify pass was run over it, reducing the render accuracy
slightly, but not to a noticeable degree unless highly zoomed in).
The faster this webpage loads, the better.

As a plus, the webpage is in "dark mode" now.
  • Loading branch information
@AShiningRay
AShiningRay committed Sep 17, 2024
1 parent 3aeef5e commit a8175b0
Show file tree
Hide file tree
Showing 31 changed files with 83 additions and 169 deletions.
64 changes: 34 additions & 30 deletions docs/_css/compat.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ body {
padding: 0;
margin: 0;
z-index: 4;
background-color: white;
background-color: black;
}
.main_frame {
display: flex;
Expand All @@ -16,7 +16,8 @@ body {
padding-bottom: 8px;
border: 2px solid transparent;
border-radius: 10px;
box-shadow: 0px 0px 6px #333333;
border: 4px solid #0066ffff;
background-color: #1a1a1aff;
align-content: center;
overflow: hidden;
transition-duration: 0.4s;
Expand Down Expand Up @@ -46,7 +47,7 @@ body {
}

.compat_graph h1 {
color: #00ca31;
color: #ff6600ff;
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
}
Expand All @@ -56,7 +57,7 @@ body {
font-weight: bold;
font-size: 1.5em;
text-align: center;
color: #5566ff;
color: #0066ffff;
margin: 10px 0;
}

Expand Down Expand Up @@ -89,18 +90,18 @@ body {
}

#b_minor_issue {
background-color: #729fcf;
border-color: #729fcf;
background-color: #0066ff;
border-color: #0066ff;
}

#b_playable {
background-color: #ffff38;
border-color: #ffff38;
background-color: #ffff00;
border-color: #ffff00;
}

#b_ingame {
background-color: #ff8000;
border-color: #ff8000;
background-color: #ff6600ff;
border-color: #ff6600ff;
}

#b_not_booting {
Expand All @@ -116,7 +117,8 @@ body {
height: 700px;
border: 2px solid transparent;
border-radius: 10px;
box-shadow: 0px 0px 6px #333333;
border: 4px solid #0066ffff;
background-color: #1a1a1aff;
z-index: 5;
transition-duration: 0.4s;
}
Expand All @@ -130,60 +132,59 @@ body {
font-size: 1.5em;
border: none;
border-radius: 10px;
border-bottom: 4px solid #555555;
background-color: #efefef;
border-bottom: 4px solid #ff6600ff;
color: #ff6600ff;
background-color: #333333;
transition-duration: 0.2s;
font-weight: bolder;
}

#appsearch:hover {
padding: 8px;
border-color: #5566ff;
color: #5566ff;
border-color: #0066ffff;
color: #0066ffff;
}

#appsearch:focus {
padding: 8px;
border-color: #81d41a;
color: #81d41a;
border-color: white;
color: white;
outline: none;
}

.appdata_categories {
display: flex;
text-align: center;
font-size: 1.15vw;
/* font-size: 1.2em; */
color: white;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-weight: bolder;
/* border-top: 1px solid #555555;
border-radius: 10px; */
}

.compat_frame #name {
width: 24%;
border-right: 2px solid #555555;
border-right: 2px solid white;
}

.compat_frame #resolutions {
width: 19%;
border-right: 2px solid #555555;
border-right: 2px solid white;
}


.compat_frame #compat_status {
width: 12%;
border-right: 2px solid #555555;
border-right: 2px solid white;
}

.compat_frame #description {
width: 29%;
border-right: 2px solid #555555;
border-right: 2px solid white;
}

.compat_frame #updated {
width: 16%;
border-right: 2px solid #555555;
border-right: 2px solid white;
}

.compat_frame #appmd5 {
Expand All @@ -196,15 +197,15 @@ body {
overflow-y: scroll;
overflow-x: hidden;
border-radius: 5px;
border-top: 2px solid black;
border-bottom: 2px solid black;
border-top: 2px solid #ff6600ff;
border-bottom: 2px solid #ff6600ff;
width: 98%;
margin-left: 1%;
}

.compat_entry:nth-child(even) {
border: 3px solid;
background-color: #fafafa;
background-color: #454545;
display: flex;
border-radius: 12px;
margin: 3px 0;
Expand All @@ -213,7 +214,7 @@ body {

.compat_entry:nth-child(odd) {
border: 3px solid;
background-color: #dcdcdc;
background-color: #525252;
display: flex;
border-radius: 12px;
margin: 3px 0;
Expand All @@ -227,6 +228,7 @@ body {
align-self: center;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
color: white;
}

#entryres {
Expand All @@ -236,6 +238,7 @@ body {
align-self: center;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
color: white;
}

#entrystat {
Expand Down Expand Up @@ -267,6 +270,7 @@ body {
align-self: center;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 0.85vw;
color: white;
}

#entryupd {
Expand All @@ -280,7 +284,7 @@ body {

#entrymd5 {
width: 20%;
font-size: 0.5vw;
font-size: 0.45vw;
text-align: center;
padding: 1%;
margin-right: -3px;
Expand Down
63 changes: 32 additions & 31 deletions docs/_css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ body {
width: 100vw;
margin: 0;
display: block;
background-color: #fff;
background-color: black;
}

#init-logo {
background-color: #fff;
background-color: black;
display:block;
}

Expand All @@ -35,8 +35,8 @@ body {

@keyframes init-logoanim {
0% {opacity: 0; transform: scale(0.5);}
40% {opacity: 0.7; transform: scale(0.8);}
60% {opacity: 0.7; transform: scale(0.8);}
40% {opacity: 1; transform: scale(0.8);}
60% {opacity: 1; transform: scale(0.8);}
100% {opacity: 0; transform: scale(0.5);}
}

Expand All @@ -55,8 +55,8 @@ body {
height: 100vh;
min-height: 500px;
max-height: 75vh;
background-color: white;
opacity: 0.75;
background-color: #222222;
opacity: 1;
display: flex;
}

Expand Down Expand Up @@ -104,13 +104,13 @@ body {
}

@keyframes slidegamebg {
0% { opacity: 1; transform: translate3d(0, 0, 0); }
5% { opacity: 0; } 10% { opacity: 1; } 15% { opacity: 0; } 20% { opacity: 1; }
25% { opacity: 0; } 30% { opacity: 1; } 35% { opacity: 0; } 40% { opacity: 1; }
45% { opacity: 0; } 50% { opacity: 1; } 55% { opacity: 0; } 60% { opacity: 1; }
65% { opacity: 0; } 70% { opacity: 1; } 75% { opacity: 0; } 80% { opacity: 1; }
85% { opacity: 0; } 90% { opacity: 1; } 95% { opacity: 0; }
100% { opacity: 1; transform: translate3d(-2830px, 0, 0);}
0% { opacity: 0.8; transform: translate3d(0, 0, 0); }
5% { opacity: 0; } 10% { opacity: 0.8; } 15% { opacity: 0; } 20% { opacity: 0.8; }
25% { opacity: 0; } 30% { opacity: 0.8; } 35% { opacity: 0; } 40% { opacity: 0.8; }
45% { opacity: 0; } 50% { opacity: 0.8; } 55% { opacity: 0; } 60% { opacity: 0.8; }
65% { opacity: 0; } 70% { opacity: 0.8; } 75% { opacity: 0; } 80% { opacity: 0.8; }
85% { opacity: 0; } 90% { opacity: 0.8; } 95% { opacity: 0; }
100% { opacity: 0.8; transform: translate3d(-2830px, 0, 0);}
}

.firstpane-content {
Expand All @@ -130,7 +130,7 @@ body {
}

#innertitletext {
color: #00ca31 !important;
color: #0066ffff !important;
}

#firstpane-content-right {
Expand All @@ -142,15 +142,15 @@ body {
font-family:'Times New Roman', Times, serif;
margin-top: 0;
margin-bottom: 0;
color: #0064ca;
color: #ff6600ff;
font-size: 4em;
font-weight: bolder;
transform: rotate(-2deg);
}

#firstpane-content-right p {
font-family:Helvetica, Geneva, Tahoma, sans-serif;
color: black;
color: white;
margin-left: 3%;
margin-top: 0;
font-size: 1.3em;
Expand All @@ -164,10 +164,10 @@ body {
font-size: 2em;
border-radius: 15px;
border-width: 5px;
border-color: transparent;
border-color: #0066ffff;
border-style: solid;
background-color: #0064ca;
color: #00ca31;
background-color: black;
color: #ff6600ff;
font-weight: bold;
float: right;
margin-top: 2.5%;
Expand All @@ -184,8 +184,8 @@ body {
}

#downloadbutton:hover {
color: #0064ca;
background: #00ca31;
color: #ff6600ff;
border-color: #ff6600ff;
}

#downloadbutton:active {
Expand All @@ -195,8 +195,8 @@ body {
}

#freej2me_logo {
z-index: 5;
width: 100%;
filter: saturate(1.5);
animation: logoanim 3s ease-in-out infinite;
}

Expand Down Expand Up @@ -233,9 +233,9 @@ body {
position: relative;
margin: 0;
display:flex;
background-color: white;
background-color: #1a1a1aff;
border: none;
border: 12px double #5566ff;
border: 12px double #0066ffff;
border-left: none;
border-right: none;
box-shadow: 0px 0px 16px #444;
Expand All @@ -256,21 +256,21 @@ body {
font-size: 4em;
margin: 0 auto;
font-family:'Times New Roman', Times, serif;
color: #00ca31;
color: #ff6600ff;
font-weight: bolder;
}

.info-frame p {
font-size: 1.3em;
font-family:Helvetica, Geneva, Tahoma, sans-serif;
font-weight: 700;
color: #555;
color: white;
}

.footerdiv {
position: relative;
border-top: 12px double #5566ff;
background-color: white;
border-top: 12px double #0066ffff;
background-color: #1a1a1aff;
box-shadow: 0px 0px 16px #444;
z-index: 4;
padding: 25px;
Expand All @@ -281,24 +281,25 @@ body {
font-weight: bolder;
font-family:'Times New Roman', Times, serif;
font-size: 1.85em;
color: #5566ff;
color: #0066ffff;
text-align: center;
margin-bottom: 25px;
}

.footerdiv a {
text-decoration: none;
color: #ff6600ff;
}

.footerdiv a:hover {
color: #00ca31;
color: #0066ffff;
}

.footerdiv #footer_bottom {
font-weight: bold;
font-family: cursive,sans-serif;
font-size: 1.4em;
color: #5566ff;
color: #0066ffff;
text-align: end;
}

Expand Down
Loading

0 comments on commit a8175b0

Please sign in to comment.