Quick Post Prototype
I wanted to give myself a 30 to 45 minute challenge today and see what I could come up with in terms of a layout for a post. It’s not particular good, but it really made me want some ramen. Unfortunately I can’t go out and get the good kind right now, so I’ll have to stick with a instant Cup Noodle style cup of ramen from Seiyu.
Ramen is MORE than instant noodles
If the only ramen you have tried is Top Ramen1, Maruchan Ramen2, or Nissin's Cup Noodle3, you're missing out some seriously delicious noodles. Don't get me wrong, they're not that bad, but if you're looking for ramen that is turned well past 11, try Japanese ramen from a proper ramen restaurant. You can try ramen with differing thickness and chewiness of noodles, an amazing assortment of broths and flavors, and there are plenty of tastebud tingling toppings for ramen as well.
View the code:
HTML and JS
<div class="code-block">
<p class="screen-reader-text"><a href="#content">Jump to content</a></p>
<article class="grid">
<header class="header-background">
<h2 class="header-title">Ramen is <em>MORE</em> than instant noodles</h2>
</header>
<section class="article-body">
<div class="article-columns">
<p>If the only ramen you have tried is <em>Top Ramen<sup>1</sup></em>, <em>Maruchan Ramen<sup>2</sup></em>, or <em>Nissin's Cup Noodle<sup>3</sup></em>, you're missing out some seriously delicious noodles. Don't get me wrong, they're not that bad, but if you're looking for ramen that is turned well past 11, try Japanese ramen from a proper ramen restaurant. You can try ramen with differing thickness and chewiness of noodles, an amazing assortment of broths and flavors, and there are plenty of tastebud tingling toppings for ramen as well.</p>
</div>
</section>
<aside class="article-related">
<h3>Other Tasty Dishes and Treats From Japan</h3>
<ul>
<li><a class="related-link" href="https://en.wikipedia.org/wiki/Katsudon">katsudon</a></li>
<li><a class="related-link" href="https://en.wikipedia.org/wiki/Okonomiyaki">okonomiyaki</a></li>
<li><a class="related-link" href="https://en.wikipedia.org/wiki/Sukiyaki">sukiyaki</a></li>
<li><a class="related-link" href="https://en.wikipedia.org/wiki/Karaage">karaage</a></li>
<li><a class="related-link" href="https://en.wikipedia.org/wiki/Dorayaki">dorayaki</a></li>
<li><a class="related-link" href="https://en.wikipedia.org/wiki/Manj%C5%AB">manjū</a></li>
<li><a class="related-link" href="https://en.wikipedia.org/wiki/Dango">dango</a></li>
</ul>
</aside>
<footer class="article-footer">
<h3>Footnotes</h3>
<ol>
<li><a href="https://www.nissinfoods.com/products/top-ramen-noodles">Top Ramen</a> isn't too bad.</li>
<li><a href="https://www.maruchan.com/products/ramen/">Maruchan Ramen</a> is pretty good. I'm a fan of the chicken and beef flavored varieties.</li>
<li><a href="https://www.nissinfoods.com/products/cup-noodles">Cup Noodles</a> are not very good in the United States, but they're pretty tasty in Japan.</li>
</ol>
</footer>
</article>
</div>CSS
/* Basic reset */
html { box-sizing: border-box; z-index: 0; }
html * { box-sizing: inherit; }
body {margin: 0; padding: 0;}
.code-block p, .code-block ul, .code-block ol {
font-family: Georgia, 'Times New Roman', Times, serif;
margin-top: .25rem;
line-height: 1.5;
max-width: 60ch;
list-style-top: initial;
}
.code-block ul {
list-style: disc;
padding-left: 1rem;
}
.code-block ol {
list-style: number;
padding-left: 1rem;
}
.code-block h3, .code-block h4 {
margin-top: 0;
}
/* Code-block mock-body styles */
.code-block {
max-width: 60em;
padding: 1em;
margin: 0 auto;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: #0c0b06;
}
/* Styles for screen reader elements */
.screen-reader-text {
height: 0;
width: 0;
margin:0;
margin-left: -1000px;
color: transparent;
}
/* Modules */
.header-background {
background: url(https://jeremycaudle.com/ygg/resources/kinugasatonkotsuramen.jpeg);
background-size: cover;
background-position: center center;
padding: 5rem 0;
text-align: center;
}
.header-title {
color: #f7efd5;
text-shadow: 3px 3px .5rem rgba(0, 0, 0, 0.5);
font-size: 2.5rem;
}
.article-related {
padding: 1rem;
color: #f4cd8b;
border-radius: 1rem;
background-color: rgba(160, 81, 45, 0.75);
margin-bottom: 2rem;
}
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content;
gap: 1rem;
}
@media (min-width: 30em) {
.grid {
grid-template-columns: 2fr 1fr;
}
.header-background {
grid-column: 1 / span 2;
}
.article-body {
padding: .25rem 0;
place-self: center;
}
.article-related {
grid-column: 2 / span 1;
margin-bottom: 0;
}
}
}
/* Theme */
a {
color: #0c0b06;
}
a:hover, a:focus {
color: #445820;
}
a:visited, a:active {
color: #2f3e0d;
}
.related-link {
color: #f4cd8b;
}
.related-link:hover, .related-link:focus {
color: #ffdea4;
}
.related-link:visited, .related-link:active {
color: #d2ab69;
}