Wii Menu Part 2


by Jeremy Caudle
code

I'm working a bit more on the Wii menu today. I've styled a few things and practiced using object-fit to see if it will be useful in the menu. I have a feeling background-images may be a better solution overall, but I'll find out later.

Wii
Wii
Wii
Wii
Wii
Wii
Wii
Wii
AM9:08
7 M 13 D

View the code:

HTML and JS 
<div class="codedoodle-block">
			<section class="channels">
				<div class="channel"><img src="https://www.jeremycaudle.com/floorshotJC.jpeg" class="cover" ></div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel"><img src="https://www.jeremycaudle.com/floorshotJC.jpeg" class="contain" ></div>
				<div class="channel">Wii</div>
				<div class="channel"><img src="https://www.jeremycaudle.com/floorshotJC.jpeg" class="scale-down"></div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel"><img src="https://www.jeremycaudle.com/floorshotJC.jpeg" class="fill"></div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
			</section>		
			<section class="clock">
				<span class="time-of-day">AM</span><span class="time">9:08</span>
				
			</section>
			<section class="date">
				<span>7 M</span> <span>13 D</span>	
			</section>
			
			<section class="buttons">
				
			</sectin>
			
			
		
		</div>
CSS 
body {
				box-sizing: border-box;
			}
		
			.codedoodle-block {
				margin: 1rem auto;
				padding: 0;
				background-color: #dedede;
			}
		
			section.channels {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-template-rows: repeat(3, 1fr);
				grid-gap: .2rem;
				padding: .125rem 0 .125rem 2rem;
			}
			
			.channel {
				display: flex;
				border-radius: .5rem;
				border: solid 1px gray;
				background-color: white;
				flex-flow: column;
				justify-content: center;
				align-content: center;
				text-align: center;
				padding: 0;
				width: 160px;
				height: 90px;
				max-width: 160px;
				max-height: 90px;
				overflow: hidden;
			}
			
			img.fill {
				object-fit: fill;
			}
			img.contain {
				object-fit: contain;
			}
			img.cover {
				object-fit: cover;
			}
			img.scale-down {
				object-fit: scale-down;
			}
		
			section.clock {
				display: flex;
				flex-flow: row;
				justify-content: center;
				align-content: center;
				font-size: 2rem;
				color: #343434;
				font-family: sans-serif;
				border-bottom: solid 3px blue;
			}
			
			span.time-of-day {
				margin: 1.25rem 1rem 0 0;
				font-size: .5rem;
				
			}
		
			section.date {
				background-color: #ccc;
				color: #343434;
				display: flex;
				flex-flow: row;
				justify-content: center;
				align-content: center;
				height: 3rem;
				font-size: 2rem;
				padding: 1rem 0;
			}

Tags