From 0c52ea0bdd415b31d802009cabe7ac0f3de14d7b Mon Sep 17 00:00:00 2001 From: Lightling Date: Wed, 13 Mar 2024 01:09:02 -0400 Subject: [PATCH] add shared styles --- src/main.sass | 2 + src/main.ts | 6 ++- src/style.css | 0 src/styles/embed.sass | 99 ++++++++++++++++++++++++++++++++++++++++++ src/styles/mixins.scss | 87 +++++++++++++++++++++++++++++++++++++ src/styles/tag.sass | 94 +++++++++++++++++++++++++++++++++++++++ src/views/markdown.vue | 4 +- 7 files changed, 288 insertions(+), 4 deletions(-) create mode 100644 src/main.sass delete mode 100644 src/style.css create mode 100644 src/styles/embed.sass create mode 100644 src/styles/mixins.scss create mode 100644 src/styles/tag.sass diff --git a/src/main.sass b/src/main.sass new file mode 100644 index 0000000..d181b0c --- /dev/null +++ b/src/main.sass @@ -0,0 +1,2 @@ +@import 'normalize.css' +@import './styles/embed.sass' diff --git a/src/main.ts b/src/main.ts index bd62aec..a147521 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,8 +1,10 @@ +import { createPinia } from 'pinia' import { type RouteRecordRaw } from 'vue-router' import { ViteSSG } from 'vite-ssg' -import './style.css' + import main from './main.vue' -import { createPinia } from 'pinia' +import './main.sass' + import { createRoutes, useRouteStore } from './routes' import { routes as appRoutes, type RouteDefinition } from 'content/routes.js' diff --git a/src/style.css b/src/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/styles/embed.sass b/src/styles/embed.sass new file mode 100644 index 0000000..37f878b --- /dev/null +++ b/src/styles/embed.sass @@ -0,0 +1,99 @@ +@import './mixins.scss' +@import './tag.sass' + +#modal-outlet + position: fixed + top: 1em + left: 1em + bottom: 1em + right: 1em + z-index: 99 + &::before + content: '' + position: absolute + top: -1em + left: -1em + bottom: -1em + right: -1em + background: var(--theme-modal-overlay) + z-index: -1 + &[state="closed"] + opacity: 0 + pointer-events: none + .container + width: 100% + height: 100% + @include themeColors(var(--brand-champagne-pink), var(--brand-dark-purple)) + .close + height: 2em + cursor: pointer + margin-left: auto + .content + width: 100% + height: calc(100% - 2em) + overflow: scroll + img + margin: auto + display: block + max-width: calc(100vw - 2em) + max-height: calc(100vh - 4em) + +.embed + video, + iframe, + object + border: none + .image-wrapper + display: flex + img + cursor: pointer + max-width: 100% + max-height: 100% + width: auto + height: auto + margin: auto + +details + summary + cursor: pointer + +details.embed + summary + display: block + position: relative + padding-left: 1em + &::before + @include svgMask('/assets/icons/triangle.svg', contain) + content: "" + display: block + position: absolute + top: 0 + left: 0 + width: 1em + height: 1em + background-color: var(--theme-body-fg) + transform: rotate(90deg) + animation-duration: var(--theme-transition-duration) + animation-timing-function: var(--theme-transition-function) +details.embed[open=""] + summary + &::before + transform: rotate(180deg) + +details.embed.closing + summary + &::before + animation-name: details-arrow + animation-direction: reverse + +details.embed.opening + summary + &::before + animation-name: details-arrow + animation-direction: normal + +@keyframes details-arrow + 0% + transform: rotate(90deg) + 100% + transform: rotate(180deg) diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss new file mode 100644 index 0000000..29e21e2 --- /dev/null +++ b/src/styles/mixins.scss @@ -0,0 +1,87 @@ +@mixin positioning( + $top: unset, + $left: unset, + $bottom: unset, + $right: unset, +) { + top: $top; + left: $left; + bottom: $bottom; + right: $right; +} + +@mixin svgMask( + $url, + $size: contain, +) { + -webkit-mask-image: url($url); + mask-image: url($url); + -webkit-mask-size: $size; + mask-size: $size; +} + +@mixin themeColors( + $bg, + $fg, + $link: $fg, +) { + background: $bg; + color: $fg; + a { + color: $link; + } +} + +@mixin autoMaxSize( + $maxHeight, + $maxWidth: $maxHeight, + $height: auto, + $width: auto, +) { + height: auto; + max-height: $maxHeight; + max-width: $maxWidth; + width: auto; +} + +@mixin size( + $height, + $width: $height, +) { + height: $height; + width: $width; +} + +@mixin transition( + $props... +) { + transition-duration: var(--theme-transition-duration); + transition-property: $props; + transition-timing-function: var(--theme-transition-function); +} + +@mixin flex( + $align: unset, + $justify: unset, + $direction: row, + $gap: 0, + $wrap: unset, +) { + align-items: $align; + display: flex; + flex-direction: $direction; + flex-wrap: $wrap; + gap: $gap; + justify-content: $justify; +} + +@mixin grid( + $columns: unset, + $rows: unset, + $gap: 0, +) { + display: grid; + grid-template-columns: $columns; + grid-template-rows: $rows; + gap: $gap; +} diff --git a/src/styles/tag.sass b/src/styles/tag.sass new file mode 100644 index 0000000..f2f21c4 --- /dev/null +++ b/src/styles/tag.sass @@ -0,0 +1,94 @@ +.tag + &.angular + background-color: #c3002f + color: #fff + &.audacity + background-color: #00c + color: #f3e517 + &.blender + background-color: #e87d0d + color: #fff + &.dx11 + background-color: #000 + color: #b7cf87 + &.dx12 + background-color: #000 + color: #29ac21 + &.electron + background-color: #2b2e3a + color: #9feaf9 + &.github + background-color: #24292f + color: #fff + &.gitlab + background-color: #e24329 + color: #fff + &.gnuimp + background-color: #847c62 + color: #fff + &.lmms + background-color: #27ab5f + color: #fff + &.monogame + background-color: #e73c00 + color: #fff + &.node + background-color: #333 + color: #6c3 + &.react + background-color: #61dafb + color: #20232a + &.unity + background-color: #4c4c4c + color: #fff + &.unreal + background-color: #1d1931 + color: #33a5f5 + &.vs + background-color: #8661c5 + color: #fff + &.vscode + background-color: #0065a9 + color: #fff + &.vue + background-color: #41b883 + color: #34495e + &.xamarin + background-color: #3498db + color: #fff + &.cs + background-color: #05930c + color: #fff + &.css + background-color: #2965f1 + color: #fff + &.cpp + background-color: #00599c + color: #fff + &.glsl + background-color: #5586a4 + color: #fff + &.hlsl + background-color: #000 + color: #fff + &.html + background-color: #f14a29 + color: #000 + &.java + background-color: #5382a1 + color: #f8981d + &.js + background-color: #f7df1e + color: #000 + &.php + background-color: #777bb3 + color: #000 + &.sass + background-color: #c69 + color: #fff + &.ts + background-color: #358ef1 + color: #faf9f8 + &.xml + background-color: #f14a29 + color: #000 diff --git a/src/views/markdown.vue b/src/views/markdown.vue index fb9e1ac..becc1a2 100644 --- a/src/views/markdown.vue +++ b/src/views/markdown.vue @@ -2,7 +2,7 @@ import { ref } from 'vue' import { useRoute } from 'vue-router' -import embedableContent from 'src/components/shared/embedable-content.vue' +import EmbedableContent from 'src/components/shared/embedable-content.vue' import { fetchAndParseMarkdown } from 'src/utilities/fetch' import { useRouteStore } from 'src/routes' @@ -21,7 +21,7 @@ init()