diff --git a/src/app/components/splash/splash.component.scss b/src/app/components/splash/splash.component.scss index 847b894..d0c7ad5 100644 --- a/src/app/components/splash/splash.component.scss +++ b/src/app/components/splash/splash.component.scss @@ -24,6 +24,47 @@ font-size: x-large; } +.info code { + display: inline-block; + white-space: nowrap; + font-size: inherit; +} + +/* Desktop styles */ +@media screen and (min-width: 769px) { + .info { + padding: 1rem; + text-align: center; + } + + .info code { + max-width: 90%; + margin: 0 auto; + } +} + +/* Tablet and mobile styles */ +@media screen and (max-width: 768px) { + .info { + font-size: large; + padding: 0.5rem; + } + + .info code { + white-space: pre-wrap; + word-wrap: break-word; + font-size: 0.9em; + } +} + +/* Very small screens */ +@media screen and (max-width: 480px) { + .info { + font-size: medium; + padding: 0.25rem; + } +} + .card { max-width: 1024px; margin: 0 auto; @@ -33,4 +74,4 @@ .pi-star-fill { color: gold; -} \ No newline at end of file +}