Laying out a Mega Drive cartridge case cover
For Father's Day I received a game coupon allowing me to pick any game I'd like to have and be treated to it. Most modern games on systems like the Nintendo Switch and PlayStation 4 start around $60, so I asked if I could instead get two cheaper retro games. One of them being a Sega Mega Drive game. I have yet to play it, but it prompted me to try and lay out the front of the game case using flexbox. I'll give it a better go at a later date.
Mega Drive Cartridgeメガドライブ壱二
Game Name Game Subtitle
ゲームの名前 〜ゲームの字幕〜
- 1Player
- Strategy
- Memory Back Up
View the code:
HTML and JS
<div class="codedoodle-block">
<h6 class="mega-drive-top-text"><span class="english-txt">Mega Drive Cartridge</span><span class="japanese-txt">メガドライブ壱二</span></h6>
<h1 class="eng-game-name">Game Name <span class="eng-subhead">Game Subtitle</span></h1>
<h2 class="jpn-game-name">ゲームの名前 <span class="jpn-subhead">〜ゲームの字幕〜</span></h2>
<div class="stretch">
<ul class="cartridge-box-etc">
<li class="player-count"><span>1</span>Player</li>
<li class="game-type">Strategy</li>
<li class="extra-feature">Memory Back Up</li>
<li class="sega-logo">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100" viewbox="0 0 300 100">
<path d="m 147.808,90.893999 c 5.508,5.349 13.019,8.656 21.303,8.656 l 130.889,0.015 -28.268,-84.332 C 267.871,6.2739988 258.813,-1.2207031e-6 247.934,-1.2207031e-6 237.101,-1.2207031e-6 227.906,6.4789988 224.189,15.400999 l -9.423,27.471 -0.037,-41.4530002 -45.709,-0.023 c -8.262,0 -15.689,3.224 -21.159,8.557 l 0.016,-8.52 h -46.801 c -8.717,0 -16.645,3.717 -22.19,9.5590002 V 1.3959988 l -44.11,0.038 C 15.734,1.4179988 0.114,16.302999 0.091,35.982999 c 0,9.111 3.982,17.374 9.854,23.496 L 0,59.462999 v 40.087 l 44.442,-0.008 c 12.487,-0.015 24.861,-7.549 29.162,-16.576 l 0.129,-0.371 c 4.969,10.036 15.339,16.955 27.341,16.955 l 46.733,-0.008 v -8.648" style="fill: rgb(255, 255, 255);"/>
<path d="m 6.866,92.690999 37.477,-0.038 c 15.333,0 27.759,-12.388 27.759,-27.652 0,-15.294 -12.426,-27.683 -27.759,-27.683 l -9.733,0.053 c -0.767,0 -1.389,-0.629 -1.389,-1.403 0,-0.774 0.622,-1.404 1.389,-1.404 l 37.409,0.008 0.015,-11.736 H 34.602 c -7.237,0 -13.125,5.879 -13.125,13.102 0,7.23 5.887,13.086 13.125,13.086 l 9.779,0.129 c 8.785,0 15.894,7.085 15.894,15.826 0,8.747 -7.108,15.848 -15.894,15.848 h -37.5 l -0.015,11.864" style="fill: rgb(0, 96, 168);"/>
<path d="m 6.881,78.071999 h 37.5 c 7.26,0 13.132,-5.856 13.132,-13.094 0,-7.23 -5.872,-13.079 -13.132,-13.079 l -9.779,-0.106 c -8.77,0 -15.886,-7.093 -15.886,-15.856 0,-8.739 7.116,-15.833 15.886,-15.833 l 37.432,-0.008 L 72.019,8.3149988 H 34.61 c -15.317,0 -27.759,12.3740002 -27.759,27.6530002 0,15.279 12.442,27.66 27.759,27.66 l 9.68,0.015 c 0.736,0 1.358,0.6 1.358,1.358 0,0.744 -0.622,1.343 -1.358,1.343 l -37.424,0.03 0.015,11.698" style="fill: rgb(0, 96, 168);"/>
<path d="m 101.158,80.901999 c -6.502,0 -11.828,-5.182 -11.828,-11.798 v -37.438 c 0,-6.365 5.326,-11.6 11.828,-11.6 l 40.003,0.007 V 8.3149988 h -40.003 c -13.018,0 -23.563,10.5070002 -23.563,23.4800002 v 37.31 c 0,12.974 10.545,23.496 23.563,23.496 l 39.836,0.016 -0.008,-11.729 -39.828,0.014" style="fill: rgb(0, 96, 168);"/>
<path d="m 92.198,31.794999 c 0,-4.961 3.991,-8.982 8.96,-8.982 h 40.003 v 11.774 h -34.465 c -2.761,0 -2.799,2.739 -2.799,2.739 h 28.753 v 11.721 H 92.184 l 0.014,-17.252" style="fill: rgb(0, 96, 168);"/>
<path d="m 101.158,78.049999 c -4.954,0 -8.975,-3.998 -8.975,-8.945 v -17.267 h 40.466 v 11.745 h -28.753 c 0.038,2.761 2.799,2.775 2.799,2.775 h 34.298 l -0.008,11.676 -39.827,0.016" style="fill: rgb(0, 96, 168);"/>
<path d="m 169.194,80.871999 c -6.479,0 -11.774,-5.28 -11.774,-11.768 v -37.31 c 0,-6.494 5.257,-11.729 11.743,-11.729 h 38.745 V 8.3149988 h -38.835 c -13.012,0 -23.557,10.5070002 -23.557,23.4800002 v 37.31 c 0,12.974 10.636,23.496 23.647,23.496 l 38.745,0.016 v -55.291 h -33.297 v 11.721 h 21.53 v 31.825 h -26.947" style="fill: rgb(0, 96, 168);"/>
<path d="m 160.181,69.103999 c 0,4.971 4.021,9.014 8.982,9.014 h 24.201 v -26.295 H 174.64 v 11.76 h 6.949 l 0.022,2.761 h -6.918 c -1.51,0 -2.746,-1.251 -2.746,-2.761 l -0.062,-26.265 c 0,0 -0.008,-2.731 2.777,-2.799 h 33.259 l -0.015,-11.714 -38.745,0.008 c -4.961,0 -8.982,4.021 -8.982,8.982 v 37.309" style="fill: rgb(0, 96, 168);"/>
<path d="m 244.315,22.637999 c 0.522,-1.494 1.941,-2.571 3.618,-2.571 1.678,0 3.111,1.077 3.619,2.571 l 18.808,55.563 h -27.54 l 0.03,-13.071 h 9.203 l -4.143,-12.313 -13.496,39.79 h -13.883 l 23.784,-69.969" style="fill: rgb(0, 96, 168);"/>
<path d="m 274.152,80.871999 h -31.286 v 11.735 h 47.612 l -24.762,-73.262 c -2.17,-7.146 -9.323,-12.4030002 -17.791,-12.4030002 -8.481,0 -15.612,5.2340002 -17.798,12.3740002 l -24.989,73.292 h 12.465 l 24.262,-71.244 c 0.985,-2.359 3.308,-4.021 6.039,-4.021 2.716,0 5.052,1.662 6.046,4.006 l 20.202,59.523" style="fill: rgb(0, 96, 168);"/>
<path d="m 281.504,17.638999 c 2.216,0 4.302,-0.865 5.865,-2.42 1.562,-1.57 2.435,-3.641 2.435,-5.8560002 0,-2.2 -0.873,-4.264 -2.435,-5.834 -1.563,-1.547 -3.649,-2.412 -5.865,-2.412 -4.559,0 -8.284,3.695 -8.284,8.247 0,2.2150002 0.865,4.2860002 2.442,5.8560002 1.556,1.554 3.634,2.419 5.842,2.419 m -7.115,-8.2770002 c 0,-1.889 0.728,-3.679 2.085,-5.022 1.351,-1.343 3.141,-2.071 5.03,-2.071 1.912,0 3.702,0.729 5.053,2.071 1.343,1.343 2.087,3.133 2.087,5.022 0,3.9220002 -3.202,7.1080002 -7.14,7.1080002 -1.89,0 -3.68,-0.736 -5.03,-2.079 -1.358,-1.342 -2.085,-3.125 -2.085,-5.0290002 z" style="fill: rgb(35, 31, 32);"/>
<path d="m 279.38,10.059999 v 3.899 h -1.199 V 4.7949988 h 3.406 c 1.283,0.015 2.034,0.015 2.747,0.553 0.69,0.509 0.979,1.275 0.979,2.125 0,2.14 -1.744,2.42 -2.186,2.511 l 2.58,3.9750002 h -1.449 l -2.511,-3.899 h -2.367 m 0,-1.0090002 h 2.435 c 0.388,0 0.752,0 1.116,-0.091 0.85,-0.205 1.153,-0.812 1.153,-1.479 0,-0.243 -0.023,-0.857 -0.547,-1.282 -0.479,-0.402 -1.085,-0.387 -1.79,-0.387 h -2.367 v 3.239 z" style="fill: rgb(35, 31, 32);"/>
</svg>
</li>
</ul>
</div>
</div>
CSS
/* Variables */
:root {
--bodybg: black;
--main: #444444;
--secondary: #33228f;
}
/* Code Block styles 143px by 198px */
div.codedoodle-block {
background-color: var(--bodybg, black);
margin: 3rem auto;
padding: 1rem;
width: 429px;
height: 594px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-radius: .5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
background-image: linear-gradient(black 14%, #cab676 11%);
}
div.codedoodle-block h1, div.codedoodle-block h2, div.codedoodle-block h3, div.codedoodle-block h4, div.codedoodle-block h5, div.codedoodle-block h6 {
margin: 0 auto;
}
.mega-drive-top-text {
width: 100%;
}
.mega-drive-top-text:after {
content: '';
float:none;
clear: both;
}
.english-txt {
font-size: 1rem;
color: blue;
text-shadow: 1px 1px 0 white, 0 1px 0 white, 1px 0 white, -1px 0 white, -1px -1px white, 0 -1px white;
float: left;
font-size: 1.25rem;
}
.japanese-txt {
font-size: 1rem;
color: rgb(58, 120, 255);
text-shadow: 1px 1px 0 white, 0 1px 0 white, 1px 0 white, -1px 0 white, -1px -1px white, 0 -1px white;
float: right;
font-size: 1.25rem;
}
.codedoodle-block .eng-game-name {
color: white;
text-transform: uppercase;
font-size: 4rem;
text-align: center;
transform: scaleY(1.5);
margin-bottom: 3rem;
}
.eng-subhead {
font-size: .75rem;
display: block;
color: white;
}
.jpn-game-name {
text-align: center;
color: yellow;
text-shadow: 3px 3px 0 black;
}
.jpn-subhead {
font-size: .8em;
color: white;
text-shadow: 3px 3px 0 black;
margin-left: 1rem;
}
.stretch {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-content: center;
font-size: .75rem;
}
.cartridge-box-etc {
display: flex;
flex-direction: row;
list-style-type: none;
padding: 0;
margin: 0;
}
.cartridge-box-etc li {
margin-right: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.cartridge-box-etc li:last-of-type {
margin-right: 0;
margin-left: 0;
flex-grow: 1;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.player-count {
text-transform: uppercase;
background-color: black;
color: rgb(58, 120, 255);
border-radius: .5rem;
padding: .25rem;
text-align: center;
border: solid 3px white;
}
.player-count span {
display: block;
font-size: 1.5rem;
font-weight: bold;
color: black;
background-color: rgb(58, 120, 255);
}
.game-type {
text-transform: uppercase;
background-color: black;
color: yellow;
border-radius: .5rem;
padding: .25rem;
text-align: center;
border: solid 3px white;
}
.extra-feature {
text-transform: uppercase;
background-color: salmon;
color: black;
border-radius: .5rem;
padding: .25rem;
text-align: center;
border: solid 3px white;
max-width: 4.5rem;
font-weight: bold;
flex-grow: 1;
align-items: flex-end;
}
.sega-logo svg{
max-width: 120px;
max-height: 40px;
}
.screen-reader-text {
color: transparent;
position: absolute;
top: 0;
left: -10000px;
}