Skip to content

Commit

Permalink
Fix design quirks
Browse files Browse the repository at this point in the history 
- Add dark mode/responsive design to pages that need it
- Eliminate key filters in favor of defined hover colors
  • Loading branch information
@quantum9Innovation
quantum9Innovation committed May 15, 2022
1 parent 201e3d0 commit 0b242c5
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 265 deletions.
281 changes: 38 additions & 243 deletions App/guide/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,272 +15,67 @@
--loading-size: 7vw;
}

@font-face {
font-family: noto;
src: url(../Assets/Noto_Serif_Ethiopic/noto.ttf);
font-weight: 500;
}

body {
position: absolute;
left: 25vw;
width: 50vw;
text-align: left;
font-family: Helvetica, Arial, sans-serif;
}

h1 {
font-size: 2.5rem;
}
@media (prefers-color-scheme: dark) {

p {
font-size: 1rem;
}

button {
border: none;
}

.word {
width: 100%;
height: 6vw;
padding-left: 5.5vw;
}

.word.hide {
display: none;
}
body {
background-color: #333;
color: #fff;
}

.incorrect {
color: rgb(200, 0, 0);
}
a {
color: #0af;
font-weight: bold;
}

.box {
position: relative;
float: left;
width: 6vw;
height: 6vw;
line-height: 6vw;
margin: 0.5vw;
text-align: center;
font-size: 3.6vw;
font-weight: bold;
border: 0.375vw solid #e6e6e6;
}
a:visited {
color: #0af;
}

.box.gray {
color: white;
border: 0.375vw solid var(--gray);
background-color: var(--gray);
}

.box.green {
color: white;
border: 0.375vw solid var(--green);
background-color: var(--green);
}
@media (max-aspect-ratio: 1/1) {

.box.yellow {
color: white;
border: 0.375vw solid var(--yellow);
background-color: var(--yellow);
}
body {
position: absolute;
left: 20vw;
width: 60vw;
}

.box.pink {
color: white;
border: 0.375vw solid var(--pink);
background-color: var(--pink);
}

.box.blue {
color: white;
border: 0.375vw solid var(--blue);
background-color: var(--blue);
}
@media (max-aspect-ratio: 2/3) {

.box.gray,
.box.green,
.box.yellow,
.box.pink,
.box.blue {
animation: 0.5s flip;
}
body {
position: absolute;
left: 10vw;
width: 80vw;
}

.box.paint {
border: 0.375vw solid #0066ff;
}

.paint {
animation: 0.5s focus;
.ethiopic {
font-family: noto;
font-weight: 500;
}

@keyframes flip {
0% {
height: 6vw;
margin-top: 0.5vw;
font-size: 3.6vw;
}
50% {
height: 0vw;
margin-top: 3vw;
font-size: 0vw;
}
100% {
height: 6vw;
margin-top: 0.5vw;
font-size: 3.6vw;
}
h1 {
font-size: 2.5rem;
}

/* @media (orientation: portrait) {
.word {
width: 100%;
height: 9vw;
}
.box {
width: 8vw;
height: 8vw;
line-height: 8vw;
margin: 0.5vw;
float: left;
text-align: center;
font-size: 4.8vw;
font-weight: bold;
border: 0.375vw solid #e6e6e6;
}
.paint {
animation: 0.5s focusPortrait;
}
.box.gray,
.box.green,
.box.yellow,
.box.pink,
.box.blue {
animation: 0.5s flipPortrait;
}
@keyframes focusPortrait {
0% {
width: 8vw;
height: 8vw;
line-height: 8vw;
margin-top: 0.5vw;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 4.8vw;
}
50% {
width: 6vw;
height: 6vw;
line-height: 6vw;
margin-top: 1.5vw;
margin-left: 1.5vw;
margin-right: 1.5vw;
font-size: 3.6vw;
}
100% {
width: 8vw;
height: 8vw;
line-height: 8vw;
margin-top: 0.5vw;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 4.8vw;
}
}
@keyframes flipPortrait {
0% {
height: 8vw;
margin-top: 0.5vw;
font-size: 4.8vw;
}
50% {
height: 0vw;
margin-top: 4.5vw;
font-size: 0vw;
}
100% {
height: 8vw;
margin-top: 0.5vw;
font-size: 4.8vw;
}
}
p {
font-size: 1rem;
}
@media (orientation: portrait) and (max-width: 450px) {
.word {
width: 100%;
height: 13vw;
}
.box {
width: 12vw;
height: 12vw;
line-height: 12vw;
margin: 0.5vw;
float: left;
text-align: center;
font-size: 11.52vw;
font-weight: bold;
border: 0.375vw solid #e6e6e6;
}
.paint {
animation: 0.5s focusMobile;
}
.box.gray,
.box.green,
.box.yellow,
.box.pink,
.box.blue {
animation: 0.5s flipMobile;
}
@keyframes focusMobile {
0% {
width: 12vw;
height: 12vw;
line-height: 12vw;
margin-top: 0.5vw;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 11.52vw;
}
50% {
width: 9vw;
height: 9vw;
line-height: 9vw;
margin-top: 2vw;
margin-left: 2vw;
margin-right: 2vw;
font-size: 8.64vw;
}
100% {
width: 12vw;
height: 12vw;
line-height: 12vw;
margin-top: 0.5vw;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 11.52vw;
}
}
@keyframes flipMobile {
0% {
height: 12vw;
margin-top: 0.5vw;
font-size: 11.52vw;
}
50% {
height: 0vw;
margin-top: 6.5vw;
font-size: 0vw;
}
100% {
height: 12vw;
margin-top: 0.5vw;
font-size: 11.52vw;
}
}
} */
18 changes: 9 additions & 9 deletions App/guide/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The game of Wordle implemented in Amharic" />

<link rel="stylesheet" href="../index.css">
<link rel="stylesheet" href="./index.css">
</link>

</head>

Expand All @@ -27,14 +27,14 @@
<p>
<a href="..">← Go back</a>
</p>
<h1>የቃልነት መመሪያዎች</h1>
<p>በእንግሊዘኛ</p>
<h1 class="ethiopic">የቃልነት መመሪያዎች</h1>
<p class="ethiopic subtitle">በእንግሊዘኛ</p>
<p>
Guess the hidden word by playing a series of 5 letter words and getting clues.
The goal is to guess the hidden word in as few guesses as possible.
</p>

<div id="1" class="word">
<div id="1" class="word ethiopic">
<div class="box 1 pink" id="1-1">ኢ</div>
<div class="box 2 gray" id="1-2">ት</div>
<div class="box 3 blue" id="1-3">ዮ</div>
Expand All @@ -45,16 +45,16 @@ <h1>የቃልነት መመሪያዎች</h1>
<p>
Pink means that the position is right and the letter is in the right family.
However, the letter played is not the <em>exact</em> letter used in the word because it has a different ending vowel
(e.g. <em>ኢ</em> instead of <em>እ</em>).
(e.g. <em class="ethiopic">ኢ</em> instead of <em class="ethiopic">እ</em>).
</p>
<p>Gray means neither the letter nor any letter in its family are part of the word.</p>
<p>
Blue means that the position is wrong but the letter is in the right family.
Like pink, blue tells you that the letter played is not an <em>exact</em> match but belongs to the same letter family
(in this case, <em>ዮ</em> is played instead of <em>የ</em>).
(in this case, <em class="ethiopic">ዮ</em> is played instead of <em class="ethiopic">የ</em>).
</p>

<div id="2" class="word">
<div id="2" class="word ethiopic">
<div class="box 1 green" id="2-1">እ</div>
<div class="box 2 gray" id="2-2">ህ</div>
<div class="box 3 gray" id="2-3">ት</div>
Expand All @@ -71,7 +71,7 @@ <h1>የቃልነት መመሪያዎች</h1>
The only thing that needs to be changed to make them right is their position.
</p>

<div id="3" class="word">
<div id="3" class="word ethiopic">
<div class="box 1 green" id="3-1">እ</div>
<div class="box 2 green" id="3-2">የ</div>
<div class="box 3 green" id="3-3">ዘ</div>
Expand All @@ -84,7 +84,7 @@ <h1>የቃልነት መመሪያዎች</h1>
You do <em>not</em> need to use all the clues provided in previous guesses in your next guess.
In fact, sometimes it can be helpful to ignore some of the clues to try and get more useful clues using other words.
</p>
<p>A new <em>ቃልነት</em> will be released every day at midnight East African Time (EAT/UTC+3).</p>
<p>A new <em class="ethiopic">ቃልነት</em> will be released every day at midnight East African Time (EAT/UTC+3).</p>
<p>Good luck!</p>

</body>
Expand Down
Loading

0 comments on commit 0b242c5

Please sign in to comment.