refactor(11): putting index.html into scalatags

This commit is contained in:
efim 2023-06-26 10:35:08 +00:00
parent 05cdea56de
commit 5294516707
3 changed files with 57 additions and 56 deletions

View File

@ -1,50 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Single Price Grid Component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
Join our community
30-day, hassle-free money back guarantee
Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills.
Monthly Subscription
&dollar;29 per month
Full access for less than &dollar;1 a day
Sign Up
Why Us
Tutorials by industry experts
Peer &amp; expert code review
Coding exercises
Access to our GitHub repos
Community forum
Flashcard decks
New videos every week
<footer>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</p>
</footer>
</body>
</html>

View File

@ -1,3 +1,12 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45% 44%);
}

View File

@ -4,25 +4,67 @@ import scalatags.Text.all._
import scalatags.Text.tags2 import scalatags.Text.tags2
object Page { object Page {
val markdown = doctype("html")( lazy val markdown = doctype("html")(
html( html(
lang := "en", lang := "en",
head( head(
meta(charset := "UTF-8"), meta(charset := "UTF-8"),
meta( meta(
name := "viewport", name := "viewport",
content := "width=device-width, initial-scale=1.0", content := "width=device-width, initial-scale=1.0"
), ),
tags2.title("Frontend Mentor | Single Price Grid Component"), tags2.title("Frontend Mentor | Single Price Grid Component"),
link(rel := "icon", `type` := "image/png", href := "/public/images/favicon-32x32.png" ), link(
rel := "icon",
`type` := "image/png",
href := "/public/images/favicon-32x32.png"
),
link(rel := "stylesheet", href := "/dist/output.css") link(rel := "stylesheet", href := "/dist/output.css")
), ),
body( body(
cls := "bg-blue-100", cls := "bg-blue-100",
h1( h1(cls := "text-3xl", "Welcome to the future"),
cls := "text-3xl", """
"Welcome to the future") Join our community
30-day, hassle-free money back guarantee
Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills.
Monthly Subscription
&dollar;29 per month
Full access for less than &dollar;1 a day
Sign Up
Why Us
Tutorials by industry experts
Peer &amp; expert code review
Coding exercises
Access to our GitHub repos
Community forum
Flashcard decks
New videos every week
""",
footerMarkup
) )
) )
) )
lazy val footerMarkup = footer(
p(
cls := "attribution",
"Challenge by ",
a(
href := "https://www.frontendmentor.io?ref=challenge",
target := "_blank",
"Frontend Mentor. "
),
"Coded by ", a(href := "#", "Your Name Here"))
)
} }