diff --git a/README.md b/README.md index a35eb3b..04eb9b5 100644 --- a/README.md +++ b/README.md @@ -21,23 +21,20 @@ ## Features -- Generate Git commit commands with custom dates, times, and messages. - Easily create Git commits to modify the contribution graph on GitHub. - Customize the contribution graph for artistic, personal, or branding purposes. ## Usage - Select the year you want to customize (Choosing the year before your GitHub joining year would be better, can use GitHub api for checking the joined date). -- Select your timezone. (I dont know if this is important or not) -- Select the desired rectangle(s) on the GitHub contribution graph that you want to customize. -- Use the GitArt website to specify the details of your Git commit, such as the date, time, and message. +- Select the desired rectangle(s) on the GitHub contribution graph that you want to customize and click `Generate` button. - Copy the generated Git commit command. -- Run the copied command in your local Git repository to make the desired changes. +- Run the copied command in your local Git repository to make the desired changes (better to create a new empty repo). - Push the changes to your GitHub repository to update the contribution graph. To create an empty commit with a specific date: ```bash -git commit --allow-empty --date="31 Oct 2022 11:11:11 +0530" --allow-empty-message -m "" +git commit --allow-empty --date="31 Oct 2022" --allow-empty-message -m "" ``` ![preview](/public/banner.png "preview") \ No newline at end of file diff --git a/public/index.html b/public/index.html index 8438b81..4d3c7ba 100644 --- a/public/index.html +++ b/public/index.html @@ -1,111 +1,109 @@ - - - - GitArt - GitHub Contribution Graph Customizer - + + + - - - + GitArt - GitHub Contribution Graph Customizer + - - - - - - - - - - + + + - - - - - - + + + + + + + + + + - - - - - - - -

LogoGitArt

-

GitHub Contribution Graph Customizer

-

- GitArt is a tool that allows users to manipulate their GitHub - contribution graph by generating Git commit commands. With this tool, - users can customize their contribution graph to display their name, - messages, symbols, logos, or any other desired patterns. -

-
-
- - - - + + + + + + + + + + + + + + + +

LogoGitArt

+

GitHub Contribution Graph Customizer

+

+ GitArt is a tool that allows users to manipulate their GitHub + contribution graph by generating Git commit commands. With this tool, + users can customize their contribution graph to display their name, + messages, symbols, logos, or any other desired patterns. +

+
+
+ +
    +
  • Jan
    • +
  • Feb
    • +
  • Mar
    • +
  • Apr
    • +
  • May
    • +
  • Jun
    • +
  • Jul
    • +
  • Aug
    • +
  • Sep
    • +
  • Oct
    • +
  • Nov
    • +
  • Dec
    • +
+
    +
  • Sun
    • +
  • Mon
    • +
  • Tue
    • +
  • Wed
    • +
  • Thu
    • +
  • Fri
    • +
  • Sat
    • +
+
    + +
+
+
+ +
+
+
+ + +
+
+ +

git commit --allow-empty --date="27 Oct 2022" --allow-empty-message -m "" &&

+

git commit --allow-empty --date="28 Oct 2022" --allow-empty-message -m "" &&

+

git commit --allow-empty --date="29 Oct 2022" --allow-empty-message -m "" &&

+

git commit --allow-empty --date="30 Oct 2022" --allow-empty-message -m "" &&

+

git commit --allow-empty --date="31 Oct 2022" --allow-empty-message -m ""

+ +
- - - - +
+ + + + \ No newline at end of file diff --git a/public/style.css b/public/style.css index c02972f..1241f91 100644 --- a/public/style.css +++ b/public/style.css @@ -3,6 +3,7 @@ --square-gap: 5px; --week-width: calc(var(--square-size) + var(--square-gap)); } + body { color: #fafbfc; background-color: #0d1117; @@ -48,9 +49,11 @@ h2 { .months { grid-area: months; } + .days { grid-area: days; } + .squares { grid-area: squares; } @@ -76,6 +79,7 @@ h2 { .generate-btn:hover { transform: scale(1.05); } + .graph { display: inline-grid; grid-template-areas: @@ -93,20 +97,8 @@ h2 { } .months { - display: grid; - grid-template-columns: - calc(var(--week-width) * 4) /* Jan */ - calc(var(--week-width) * 4) /* Feb */ - calc(var(--week-width) * 4) /* Mar */ - calc(var(--week-width) * 5) /* Apr */ - calc(var(--week-width) * 4) /* May */ - calc(var(--week-width) * 4) /* Jun */ - calc(var(--week-width) * 5) /* Jul */ - calc(var(--week-width) * 4) /* Aug */ - calc(var(--week-width) * 4) /* Sep */ - calc(var(--week-width) * 5) /* Oct */ - calc(var(--week-width) * 4) /* Nov */ - calc(var(--week-width) * 5) /* Dec */; + display: flex; + justify-content: space-around; } .days, @@ -166,25 +158,76 @@ li { width: 100%; } +.code-container { + margin-top: 1rem; + margin-bottom: 1rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.code-editor { + background-color: #161b22; + box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5); + border-radius: 8px; + padding: 2px; +} + +.code-header { + display: flex; + justify-content: end; + margin: 10px; +} + +.code-icon { + padding: 5px; + width: 20px; + transition: .2s ease; +} + +.code-icon:hover { + cursor: pointer; + border-radius: 5px; + background-color: #0d1117; +} + +.editor-content { + margin: 0 10px 10px; + color: white; +} + + +.editor-content .color-1 { + color: rgb(86 156 214); +} + +.editor-content .color-2 { + color: rgb(156 220 254); +} + @media screen and (max-width: 600px) { h1 { font-size: 3rem; } + h2 { font-size: 0.75rem; margin-top: -40px; } + .logo-gitart { width: 50px; height: 50px; } + .generate-btn { margin-right: 1rem; margin-bottom: 1rem; } + #description-gitart { font-size: 0.8rem; margin-left: 1rem; margin-right: 1rem; } -} +} \ No newline at end of file