diff options
| author | Leonardo Bishop <me@leonardobishop.com> | 2024-10-27 02:04:29 +0000 |
|---|---|---|
| committer | Leonardo Bishop <me@leonardobishop.com> | 2024-10-27 02:04:29 +0000 |
| commit | 3cd83e084e4ab1fa06f74b83f2a2060e14dd9b10 (patch) | |
| tree | e719c59e20a9400b6ef0cac8ae70478eb94843ad /src/components/WelcomeItem.vue | |
| parent | 5e4d41d1dfeaaeca731b3c5496377214ec6e557f (diff) | |
write some shit code
Diffstat (limited to 'src/components/WelcomeItem.vue')
| -rw-r--r-- | src/components/WelcomeItem.vue | 87 |
1 files changed, 0 insertions, 87 deletions
diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index 6d7086a..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ -<template> - <div class="item"> - <i> - <slot name="icon"></slot> - </i> - <div class="details"> - <h3> - <slot name="heading"></slot> - </h3> - <slot></slot> - </div> - </div> -</template> - -<style scoped> -.item { - margin-top: 2rem; - display: flex; - position: relative; -} - -.details { - flex: 1; - margin-left: 1rem; -} - -i { - display: flex; - place-items: center; - place-content: center; - width: 32px; - height: 32px; - - color: var(--color-text); -} - -h3 { - font-size: 1.2rem; - font-weight: 500; - margin-bottom: 0.4rem; - color: var(--color-heading); -} - -@media (min-width: 1024px) { - .item { - margin-top: 0; - padding: 0.4rem 0 1rem calc(var(--section-gap) / 2); - } - - i { - top: calc(50% - 25px); - left: -26px; - position: absolute; - border: 1px solid var(--color-border); - background: var(--color-background); - border-radius: 8px; - width: 50px; - height: 50px; - } - - .item:before { - content: ' '; - border-left: 1px solid var(--color-border); - position: absolute; - left: 0; - bottom: calc(50% + 25px); - height: calc(50% - 25px); - } - - .item:after { - content: ' '; - border-left: 1px solid var(--color-border); - position: absolute; - left: 0; - top: calc(50% + 25px); - height: calc(50% - 25px); - } - - .item:first-of-type:before { - display: none; - } - - .item:last-of-type:after { - display: none; - } -} -</style> |
