ywana-core8 0.0.1

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ywana-core8",
+  "version": "0.0.1",
+  "description": "ywana-core8",
+  "author": "Ernesto Roldan Garcia",
+  "license": "MIT",
+  "type": "module",
+  "source": "src/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "scripts": {
+    "build": "microbundle",
+    "dev": "microbundle watch"
+  },
+  "bugs": {
+    "url": "https://github.com/ywana/ywana-core8/issues"
+  },
+  "devDependencies": {
+    "gh-pages": "^3.2.3",
+    "microbundle": "^0.14.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "dependencies": {
+    "material-design-icons-iconfont": "^6.1.1"
+  }
+}

package/publish.sh

@@ -0,0 +1,5 @@
+git add --all
+git commit -m $0
+git push
+npm version patch
+npm publish

package/src/css/fonts.css

@@ -0,0 +1,162 @@
+/* hebrew */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url(../fonts/Assistant-ExtraLight.ttf) format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url(../fonts/Assistant-ExtraLight.ttf) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url(../fonts/Assistant-ExtraLight.ttf) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* hebrew */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(../fonts/Assistant-Light.ttf) format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(../fonts/Assistant-Light.ttf) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(../fonts/Assistant-Light.ttf) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* hebrew */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/Assistant-Medium.ttf) format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/Assistant-Medium.ttf) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/Assistant-Medium.ttf) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* hebrew */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(../fonts/Assistant-SemiBold.ttf) format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(../fonts/Assistant-SemiBold.ttf) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(../fonts/Assistant-SemiBold.ttf) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* hebrew */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(../fonts/Assistant-Bold.ttf) format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(../fonts/Assistant-Bold.ttf) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(../fonts/Assistant-Bold.ttf) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* hebrew */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/Assistant-ExtraBold.ttf) format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/Assistant-ExtraBold.ttf) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Assistant';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/Assistant-ExtraBold.ttf) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/src/css/html.css

@@ -0,0 +1,36 @@
+@import url('./theme.css');
+@import url("./fonts.css");
+
+html {
+  font-size: 14px;
+  font-family: "Assistant"
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  letter-spacing: 0.02em;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+*:focus {
+  outline: none;
+}
+
+.expand {
+  flex: 1;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+}

package/src/css/theme.css

@@ -0,0 +1,89 @@
+:root {
+
+  --site-header-color: #fff;
+  --site-header-bgcolor: #100;
+  --site-header-height: 3rem;
+
+  --site-nav-color: #fff;
+  --site-nav-bgcolor: #100;
+  --site-nav-height: 3rem;
+
+  --site-menu-color: #100;
+  --site-menu-bgcolor: #fff;
+  --site-menu-select-color: #c8cfd8;
+  --site-menu-width: 3.4rem;
+
+  --site-aside-color: #100;
+  --site-aside-bgcolor: #fff;
+  --site-aside-height: 4rem;
+
+
+
+  --page-header-height: 3rem;
+  --page-header-color: #100;
+  --page-header-bgcolor: #fff;
+
+  --page-nav-height: 1rem;
+
+  --page-menu-width: 20rem;
+  --page-menu-color: #111;
+  --page-menu-bgcolor: #FFF;
+
+  --page-aside-width: 100%;
+  --page-aside-color: #111;
+  --page-aside-bgcolor: #EEE;
+
+  --page-footer-height: 3rem;
+
+  
+  
+  --background-color: #f4f7f9;
+
+  --text-color: #0a101b;
+  --text-color-light: rgba(0, 0, 0, 0.62);
+  --text-color-lighter: rgba(0, 0, 0, 0.44);
+
+  --page-header-padding: 0 1rem;
+
+  --primary-color-dark: rgb(29, 6, 71);
+  --primary-color: rgb(50, 20, 105);
+  --primary-color-light: rgb(90, 56, 153);
+  --primary-color-lighter: rgba(190, 173, 219, 0.5);
+  --primary-color-text: rgba(255, 255, 255, 1);
+
+  --secondary-color-dark: rgba(100, 100, 150, 1);
+  --secondary-color: rgba(128, 128, 128, 0.5);
+  --secondary-color-light: rgba(120, 120, 170, 0.72);
+  --secondary-color-lighter: #e8f0fe;
+  --secondary-color-text: #000;
+
+  --accent-color: #000;
+  --accent-color-text: #fff;
+
+  --danger-color: #ff4400;
+  --danger-color-light: #ff7470;
+
+  --paper-color: #ffffff;
+  --overlay-color: rgba(100, 100, 100, 0.5);
+  --divider-color: rgba(100, 100, 100, 0.3);
+  --divider-color-light: rgba(232, 234, 237, 1);
+
+  --shadow1: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+
+  --shadow1-light: 0 2px 2px 0 rgba(200, 200, 200, 0.14),
+    0 3px 1px -2px rgba(200, 200, 200, 0.2),
+    0 1px 5px 0 rgba(200, 200, 200, 0.12);
+
+  --shadow2: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    inset 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    inset 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+
+  --shadow-right: 3px 0px 3px 0px rgba(100, 100, 100, 0.5);
+
+  --shadow-bottom: 0px 3px 5px 0px rgba(50, 50, 50, 0.3);
+
+  --shadow-top: 0px -3px 5px 0px rgba(150, 150, 150, 0.3);
+
+  --curtains-closed-width: 4rem;
+}

package/src/css/theme_dark.css

@@ -0,0 +1,85 @@
+:root {
+
+  --site-header-color: rgb(211, 211, 211);
+  --site-header-bgcolor: rgb(0, 0, 0);
+  --site-header-height: 3rem;
+
+  --site-nav-color: #fff;
+  --site-nav-bgcolor: rgb(24, 24, 24);
+  --site-nav-height: 3rem;
+
+  --site-menu-color: rgb(230, 230, 230);
+  --site-menu-bgcolor: rgb(24, 24, 24);
+  --site-menu-select-color: #c8cfd8;
+  --site-menu-width: 3.4rem;
+
+  --site-aside-color: #100;
+  --site-aside-bgcolor: #fff;
+  --site-aside-height: 4rem;
+  
+  --page-header-height: 3rem;
+  --page-header-color: rgb(193, 193, 193);
+  --page-header-bgcolor: #272727;
+
+  --page-nav-height: 1rem;
+
+  --page-menu-width: 20rem;
+  --page-menu-color: #111;
+  --page-menu-bgcolor: #272727;
+
+  --page-aside-width: 100%;
+  --page-aside-color: #111;
+  --page-aside-bgcolor: #EEE;
+
+  --page-footer-height: 3rem;
+
+  --background-color: #202020;
+
+  --text-color: #ffffff;
+  --text-color-light: rgba(223, 223, 223, 0.62);
+  --text-color-lighter: rgba(169, 169, 169, 0.44);
+
+  --page-header-padding: 0 1rem;
+
+  --primary-color-dark: rgb(29, 6, 71);
+  --primary-color: rgb(47, 47, 47);
+  --primary-color-light: rgb(90, 56, 153);
+  --primary-color-lighter: rgba(190, 173, 219, 0.5);
+  --primary-color-text: rgba(255, 255, 255, 1);
+
+  --secondary-color-dark: rgba(100, 100, 150, 1);
+  --secondary-color: rgba(128, 128, 128, 0.5);
+  --secondary-color-light: rgba(120, 120, 170, 0.72);
+  --secondary-color-lighter: #e8f0fe;
+  --secondary-color-text: #000;
+
+  --accent-color: #000;
+  --accent-color-text: #fff;
+
+  --danger-color: #ff4400;
+  --danger-color-light: #ff7470;
+
+  --paper-color: #313131;
+  --overlay-color: rgba(100, 100, 100, 0.5);
+  --divider-color: rgba(100, 100, 100, 0.3);
+  --divider-color-light: rgba(232, 234, 237, 1);
+
+  --shadow1: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+
+  --shadow1-light: 0 2px 2px 0 rgba(200, 200, 200, 0.14),
+    0 3px 1px -2px rgba(200, 200, 200, 0.2),
+    0 1px 5px 0 rgba(200, 200, 200, 0.12);
+
+  --shadow2: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    inset 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    inset 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+
+  --shadow-right: 3px 0px 3px 0px rgba(100, 100, 100, 0.5);
+
+  --shadow-bottom: 0px 3px 5px 0px rgba(50, 50, 50, 0.3);
+
+  --shadow-top: 0px -3px 5px 0px rgba(150, 150, 150, 0.3);
+
+  --curtains-closed-width: 4rem;
+}

package/src/css/theme_light.css

@@ -0,0 +1,87 @@
+:root {
+
+  --site-header-color: #fff;
+  --site-header-bgcolor: #100;
+  --site-header-height: 3rem;
+
+  --site-nav-color: #fff;
+  --site-nav-bgcolor: #100;
+  --site-nav-height: 3rem;
+
+  --site-menu-color: #100;
+  --site-menu-bgcolor: #fff;
+  --site-menu-select-color: #c8cfd8;
+  --site-menu-width: 3.4rem;
+
+  --site-aside-color: #100;
+  --site-aside-bgcolor: #fff;
+  --site-aside-height: 4rem;
+
+  --page-header-height: 3rem;
+  --page-header-color: #100;
+  --page-header-bgcolor: #fff;
+
+  --page-nav-height: 1rem;
+
+  --page-menu-width: 20rem;
+  --page-menu-color: #111;
+  --page-menu-bgcolor: #FFF;
+
+  --page-aside-width: 100%;
+  --page-aside-color: #111;
+  --page-aside-bgcolor: #EEE;
+
+  --page-footer-height: 3rem;
+
+  
+  
+  --background-color: #f4f7f9;
+
+  --text-color: #0a101b;
+  --text-color-light: rgba(0, 0, 0, 0.62);
+  --text-color-lighter: rgba(0, 0, 0, 0.44);
+
+  --page-header-padding: 0 1rem;
+
+  --primary-color-dark: rgb(29, 6, 71);
+  --primary-color: rgb(50, 20, 105);
+  --primary-color-light: rgb(90, 56, 153);
+  --primary-color-lighter: rgba(190, 173, 219, 0.5);
+  --primary-color-text: rgba(255, 255, 255, 1);
+
+  --secondary-color-dark: rgba(100, 100, 150, 1);
+  --secondary-color: rgba(128, 128, 128, 0.5);
+  --secondary-color-light: rgba(120, 120, 170, 0.72);
+  --secondary-color-lighter: #e8f0fe;
+  --secondary-color-text: #000;
+
+  --accent-color: #000;
+  --accent-color-text: #fff;
+
+  --danger-color: #ff4400;
+  --danger-color-light: #ff7470;
+
+  --paper-color: #ffffff;
+  --overlay-color: rgba(100, 100, 100, 0.5);
+  --divider-color: rgba(100, 100, 100, 0.3);
+  --divider-color-light: rgba(232, 234, 237, 1);
+
+  --shadow1: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+
+  --shadow1-light: 0 2px 2px 0 rgba(200, 200, 200, 0.14),
+    0 3px 1px -2px rgba(200, 200, 200, 0.2),
+    0 1px 5px 0 rgba(200, 200, 200, 0.12);
+
+  --shadow2: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    inset 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    inset 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+
+  --shadow-right: 3px 0px 3px 0px rgba(100, 100, 100, 0.5);
+
+  --shadow-bottom: 0px 3px 5px 0px rgba(50, 50, 50, 0.3);
+
+  --shadow-top: 0px -3px 5px 0px rgba(150, 150, 150, 0.3);
+
+  --curtains-closed-width: 4rem;
+}

package/src/domain/CollectionPage.css

@@ -0,0 +1,34 @@
+header.collection-page {
+    padding-right: .5rem;
+}
+
+menu.collection-page {
+    display: flex;
+    flex-direction: column;
+}
+
+menu.collection-page>header {
+    border-bottom: dotted 1px var(--divider-color);
+}
+
+menu.collection-page>main {
+    flex: 1;
+    overflow:auto;
+}
+
+.collection-page .content-editor .selected {
+    /*background-color: #FBFBFB !important;*/
+}
+
+.collection-page .content-editor>section {
+    border: solid 1px var(--divider-color);
+    background-color: var(--paper-color);
+    padding: 0 1rem 1rem 1rem;
+}
+
+.collection-page .content-editor.tabbed>section {
+    border: solid 1px var(--divider-color);
+    border-width: 0 1px 1px 1px;
+    background-color: var(--paper-color);
+    padding: 0 1rem 1rem 1rem;
+}