update sizing
This commit is contained in:
nicwands
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
@@ -1,18 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Electron</title>
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
|
||||
<meta
|
||||
http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
|
||||
/>
|
||||
<script type="module" crossorigin src="./assets/index-DdUrngdf.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="./assets/index-D9ZUihqb.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
27
package-lock.json
generated
27
package-lock.json
generated
@@ -26,7 +26,6 @@
|
||||
"fecha": "^4.2.3",
|
||||
"flexsearch": "^0.8.212",
|
||||
"gsap": "^3.14.2",
|
||||
"lenis": "^1.3.17",
|
||||
"libsodium-wrappers": "^0.8.2",
|
||||
"lodash": "^4.17.23",
|
||||
"lowlight": "^3.3.0",
|
||||
@@ -6117,32 +6116,6 @@
|
||||
"integrity": "sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lenis": {
|
||||
"version": "1.3.17",
|
||||
"resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.17.tgz",
|
||||
"integrity": "sha512-k9T9rgcxne49ggJOvXCraWn5dt7u2mO+BNkhyu6yxuEnm9c092kAW5Bus5SO211zUvx7aCCEtzy9UWr0RB+oJw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/darkroomengineering"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@nuxt/kit": ">=3.0.0",
|
||||
"react": ">=17.0.0",
|
||||
"vue": ">=3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@nuxt/kit": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"vue": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/libsodium": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/libsodium/-/libsodium-0.8.2.tgz",
|
||||
|
||||
@@ -42,7 +42,6 @@
|
||||
"fecha": "^4.2.3",
|
||||
"flexsearch": "^0.8.212",
|
||||
"gsap": "^3.14.2",
|
||||
"lenis": "^1.3.17",
|
||||
"libsodium-wrappers": "^0.8.2",
|
||||
"lodash": "^4.17.23",
|
||||
"lowlight": "^3.3.0",
|
||||
|
||||
@@ -59,7 +59,7 @@ const styles = computed(() => ({
|
||||
overflow-x: clip;
|
||||
background: var(--theme-bg);
|
||||
color: var(--theme-fg);
|
||||
transition: opacity 1000ms;
|
||||
transition: opacity 400ms;
|
||||
|
||||
&:not(.fonts-ready) {
|
||||
opacity: 0;
|
||||
|
||||
@@ -77,15 +77,16 @@ const wrapper = computed(() => {
|
||||
<style lang="scss">
|
||||
.category-row {
|
||||
display: grid;
|
||||
grid-template-columns: size-vw(26px) 1fr auto;
|
||||
grid-template-columns: 26px 1fr auto;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: size-vw(5px) 0 size-vw(15px);
|
||||
padding: 8px 0 6px;
|
||||
border-bottom: 1px dashed currentColor;
|
||||
cursor: pointer;
|
||||
|
||||
.index {
|
||||
margin-top: size-vw(19px);
|
||||
margin-top: 19px;
|
||||
@include p;
|
||||
}
|
||||
.title {
|
||||
@@ -120,13 +121,6 @@ const wrapper = computed(() => {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
content: '----------------------------------------';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@include p;
|
||||
}
|
||||
&.router-link-exact-active,
|
||||
&.editable {
|
||||
cursor: default;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<nav class="nav layout-block-inner">
|
||||
<nav class="nav layout-block">
|
||||
<button @click="toggleMenu">Menu</button>
|
||||
</nav>
|
||||
</template>
|
||||
@@ -29,7 +29,7 @@ onMounted(() => {
|
||||
|
||||
<style lang="scss">
|
||||
.nav {
|
||||
padding-top: size-vw(9px);
|
||||
padding-top: 9px;
|
||||
color: var(--grey-100);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,11 +23,11 @@ const formatDate = (date) => {
|
||||
.note-row {
|
||||
grid-template-columns: auto 1fr;
|
||||
display: grid;
|
||||
gap: size-vw(20px);
|
||||
gap: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
width: size-vw(159px);
|
||||
width: calc(100% - 43.2px);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
|
||||
@@ -75,7 +75,7 @@ watch(
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: size-vw(8px);
|
||||
width: 8px;
|
||||
will-change: transform;
|
||||
border-left: 1px solid var(--grey-100);
|
||||
|
||||
@@ -85,7 +85,7 @@ watch(
|
||||
|
||||
.handle {
|
||||
width: 100%;
|
||||
height: size-vw(388px);
|
||||
height: 388px;
|
||||
background: var(--grey-100);
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div v-if="menuOpen" class="menu" ref="container">
|
||||
<Nav />
|
||||
|
||||
<div class="menu-wrap layout-block-inner">
|
||||
<div class="menu-wrap layout-block">
|
||||
<new-note class="menu-item" @noteOpened="closeMenu" />
|
||||
<router-link class="menu-item" to="/category"
|
||||
>+ New Capitulum</router-link
|
||||
@@ -60,12 +60,12 @@ const openNewCategory = () => {}
|
||||
.menu-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: size-vw(3px);
|
||||
padding-bottom: size-vw(10px);
|
||||
padding-top: 3px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.menu-item {
|
||||
display: block;
|
||||
padding: size-vw(16px) 0;
|
||||
padding: 16px 0;
|
||||
text-align: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import { inject, onBeforeUnmount } from 'vue'
|
||||
|
||||
export default (callback = () => {}, instanceId) => {
|
||||
const instanceKey = `lenis${instanceId ? `-${instanceId}` : ''}`
|
||||
const lenis = inject(instanceKey)
|
||||
|
||||
if (lenis.value) {
|
||||
lenis.value.on('scroll', callback)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => lenis.value?.off('scroll', callback))
|
||||
|
||||
return lenis
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { viewports } from '@/libs/theme'
|
||||
|
||||
const { width: wWidth, height: wHeight } = useWindowSize()
|
||||
|
||||
export default () => {
|
||||
// Desktop
|
||||
const dvw = (pixels) => {
|
||||
return (pixels / viewports.desktop.width) * wWidth.value
|
||||
}
|
||||
const dvh = (pixels) => {
|
||||
return (pixels / viewports.desktop.height) * wHeight.value
|
||||
}
|
||||
|
||||
// Mobile
|
||||
const mvw = (pixels) => {
|
||||
return (pixels / viewports.mobile.width) * wWidth.value
|
||||
}
|
||||
const mvh = (pixels) => {
|
||||
return (pixels / viewports.mobile.height) * wHeight.value
|
||||
}
|
||||
|
||||
return {
|
||||
dvw,
|
||||
dvh,
|
||||
mvw,
|
||||
mvh,
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import {
|
||||
useElementBounding,
|
||||
useIntersectionObserver,
|
||||
useWindowSize,
|
||||
} from '@vueuse/core'
|
||||
import { ref } from 'vue'
|
||||
import { mapRange, clamp } from '@/libs/math'
|
||||
import useLenis from '@/composables/useLenis'
|
||||
|
||||
const { height: wHeight } = useWindowSize()
|
||||
|
||||
export const useScrollProgress = (el, callback, entry = 0.5, exit = 0.5) => {
|
||||
const isActive = ref(true)
|
||||
const smoothProgress = ref(0)
|
||||
|
||||
const { height, top } = useElementBounding(el)
|
||||
|
||||
const isIntersected = ref(false)
|
||||
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
|
||||
isIntersected.value = isIntersecting
|
||||
})
|
||||
|
||||
useLenis(({ scroll }) => {
|
||||
if (!isActive.value) return
|
||||
if (!height.value || !wHeight.value) return
|
||||
if (!isIntersected.value) return
|
||||
|
||||
const pageTop = scroll + top.value
|
||||
|
||||
const start = pageTop - wHeight.value * entry
|
||||
const end = pageTop + height.value - wHeight.value * exit
|
||||
|
||||
let rawProgress = mapRange(start, end, scroll, 0, 1)
|
||||
rawProgress = clamp(0, rawProgress, 1)
|
||||
|
||||
smoothProgress.value += (rawProgress - smoothProgress.value) * 0.1
|
||||
callback?.(smoothProgress.value)
|
||||
})
|
||||
|
||||
const destroy = () => {
|
||||
isActive.value = false
|
||||
stop?.()
|
||||
}
|
||||
|
||||
return { destroy }
|
||||
}
|
||||
@@ -21,26 +21,9 @@ const themes = {
|
||||
},
|
||||
}
|
||||
|
||||
const breakpoints = {
|
||||
mobile: 800,
|
||||
}
|
||||
|
||||
const viewports = {
|
||||
mobile: {
|
||||
width: 200,
|
||||
height: 956,
|
||||
},
|
||||
desktop: {
|
||||
width: 354,
|
||||
height: 549,
|
||||
},
|
||||
}
|
||||
|
||||
export { colors, themes, breakpoints, viewports }
|
||||
export { colors, themes }
|
||||
|
||||
export default {
|
||||
colors,
|
||||
themes,
|
||||
breakpoints,
|
||||
viewports,
|
||||
}
|
||||
|
||||
@@ -5,19 +5,19 @@
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.3;
|
||||
font-size: size-vw(30px);
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
@mixin h1-mono {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
font-size: size-vw(22px);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
@mixin p {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
font-size: size-vw(12px);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -1,58 +1,3 @@
|
||||
@use 'sass:math';
|
||||
|
||||
/* Breakpoints */
|
||||
$mobile-breakpoint: get('breakpoints.mobile');
|
||||
|
||||
// Viewport Sizes
|
||||
$desktop-width: get('viewports.desktop.width');
|
||||
$desktop-height: get('viewports.desktop.height');
|
||||
|
||||
$mobile-width: get('viewports.mobile.width');
|
||||
$mobile-height: get('viewports.mobile.height');
|
||||
|
||||
// Breakpoint
|
||||
@mixin mobile {
|
||||
@media (max-width: #{$mobile-breakpoint * 1px - 1px}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media (min-width: #{$mobile-breakpoint * 1px}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@function mobile-vw($pixels, $base-vw: $mobile-width) {
|
||||
$px: math.div($pixels, $base-vw);
|
||||
$perc: math.div($px, 1px);
|
||||
@return calc($perc * 100vw);
|
||||
}
|
||||
|
||||
@function mobile-vh($pixels, $base-vh: $mobile-height) {
|
||||
$px: math.div($pixels, $base-vh);
|
||||
$perc: math.div($px, 1px);
|
||||
@return calc($perc * 100vh);
|
||||
}
|
||||
|
||||
@function desktop-vw($pixels, $base-vw: $desktop-width) {
|
||||
$px: math.div($pixels, $base-vw);
|
||||
$perc: math.div($px, 1px);
|
||||
@return calc($perc * 100vw);
|
||||
}
|
||||
|
||||
@function desktop-vh($pixels, $base-vh: $desktop-height) {
|
||||
$px: math.div($pixels, $base-vh);
|
||||
$perc: math.div($px, 1px);
|
||||
@return calc($perc * 100vh);
|
||||
}
|
||||
|
||||
@function size-vw($pixels, $base-vw: 354) {
|
||||
$px: math.div($pixels, $base-vw);
|
||||
$perc: math.div($px, 1px);
|
||||
@return calc($perc * 100vw);
|
||||
}
|
||||
|
||||
@function columns($columns) {
|
||||
@return calc(
|
||||
(#{$columns} * var(--layout-column-width)) +
|
||||
@@ -72,14 +17,6 @@ $mobile-height: get('viewports.mobile.height');
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fill($position: absolute) {
|
||||
position: #{$position};
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@mixin fade-on-ready($class: 'ready', $duration: 400ms) {
|
||||
opacity: 0;
|
||||
transition: opacity $duration ease;
|
||||
@@ -90,90 +27,12 @@ $mobile-height: get('viewports.mobile.height');
|
||||
}
|
||||
|
||||
// Clamp text block to number of lines
|
||||
@mixin line-clamp($lines: 3, $mobile-lines: $lines) {
|
||||
@mixin line-clamp($lines: 3) {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $lines;
|
||||
|
||||
@include mobile {
|
||||
-webkit-line-clamp: $mobile-lines;
|
||||
}
|
||||
}
|
||||
|
||||
// Flip animations
|
||||
@keyframes flip-r {
|
||||
50% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
51% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes flip-l {
|
||||
50% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
51% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes flip-d {
|
||||
50% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
51% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes flip-u {
|
||||
50% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
51% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flip-animation(
|
||||
$direction: 'r',
|
||||
$duration: 600ms,
|
||||
$easing: var(--ease-out-expo),
|
||||
$iteration-count: 1
|
||||
) {
|
||||
overflow: hidden;
|
||||
animation: flip-#{$direction} $duration $easing $iteration-count forwards;
|
||||
}
|
||||
|
||||
@mixin link-hover {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--theme-fg);
|
||||
transform-origin: left;
|
||||
transform: scaleX(0);
|
||||
transition: transform 300ms var(--ease-out-quad);
|
||||
}
|
||||
@include desktop {
|
||||
&:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin stagger-animate($stagger: 100, $num-children: 10, $base-delay: 0) {
|
||||
@@ -185,20 +44,18 @@ $mobile-height: get('viewports.mobile.height');
|
||||
}
|
||||
|
||||
@mixin hover {
|
||||
@include desktop {
|
||||
&:hover {
|
||||
@content;
|
||||
}
|
||||
&:hover {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin drop-cap() {
|
||||
font-family: var(--font-mono);
|
||||
font-size: size-vw(12px);
|
||||
font-size: 12px;
|
||||
font-weight: 400 !important;
|
||||
|
||||
&:first-child::first-letter {
|
||||
font-family: var(--font-display);
|
||||
font-size: size-vw(42px);
|
||||
font-size: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,9 +10,7 @@
|
||||
|
||||
// css classes exposed globally:
|
||||
// .layout-block: element takes the whole layout width
|
||||
// .layout-block-inner: same as .layout-block but using padding instead of margin
|
||||
// .layout-grid: extends .layout-block with grid behaviour using layout settings
|
||||
// .layout-grid-inner: same as .layout-grid but using padding instead of margin
|
||||
|
||||
@use 'sass:map';
|
||||
|
||||
@@ -20,26 +18,21 @@
|
||||
// 'variable': (mobile, desktop)
|
||||
$layout: (
|
||||
'columns-count': (
|
||||
5,
|
||||
18,
|
||||
6,
|
||||
),
|
||||
'columns-gap': (
|
||||
20px,
|
||||
20px,
|
||||
10px,
|
||||
),
|
||||
'margin': (
|
||||
30px,
|
||||
60px,
|
||||
20px,
|
||||
),
|
||||
);
|
||||
|
||||
//internal process, do not touch
|
||||
:root {
|
||||
--layout-column-count: #{list.nth(map.get($layout, 'columns-count'), 1)};
|
||||
--layout-column-gap: #{size-vw(
|
||||
list.nth(map.get($layout, 'columns-gap'), 1)
|
||||
)};
|
||||
--layout-margin: #{size-vw(list.nth(map.get($layout, 'margin'), 1))};
|
||||
--layout-column-gap: #{list.nth(map.get($layout, 'columns-gap'), 1)};
|
||||
--layout-margin: #{list.nth(map.get($layout, 'margin'), 1)};
|
||||
--layout-width: calc(100vw - (2 * var(--layout-margin)));
|
||||
--layout-column-width: calc(
|
||||
(
|
||||
@@ -54,13 +47,6 @@ $layout: (
|
||||
}
|
||||
|
||||
.layout-block {
|
||||
max-width: var(--layout-width);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-block-inner {
|
||||
padding-left: var(--layout-margin);
|
||||
padding-right: var(--layout-margin);
|
||||
width: 100%;
|
||||
@@ -73,11 +59,3 @@ $layout: (
|
||||
grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
|
||||
grid-gap: var(--layout-column-gap);
|
||||
}
|
||||
|
||||
.layout-grid-inner {
|
||||
@extend .layout-block-inner;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
|
||||
grid-gap: var(--layout-column-gap);
|
||||
}
|
||||
|
||||
@@ -10,23 +10,3 @@ html {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.lenis {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.lenis.lenis-smooth {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
.lenis.lenis-smooth [data-lenis-prevent] {
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.lenis.lenis-stopped {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lenis.lenis-scrolling iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -17,26 +17,8 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
@include desktop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.desktop-only {
|
||||
@include mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.has-scroll-smooth) {
|
||||
.hide-on-native-scroll {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.has-scroll-smooth {
|
||||
.hide-on-smooth-scroll {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,20 +64,20 @@ main.category {
|
||||
.back {
|
||||
display: block;
|
||||
opacity: 0.25;
|
||||
margin-top: size-vw(9px);
|
||||
margin-top: 9px;
|
||||
}
|
||||
.category-row {
|
||||
margin-top: size-vw(4px);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: size-vw(14px);
|
||||
margin-top: size-vw(9px);
|
||||
gap: 14px;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.new-note {
|
||||
display: block;
|
||||
margin: size-vw(50px) auto 0;
|
||||
margin: 50px auto 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<main class="create-category layout-block-inner">
|
||||
<main class="create-category layout-block">
|
||||
<category-row :index="1" editable @edited="onCategoryEdited" />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -42,17 +42,18 @@ watch(notesChangeCount, async () => {
|
||||
|
||||
<style lang="scss">
|
||||
main.directory {
|
||||
padding-top: size-vw(18px);
|
||||
padding-top: 18px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
margin: size-vw(17px) 0 size-vw(24px);
|
||||
margin: 17px 0 24px;
|
||||
@include p;
|
||||
}
|
||||
.notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: size-vw(14px);
|
||||
gap: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -120,8 +120,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
<style lang="scss">
|
||||
main.editor {
|
||||
padding-top: size-vw(8px);
|
||||
padding-bottom: size-vw(20px);
|
||||
padding-top: 8px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
h1 {
|
||||
font-weight: 700 !important;
|
||||
@@ -153,6 +153,10 @@ main.editor {
|
||||
li {
|
||||
display: list-item;
|
||||
margin-left: 1em;
|
||||
|
||||
*:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol {
|
||||
@@ -167,6 +171,9 @@ main.editor {
|
||||
}
|
||||
}
|
||||
}
|
||||
li:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
a {
|
||||
color: var(--theme-link);
|
||||
cursor: pointer;
|
||||
@@ -249,7 +256,7 @@ main.editor {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: size-vw(1px);
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
}
|
||||
}
|
||||
@@ -260,11 +267,58 @@ main.editor {
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
ul[data-type='taskList'] {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: 0;
|
||||
|
||||
> label {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 0.5rem;
|
||||
user-select: none;
|
||||
margin-bottom: 0;
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
border: 1px solid var(--grey-100);
|
||||
border-radius: 0.2em;
|
||||
|
||||
&::after {
|
||||
content: '✓';
|
||||
font-size: 1.5em;
|
||||
opacity: 0;
|
||||
}
|
||||
&:checked::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
ul[data-type='taskList'] {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-wrap {
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: size-vw(20px);
|
||||
gap: 20px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
@@ -274,7 +328,7 @@ main.editor {
|
||||
|
||||
.bubble-menu {
|
||||
display: flex;
|
||||
gap: size-vw(5px);
|
||||
gap: 5px;
|
||||
border: 1px solid var(--grey-100);
|
||||
color: var(--grey-100);
|
||||
border-radius: 0.2em;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<main class="instructions layout-block-inner">
|
||||
<main class="instructions layout-block">
|
||||
<router-link class="back-link" to="/"><- Go Back</router-link>
|
||||
|
||||
<p>
|
||||
@@ -67,8 +67,8 @@ main.instructions {
|
||||
.back-link {
|
||||
opacity: 0.25;
|
||||
display: block;
|
||||
margin-top: size-vw(9px);
|
||||
margin-bottom: size-vw(14px);
|
||||
margin-top: 9px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user