public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

fix: move device notice under section cards on landing page

Browse Source
This commit is contained in:
Michael Czechowski
2026-01-16 15:26:10 +01:00
parent c91e8d6f32
commit 857ae9c3ef
2 changed files with 3 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/index.html
View File

@@ -169,6 +169,9 @@
<span class="section-card-progress" id="tailwind-progress"></span> <span class="section-card-progress" id="tailwind-progress"></span>
</a> </a>
</div> </div>
<p class="device-notice" data-i18n-html="deviceNotice">
<strong>Best on desktop or tablet (landscape).</strong> Mobile works, but larger screens make coding easier.
</p>
</section> </section>
<section class="coming-soon"> <section class="coming-soon">
@@ -214,12 +217,6 @@
</div> </div>
</section> </section>
<section class="device-notice">
<p data-i18n-html="deviceNotice">
<strong>Best on desktop or tablet (landscape).</strong> Mobile works, but larger screens make coding easier.
</p>
</section>
<section class="landing-cta"> <section class="landing-cta">
<h2 data-i18n="landingCtaTitle">Start Learning Today</h2> <h2 data-i18n="landingCtaTitle">Start Learning Today</h2>
<a href="#welcome/0" class="cta-button" data-i18n="landingCtaButton">Let's get crispy!</a> <a href="#welcome/0" class="cta-button" data-i18n="landingCtaButton">Let's get crispy!</a>

6
src/main.css
View File

@@ -2388,17 +2388,11 @@ input:checked + .toggle-slider::before {
.device-notice { .device-notice {
margin-top: var(--spacing-lg); margin-top: var(--spacing-lg);
text-align: center; text-align: center;
padding: 1rem;
}
.device-notice p {
display: inline-block;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, rgba(145, 99, 184, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1)); background: linear-gradient(135deg, rgba(145, 99, 184, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
color: var(--light-text); color: var(--light-text);
font-size: 0.9rem; font-size: 0.9rem;
margin: 0;
} }
.device-notice strong { .device-notice strong {