add shared styles
This commit is contained in:
parent
4d8d267978
commit
0c52ea0bdd
7 changed files with 288 additions and 4 deletions
2
src/main.sass
Normal file
2
src/main.sass
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import 'normalize.css'
|
||||||
|
@import './styles/embed.sass'
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
import { type RouteRecordRaw } from 'vue-router'
|
import { type RouteRecordRaw } from 'vue-router'
|
||||||
import { ViteSSG } from 'vite-ssg'
|
import { ViteSSG } from 'vite-ssg'
|
||||||
import './style.css'
|
|
||||||
import main from './main.vue'
|
import main from './main.vue'
|
||||||
import { createPinia } from 'pinia'
|
import './main.sass'
|
||||||
|
|
||||||
import { createRoutes, useRouteStore } from './routes'
|
import { createRoutes, useRouteStore } from './routes'
|
||||||
import { routes as appRoutes, type RouteDefinition } from 'content/routes.js'
|
import { routes as appRoutes, type RouteDefinition } from 'content/routes.js'
|
||||||
|
|
||||||
|
|
|
||||||
99
src/styles/embed.sass
Normal file
99
src/styles/embed.sass
Normal file
|
|
@ -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)
|
||||||
87
src/styles/mixins.scss
Normal file
87
src/styles/mixins.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
94
src/styles/tag.sass
Normal file
94
src/styles/tag.sass
Normal file
|
|
@ -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
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { useRoute } from 'vue-router'
|
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 { fetchAndParseMarkdown } from 'src/utilities/fetch'
|
||||||
import { useRouteStore } from 'src/routes'
|
import { useRouteStore } from 'src/routes'
|
||||||
|
|
@ -21,7 +21,7 @@ init()
|
||||||
|
|
||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.template.markdown
|
.template.markdown
|
||||||
embedable-content(
|
EmbedableContent(
|
||||||
v-if='content'
|
v-if='content'
|
||||||
:content='content'
|
:content='content'
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue