Formatting calendar entries

[ykharitonova]

Hello!

I'm working on the calendar page for my course.

My questions are below; any help and guidance are much appreciated.

---

1. Where can I adjust the width/alignment of the date field and the rightmost field?

For example, I want to make the day of the week and the date appear on the same line by increasing the column width and/or the text alignment.

Mon, Aug 8:

instead of

Mon, 
Aug 8:

---

2. Where/how can I remove the extra newline between the different lines?

Currently, the site renders an extra newline between the different items. For example, take a look at how it displays Monday's tasks even though there are no spaces in the file that generated it.

---

3. Is there a way to prevent the text in the "middle column" from turning bold when there is an item in the "rightmost column"?

The time for the class during which the Quiz occurs is displayed in bold, whereas the other two classes are not bolded.

---

I don't actually know Jekyll, which is a testament to this template and its documentation (and the maintainer @kevinlin1!) making it is so easy to pattern-match and get things running.

Thank you in advance for your help!
~Kate

[kevinlin1]

Hi Kate,

Great questions! Before getting started, it helps to review your browser's DevTools. For example, if you use Chrome, you'll want to know how to Open Chrome DevTools and use it to View and change CSS. You can then play around with adjusting the CSS styles of elements and debug the website appearance.

Screen.recording.2022-07-31.9.45.47.AM.webm

I recommend checking that your changes work across different display widths. Even though students most likely use laptops for their computing classwork, they might sometimes have the page side-by-side with another page so it's important to test for narrow widths too.

Remember that changes made in your browser's DevTools aren't saved to the website, so you'll need to copy them into the scss files. The specific change that I made in the screen recording needs to be edited in the _sass/custom/module.scss file.

just-the-class/_sass/custom/module.scss

Lines 31 to 33 in 2729a42

	@include mq(lg) {
	grid-template-columns: 1fr 7fr;
	}

Using this knowledge, here's how I'd address your questions:

1. See the screen recording above for a quick fix to give the date column more space relative to the content for that day. The original 1fr 7fr gives 1/8 of the width to the date; the new 1fr 5fr gives 1/6 of the width to the date.
2. I think this will be fixed once we address the first question! The extra space appears because the date column is wrapping onto an extra line, and the way the layout matches the date to the content in a grid-like manner.
3. Try removing or modifying the font-weight style for main-content dt in your DevTools.

   just-the-class/_sass/custom/custom.scss

   Lines 75 to 82 in 2729a42

   	dt {
   	font-weight: 700;
   	text-align: start;
   	&::after {
   	content: normal;
   	}
   	}