[wip] Create cropped version of Globe2?
Probably not ideal as the canvas is still bigger, mostly styling for now
This commit is contained in:
@@ -110,7 +110,9 @@
|
|||||||
on:resize={resize}
|
on:resize={resize}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="globe" bind:this={globeParentEl}>
|
<div class="globe" bind:this={globeParentEl}
|
||||||
|
class:is-cropped={type === 'cropped'}
|
||||||
|
>
|
||||||
<div class="globe__inner">
|
<div class="globe__inner">
|
||||||
<div class="globe__canvas" bind:this={globeEl} />
|
<div class="globe__canvas" bind:this={globeEl} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -241,12 +241,17 @@
|
|||||||
/*
|
/*
|
||||||
** States and Variants
|
** States and Variants
|
||||||
*/
|
*/
|
||||||
|
// Cropped version
|
||||||
|
&.is-cropped {
|
||||||
|
overflow: hidden;
|
||||||
|
height: clamp(300px, 30vw, 500px);
|
||||||
|
}
|
||||||
|
|
||||||
// When dragging
|
// When dragging
|
||||||
:global(.is-grabbing) {
|
:global(.is-grabbing) {
|
||||||
cursor: grabbing;
|
cursor: grabbing;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Tweakpane
|
// Tweakpane
|
||||||
:global(.tp-rotv) {
|
:global(.tp-rotv) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -119,15 +119,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.credits) {
|
|
||||||
// Globe
|
|
||||||
:global(.globe) {
|
|
||||||
:global(*) {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
:global(canvas) {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -60,7 +60,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Globe
|
// Globe
|
||||||
:global(.subscribe .globe-cropped) {
|
:global(.subscribe .globe) {
|
||||||
margin-top: 96px;
|
margin-top: 96px;
|
||||||
|
|
||||||
@include bp (sm) {
|
@include bp (sm) {
|
||||||
|
|||||||
Reference in New Issue
Block a user