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 { 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'
|
||||
|
||||
|
|
|
|||
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 { 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()
|
|||
|
||||
<template lang="pug">
|
||||
.template.markdown
|
||||
embedable-content(
|
||||
EmbedableContent(
|
||||
v-if='content'
|
||||
:content='content'
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue