Currently, my username is displayed as an ASCII art banner/header and I am looking to enhance its responsiveness. Instead of relying solely on media queries, I am exploring the possibility of making it scale within a CSS grid container. This approach would not only reduce code bloat but also make maintenance easier.
Here are the methods I have experimented with:
widthusingmin(),max(),clamp(), andcalc()functions incorporating various values of vw and vh.widthwith just a value in vw, based on suggestions from other sources.font-sizewith percentages inmin(),max(),clamp(), andcalc()functions.white-space: pre-wrap;white-space: pre-line;word-wrap: break-word;
white-space: pre-wrap; and white-space: pre-line; somewhat work but they disrupt the appearance of the ASCII art.
Despite trying these approaches, I have been unable to achieve proper scaling for my username.
Below is my current code snippet:
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 7.25rem auto 5rem;
grid-template-areas: "header header" "main sidebar" "footer footer";
min-height: 100vh;
}
header {
grid-area: header;
}
header pre {
display: grid;
justify-content: center;
align-content: center;
text-align: center;
font-size: 70%;
}
@media only screen and (max-device-width: 700px) {
body {
grid-template-rows: 6rem auto 5rem;
}
header {
font-size: 55%;
}
}<header>
<pre>
___ __ ________ ___ _________ ________ _____ ______ ________ _______ ________
|\ \ |\ \ |\ __ \ |\ \ |\___ ___\|\ __ \ |\ _ \ _ \ |\ ____\ |\ ___ \ |\ ___ \
\ \ \ \ \ \\ \ \|\ \\ \ \ \|___ \ \_|\ \ \|\ \\ \ \\\__\ \ \\ \ \___|_\ \ __/| \ \ \\ \ \
\ \ \ __\ \ \\ \ __ \\ \ \ \ \ \ \ \ \\\ \\ \ \\|__| \ \\ \_____ \\ \ \_|/__\ \ \\ \ \
\ \ \|\__\_\ \\ \ \ \ \\ \ \____ \ \ \ \ \ \\\ \\ \ \ \ \ \\|____|\ \\ \ \_|\ \\ \ \\ \ \
\ \____________\\ \__\ \__\\ \_______\\ \__\ \ \_______\\ \__\ \ \__\ ____\_\ \\ \_______\\ \__\\ \__\
\|____________| \|__|\|__ \|_______| \|__| \|_______ \|__| \|__||\_________\\|_______| \|__| \|__|
\|_________
</pre>
</header>I have implemented two additional media queries to improve mobile-friendliness and adjusted the font size of the header to scale accordingly. However, I am interested in exploring whether the header grid container/box can enforce scaling constraints on the ASCII art tag as the screen size decreases.
Thank you for taking the time to review my query!