Redesigned website #28
+598
−711
There are no files selected for viewing
Empty file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| body { | ||
| padding-top: 5%; | ||
| } | ||
|
|
||
| .navbar-dark .navbar-nav .nav-link { | ||
| color: #b2b8bd; | ||
| } | ||
|
|
||
| .lcolor{ | ||
| color: #07488f; | ||
| } | ||
|
|
||
| .ncolor { | ||
| color: #0b6bd3; | ||
| } | ||
|
|
||
| section { | ||
| padding-top: 5rem; | ||
| padding-bottom: 5rem; | ||
| } | ||
|
|
||
| .lnr { | ||
prertik marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| display: inline-block; | ||
| fill: currentColor; | ||
| width: 1em; | ||
| height: 1em; | ||
| vertical-align: -0.05em; | ||
| stroke-width: 1; | ||
| } | ||
|
|
||
| .services-icon { | ||
| margin-bottom: 20px; | ||
| font-size: 30px; | ||
| } | ||
|
|
||
| .quote-icon { | ||
| font-size: 40px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .gittext { | ||
| color: #646464; | ||
| font-family: 'Open Sans', sans-serif; | ||
| } | ||
|
|
||
| .lowercase { | ||
| text-transform: lowercase; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| h3, | ||
| h4 { | ||
| font-weight: 300; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 2.5em; | ||
| text-align: center; | ||
| } | ||
|
|
||
| h1 span { | ||
| color: #969696; | ||
| font-size: 0.42em; | ||
| margin-left: 0.476em; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 3em; | ||
| line-height: 1.3; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 1.875em; | ||
| line-height: 1.3; | ||
| } | ||
|
|
||
| h4 { | ||
| font-size: 1.5em; | ||
| line-height: 1.1; | ||
| } | ||
|
|
||
| li.borderless { | ||
| border-top: 0 none; | ||
| border-bottom: 0 none; | ||
| border-right: 0 none; | ||
| border-left: 0 none; | ||
| } | ||
|
|
||
| .img-git-logo { | ||
| width: 80%; | ||
| } | ||
|
|
||
| .img-git-sdk-logo { | ||
| width: 30%; | ||
| } | ||
|
|
||
| .img-other-logos { | ||
| width: 90% | ||
| } | ||
|
|
||
| .footer { | ||
| padding: 28px 0; | ||
| margin-top: 55px; | ||
| background-color: #00478f; | ||
| } | ||
| .footer span, | ||
| .footer a { | ||
| color: #BBBBBB; | ||
| -webkit-transition: all 0.3s linear; | ||
| -o-transition: all 0.3s linear; | ||
| transition: all 0.3s linear; | ||
| } | ||
| .footer a:hover { | ||
| color: #80BDFF; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There doesn't really seem to be a place for this comment, but the new design is really harsh on the eyes for those with "dark mode" enabled. This wasn't a problem with the original site, as it used more muted greys/blues rather than a stark white background.
If possible, could you use something like
prefers-color-schemeto develop a light- and dark-mode palette? Or, if that's a lot of additional work, tone down the brightness of the current design to the grey/blue theme of the original?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I could go through that light/dark mode route, but, it seems everyone wants the blue back even the project maintainer themselves, so, will work on that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, getting to proper dark is very challenging it seems, as people seem to prefer different shades of dark, it took even Github couple of iterations to figure that out so, 🤷🏾♂️
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@vdye I can't seem to reply below on this: #28 (comment)
Won't it look a bit bad and dated to have those types of box arrow buttons on the navbar?
We can do for other buttons below but, 🤷🏾♂️
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If it's good enough for Google and their (probable) army of UI designers, it's probably fine. 🙂 (although I know I see it all the time on other modern sites - once you want to look for something, it somehow becomes impossible to find it).
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That being said, I don't want to dictate how you show the internal/external link distinction (a box arrow is just one option). All I'm really looking for is something distinguishing the two. Color of the text, boldness of the text, icons, etc. are all possibilities, plus others I'm probably not thinking of.EDIT: they're all external links - with that in mind, you probably don't need any extra emphasis other than potentially bolding the FAQ (for the reasons mentioned in the other comment)