Split up app.scss into styles directory
This commit is contained in:
Dallas Hoffman
parent
ea345e6e61
commit
329e7ce4d4
178
src/app.scss
178
src/app.scss
|
|
@ -1,178 +0,0 @@
|
||||||
@use '@picocss/pico/scss/pico' with (
|
|
||||||
$enable-responsive-typography: false,
|
|
||||||
$enable-responsive-spacings: false,
|
|
||||||
$primary-hue: 212
|
|
||||||
);
|
|
||||||
@use 'bytemd/dist/index.css';
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--font-family: 'M PLUS Rounded 1c', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu',
|
|
||||||
'Cantarell', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
||||||
'Noto Color Emoji';
|
|
||||||
--form-element-spacing-vertical: 0.3rem;
|
|
||||||
--form-element-spacing-horizontal: 0.45rem;
|
|
||||||
--neutral-color: hsl(205 30% 85%);
|
|
||||||
--code-color: hsl(205 30% 30%);
|
|
||||||
--secondary-alt: hsl(205, 15%, 27%);
|
|
||||||
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
||||||
accent-color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme='light'],
|
|
||||||
:root:not([data-theme='dark']) {
|
|
||||||
--background-color: hsl(202 18% 93%);
|
|
||||||
--code-color: hsl(205 30% 30%);
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
min-height: 100vh;
|
|
||||||
min-height: 100dvh;
|
|
||||||
background-image: url('/favicon.svg');
|
|
||||||
background-color: var(--card-sectionning-background-color);
|
|
||||||
background-size: min(20vw, 150px);
|
|
||||||
background-position: center center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
|
|
||||||
&[data-theme] {
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.modal-is-open {
|
|
||||||
scrollbar-gutter: stable;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--background-color);
|
|
||||||
|
|
||||||
html[data-theme] & {
|
|
||||||
min-height: 100vh;
|
|
||||||
min-height: 100dvh;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:has(.bytemd-fullscreen) {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
--typography-spacing-vertical: 0.3rem;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
--typography-spacing-vertical: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
[role='link'] {
|
|
||||||
--color: hsl(240, 85%, 54%);
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
touch-action: manipulation;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border-top: 1px solid var(--form-element-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul > li {
|
|
||||||
list-style: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol > li {
|
|
||||||
list-style: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bytemd {
|
|
||||||
--editor-bg: hsl(0 0% 100% / 0.1);
|
|
||||||
--editor-text: black;
|
|
||||||
--editor-border: hsl(0 0% 0% / 0.3);
|
|
||||||
font-family: var(--font-family);
|
|
||||||
height: 100%;
|
|
||||||
color-scheme: light;
|
|
||||||
color: var(--editor-text);
|
|
||||||
background-color: var(--editor-bg);
|
|
||||||
border-color: var(--editor-bg);
|
|
||||||
border-inline: none;
|
|
||||||
|
|
||||||
&.bytemd-fullscreen {
|
|
||||||
--editor-bg: var(--note-color, hsl(0 0% 100%));
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bytemd-toolbar {
|
|
||||||
background-color: var(--editor-bg);
|
|
||||||
border-color: var(--editor-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bytemd-toolbar-icon:hover {
|
|
||||||
background-color: hsl(0 0% 0% / 0.075);
|
|
||||||
}
|
|
||||||
|
|
||||||
.CodeMirror {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--editor-text);
|
|
||||||
background-color: var(--editor-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bytemd-status {
|
|
||||||
color: var(--editor-text);
|
|
||||||
border-color: var(--editor-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bytemd-split,
|
|
||||||
.bytemd-sidebar {
|
|
||||||
border-color: var(--editor-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bytemd-sidebar ul {
|
|
||||||
color: var(--editor-text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bytemd-split .bytemd-preview {
|
|
||||||
border-color: var(--editor-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tippy-box {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: var(--tooltip-color);
|
|
||||||
background-color: var(--tooltip-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tippy-content {
|
|
||||||
line-height: 1;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tippy-arrow {
|
|
||||||
color: var(--tooltip-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-theme='dark'] .bytemd {
|
|
||||||
--editor-bg: hsl(0 0% 0% / 0.075);
|
|
||||||
color-scheme: dark;
|
|
||||||
|
|
||||||
&.bytemd-fullscreen {
|
|
||||||
--editor-bg: var(--note-color, hsl(0 0% 80%));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bytemd {
|
|
||||||
.CodeMirror {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
import '../app.scss';
|
import '$styles/index.scss';
|
||||||
export const ssr = false;
|
export const ssr = false;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
@use 'bytemd/dist/index.css';
|
||||||
|
|
||||||
|
.bytemd {
|
||||||
|
--editor-bg: hsl(0 0% 100% / 0.1);
|
||||||
|
--editor-text: black;
|
||||||
|
--editor-border: hsl(0 0% 0% / 0.3);
|
||||||
|
font-family: var(--font-family);
|
||||||
|
height: 100%;
|
||||||
|
color-scheme: light;
|
||||||
|
color: var(--editor-text);
|
||||||
|
background-color: var(--editor-bg);
|
||||||
|
border-color: var(--editor-bg);
|
||||||
|
border-inline: none;
|
||||||
|
|
||||||
|
&.bytemd-fullscreen {
|
||||||
|
--editor-bg: var(--note-color, hsl(0 0% 100%));
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bytemd-toolbar {
|
||||||
|
background-color: var(--editor-bg);
|
||||||
|
border-color: var(--editor-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bytemd-toolbar-icon:hover {
|
||||||
|
background-color: hsl(0 0% 0% / 0.075);
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--editor-text);
|
||||||
|
background-color: var(--editor-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bytemd-status {
|
||||||
|
color: var(--editor-text);
|
||||||
|
border-color: var(--editor-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bytemd-split,
|
||||||
|
.bytemd-sidebar {
|
||||||
|
border-color: var(--editor-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bytemd-sidebar ul {
|
||||||
|
color: var(--editor-text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bytemd-split .bytemd-preview {
|
||||||
|
border-color: var(--editor-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tippy-box {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--tooltip-color);
|
||||||
|
background-color: var(--tooltip-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tippy-content {
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tippy-arrow {
|
||||||
|
color: var(--tooltip-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-theme='dark'] .bytemd {
|
||||||
|
--editor-bg: hsl(0 0% 0% / 0.075);
|
||||||
|
color-scheme: dark;
|
||||||
|
|
||||||
|
&.bytemd-fullscreen {
|
||||||
|
--editor-bg: var(--note-color, hsl(0 0% 80%));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body:has(.bytemd-fullscreen) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bytemd {
|
||||||
|
.CodeMirror {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
@use 'pico';
|
||||||
|
@use 'bytemd';
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--font-family: 'M PLUS Rounded 1c', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu',
|
||||||
|
'Cantarell', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||||
|
'Noto Color Emoji';
|
||||||
|
--form-element-spacing-vertical: 0.3rem;
|
||||||
|
--form-element-spacing-horizontal: 0.45rem;
|
||||||
|
--neutral-color: hsl(205 30% 85%);
|
||||||
|
--code-color: hsl(205 30% 30%);
|
||||||
|
--secondary-alt: hsl(205, 15%, 27%);
|
||||||
|
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||||
|
accent-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme='light'],
|
||||||
|
:root:not([data-theme='dark']) {
|
||||||
|
--background-color: hsl(202 18% 93%);
|
||||||
|
--code-color: hsl(205 30% 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
min-height: 100vh;
|
||||||
|
min-height: 100dvh;
|
||||||
|
background-image: url('/favicon.svg');
|
||||||
|
background-color: var(--card-sectionning-background-color);
|
||||||
|
background-size: min(20vw, 150px);
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
&[data-theme] {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
|
||||||
|
html[data-theme] & {
|
||||||
|
min-height: 100vh;
|
||||||
|
min-height: 100dvh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
--typography-spacing-vertical: 0.3rem;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
--typography-spacing-vertical: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
[role='link'] {
|
||||||
|
--color: hsl(240, 85%, 54%);
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border-top: 1px solid var(--form-element-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul > li {
|
||||||
|
list-style: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol > li {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
@use '@picocss/pico/scss/pico' with (
|
||||||
|
$enable-responsive-typography: false,
|
||||||
|
$enable-responsive-spacings: false,
|
||||||
|
$primary-hue: 212
|
||||||
|
);
|
||||||
|
|
||||||
|
html.modal-is-open {
|
||||||
|
scrollbar-gutter: stable;
|
||||||
|
}
|
||||||
|
|
@ -9,6 +9,7 @@ const config = {
|
||||||
fallback: 'index.html',
|
fallback: 'index.html',
|
||||||
}),
|
}),
|
||||||
alias: {
|
alias: {
|
||||||
|
$styles: 'src/styles/*',
|
||||||
$icon: 'src/assets/fontawesome/light/*',
|
$icon: 'src/assets/fontawesome/light/*',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue