efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(14): header desktop styling

This commit is contained in:
efim 2023-07-02 12:07:13 +00:00
parent a7dbfffa8e
commit 59cab44920
2 changed files with 52 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
14-rock-paper-scissors/src/main/resources/public/output.css
View File

@ -1046,27 +1046,70 @@ video {
top: 1.25rem;
}
.md\:mr-5 {
margin-right: 1.25rem;
}
.md\:h-12 {
height: 3rem;
}
.md\:h-36 {
height: 9rem;
}
.md\:h-4\/5 {
height: 80%;
}
.md\:h-\[400px\] {
height: 400px;
}
.md\:w-\[400px\] {
width: 400px;
.md\:w-1\/2 {
width: 50%;
}
.md\:w-12 {
width: 3rem;
}
.md\:rounded-xl {
border-radius: 0.75rem;
.md\:w-40 {
width: 10rem;
}
.md\:w-\[400px\] {
width: 400px;
}
.md\:rounded-lg {
border-radius: 0.5rem;
}
.md\:rounded-xl {
border-radius: 0.75rem;
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.md\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.md\:leading-\[2\.2rem\] {
line-height: 2.2rem;
}
.md\:leading-none {
line-height: 1;
}
}

10
14-rock-paper-scissors/src/main/resources/templates/index.html
View File

@ -41,19 +41,19 @@
>
<section
id="heading"
class="flex flex-row items-center w-10/12 rounded-md border-[3px] border-header-outline h-[100px]"
class="flex flex-row items-center w-10/12 rounded-md md:w-1/2 md:h-36 md:rounded-xl border-[3px] border-header-outline h-[100px]"
>
<h1
class="pl-4 text-xl font-bold leading-none text-white uppercase grow"
class="pl-4 text-xl font-bold leading-none text-white uppercase md:text-5xl grow md:leading-[2.2rem]"
>
<span class="block">rock</span> <span class="block">paper</span>
<span class="block">scissors</span>
</h1>
<h2
class="flex flex-col justify-around items-center py-2 mr-3 bg-white rounded-md w-[80px] h-[70px] text-score-text rouned-md"
class="flex flex-col justify-around items-center py-2 mr-3 bg-white rounded-md md:mr-5 md:w-40 md:h-4/5 md:rounded-lg w-[80px] h-[70px] text-score-text rouned-md"
>
<span class="text-xs uppercase">Score</span>
<span id="the-score-number" class="text-4xl font-extrabold">12</span>
<span class="text-xs uppercase md:text-xl md:leading-none">Score</span>
<span id="the-score-number" class="text-4xl font-extrabold md:text-6xl">12</span>
<script type="text/javascript">
document.body.addEventListener("updateScore", function (evt) {
let scoreElement = document.querySelector("#the-score-number");