Add calendar template and schedule generation for MLB schedule
- Added a calendar template using Handlebars.js to generate a schedule for the Major League Baseball (MLB) games. - Implemented a function to fetch and parse the MLB schedule API and populate the calendar with game details. - Enhanced the calendar layout with custom CSS to improve readability and visual appeal. - Added support for team-specific schedule display based on the user's favorite team ID. - Implemented a feature to mark specific games with a special annotation based on specific criteria. - Included support for different sheet sizes (letter, A4) and customized the header and calendar layout accordingly. - Added a header image based on the user's favorite team ID. - Enhanced the user experience by displaying game details like opponent, time, and annotation (e.g., A or B for home and away games). - Improved the overall layout and design to enhance the schedule readability and visual appeal.
This commit is contained in:
266
styles/styles.css
Normal file
266
styles/styles.css
Normal file
@@ -0,0 +1,266 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');
|
||||
|
||||
:root {
|
||||
font-family: "Noto Sans", Arial, Helvetica, sans-serif;
|
||||
--black-border: solid black 2px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
&.placeholder{
|
||||
background-color: lightblue;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
border: var(--black-border);
|
||||
}
|
||||
.radius {
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
section {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: auto;
|
||||
|
||||
.grid-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* padding: 0.5em; */
|
||||
}
|
||||
}
|
||||
|
||||
.team-id-112 {
|
||||
th {
|
||||
background-color: navy !important;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
h2 {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
table {
|
||||
/* width:100%; */
|
||||
border-collapse: collapse;
|
||||
th {
|
||||
background-color: black;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
}
|
||||
th, td {
|
||||
border: black solid 1px;
|
||||
width: 65px;
|
||||
&:has(.half){
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:has(.home) {
|
||||
/* background-color: lightblue; */
|
||||
}
|
||||
&:has(.away) {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
}
|
||||
td > div {
|
||||
height: auto;
|
||||
aspect-ratio: 10 / 10;
|
||||
align-items: center;
|
||||
& {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
}
|
||||
|
||||
.day-date {
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
.opponent {
|
||||
grid-area: 2 / 1 / 3 / 4;
|
||||
}
|
||||
.annotation {
|
||||
margin-right: 2px;
|
||||
grid-area: 1 / 2 / 2 / 4;
|
||||
}
|
||||
.time {
|
||||
grid-area: 3 / 1 / 4 / 4;
|
||||
}
|
||||
|
||||
.friday9_80 {
|
||||
font-size: .7em;
|
||||
font-weight: 900;
|
||||
text-align: right;
|
||||
&.A{
|
||||
color: gray;
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.B{
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
&.half {
|
||||
height: inherit;
|
||||
aspect-ratio: inherit;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
|
||||
&:first-child{
|
||||
border-bottom: black solid 1px;
|
||||
align-items: top;
|
||||
}
|
||||
|
||||
.day-date {
|
||||
font-size: .9em;
|
||||
margin-left: 1px;
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
.opponent {
|
||||
font-size: .9em;
|
||||
line-height: .9em;
|
||||
grid-area: 2 / 1 / 3 / 3;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.annotation {
|
||||
display:none;
|
||||
}
|
||||
.time {
|
||||
margin-right: 1px;
|
||||
text-wrap: nowrap;
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
font-size: .9em;
|
||||
font-stretch: condensed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opponent {
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.day-date{
|
||||
font-weight: 500;
|
||||
font-stretch: semi-condensed;
|
||||
}
|
||||
.time {
|
||||
text-align: center;
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ledger {
|
||||
font-size: 16px;
|
||||
header {
|
||||
padding: 2em;
|
||||
|
||||
img {
|
||||
width: 1.5in;
|
||||
height: 1.5in;
|
||||
}
|
||||
h1 {
|
||||
margin-left: 1em;
|
||||
font-size: xxx-large;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
h2 {
|
||||
line-height: .9em;
|
||||
margin-bottom: .3em;
|
||||
}
|
||||
|
||||
table {
|
||||
th {
|
||||
font-size: .8em;
|
||||
}
|
||||
th, td {
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
.opponent {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.month-number{
|
||||
font-size: 1em;
|
||||
}
|
||||
.time {
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.letter, .A4 {
|
||||
header {
|
||||
padding: 1em;
|
||||
|
||||
img {
|
||||
width: .9in;
|
||||
height: .9in;
|
||||
}
|
||||
h1 {
|
||||
margin-left: 1em;
|
||||
font-size: xx-large;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
font-size: 11px;
|
||||
h2 {
|
||||
line-height: .9em;
|
||||
margin-bottom: .3em;
|
||||
}
|
||||
|
||||
table {
|
||||
th {
|
||||
font-size: .8em;
|
||||
}
|
||||
th, td {
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
|
||||
.opponent {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.month-number{
|
||||
font-size: 1em;
|
||||
}
|
||||
.time {
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user