style: font size BIGGER

Author: peterpeterparker

studio/src/app/pages/app-editor/app-editor.scss

@@ -1,3 +1,6 @@
+@import "../../../global/theme/editor/editor-deck";
+@import "../../../global/theme/editor/editor-deck-fonts";
+
 app-editor {
   main {
     position: relative;
@@ -9,51 +12,6 @@ app-editor {
     margin: auto;
 
     overflow: hidden;
-
-    deckgo-deck {
-      --background: white;
-      --color: black;
-      --padding-end: 64px;
-
-      --slide-user-select: text;
-
-      h1, h2, h3, p {
-        width: 100%;
-        overflow: hidden;
-
-        border-radius: 2px;
-        border: 1px solid var(--ion-color-light);
-
-        padding: 8px;
-
-        &:focus {
-          outline: 0;
-          box-shadow: 0 0 0 3px rgba(var(--ion-color-primary-rgb), .5);
-        }
-      }
-
-      h1 {
-        min-height: calc(var(--font-size-h1) + 4px);
-      }
-
-      h2 {
-        min-height: calc(var(--font-size-h2) + 4px);
-      }
-
-      h3 {
-        min-height: calc(var(--font-size-h3) + 4px);
-      }
-
-      p {
-        min-height: calc(var(--font-size-normal) + 4px);
-      }
-
-      deckgo-slide-split {
-        p {
-          height: fit-content;
-        }
-      }
-    }
   }
 
   deckgo-inline-editor {

studio/src/components.d.ts

@@ -8,9 +8,9 @@
 import '@stencil/core';
 
 import '@ionic/core';
-import 'ionicons';
 import 'deckdeckgo';
 import 'deckdeckgo-inline-editor';
+import 'ionicons';
 import {
   EventEmitter,
 } from '@stencil/core';

studio/src/global/theme/editor/editor-deck-fonts.scss

@@ -0,0 +1,64 @@
+// Synchro with https://github.com/deckgo/deckdeckgo-starter/blob/master/src/css/font.css
+
+deckgo-deck {
+  *, h3, h4, h5, h6 {
+    font-weight: 300;
+  }
+
+  a, strong {
+    font-weight: 500;
+  }
+
+  h1, h2 {
+    text-transform: uppercase;
+  }
+
+  h1 {
+    font-size: 3em;
+  }
+
+  h2 {
+    font-size: 2em;
+  }
+
+  h3 {
+    font-size: 1.4em;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    max-width: 100%
+  }
+
+  --code-font-size: 10px;
+  --code-font-family: Menlo, monospace;
+
+  --pager-text-size: 0.6rem;
+
+  ion-label, ion-label[text-wrap].sc-ion-label-md-h, p {
+    font-size: 1em;
+  }
+}
+
+// 1200 and not 992 because of menu
+@media(min-width: 1200px) {
+  deckgo-deck {
+    font-size: 32px;
+    --code-font-size: 24px;
+
+    ion-label, ion-label[text-wrap].sc-ion-label-md-h, p {
+      font-size: 32px;
+    }
+  }
+}
+
+@media(max-width: 768px) {
+  deckgo-deck {
+    h1 {
+      font-size: 2.4em;
+    }
+
+    h3 {
+      font-size: 1.2em;
+    }
+  }
+}

studio/src/global/theme/editor/editor-deck.scss

@@ -0,0 +1,44 @@
+deckgo-deck {
+  --background: white;
+  --color: black;
+  --padding-end: 64px;
+
+  --slide-user-select: text;
+
+  h1, h2, h3, p {
+    width: 100%;
+    overflow: hidden;
+
+    border-radius: 2px;
+    border: 1px solid var(--ion-color-light);
+
+    padding: 8px;
+
+    &:focus {
+      outline: 0;
+      box-shadow: 0 0 0 3px rgba(var(--ion-color-primary-rgb), .5);
+    }
+  }
+
+  h1 {
+    min-height: calc(var(--font-size-h1) + 4px);
+  }
+
+  h2 {
+    min-height: calc(var(--font-size-h2) + 4px);
+  }
+
+  h3 {
+    min-height: calc(var(--font-size-h3) + 4px);
+  }
+
+  p {
+    min-height: calc(var(--font-size-normal) + 4px);
+  }
+
+  deckgo-slide-split {
+    p {
+      height: fit-content;
+    }
+  }
+}

studio/src/global/theme/fonts.scss

@@ -12,12 +12,6 @@
   --font-size-h3: 17px;
 }
 
-* {
-  // Fonts
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --ion-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
 h1,
 h1 a {
   font-size: var(--font-size-h1);