Files
portfolio/styles/components/github-contributions-calendar.css

68 lines
2.0 KiB
CSS

/* GitHub Contributions Calendar */
.github-calendar {
max-width: 100%;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.github-calendar table.js-calendar-graph-table thead th:first-child,
.github-calendar table.js-calendar-graph-table tbody td:first-child {
min-width: 1.5rem;
}
.github-calendar table.js-calendar-graph-table thead th:first-child,
.github-calendar table.js-calendar-graph-table tbody td:first-child {
position: sticky !important;
z-index: 2;
left: 0.25vh;
}
/* Hide broken statistics */
.github-calendar > :not(:first-child) {
display: none;
}
/* Hide the "How we calculate contributions" text */
.github-calendar .js-calendar-graph .width-full .float-left {
display: none;
}
/* Change title text */
.github-calendar table.js-calendar-graph-table > caption:first-child {
color: transparent;
font-size: 0;
}
.github-calendar table.js-calendar-graph-table > caption:first-child::before {
content: "GitHub Contributions Calendar";
color: var(--text-colour);
font-size: 1rem;
}
/* Colour scale to match theme */
/*
.github-calendar table tbody td:not(:first-child),
div.ContributionCalendar-day {
border: solid 1px grey;
}
*/
td.ContributionCalendar-day[data-level="0"], /*[aria-describedby="contribution-graph-legend-level-4"]*/
div.ContributionCalendar-day[data-level="0"]
{
background-color: var(--github-calendar-level-0-colour);
}
td.ContributionCalendar-day[data-level="1"],
div.ContributionCalendar-day[data-level="1"]
{
background-color: var(--github-calendar-level-1-colour);
}
td.ContributionCalendar-day[data-level="2"],
div.ContributionCalendar-day[data-level="2"]
{
background-color: var(--github-calendar-level-2-colour);
}
td.ContributionCalendar-day[data-level="3"],
div.ContributionCalendar-day[data-level="3"]
{
background-color: var(--github-calendar-level-3-colour);
}
td.ContributionCalendar-day[data-level="4"],
div.ContributionCalendar-day[data-level="4"]
{
background-color: var(--github-calendar-level-4-colour);
}