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

New style , pretty, but simple #25

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

New style , pretty, but simple #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 23 additions & 6 deletions css/explaingit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
/* styles */

header {
padding-top: 20px;
padding-bottom: 20px;
Copy link
Owner

Choose a reason for hiding this comment

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

Padding can be combined.

margin-bottom: 20px;
background-color: #CE54DF;
color: #ffffff;
box-shadow: 0px 3px 0px rgba(169, 68, 183, 0.9);
}

header h1{
text-shadow: 0px 3px 0px rgba(169, 68, 183, 1);
}
header a h5 { color: #ffffff; display: inline;}
Copy link
Owner

Choose a reason for hiding this comment

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

I am not sure I understand your indentation here. Also be careful with element selectors: https://smacss.com/book/selectors

header i { color: #ffffff; }

body, html {
height: 100%;
}
Expand All @@ -8,6 +22,9 @@ body, html {
padding-top: 10px;
}

a { text-decoration: none;}
p a { color: #CE54DF; }

a.openswitch {
display: block;
}
Expand All @@ -19,9 +36,7 @@ a.openswitch.selected {
.command-list, .example-list {
margin-top: 10px;
margin-bottom: 10px;
padding: 10px 0;
border-bottom: 2px dashed #888;
border-top: 2px dashed #888;
padding: 10px 10px;
Copy link
Owner

Choose a reason for hiding this comment

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

The second 10px is superfluous

background-color: #EEE;
}

Expand All @@ -43,10 +58,12 @@ a.openswitch.selected {
}

span.cmd {
background-color: #222222;
color: #FFFFFF;
background-color: #F0F0F0;
color: #181818;
font-family: Courier New;
padding: 0 0.2em;
border-radius: 3px;
border: 1px solid #E4E4E4;
}

.svg-container {
Expand Down
32 changes: 20 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,28 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Explain Git with D3</title>
<script data-main="js/main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.min.js"></script>

Copy link
Owner

Choose a reason for hiding this comment

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

Double new line?


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/1140/2.0/1140.css">
<link rel="stylesheet" href="css/explaingit.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>
<a href="https://github.com/onlywei/explain-git-with-d3" id="fork-me">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
<header class="container">
<div class="row intro">
<div class="twelvecol">
<h1>Explain Git visually</h1>
Copy link
Owner

Choose a reason for hiding this comment

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

I will need some convincing to be changing the title of the project here.

<i class="fa fa-github-alt fa-lg"></i>
<a href="https://github.com/onlywei/explain-git-with-d3" id="fork-me"> <h5> Fork-me<h5></a>
Copy link
Owner

Choose a reason for hiding this comment

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

Line length.

</div>
</div>
</header>
<div class="container">
<div class="row intro">
<div class="twelvecol">
<h1>Visualizing Git Concepts with D3</h1>

<p>
This website is designed to help you understand some basic git concepts visually.
This is my first attempt at using both SVG and D3. I hope it is helpful to you.
Expand All @@ -35,32 +43,32 @@ <h1>Visualizing Git Concepts with D3</h1>
</div>
<div class="row command-list">
<div class="twocol">
<h4>Basic Commands</h3>
<h5>Basic Commands</h5>
<a id="open-commit" class="openswitch" href="#">git commit</a>
<a id="open-branch" class="openswitch" href="#">git branch</a>
</div>
<div class="twocol">
<h4>&nbsp;</h4>
<h5>&nbsp;</h5>
<a id="open-checkout" class="openswitch" href="#">git checkout</a>
<a id="open-checkout-b" class="openswitch" href="#">git checkout -b</a>
</div>
<div class="twocol">
<h4>Undo Commits</h4>
<h5>Undo Commits</h5>
<a id="open-reset" class="openswitch" href="#">git reset</a>
<a id="open-revert" class="openswitch" href="#">git revert</a>
</div>
<div class="twocol">
<h4>Combine Branches</h4>
<h5>Combine Branches</h5>
<a id="open-merge" class="openswitch" href="#">git merge</a>
<a id="open-rebase" class="openswitch" href="#">git rebase</a>
</div>
<div class="twocol">
<h4>Remote Server</h4>
<h5>Remote Server</h5>
<a id="open-fetch" class="openswitch" href="#">git fetch</a>
<a id="open-pull" class="openswitch" href="#">git pull</a>
</div>
<div class="twocol last">
<h4>&nbsp;</h4>
<h5>&nbsp;</h5>
<a id="open-push" class="openswitch" href="#">git push</a>
<a id="open-tag" class="openswitch" href="#">git tag</a>
</div>
Expand Down