Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styled font weight and response box #25

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Styled font weight and response box #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6a6b71e
changed font weight to fit hebrew font better
Mar 17, 2022
2f40f32
changed response box style
Mar 22, 2022
722277a
added some styling, changed colors and updated fonts
Mar 25, 2022
3d32d29
added bg color to response box in light mode, adjusted dark mode body…
Mar 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 43 additions & 4 deletions static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ body, input {
font-size: 17px;
line-height: 27px;
-webkit-font-smoothing: subpixel-antialiased;
font-family:-apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
font-family:-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually like the current font better (at least on mac) - current:
image

new:
image

Also, line spacing in the paragraph is a bit too large + font size is too small

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I liked the colors and the design of the "guess" button + textbox!

text-rendering: optimizeLegibility;
font-weight:200;
font-weight:300;
Solance marked this conversation as resolved.
Show resolved Hide resolved
}

body {
Expand All @@ -13,6 +13,11 @@ body {
padding: 1em;
}

h1 {
color: #11a452;
letter-spacing: 2px;
}

#guess-wrapper {
display: flex;
margin: 20px 0;
Expand Down Expand Up @@ -48,6 +53,22 @@ body {
padding-top:18px;
}

#response {
background-color: #eef1f9;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
}

#timer {
background-color: #eef1f9;
padding: 8px;
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is what it looks like - I'm not sure the italic+bold looks good on the Hebrew text, also not sure about the color (though I do like the dark mode color). Wdyt?

image

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(any ideas on how to make the design cleaner?)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On my machine (different browsers) it looks different, only italic.

Screenshot 2022-03-22 at 22 40 52

The color is the same one as in the English version, but I will try to think of a better one, as well as some cleaner design (I'm a bit limited here but will try!).

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now there's no background in light-mode
image


#response p {
font-style: italic;
}
Solance marked this conversation as resolved.
Show resolved Hide resolved

th {
padding-left: 3em;
Expand All @@ -56,6 +77,9 @@ th {

th#chronoOrder, th#alphaOrder, th#similarityOrder, input#give-up-btn, input#guess-btn, input#lower{
cursor: pointer;
background-color: #11a452;
color: white;
border: none;
}

.gaveup {
Expand Down Expand Up @@ -227,7 +251,7 @@ header {
.progress-container,
.progress-bar {
display: inline-block;
background-color:#008000;
background-color:#11a452;
}

.percentile {
Expand All @@ -243,6 +267,11 @@ header {

a {
text-decoration: none;
color: #1d6fc6;
}

hr {
border: 2px solid #11a452;
}

.implicita {
Expand Down Expand Up @@ -271,7 +300,7 @@ a {

/* Dark mode */
body.dark {
background: #111;
background: #171717;
color: #fafafa;
color-scheme: dark;
}
Expand All @@ -298,4 +327,14 @@ body.dark .progress-container {

body.dark .implicita {
color: #FFF;
}

body.dark #response {
background-color: #282e4f;
padding: 5px;
}

body.dark #timer {
padding: 8px;
background-color: #282e4f;
}
2 changes: 1 addition & 1 deletion static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ <h1>סמנטעל</h1>
</div>
</form>
<div id="response"></div>
<p><b id="timer" hidden></b></p>
<p><span id="timer" hidden></span></p>
<div style="display:none">
<input type="text" id="share" />
</div>
Expand Down