Add to calendar functionality

This commit is contained in:
James Dinh 2022-07-23 21:48:45 -07:00
parent 558c59a0b7
commit fcc5078ef3
2 changed files with 13 additions and 2 deletions

View File

@ -1690,6 +1690,17 @@ section {
margin: 0 10px;
}
.cal-tooltip::after {
content: 'Add to Calendar';
font-size: 16px;
top: 30px;
right: -20px;
}
#workshop-link {
background: unset;
}
.workshop-icon {
float: left;
margin-top: 2px;

View File

@ -502,7 +502,7 @@
</div>
</div>
<div class="workshop-date">
<div><svg class="workshop-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Aug 13</div>
<a class="link tooltip cal-tooltip" id="workshop-link" target="_blank" href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220813T180000Z%2F20220813T190000Z&details=A%20chance%20for%20you%20to%20learn%20the%20world%27s%20most%20common%20version%20control%20system%3A%20Git%20--%20and%20how%20to%20create%20your%20own%20website%21&location=Gilroy%20Library&text=Web%20Dev%20Workshop"><div><svg class="workshop-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Aug 13</div></a>
<div><svg class="workshop-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>11am - 12pm</div>
<div><svg class="workshop-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/></svg>Gilroy Library</div>
</div>
@ -537,7 +537,7 @@
</div>
</div>
<div class="workshop-date">
<div><svg class="workshop-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Aug 13</div>
<a class="link tooltip cal-tooltip" id="workshop-link" target="_blank" href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220813T200000Z%2F20220813T210000Z&details=Join%20us%20for%20a%20lecture%20on%20Python%20Programming%20basics.%20You%27ll%20learn%20basic%20data%20structures%20and%20be%20able%20to%20code%20your%20own%20programs%21&location=Gilroy%20Library&text=Python%20Workshop"><div><svg class="workshop-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Aug 13</div></a>
<div><svg class="workshop-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>1 - 2pm</div>
<div><svg class="workshop-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/></svg>Gilroy Library</div>
</div>