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;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
}),
|
||||
alias: {
|
||||
$styles: 'src/styles/*',
|
||||
$icon: 'src/assets/fontawesome/light/*',
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue