Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <script setup lang="ts">
interface Props {
showText?: boolean
iconSize?: number
textSize?: number
gap?: number
}
withDefaults(defineProps<Props>(), {
showText: true,
iconSize: 32,
textSize: 22,
gap: 10,
})
</script>
<template>
<div class="restflow-logo">
<svg :width="iconSize" :height="iconSize" viewBox="115 125 105 105" class="logo-icon">
<!-- Head node only -->
<circle cx="167" cy="176.67" fill="currentColor" r="45" stroke="currentColor" stroke-width="5" class="logo-primary" />
<!-- Sunglasses -->
<rect
fill="#000000"
height="9.58"
stroke="#000000"
class="logo-sunglasses"
stroke-width="5"
transform="rotate(0.608809 175.22 150.841) matrix(0.355375 -0.208259 0.192495 0.384478 160.054 103.486)"
width="34"
x="-35.59"
y="108.31"
/>
<circle cx="163" cy="157.67" fill="#000000" r="6.32" stroke="#000000" stroke-width="5" class="logo-sunglasses" />
<circle cx="184.33" cy="145.17" fill="#000000" r="6.32" stroke="#000000" stroke-width="5" class="logo-sunglasses" />
</svg>
<div
v-if="showText"
class="logo-text"
:style="{ fontSize: `${textSize}px`, marginLeft: `${gap}px` }"
>
<span class="text-rest">Rest</span><span class="text-flow">Flow</span>
</div>
</div>
</template>
<style lang="scss" scoped>
.restflow-logo {
display: flex;
align-items: center;
user-select: none;
}
.logo-icon {
flex-shrink: 0;
}
.logo-text {
font-weight: 600;
letter-spacing: var(--rf-letter-spacing-tight);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.text-rest {
color: var(--rf-color-primary);
}
.text-flow {
color: var(--rf-color-text-primary);
}
.logo-icon {
.logo-primary {
color: var(--rf-color-primary);
}
}
</style>
|