diff --git a/package-lock.json b/package-lock.json index 7710fc4..43080fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1833,6 +1833,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -2011,6 +2012,7 @@ "integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@bufbuild/protobuf": "^2.5.0", "buffer-builder": "^0.2.0", @@ -2489,6 +2491,7 @@ "integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -2563,6 +2566,7 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.25.tgz", "integrity": "sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==", "license": "MIT", + "peer": true, "dependencies": { "@vue/compiler-dom": "3.5.25", "@vue/compiler-sfc": "3.5.25", diff --git a/public/assets/css/src/_buttons.scss b/public/assets/css/src/_buttons.scss index e0f4c7e..4e0927b 100644 --- a/public/assets/css/src/_buttons.scss +++ b/public/assets/css/src/_buttons.scss @@ -1,22 +1,59 @@ -button { - cursor: pointer; - border: 1px solid var(--color-browngray-300); - color: var(--color-browngray-300); - background-color: var(--color-panel-bg); - border-radius: var(--border-radius); - padding: 0.1rem 0.3rem; +.unit-toggle{ + button:not(.spinner-btn) { + cursor: pointer; + + border: 1px solid var(--color-interface-400); + color: var(--color-interface-400); + background-color: var(--color-panel-bg); + border-radius: var(--border-radius); + padding: 0.1rem 0.3rem; + height: calc(var(--input-h)*0.75); + - &.active { - border: 1px solid #000; - color: #000; - } - - &.tab { - &.active { - background-color: #000; - color: #fff; - border: none; + &:not(.active):hover{ + background-color: var(--color-interface-100); } + + &.active { + // border: 1px solid var(--color-interface-700); + color: var(--color-interface-050); + background-color: var(--color-interface-500); + cursor: auto; + } + + } } + + +#editor-panel .tabs{ + .tab{ + color: var(--color-interface-600); + font-size: 1rem; + font-family: var(--sans-serif); + height: var(--input-h); + padding: 0 1ch; + border: 1px solid currentColor; + border-radius: calc(var(--input-h)); + font-weight: 500; + + &.active{ + background-color: var(--color-interface-400); + border-color: var(--color-interface-400); + color: var(--color-panel-bg); + } + + &:not(.active):hover{ + cursor: pointer; + background-color: var(--color-interface-100); + } + } + // .tab { + // &.active { + // background-color: var(--color-txt); + // color: #fff; + // border: none; + // } + // } +} diff --git a/public/assets/css/src/_colors.scss b/public/assets/css/src/_colors.scss new file mode 100644 index 0000000..f3996c0 --- /dev/null +++ b/public/assets/css/src/_colors.scss @@ -0,0 +1,105 @@ +:root{ + + + + + // BRONZE SUBTIL + --color-interface-050: #f5f0ed; + --color-interface-050: #f8f5f4; + --color-interface-100: #efe9e6; + --color-interface-200: #e0d5d0; + --color-interface-300: #cabbb5; + --color-interface-400: #b2a29c; + --color-interface-500: #998985; + --color-interface-600: #7f716e; + --color-interface-700: #675b58; + --color-interface-800: #5b4f4c; + --color-interface-900: #483c39; + + + --color-050: #f5f0ed; + --color-050: #f8f5f4; + --color-100: #efe9e6; + --color-200: #e0d5d0; + --color-300: #cabbb5; + --color-400: #b2a29c; + --color-500: #998985; + --color-600: #7f716e; + --color-700: #675b58; + --color-800: #5b4f4c; + --color-900: #483c39; + + + + + + // MARRON +// --color-interface-050: #fcf7f4; +// --color-interface-100: #f5eae4; +// --color-interface-200: #e9d4c8; +// --color-interface-300: #d8b7a6; +// --color-interface-400: #c39986; +// --color-interface-500: #ad826f; +// --color-interface-600: #916b5b; +// --color-interface-700: #755548; +// --color-interface-800: #5c443a; +// --color-interface-900: #46342b; + + + + + // CHAMPAGNE + // --color-interface-050: #f9f6f4; + // --color-interface-100: #f2ebe6; + // --color-interface-200: #e6d8cf; + // --color-interface-300: #d4c2b7; + // --color-interface-400: #c2ac9d; + // --color-interface-500: #ac9383; + // --color-interface-600: #927a6a; + // --color-interface-700: #776356; + // --color-interface-800: #5e4e45; + // --color-interface-900: #473a32; + + // GREY + // --color-interface-050: #f7f6f4; + // --color-interface-100: #eceae6; + // --color-interface-200: #dedbd6; + // --color-interface-300: #c9c5be; + // --color-interface-400: #b4afa7; + // --color-interface-500: #9d978f; + // --color-interface-600: #86817a; + // --color-interface-700: #6e6a63; + // --color-interface-800: #55534d; + // --color-interface-900: #3e3c37; + + +} + + + +[data-color-type="elem"]{ + --color-050: #fff4ec; + --color-100: #ffe6d6; + --color-200: #ffd1b5; + --color-300: #ffbc94; + --color-400: #ffa673; + --color-500: #ff945b; + --color-600: #ff8d54; + --color-700: #f97f46; + --color-800: #ff8a50; + --color-900: #d96a30; +} + + +[data-color-type="page"]{ + --color-050: #f4f0ff; + --color-100: #e7e1ff; + --color-200: #d4c8ff; + --color-300: #b9a8ff; + --color-400: #9f89ff; + --color-500: #866aff; + --color-600: #7a52ff; + --color-700: #7442ff; + --color-800: #7136ff; + --color-900: #5223d6; +} \ No newline at end of file diff --git a/public/assets/css/src/_fonts.scss b/public/assets/css/src/_fonts.scss new file mode 100644 index 0000000..e94ed06 --- /dev/null +++ b/public/assets/css/src/_fonts.scss @@ -0,0 +1,162 @@ +// DM Sans - Variable font (recommended) +@font-face { + font-family: 'DM Sans'; + src: url('/assets/fonts/DMSans/DMSans[opsz,wght].woff2') format('woff2-variations'); + font-weight: 100 1000; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'DM Sans'; + src: url('/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2') format('woff2-variations'); + font-weight: 100 1000; + font-style: italic; + font-display: swap; +} + +// DM Sans - Static weights (fallback) +@font-face { + font-family: 'DM Sans'; + src: url('/assets/fonts/DMSans/DMSans-Thin.woff2') format('woff2'); + font-weight: 100; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'DM Sans'; + src: url('/assets/fonts/DMSans/DMSans-ExtraLight.woff2') format('woff2'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'DM Sans'; + src: url('/assets/fonts/DMSans/DMSans-Light.woff2') format('woff2'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'DM Sans'; + src: url('/assets/fonts/DMSans/DMSans-Regular.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'DM Sans'; + src: url('/assets/fonts/DMSans/DMSans-Medium.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'DM Sans'; + src: url('/assets/fonts/DMSans/DMSans-SemiBold.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'DM Sans'; + src: url('/assets/fonts/DMSans/DMSans-Bold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'DM Sans'; + src: url('/assets/fonts/DMSans/DMSans-ExtraBold.woff2') format('woff2'); + font-weight: 800; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'DM Sans'; + src: url('/assets/fonts/DMSans/DMSans-Black.woff2') format('woff2'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +// Inconsolata - Monospace font +@font-face { + font-family: 'Inconsolata'; + src: url('/assets/fonts/Inconsolata/Inconsolata-Thin.woff2') format('woff2'); + font-weight: 100; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Inconsolata'; + src: url('/assets/fonts/Inconsolata/Inconsolata-ExtraLight.woff2') format('woff2'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Inconsolata'; + src: url('/assets/fonts/Inconsolata/Inconsolata-Light.woff2') format('woff2'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Inconsolata'; + src: url('/assets/fonts/Inconsolata/Inconsolata-Regular.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Inconsolata'; + src: url('/assets/fonts/Inconsolata/Inconsolata-Medium.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Inconsolata'; + src: url('/assets/fonts/Inconsolata/Inconsolata-SemiBold.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Inconsolata'; + src: url('/assets/fonts/Inconsolata/Inconsolata-Bold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Inconsolata'; + src: url('/assets/fonts/Inconsolata/Inconsolata-ExtraBold.woff2') format('woff2'); + font-weight: 800; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Inconsolata'; + src: url('/assets/fonts/Inconsolata/Inconsolata-Black.woff2') format('woff2'); + font-weight: 900; + font-style: normal; + font-display: swap; +} diff --git a/public/assets/css/src/_forms-section.scss b/public/assets/css/src/_forms-section.scss new file mode 100644 index 0000000..2290d07 --- /dev/null +++ b/public/assets/css/src/_forms-section.scss @@ -0,0 +1,56 @@ +.settings-section { + + margin-top: 3em; + + + // .cons + + + + h2 { + margin-bottom: var(--space); + + font-weight: 600; + font-size: 1.4rem; + // border-radius: var(--border-radius); + // height: var(--input-h); + // padding: 0 1ch; + // display: flex; + // align-items: center; + + // color: var(--color-interface-050); + // background-color: var(--color-800); + // display: inline-block; + + border-bottom: 1px solid var(--color-200); + color: var(--color-800); + +// border-bottom: 2px solid currentColor; +// margin-bottom: 2rem; + } + + .infos{ + font-size: 0.8rem; + color: var(--color-interface-400); + } + + .settings-subsection:not(:last-child) { + border-bottom: 1px solid var(--color-interface-100); + } + + .settings-subsection { + padding: var(--space-xs) 0; + + h3 { + margin-top: calc(var(--space-xs)*1.5); + margin-bottom: calc(var(--space-xs)*2); + // color: var(--color-600); + font-size: 1rem; + font-weight: 600; + + } + } +} + + + \ No newline at end of file diff --git a/public/assets/css/src/_forms.scss b/public/assets/css/src/_forms.scss index 75f67da..f687355 100644 --- a/public/assets/css/src/_forms.scss +++ b/public/assets/css/src/_forms.scss @@ -1,17 +1,132 @@ select, input[type="text"], input[type="number"] { - background-color: var(--color-browngray-300); + height: var(--input-h); + border: 1px solid var(--color-interface-200); + background-color: var(--color-interface-100); + font-family: var(--sans-serif); + font-size: 1rem; + // min-width: var(--input-w); + // width: 100%; + // padding: 0 1ch; + } +.field { + display: flex; + + // label{ + // width: var(--label-w); + // background-color: red; + // flex-grow: 3; + // } + + label { + font-weight: 600; + color: var(--color-800); + } + + + + .input-with-unit { + display: flex; + gap: 0.3rem; + + + } + + .unit-toggle { + height: var(--input-h); + display: flex; + gap: 0.3rem; + align-items: center; + } + + .input-with-color { + width: 100%; + .clr-field { + width: 100%; + display: grid; + grid-template-columns: var(--input-h); + grid-gap: 1ch; + button{ + grid-column: 1; + position: relative; + border-radius: var(--border-radius); + + } + input{ + grid-column: 2; + } + + } + } +} + + +.field{ + display: grid; + grid-template-columns: var(--label-w) 1fr; + label{ + align-self: center; + } +} + +.field-font{ + display: grid; + grid-template-columns: var(--label-w) 1fr; + grid-template-rows: var(--input-h) var(--input-h); + + select{ + width: 100%; + } + .field-checkbox{ + padding-top: var(--space-xs); + label{ + font-weight: 400; + margin-left: 0.75ch; + } + } +} + +.field-margin, .field-size{ + display: inline-grid; + width: calc(50% - 1ch); + grid-template-columns: 6.5ch var(--input-w-small) 1fr; + margin-bottom: var(--space-xs); + input{ + width: var(--input-w-small); + padding-left: 0.75ch; + } + &:nth-of-type(odd){ + margin-right: 2ch; + + } + +} + +.checkbox-field{ + margin: calc(var(--space-xs)*2) 0; + grid-template-columns: 3ch 1fr; + label{ + // font-weight: normal; + } + input{ + justify-self: left; + margin: 0; + } +} + + + + .field--view-only { opacity: 0.3; } /* Label with CSS tooltip */ .label-with-tooltip { - text-decoration: underline dotted; - text-decoration-color: var(--color-browngray-200); + text-decoration: underline dotted 1px var(--color-200); text-underline-offset: 2px; cursor: help; position: relative; @@ -23,9 +138,9 @@ input[type="number"] { left: 0; margin-bottom: 4px; padding: 0.25rem 0.5rem; - background: var(--color-browngray-700); - color: var(--color-browngray-100); - font-family: "Courier New", Courier, monospace; + background: var(--color-interface-700); + color: var(--color-interface-050); + font-family: var(--mono); font-size: 0.75rem; border-radius: 4px; white-space: nowrap; @@ -43,86 +158,127 @@ input[type="number"] { } } -.settings-section { - h2 { - border-bottom: 1px solid #000; - margin-bottom: var(--space-xs); - } - .settings-subsection:not(:last-child) { - border-bottom: 1px solid var(--color-browngray-050); - } - .settings-subsection { - padding: var(--space-xs) 0; - h3 { - margin-bottom: var(--space-xs); - } - .field { - display: flex; - label, - select { - width: 50%; - } - input { - padding: 0.1rem 0.1rem 0.1rem 0.3rem; - } - .input-with-unit { - display: flex; - gap: 0.3rem; +// INPUT NUMBER =============================================== - .unit-toggle { - display: flex; - gap: 0.3rem; - } - } - - .input-with-color { - width: 50%; - .clr-field { - display: flex; - button { - position: absolute; - transform: none; - height: 1.1rem; - top: auto; - right: auto; - cursor: pointer; - } - - input { - padding-left: 2.5rem; - width: 100%; - } - } - } - } - - &.margins { - display: flex; - flex-wrap: wrap; - row-gap: var(--space-xs); - - h3 { - width: 100%; - } - .field { - width: 50%; - - label { - width: 30%; - } - - .input-with-unit { - input { - width: 50%; - } - } - } - } - } +// Masquer les spinners natifs partout +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; } + +input[type="number"] { + -moz-appearance: textfield; +} + + +.number-input{ + position: relative; + // padding: 0 1ch!important; + input{ + padding-top: 0; + padding-bottom: 0; + } + .spinner-buttons{ + height: var(--input-h); + width: var(--input-h); + display: flex; + flex-direction: column; + position: absolute; + right: 0; + top: 0; + + button{ + height: calc(var(--input-h)*0.6); + cursor: pointer; + padding: 0; + svg path{ + fill: var(--color-interface-600); + } + &:hover{ + svg path{ + fill: var(--color-interface-900); + } + } + } + .spinner-down{ + svg{ + position: relative; + top: -2px; + } + } + + + } + +} +// Composant NumberInput avec boutons personnalisés +// .number-input { +// position: relative; +// display: flex; +// align-items: center; +// width: 100%; +// position: relative; + +// input[type="number"] { +// width: 100%; +// box-sizing: border-box; +// } + +// .spinner-buttons { +// background-color: red; +// position: absolute; +// right: 1px; +// top: 1px; +// bottom: 1px; +// display: flex; +// flex-direction: column; +// justify-content: center; +// gap: 1px; +// z-index: 10; + +// .spinner-btn { +// display: flex; +// align-items: center; +// justify-content: center; +// width: 20px; +// height: 10px; +// padding: 0; +// margin: 0; +// background-color: var(--color-interface-200); +// border: 1px solid var(--color-interface-300); +// border-radius: 2px; +// cursor: pointer; +// transition: background-color 0.15s ease; +// color: var(--color-interface-700); +// line-height: 0; + +// svg { +// width: 8px; +// height: 6px; +// display: block; +// } + +// &:hover:not(:disabled) { +// background-color: var(--color-interface-300); +// color: var(--color-interface-900); +// } + +// &:active:not(:disabled) { +// background-color: var(--color-interface-400); +// } + +// &:disabled { +// opacity: 0.3; +// cursor: not-allowed; +// } +// } +// } +// } diff --git a/public/assets/css/src/_settings-popup.scss b/public/assets/css/src/_settings-popup.scss index 797ecb3..e1d148b 100644 --- a/public/assets/css/src/_settings-popup.scss +++ b/public/assets/css/src/_settings-popup.scss @@ -60,38 +60,38 @@ } // Label with CSS tooltip -.label-with-tooltip { - text-decoration: underline dotted; - text-underline-offset: 2px; - cursor: help; - position: relative; +// .label-with-tooltip { +// text-decoration: underline dotted; +// text-underline-offset: 2px; +// cursor: help; +// position: relative; - &::after { - content: attr(data-css); - position: absolute; - bottom: 100%; - left: 0; - margin-bottom: 4px; - padding: 0.25rem 0.5rem; - background: var(--color-browngray-700, #3d3d3d); - color: var(--color-browngray-100, #f5f5f5); - font-family: "Courier New", Courier, monospace; - font-size: 0.75rem; - border-radius: 4px; - white-space: nowrap; - opacity: 0; - visibility: hidden; - transition: - opacity 0.15s ease, - visibility 0.15s ease; - z-index: 10; - } +// &::after { +// content: attr(data-css); +// position: absolute; +// bottom: 100%; +// left: 0; +// margin-bottom: 4px; +// padding: 0.25rem 0.5rem; +// background: var(--color-browngray-700, #3d3d3d); +// color: var(--color-browngray-100, #f5f5f5); +// font-family: "Courier New", Courier, monospace; +// font-size: 0.75rem; +// border-radius: 4px; +// white-space: nowrap; +// opacity: 0; +// visibility: hidden; +// transition: +// opacity 0.15s ease, +// visibility 0.15s ease; +// z-index: 10; +// } - &:hover::after { - opacity: 1; - visibility: visible; - } -} +// &:hover::after { +// opacity: 1; +// visibility: visible; +// } +// } // Inheritance lock/unlock button .inheritance-btn { diff --git a/public/assets/css/src/_text.scss b/public/assets/css/src/_text.scss index 6c537a3..c74bd60 100644 --- a/public/assets/css/src/_text.scss +++ b/public/assets/css/src/_text.scss @@ -1,15 +1,10 @@ -body, -h1, -h2, -h3, -h4, -h5, -h6, -p, -a, -input, -select, -figcaption, -label { - font-family: sans-serif; +body { + font-family: var(--sans-serif); + color: var(--color-txt); } + +// code, +// pre, +// .monospace { +// font-family: 'Inconsolata', monospace; +// } diff --git a/public/assets/css/src/_variables.scss b/public/assets/css/src/_variables.scss index e8b86eb..c550470 100644 --- a/public/assets/css/src/_variables.scss +++ b/public/assets/css/src/_variables.scss @@ -1,15 +1,37 @@ :root { - --color-panel-bg: #e8e6e5; + + + --color-browngray-050: #f5f3f0; --color-browngray-200: #d0c4ba; - --color-browngray-300: #b5a9a1; + + + + + --color-txt: var(--color-interface-800); + --color-panel-bg: var(--color-interface-050); + --color-page-highlight: #ff8a50; --color-purple: #7136ff; --border-radius: 0.2rem; --space-xs: 0.5rem; + --space-s: 1rem; + --space: 1.5rem; --curve: cubic-bezier(0.86, 0, 0.07, 1); + + --sans-serif: 'DM Sans', sans-serif; + --mono: 'Inconsolata', monospace; + + + --input-h: 26px; + --input-w: 160px; + --input-w-small: 45px; + --label-w: 18ch; + font-size: 14px; + + --panel-w: 540px; } diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 715c960..371c245 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1,3 +1,194 @@ +@font-face { + font-family: "DM Sans"; + src: url("/assets/fonts/DMSans/DMSans[opsz,wght].woff2") format("woff2-variations"); + font-weight: 100 1000; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "DM Sans"; + src: url("/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2") format("woff2-variations"); + font-weight: 100 1000; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "DM Sans"; + src: url("/assets/fonts/DMSans/DMSans-Thin.woff2") format("woff2"); + font-weight: 100; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "DM Sans"; + src: url("/assets/fonts/DMSans/DMSans-ExtraLight.woff2") format("woff2"); + font-weight: 200; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "DM Sans"; + src: url("/assets/fonts/DMSans/DMSans-Light.woff2") format("woff2"); + font-weight: 300; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "DM Sans"; + src: url("/assets/fonts/DMSans/DMSans-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "DM Sans"; + src: url("/assets/fonts/DMSans/DMSans-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "DM Sans"; + src: url("/assets/fonts/DMSans/DMSans-SemiBold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "DM Sans"; + src: url("/assets/fonts/DMSans/DMSans-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "DM Sans"; + src: url("/assets/fonts/DMSans/DMSans-ExtraBold.woff2") format("woff2"); + font-weight: 800; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "DM Sans"; + src: url("/assets/fonts/DMSans/DMSans-Black.woff2") format("woff2"); + font-weight: 900; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Inconsolata"; + src: url("/assets/fonts/Inconsolata/Inconsolata-Thin.woff2") format("woff2"); + font-weight: 100; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Inconsolata"; + src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraLight.woff2") format("woff2"); + font-weight: 200; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Inconsolata"; + src: url("/assets/fonts/Inconsolata/Inconsolata-Light.woff2") format("woff2"); + font-weight: 300; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Inconsolata"; + src: url("/assets/fonts/Inconsolata/Inconsolata-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Inconsolata"; + src: url("/assets/fonts/Inconsolata/Inconsolata-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Inconsolata"; + src: url("/assets/fonts/Inconsolata/Inconsolata-SemiBold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Inconsolata"; + src: url("/assets/fonts/Inconsolata/Inconsolata-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Inconsolata"; + src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraBold.woff2") format("woff2"); + font-weight: 800; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Inconsolata"; + src: url("/assets/fonts/Inconsolata/Inconsolata-Black.woff2") format("woff2"); + font-weight: 900; + font-style: normal; + font-display: swap; +} +:root { + --color-interface-050: #f5f0ed; + --color-interface-050: #f8f5f4; + --color-interface-100: #efe9e6; + --color-interface-200: #e0d5d0; + --color-interface-300: #cabbb5; + --color-interface-400: #b2a29c; + --color-interface-500: #998985; + --color-interface-600: #7f716e; + --color-interface-700: #675b58; + --color-interface-800: #5b4f4c; + --color-interface-900: #483c39; + --color-050: #f5f0ed; + --color-050: #f8f5f4; + --color-100: #efe9e6; + --color-200: #e0d5d0; + --color-300: #cabbb5; + --color-400: #b2a29c; + --color-500: #998985; + --color-600: #7f716e; + --color-700: #675b58; + --color-800: #5b4f4c; + --color-900: #483c39; +} + +[data-color-type=elem] { + --color-050: #fff4ec; + --color-100: #ffe6d6; + --color-200: #ffd1b5; + --color-300: #ffbc94; + --color-400: #ffa673; + --color-500: #ff945b; + --color-600: #ff8d54; + --color-700: #f97f46; + --color-800: #ff8a50; + --color-900: #d96a30; +} + +[data-color-type=page] { + --color-050: #f4f0ff; + --color-100: #e7e1ff; + --color-200: #d4c8ff; + --color-300: #b9a8ff; + --color-400: #9f89ff; + --color-500: #866aff; + --color-600: #7a52ff; + --color-700: #7442ff; + --color-800: #7136ff; + --color-900: #5223d6; +} + body, html { padding: 0; @@ -30,31 +221,30 @@ img { } :root { - --color-panel-bg: #e8e6e5; --color-browngray-050: #f5f3f0; --color-browngray-200: #d0c4ba; - --color-browngray-300: #b5a9a1; + --color-txt: var(--color-interface-800); + --color-panel-bg: var(--color-interface-050); --color-page-highlight: #ff8a50; --color-purple: #7136ff; --border-radius: 0.2rem; --space-xs: 0.5rem; + --space-s: 1rem; + --space: 1.5rem; --curve: cubic-bezier(0.86, 0, 0.07, 1); + --sans-serif: "DM Sans", sans-serif; + --mono: "Inconsolata", monospace; + --input-h: 26px; + --input-w: 160px; + --input-w-small: 45px; + --label-w: 18ch; + font-size: 14px; + --panel-w: 540px; } -body, -h1, -h2, -h3, -h4, -h5, -h6, -p, -a, -input, -select, -figcaption, -label { - font-family: sans-serif; +body { + font-family: var(--sans-serif); + color: var(--color-txt); } /* PagedJS print styles */ @@ -79,7 +269,93 @@ h2 { select, input[type=text], input[type=number] { - background-color: var(--color-browngray-300); + height: var(--input-h); + border: 1px solid var(--color-interface-200); + background-color: var(--color-interface-100); + font-family: var(--sans-serif); + font-size: 1rem; +} + +.field { + display: flex; +} +.field label { + font-weight: 600; + color: var(--color-800); +} +.field .input-with-unit { + display: flex; + gap: 0.3rem; +} +.field .unit-toggle { + height: var(--input-h); + display: flex; + gap: 0.3rem; + align-items: center; +} +.field .input-with-color { + width: 100%; +} +.field .input-with-color .clr-field { + width: 100%; + display: grid; + grid-template-columns: var(--input-h); + grid-gap: 1ch; +} +.field .input-with-color .clr-field button { + grid-column: 1; + position: relative; + border-radius: var(--border-radius); +} +.field .input-with-color .clr-field input { + grid-column: 2; +} + +.field { + display: grid; + grid-template-columns: var(--label-w) 1fr; +} +.field label { + align-self: center; +} + +.field-font { + display: grid; + grid-template-columns: var(--label-w) 1fr; + grid-template-rows: var(--input-h) var(--input-h); +} +.field-font select { + width: 100%; +} +.field-font .field-checkbox { + padding-top: var(--space-xs); +} +.field-font .field-checkbox label { + font-weight: 400; + margin-left: 0.75ch; +} + +.field-margin, .field-size { + display: inline-grid; + width: calc(50% - 1ch); + grid-template-columns: 6.5ch var(--input-w-small) 1fr; + margin-bottom: var(--space-xs); +} +.field-margin input, .field-size input { + width: var(--input-w-small); + padding-left: 0.75ch; +} +.field-margin:nth-of-type(odd), .field-size:nth-of-type(odd) { + margin-right: 2ch; +} + +.checkbox-field { + margin: calc(var(--space-xs) * 2) 0; + grid-template-columns: 3ch 1fr; +} +.checkbox-field input { + justify-self: left; + margin: 0; } .field--view-only { @@ -88,9 +364,8 @@ input[type=number] { /* Label with CSS tooltip */ .label-with-tooltip { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - text-decoration-color: var(--color-browngray-200); + -webkit-text-decoration: underline dotted 1px var(--color-200); + text-decoration: underline dotted 1px var(--color-200); text-underline-offset: 2px; cursor: help; position: relative; @@ -102,9 +377,9 @@ input[type=number] { left: 0; margin-bottom: 4px; padding: 0.25rem 0.5rem; - background: var(--color-browngray-700); - color: var(--color-browngray-100); - font-family: "Courier New", Courier, monospace; + background: var(--color-interface-700); + color: var(--color-interface-050); + font-family: var(--mono); font-size: 0.75rem; border-radius: 4px; white-space: nowrap; @@ -118,89 +393,112 @@ input[type=number] { visibility: visible; } +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; +} + +input[type=number] { + -moz-appearance: textfield; +} + +.number-input { + position: relative; +} +.number-input input { + padding-top: 0; + padding-bottom: 0; +} +.number-input .spinner-buttons { + height: var(--input-h); + width: var(--input-h); + display: flex; + flex-direction: column; + position: absolute; + right: 0; + top: 0; +} +.number-input .spinner-buttons button { + height: calc(var(--input-h) * 0.6); + cursor: pointer; + padding: 0; +} +.number-input .spinner-buttons button svg path { + fill: var(--color-interface-600); +} +.number-input .spinner-buttons button:hover svg path { + fill: var(--color-interface-900); +} +.number-input .spinner-buttons .spinner-down svg { + position: relative; + top: -2px; +} + +.settings-section { + margin-top: 3em; +} .settings-section h2 { - border-bottom: 1px solid #000; - margin-bottom: var(--space-xs); + margin-bottom: var(--space); + font-weight: 600; + font-size: 1.4rem; + border-bottom: 1px solid var(--color-200); + color: var(--color-800); +} +.settings-section .infos { + font-size: 0.8rem; + color: var(--color-interface-400); } .settings-section .settings-subsection:not(:last-child) { - border-bottom: 1px solid var(--color-browngray-050); + border-bottom: 1px solid var(--color-interface-100); } .settings-section .settings-subsection { padding: var(--space-xs) 0; } .settings-section .settings-subsection h3 { - margin-bottom: var(--space-xs); -} -.settings-section .settings-subsection .field { - display: flex; -} -.settings-section .settings-subsection .field label, -.settings-section .settings-subsection .field select { - width: 50%; -} -.settings-section .settings-subsection .field input { - padding: 0.1rem 0.1rem 0.1rem 0.3rem; -} -.settings-section .settings-subsection .field .input-with-unit { - display: flex; - gap: 0.3rem; -} -.settings-section .settings-subsection .field .input-with-unit .unit-toggle { - display: flex; - gap: 0.3rem; -} -.settings-section .settings-subsection .field .input-with-color { - width: 50%; -} -.settings-section .settings-subsection .field .input-with-color .clr-field { - display: flex; -} -.settings-section .settings-subsection .field .input-with-color .clr-field button { - position: absolute; - transform: none; - height: 1.1rem; - top: auto; - right: auto; - cursor: pointer; -} -.settings-section .settings-subsection .field .input-with-color .clr-field input { - padding-left: 2.5rem; - width: 100%; -} -.settings-section .settings-subsection.margins { - display: flex; - flex-wrap: wrap; - row-gap: var(--space-xs); -} -.settings-section .settings-subsection.margins h3 { - width: 100%; -} -.settings-section .settings-subsection.margins .field { - width: 50%; -} -.settings-section .settings-subsection.margins .field label { - width: 30%; -} -.settings-section .settings-subsection.margins .field .input-with-unit input { - width: 50%; + margin-top: calc(var(--space-xs) * 1.5); + margin-bottom: calc(var(--space-xs) * 2); + font-size: 1rem; + font-weight: 600; } -button { +.unit-toggle button:not(.spinner-btn) { cursor: pointer; - border: 1px solid var(--color-browngray-300); - color: var(--color-browngray-300); + border: 1px solid var(--color-interface-400); + color: var(--color-interface-400); background-color: var(--color-panel-bg); border-radius: var(--border-radius); padding: 0.1rem 0.3rem; + height: calc(var(--input-h) * 0.75); } -button.active { - border: 1px solid #000; - color: #000; +.unit-toggle button:not(.spinner-btn):not(.active):hover { + background-color: var(--color-interface-100); } -button.tab.active { - background-color: #000; - color: #fff; - border: none; +.unit-toggle button:not(.spinner-btn).active { + color: var(--color-interface-050); + background-color: var(--color-interface-500); + cursor: auto; +} + +#editor-panel .tabs .tab { + color: var(--color-interface-600); + font-size: 1rem; + font-family: var(--sans-serif); + height: var(--input-h); + padding: 0 1ch; + border: 1px solid currentColor; + border-radius: calc(var(--input-h)); + font-weight: 500; +} +#editor-panel .tabs .tab.active { + background-color: var(--color-interface-400); + border-color: var(--color-interface-400); + color: var(--color-panel-bg); +} +#editor-panel .tabs .tab:not(.active):hover { + cursor: pointer; + background-color: var(--color-interface-100); } .settings-popup { @@ -262,36 +560,6 @@ button.tab.active { font-weight: 600; } -.label-with-tooltip { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - text-underline-offset: 2px; - cursor: help; - position: relative; -} -.label-with-tooltip::after { - content: attr(data-css); - position: absolute; - bottom: 100%; - left: 0; - margin-bottom: 4px; - padding: 0.25rem 0.5rem; - background: var(--color-browngray-700, #3d3d3d); - color: var(--color-browngray-100, #f5f5f5); - font-family: "Courier New", Courier, monospace; - font-size: 0.75rem; - border-radius: 4px; - white-space: nowrap; - opacity: 0; - visibility: hidden; - transition: opacity 0.15s ease, visibility 0.15s ease; - z-index: 10; -} -.label-with-tooltip:hover::after { - opacity: 1; - visibility: visible; -} - .inheritance-btn { display: flex; align-items: center; diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map index fe6c357..1a56067 100644 --- a/public/assets/css/style.css.map +++ b/public/assets/css/style.css.map @@ -1 +1,5 @@ -{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +<<<<<<< HEAD +{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ADGA;EACE,WAAA;ACAF;;AC7BA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,+BAAA;EACA,uBAAA;EAEA,uBAAA;EAEA,kBAAA;EAEA,uCAAA;AD4BF;;AEzCA;;;;;;;;;;;;;EAaE,uBAAA;AF4CF;;AGzDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AH4DF;AG1DA;EACE,8BAAA;OAAA,kBAAA;AH4DF;;AGzDA;EACE;IACE,sBAAA;EH4DF;AACF;AG1DA;EACE,+BAAA;AH4DF;;AI3EA;;;EAGE,4CAAA;AJ8EF;;AI3EA;EACE,YAAA;AJ8EF;;AI3EA,2BAAA;AACA;EACE,yCAAA;UAAA,iCAAA;EACA,iDAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;AJ8EF;AI5EE;EACE,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,uBAAA;EACA,sCAAA;EACA,iCAAA;EACA,8CAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,qDACE;EAEF,WAAA;AJ4EJ;AIzEE;EACE,UAAA;EACA,mBAAA;AJ2EJ;;AItEE;EACE,6BAAA;EACA,8BAAA;AJyEJ;AIvEE;EACE,mDAAA;AJyEJ;AItEE;EACE,0BAAA;AJwEJ;AItEI;EACE,8BAAA;AJwEN;AIrEI;EACE,aAAA;AJuEN;AIrEM;;EAEE,UAAA;AJuER;AIpEM;EACE,oCAAA;AJsER;AInEM;EACE,aAAA;EACA,WAAA;AJqER;AInEQ;EACE,aAAA;EACA,WAAA;AJqEV;AIjEM;EACE,UAAA;AJmER;AIlEQ;EACE,aAAA;AJoEV;AInEU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJqEZ;AIlEU;EACE,oBAAA;EACA,WAAA;AJoEZ;AI9DI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJgEN;AI9DM;EACE,WAAA;AJgER;AI9DM;EACE,UAAA;AJgER;AI9DQ;EACE,UAAA;AJgEV;AI5DU;EACE,UAAA;AJ8DZ;;AKvLA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ALyLF;AKvLE;EACE,sBAAA;EACA,WAAA;ALyLJ;AKrLI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALuLN;;AMvMA;EACE,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,yCAAA;EACA,cAAA;EACA,YAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;AN0MF;;AMvMA;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,qBAAA;EACA,gCAAA;EACA,mBAAA;AN0MF;;AMvMA;EACE,aAAA;EACA,mBAAA;EACA,WAAA;AN0MF;;AMvMA;EACE,gBAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,UAAA;EACA,WAAA;AN0MF;;AMvMA;EACE,aAAA;EACA,OAAA;EACA,gBAAA;AN0MF;;AMvMA;EACE,OAAA;EACA,aAAA;EACA,gBAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;AN0MF;;AMvMA;EACE,oBAAA;EACA,mBAAA;EACA,gBAAA;AN0MF;;AMtMA;EACE,yCAAA;UAAA,iCAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;ANyMF;AMvME;EACE,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,uBAAA;EACA,+CAAA;EACA,0CAAA;EACA,8CAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,qDACE;EAEF,WAAA;ANuMJ;AMpME;EACE,UAAA;EACA,mBAAA;ANsMJ;;AMjMA;EACE,aAAA;EACA,mBAAA;EACA,WAAA;EACA,UAAA;EACA,uBAAA;EACA,YAAA;EACA,eAAA;EACA,mBAAA;EACA,WAAA;EACA,sBAAA;ANoMF;AMlME;EACE,WAAA;ANoMJ;AMjME;EACE,cAAA;EACA,eAAA;ANmMJ;;AM9LA;EACE,OAAA;EACA,mBAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;ANiMF;;AM9LA;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,uBAAA;EACA,mBAAA;EACA,gCAAA;EACA,mBAAA;EACA,gBAAA;ANiMF;;AM7LA;EACE,aAAA;EACA,mBAAA;EACA,WAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;ANgMF;AM9LE;EACE,kBAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;ANgMJ;;AM5LA;EACE,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,mBAAA;EACA,gCAAA;AN+LF;AM7LE;EACE,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,+BAAA;AN+LJ;;AM3LA;EACE,mBAAA;AN8LF;AM5LE;EACE,2BAAA;AN8LJ;;AMzLA;EACE,OAAA;EACA,SAAA;EACA,gBAAA;EACA,mBAAA;EACA,cAAA;EACA,8CAAA;EACA,kBAAA;EACA,gBAAA;EACA,gBAAA;EACA,qBAAA;AN4LF;;AMxLA;EACE,OAAA;EACA,WAAA;EACA,mBAAA;EACA,cAAA;EACA,YAAA;EACA,gBAAA;EACA,8CAAA;EACA,kBAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;AN2LF","file":"style.css"} +======= +{"version":3,"sources":["src/_fonts.scss","style.css","src/_colors.scss","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_forms-section.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"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","file":"style.css"} +>>>>>>> styles diff --git a/public/assets/css/style.scss b/public/assets/css/style.scss index 656ee33..a844cc7 100644 --- a/public/assets/css/style.scss +++ b/public/assets/css/style.scss @@ -1,7 +1,10 @@ -@import "src/_reset.scss"; -@import "src/_variables.scss"; -@import "src/_text.scss"; -@import "src/_print-styles.scss"; -@import "src/_forms.scss"; -@import "src/_buttons.scss"; -@import "src/_settings-popup.scss"; +@use "src/_fonts.scss" as *; +@use "src/_colors.scss" as *; +@use "src/_reset.scss" as *; +@use "src/_variables.scss" as *; +@use "src/_text.scss" as *; +@use "src/_print-styles.scss" as *; +@use "src/_forms.scss" as *; +@use "src/_forms-section.scss" as *; +@use "src/_buttons.scss" as *; +@use "src/_settings-popup.scss" as *; diff --git a/public/assets/fonts/DMSans/DMSans-Black.woff2 b/public/assets/fonts/DMSans/DMSans-Black.woff2 new file mode 100644 index 0000000..3d7df7f Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Black.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-BlackItalic.woff2 b/public/assets/fonts/DMSans/DMSans-BlackItalic.woff2 new file mode 100644 index 0000000..719c05b Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-BlackItalic.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-Bold.woff2 b/public/assets/fonts/DMSans/DMSans-Bold.woff2 new file mode 100644 index 0000000..af58614 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Bold.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-BoldItalic.woff2 b/public/assets/fonts/DMSans/DMSans-BoldItalic.woff2 new file mode 100644 index 0000000..d671120 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-BoldItalic.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-ExtraBlack.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraBlack.woff2 new file mode 100644 index 0000000..913890a Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraBlack.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-ExtraBlackItalic.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraBlackItalic.woff2 new file mode 100644 index 0000000..10a798c Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraBlackItalic.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-ExtraBold.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraBold.woff2 new file mode 100644 index 0000000..de9f58b Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraBold.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-ExtraBoldItalic.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraBoldItalic.woff2 new file mode 100644 index 0000000..1c41a90 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraBoldItalic.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-ExtraLight.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraLight.woff2 new file mode 100644 index 0000000..b30cc79 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraLight.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-ExtraLightItalic.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraLightItalic.woff2 new file mode 100644 index 0000000..111f1f2 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraLightItalic.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-Italic.woff2 b/public/assets/fonts/DMSans/DMSans-Italic.woff2 new file mode 100644 index 0000000..c6eafe1 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Italic.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2 b/public/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2 new file mode 100644 index 0000000..b9224aa Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-Light.woff2 b/public/assets/fonts/DMSans/DMSans-Light.woff2 new file mode 100644 index 0000000..31265a3 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Light.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-LightItalic.woff2 b/public/assets/fonts/DMSans/DMSans-LightItalic.woff2 new file mode 100644 index 0000000..dfc26f0 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-LightItalic.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-Medium.woff2 b/public/assets/fonts/DMSans/DMSans-Medium.woff2 new file mode 100644 index 0000000..27f223c Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Medium.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-MediumItalic.woff2 b/public/assets/fonts/DMSans/DMSans-MediumItalic.woff2 new file mode 100644 index 0000000..817a696 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-MediumItalic.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-Regular.woff2 b/public/assets/fonts/DMSans/DMSans-Regular.woff2 new file mode 100644 index 0000000..1b06ad8 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Regular.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-SemiBold.woff2 b/public/assets/fonts/DMSans/DMSans-SemiBold.woff2 new file mode 100644 index 0000000..225015c Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-SemiBold.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-SemiBoldItalic.woff2 b/public/assets/fonts/DMSans/DMSans-SemiBoldItalic.woff2 new file mode 100644 index 0000000..c4cae67 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-SemiBoldItalic.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-Thin.woff2 b/public/assets/fonts/DMSans/DMSans-Thin.woff2 new file mode 100644 index 0000000..4f25c05 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Thin.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans-ThinItalic.woff2 b/public/assets/fonts/DMSans/DMSans-ThinItalic.woff2 new file mode 100644 index 0000000..eb72cf4 Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ThinItalic.woff2 differ diff --git a/public/assets/fonts/DMSans/DMSans[opsz,wght].woff2 b/public/assets/fonts/DMSans/DMSans[opsz,wght].woff2 new file mode 100644 index 0000000..ab7ecbb Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans[opsz,wght].woff2 differ diff --git a/public/assets/fonts/DMSans/stylesheet.css b/public/assets/fonts/DMSans/stylesheet.css new file mode 100644 index 0000000..fbfe2b1 --- /dev/null +++ b/public/assets/fonts/DMSans/stylesheet.css @@ -0,0 +1,137 @@ +/* DMSans Font Faces */ +@font-face { + font-family: "DMSans"; + src: url("DMSans-Black.woff2") format("woff2"); + font-weight: 900; + font-style: normal; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-BlackItalic.woff2") format("woff2"); + font-weight: 900; + font-style: italic; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-BoldItalic.woff2") format("woff2"); + font-weight: 700; + font-style: italic; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-ExtraBlack.woff2") format("woff2"); + font-weight: 950; + font-style: normal; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-ExtraBlackItalic.woff2") format("woff2"); + font-weight: 950; + font-style: italic; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-ExtraBold.woff2") format("woff2"); + font-weight: 800; + font-style: normal; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-ExtraBoldItalic.woff2") format("woff2"); + font-weight: 800; + font-style: italic; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-ExtraLight.woff2") format("woff2"); + font-weight: 200; + font-style: normal; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-ExtraLightItalic.woff2") format("woff2"); + font-weight: 200; + font-style: italic; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-Italic.woff2") format("woff2"); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-Italic[opsz,wght].woff2") format("woff2"); + font-weight: 100 900; + font-style: italic; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-Light.woff2") format("woff2"); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-LightItalic.woff2") format("woff2"); + font-weight: 300; + font-style: italic; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-MediumItalic.woff2") format("woff2"); + font-weight: 500; + font-style: italic; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-SemiBold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-SemiBoldItalic.woff2") format("woff2"); + font-weight: 600; + font-style: italic; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-Thin.woff2") format("woff2"); + font-weight: 100; + font-style: normal; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans-ThinItalic.woff2") format("woff2"); + font-weight: 100; + font-style: italic; +} +@font-face { + font-family: "DMSans"; + src: url("DMSans[opsz,wght].woff2") format("woff2"); + font-weight: 100 900; + font-style: normal; +} +/* Example usage */ +body { + font-family: "DMSans", sans-serif; +}/*# sourceMappingURL=stylesheet.css.map */ \ No newline at end of file diff --git a/public/assets/fonts/DMSans/stylesheet.css.map b/public/assets/fonts/DMSans/stylesheet.css.map new file mode 100644 index 0000000..d8d81f8 --- /dev/null +++ b/public/assets/fonts/DMSans/stylesheet.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["stylesheet.scss","stylesheet.css"],"names":[],"mappings":"AAAA,sBAAA;AACA;EACE,qBAAA;EACA,8CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,oDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,6CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,yDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,kDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,wDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,yDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,+CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,0DAAA;EACA,oBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,8CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,oDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,+CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,qDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,gDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,iDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,uDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,6CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,oBAAA;EACA,kBAAA;ACCF;ADEA,kBAAA;AACA;EACE,iCAAA;ACAF","file":"stylesheet.css"} \ No newline at end of file diff --git a/public/assets/fonts/DMSans/stylesheet.scss b/public/assets/fonts/DMSans/stylesheet.scss new file mode 100644 index 0000000..5cc3671 --- /dev/null +++ b/public/assets/fonts/DMSans/stylesheet.scss @@ -0,0 +1,138 @@ +/* DMSans Font Faces */ +@font-face { + font-family: 'DMSans'; + src: url('DMSans-Black.woff2') format('woff2'); + font-weight: 900; + font-style: normal; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-BlackItalic.woff2') format('woff2'); + font-weight: 900; + font-style: italic; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-Bold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-BoldItalic.woff2') format('woff2'); + font-weight: 700; + font-style: italic; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-ExtraBlack.woff2') format('woff2'); + font-weight: 950; + font-style: normal; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-ExtraBlackItalic.woff2') format('woff2'); + font-weight: 950; + font-style: italic; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-ExtraBold.woff2') format('woff2'); + font-weight: 800; + font-style: normal; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-ExtraBoldItalic.woff2') format('woff2'); + font-weight: 800; + font-style: italic; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-ExtraLight.woff2') format('woff2'); + font-weight: 200; + font-style: normal; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-ExtraLightItalic.woff2') format('woff2'); + font-weight: 200; + font-style: italic; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-Italic.woff2') format('woff2'); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-Italic[opsz,wght].woff2') format('woff2'); + font-weight: 100 900; + font-style: italic; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-Light.woff2') format('woff2'); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-LightItalic.woff2') format('woff2'); + font-weight: 300; + font-style: italic; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-Medium.woff2') format('woff2'); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-MediumItalic.woff2') format('woff2'); + font-weight: 500; + font-style: italic; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-Regular.woff2') format('woff2'); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-SemiBold.woff2') format('woff2'); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-SemiBoldItalic.woff2') format('woff2'); + font-weight: 600; + font-style: italic; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-Thin.woff2') format('woff2'); + font-weight: 100; + font-style: normal; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans-ThinItalic.woff2') format('woff2'); + font-weight: 100; + font-style: italic; +} +@font-face { + font-family: 'DMSans'; + src: url('DMSans[opsz,wght].woff2') format('woff2'); + font-weight: 100 900; + font-style: normal; +} + +/* Example usage */ +body { + font-family: 'DMSans', sans-serif; +} \ No newline at end of file diff --git a/public/assets/fonts/webfont/Inconsolata-Black.woff2 b/public/assets/fonts/webfont/Inconsolata-Black.woff2 new file mode 100644 index 0000000..81e7b8b Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Black.woff2 differ diff --git a/public/assets/fonts/webfont/Inconsolata-Bold.woff2 b/public/assets/fonts/webfont/Inconsolata-Bold.woff2 new file mode 100644 index 0000000..a183d29 Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Bold.woff2 differ diff --git a/public/assets/fonts/webfont/Inconsolata-ExtraBold.woff2 b/public/assets/fonts/webfont/Inconsolata-ExtraBold.woff2 new file mode 100644 index 0000000..f43698e Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-ExtraBold.woff2 differ diff --git a/public/assets/fonts/webfont/Inconsolata-ExtraLight.woff2 b/public/assets/fonts/webfont/Inconsolata-ExtraLight.woff2 new file mode 100644 index 0000000..e56d763 Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-ExtraLight.woff2 differ diff --git a/public/assets/fonts/webfont/Inconsolata-Light.woff2 b/public/assets/fonts/webfont/Inconsolata-Light.woff2 new file mode 100644 index 0000000..67c1971 Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Light.woff2 differ diff --git a/public/assets/fonts/webfont/Inconsolata-Medium.woff2 b/public/assets/fonts/webfont/Inconsolata-Medium.woff2 new file mode 100644 index 0000000..d1f080b Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Medium.woff2 differ diff --git a/public/assets/fonts/webfont/Inconsolata-Regular.woff2 b/public/assets/fonts/webfont/Inconsolata-Regular.woff2 new file mode 100644 index 0000000..fb2d3c4 Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Regular.woff2 differ diff --git a/public/assets/fonts/webfont/Inconsolata-SemiBold.woff2 b/public/assets/fonts/webfont/Inconsolata-SemiBold.woff2 new file mode 100644 index 0000000..bced232 Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-SemiBold.woff2 differ diff --git a/public/assets/fonts/webfont/Inconsolata-Thin.woff2 b/public/assets/fonts/webfont/Inconsolata-Thin.woff2 new file mode 100644 index 0000000..f5e7aec Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Thin.woff2 differ diff --git a/public/assets/fonts/webfont/stylesheet.css b/public/assets/fonts/webfont/stylesheet.css new file mode 100644 index 0000000..0d26d26 --- /dev/null +++ b/public/assets/fonts/webfont/stylesheet.css @@ -0,0 +1,61 @@ +/* Inconsolata Font Faces (ordered from lightest to boldest) */ +@font-face { + font-family: 'Inconsolata'; + src: url('Inconsolata-Thin.woff2') format('woff2'); + font-weight: 100; + font-style: normal; + } + @font-face { + font-family: 'Inconsolata'; + src: url('Inconsolata-ExtraLight.woff2') format('woff2'); + font-weight: 200; + font-style: normal; + } + @font-face { + font-family: 'Inconsolata'; + src: url('Inconsolata-Light.woff2') format('woff2'); + font-weight: 300; + font-style: normal; + } + @font-face { + font-family: 'Inconsolata'; + src: url('Inconsolata-Regular.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + } + @font-face { + font-family: 'Inconsolata'; + src: url('Inconsolata-Medium.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + } + @font-face { + font-family: 'Inconsolata'; + src: url('Inconsolata-SemiBold.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + } + @font-face { + font-family: 'Inconsolata'; + src: url('Inconsolata-Bold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + } + @font-face { + font-family: 'Inconsolata'; + src: url('Inconsolata-ExtraBold.woff2') format('woff2'); + font-weight: 800; + font-style: normal; + } + @font-face { + font-family: 'Inconsolata'; + src: url('Inconsolata-Black.woff2') format('woff2'); + font-weight: 900; + font-style: normal; + } + + /* Example usage */ + /* code, pre, .mono { + font-family: 'Inconsolata', monospace; + } */ + \ No newline at end of file diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue index a8d9a73..56ba45f 100644 --- a/src/components/ElementPopup.vue +++ b/src/components/ElementPopup.vue @@ -58,10 +58,10 @@
-
@@ -109,7 +109,7 @@
-
+
-
+
-
@@ -177,10 +177,10 @@
-
@@ -274,6 +274,7 @@ import { ref, computed, watch } from 'vue'; import { useStylesheetStore } from '../stores/stylesheet'; import { usePopupPosition } from '../composables/usePopupPosition'; +import NumberInput from './ui/NumberInput.vue'; import Coloris from '@melloware/coloris'; import '@melloware/coloris/dist/coloris.css'; import hljs from 'highlight.js/lib/core'; diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue index eb4632c..0b309be 100644 --- a/src/components/PagePopup.vue +++ b/src/components/PagePopup.vue @@ -27,10 +27,10 @@ >
-
@@ -68,10 +68,10 @@ >
-
@@ -109,10 +109,10 @@ >
-
@@ -150,10 +150,10 @@ >
-
@@ -285,6 +285,7 @@ import { ref, computed, watch, onMounted } from 'vue'; import { useStylesheetStore } from '../stores/stylesheet'; import { usePopupPosition } from '../composables/usePopupPosition'; +import NumberInput from './ui/NumberInput.vue'; import Coloris from '@melloware/coloris'; import '@melloware/coloris/dist/coloris.css'; import hljs from 'highlight.js/lib/core'; diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue index eb2c255..e209215 100644 --- a/src/components/editor/EditorPanel.vue +++ b/src/components/editor/EditorPanel.vue @@ -70,7 +70,7 @@ const activeTab = inject('activeTab'); position: fixed; top: 0; left: 0; - width: 35rem; + width: var(--panel-w); height: 100vh; display: flex; flex-direction: column; @@ -79,7 +79,7 @@ const activeTab = inject('activeTab'); nav { position: absolute; - margin: 1rem 0 0 1rem; + margin: 1.5rem 0 0 2rem; display: flex; gap: 0.5rem; @@ -88,7 +88,7 @@ nav { .close-button { position: absolute; - top: 1rem; + top: 1.5rem; right: 1rem; z-index: 2; @@ -100,7 +100,7 @@ nav { border: none; cursor: pointer; - color: var(--color-browngray-300); + color: var(--color-interface-300); transition: color 0.2s ease; &:hover { @@ -117,9 +117,9 @@ nav { flex: 1; overflow: hidden; position: relative; - left: -35rem; + left: calc(var(--panel-w)*-1); - padding: 4rem 1rem 1rem 1rem; + padding: 4rem 0; background-color: var(--color-panel-bg); box-shadow: -5px 0px 12px; @@ -134,5 +134,8 @@ nav { .tab-panel { height: 100%; overflow-y: auto; + overflow-x: hidden; + padding: 0 2em; + // padding-left: 1em; } diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue index 06f417d..b0a2fe7 100644 --- a/src/components/editor/PageSettings.vue +++ b/src/components/editor/PageSettings.vue @@ -1,9 +1,11 @@ @@ -286,6 +289,7 @@ import { ref, computed, watch, onMounted, inject } from 'vue'; import { useStylesheetStore } from '../../stores/stylesheet'; import Coloris from '@melloware/coloris'; +import NumberInput from '../ui/NumberInput.vue'; import '@melloware/coloris/dist/coloris.css'; const stylesheetStore = useStylesheetStore(); diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue index 2a870ca..1a193e9 100644 --- a/src/components/editor/TextSettings.vue +++ b/src/components/editor/TextSettings.vue @@ -1,6 +1,8 @@ diff --git a/src/components/ui/InputWithUnit.vue b/src/components/ui/InputWithUnit.vue index c8605a3..a87ae90 100644 --- a/src/components/ui/InputWithUnit.vue +++ b/src/components/ui/InputWithUnit.vue @@ -9,14 +9,13 @@ :step="step" @input="updateValue(Number($event.target.value))" /> - diff --git a/src/style.css b/src/style.css index 699de50..7fe7f5e 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1 @@ -@import url('/assets/css/style.css'); +@import '../public/assets/css/style.scss';