Styling

drager · drager · commit 49ed18a93df3 · 2022-09-07T18:30:22.000+02:00
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "tech-heads-talk",
+  "name": "why-typescript-matters-talk",
   "version": "1.0.0",
-  "description": "Talk for tech head conferance",
+  "description": "Talk about TypeScript",
   "scripts": {
     "clean": "rimraf dist",
     "build": "webpack",
diff --git a/src/index.html b/src/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Encode+Sans:400,300,700&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/index.tsx b/src/index.tsx
@@ -3,23 +3,17 @@ import {
   Heading,
   UnorderedList,
   CodeSpan,
-  OrderedList,
   ListItem,
   FullScreen,
   AnimatedProgress,
   Appear,
   Slide,
   Deck,
   Link,
-  Text,
-  Grid,
   Box,
   Image,
   CodePane,
-  MarkdownSlide,
-  MarkdownSlideSet,
   Notes,
-  SlideLayout,
 } from "spectacle";
 import gruvboxDark from "react-syntax-highlighter/dist/cjs/styles/prism/gruvbox-dark";
 import { createRoot } from "react-dom/client";
@@ -48,16 +42,21 @@ const GruvboxCodePane = ({
   </CodePane>
 );
 
+const red = "#f96555";
+const teal = "#0097a9";
+const dark = "#1d1c21";
+const purple = "#6a49f5";
+
 // SPECTACLE_CLI_THEME_START
 const theme = {
   fonts: {
-    header: '"Ubuntu", Helvetica, Arial, sans-serif',
-    text: '"Ubuntu", Helvetica, Arial, sans-serif',
+    header: '"Encode Sans", Helvetica, Arial, sans-serif',
+    text: '"Encode Sans", Helvetica, Arial, sans-serif',
   },
   colors: {
-    tertiary: "#5d2a42",
-    primary: "#93b5c6",
-    secondary: "#93b5c6",
+    tertiary: teal,
+    primary: dark,
+    secondary: dark,
   },
 };
 // SPECTACLE_CLI_THEME_END
@@ -71,10 +70,13 @@ const template = () => (
     width={1}
   >
     <Box padding="0 1em">
-      <FullScreen />
+      <FullScreen color={theme.colors.primary} />
     </Box>
-    <Box padding="1em">
-      <AnimatedProgress />
+    <Box padding="0 1em 0 0">
+      <AnimatedProgress
+        pacmanColor={theme.colors.primary}
+        color={theme.colors.primary}
+      />
     </Box>
   </FlexBox>
 );
@@ -714,6 +716,7 @@ const getColor = (color) => {
       </FlexBox>
     </Slide>
     <Slide>
+      <Heading fontSize="h3">const enums</Heading>
       <FlexBox flexDirection="row" justifyContent="flexStart">
         <GruvboxCodePane
           language="js"
@@ -780,20 +783,24 @@ const getColor = (color) => {
       <Heading fontSize="h3">Alternativ till TypeScript</Heading>
       <UnorderedList>
         <ListItem>
-          Flow.js - Facebooks statiska type-checker. I princip död.
+          Flow.js - Facebooks statiska type-checker. I princip utdöd.
         </ListItem>
         <ListItem>
           Elm - Ett strikt funktionellt språk som kompilerar till JavaScript
         </ListItem>
         <ListItem>
-          PureScript - Också starkt typat funktionellt språk som komp till
+          PureScript - Också starkt typat funktionellt språk som kompilerar till
           JavaScript
         </ListItem>
         <ListItem>
-          ReasonML - Starkt typat språk kompilerar till JavaScript och OCaml
+          ReasonML - Starkt typat språk kompilerar till JavaScript och OCaml.
+          Kan nyttja både OCaml-paket och JavaScript-paket
         </ListItem>
       </UnorderedList>
     </Slide>
+    <Slide>
+      <Heading fontSize="h3">Tips och tricks</Heading>
+    </Slide>
   </Deck>
 );
 
diff --git a/types/images.d.ts b/types/images.d.ts
@@ -0,0 +1 @@
+declare module "*.png";
diff --git a/types/react-syntax-highlighter.d.ts b/types/react-syntax-highlighter.d.ts
@@ -0,0 +1 @@
+declare module "react-syntax-highlighter/dist/cjs/styles/prism/gruvbox-dark";

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+declare module "react-syntax-highlighter/dist/cjs/styles/prism/gruvbox-dark";`