body{ background-color:#333; font-family: 'Source Code Pro', monospace; color:#ccc; } .habit-main-title{ font-weight:700; margin-bottom: 10px; } .habit-container-wrapper { display: flex; flex-wrap: wrap; width: 100%; } .habit-container { width: 100%; /* Two containers per line */ box-sizing: border-box; background-color: #222; border-radius: 5px; text-align: left; padding: 5px; margin:5px; margin-bottom: 30px; } .habit-title{ font-family: 'Source Code Pro', monospace; font-size: 2em; font-weight: 700; color: #ccc; } .habit-timescale{ font-weight:100; color:#ccc; display: inline; } .habit-desc{ font-weight: 100; font-size: 1.95em; padding-bottom: 10px; } .habit-main{ float: left; width: -webkit-fill-available; margin-top: -90px; margin-right: 90px; } .habit-info{ text-align: right; font-size:1.6em; } .good{ color: #58e81b;} .bad{ color: #e81b1b; } .habit-log{ float: right; } .habit-log-button{ width: 99px; height: 99px; font-size: 3em; /* You can adjust the font size to fit the button */ border: none; background-color: #000; color: #fff; cursor: pointer; border-radius: 5px; font-family: 'Source Code Pro', monospace; font-weight:700; } .button-good{ background-color: #58e81b; color:#000; } .button-bad{ background-color: #e81b1b; color:#000; } .button-neut{ background-color: #efe23e; color:#000; } .habit-score{ width:145px; display:inline-block; text-align: center; font-size: 0.9em; } .score-title{ font-weight:700; } .habit-cal-day, .habit-cal-week{ padding-top:10px; } .habit-cal-day .graph-label, .habit-cal-week .graph-label{ display:none; } .habit-cal-day .cal-heatmap-container { display: block; overflow: hidden; height: 120px; } .habit-cal-week .cal-heatmap-container { display: block; overflow: hidden; height: 85px; } .habit-cal-week .r1{ fill:#efe23e; } .habit-cal-week .r2{ fill:#58e81b; } .habit-cal-week .r0{ fill:#000; } .week-container .green{ background-color: #58e81b; } .week-container .neut{ background-color: #efe23e; color: #111; font-weight: 700; font-size: 12px; text-align: center; } .week-container .neut text[Attributes Style] { text-anchor: middle; dominant-baseline: central; } .grid-container { display: flex; flex-wrap: wrap-reverse; /* Reverse the order to start from 24 months ago */ gap: 5px; margin-top: 10px; } .month { width: 15px; margin: 0px; padding: 0px; border: 0px solid #ccc; box-sizing: border-box; } .week-container { display: grid; grid-template-columns: 15px; /* Single column for vertical layout */ grid-template-rows: repeat(5, 15px * 24); /* Adjusted for 24 weeks */ gap: 2px; } .week { width: 15px; height: 15px; background-color: #000; border: 0px solid #fff; box-sizing: border-box; border-radius: 2px; }