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.

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

Redesigned website #28

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 15 commits
Commits
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
Empty file added .nojekyll
Empty file.
4 changes: 2 additions & 2 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ module.exports = function(grunt) {
'css/pack.css': [
'css/normalize.css',
'css/jquery.fancybox.css',
'css/style.css',
'css/small.css'
'css/small.css',
'css/custom.css'
Comment on lines +34 to +35
Copy link

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-scheme to 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?

Copy link
Author

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.

Copy link
Author

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, 🤷🏾‍♂️

Copy link
Author

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, 🤷🏾‍♂️

Copy link

@vdye vdye Nov 18, 2021

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).

Copy link

@vdye vdye Nov 18, 2021

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)

]
}
}
Expand Down
6 changes: 3 additions & 3 deletions bump-version.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ var die = (err) => {
};

var updateVersion = (version, tag, timestamp, url) => {
var regex = /<div class="version">.*?<\/div>/gm;
var replacement = '<div class="version"><a href="' + url
var regex = /<p class="h2" id="version">.*?<\/p>/gm;
var replacement = '<p class="h2" id="version"><a href="' + url
+ '" title="Version ' + version + ' was published on '
+ timestamp + '">Version ' + version + '</a></div>';
+ timestamp + '">Version ' + version + '</a></p>';
fs.writeFileSync('latest-version.txt', version);
fs.writeFileSync('latest-tag.txt', tag);
const urlPrefix = `https://github.com/git-for-windows/git/releases/download/${tag}`;
Expand Down
110 changes: 110 additions & 0 deletions css/custom.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
body {
padding-top: 5%;
}

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-weight: bold;
}

.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: 40%;
}

.img-other-logos {
width: 90%
}

.footer {
padding: 28px 0;
margin-top: 55px;
background-color: #202020;
}
.footer span,
.footer a {
color: #878787;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.footer a:hover {
color: #007bff;
}

.footer-menu ul {
text-align: right;
margin: 0;
}

.footer-menu li {
display: inline-block;
padding-left: 20px;
}
Loading