small mobile pass

This commit is contained in:
Dan 2026-01-11 09:52:49 +00:00
parent d70ba4d33c
commit 8d13c52d18
3 changed files with 13 additions and 10 deletions

View file

@ -70,6 +70,13 @@
.preview-100 { .preview-100 {
width: 100px; width: 100px;
height: 200px; height: 200px;
@include media-down(md) {
position: absolute;
top: 10px;
right: 10px;
z-index: 900;
}
} }
.preview-200 { .preview-200 {
@ -185,12 +192,10 @@
transform: translate(var(--start-x), var(--start-y)) scale(1); transform: translate(var(--start-x), var(--start-y)) scale(1);
} }
25% { 25% {
transform: translate(var(--mid1-x), var(--mid1-y)) transform: translate(var(--mid1-x), var(--mid1-y)) scale(var(--scale1, 1.1));
scale(var(--scale1, 1.1));
} }
50% { 50% {
transform: translate(var(--mid2-x), var(--mid2-y)) transform: translate(var(--mid2-x), var(--mid2-y)) scale(var(--scale2, 0.9));
scale(var(--scale2, 0.9));
} }
75% { 75% {
transform: translate(var(--mid3-x), var(--mid3-y)) transform: translate(var(--mid3-x), var(--mid3-y))

View file

@ -811,7 +811,6 @@
width: 5px; width: 5px;
height: 100%; height: 100%;
background: linear-gradient(180deg, transparent, #0096ff, transparent); background: linear-gradient(180deg, transparent, #0096ff, transparent);
//box-shadow: 0 0 10px rgba(0, 150, 255, 0.8);
} }
// Orange line on the right // Orange line on the right
@ -824,7 +823,6 @@
width: 5px; width: 5px;
height: 100%; height: 100%;
background: linear-gradient(180deg, transparent, #ff7800, transparent); background: linear-gradient(180deg, transparent, #ff7800, transparent);
//box-shadow: 0 0 10px rgba(255, 120, 0, 0.8);
} }
@include media-down(md) { @include media-down(md) {

View file

@ -1,9 +1,9 @@
<div id="lavalamp-adoptable-app"> <div id="lavalamp-adoptable-app">
<div class="adoptable-container"> <div class="adoptable-container">
<div class="preview-section"> <div class="preview-section">
<h3>Preview</h3> <h3 class="hidden-md-down">Preview</h3>
<div class="preview-grid"> <div class="preview-grid">
<div class="preview-item"> <div class="preview-item hidden-md-down">
<div class="preview-wrapper preview-flexible"> <div class="preview-wrapper preview-flexible">
<div <div
id="lavalamp-preview-flex" id="lavalamp-preview-flex"
@ -19,9 +19,9 @@
class="lavalamp-preview-container" class="lavalamp-preview-container"
></div> ></div>
</div> </div>
<span class="preview-label">100px × 200px</span> <span class="preview-label hidden-md-down">100px × 200px</span>
</div> </div>
<div class="preview-item"> <div class="preview-item hidden-md-down">
<div class="preview-wrapper preview-200"> <div class="preview-wrapper preview-200">
<div <div
id="lavalamp-preview-200" id="lavalamp-preview-200"