Piter WIP

Author: larsenwork

assets/css/_base.css

@@ -15,6 +15,7 @@ button,
   display: flex;
   background: var(--color-themed-bg);
   color: inherit;
+  font-family: inherit;
   text-decoration: none;
   padding: var(--spacer-small);
   border-radius: var(--spacer-small);

assets/css/_settings.css

@@ -10,12 +10,13 @@
   --color-bright-dimmed-transparent: hsla(0, 0%, 96%, 0);
   --color-bright-dimmed-more: hsl(0, 0%, 92%);
   --color-brand: hsl(330, 100%, 45%);
+  --color-brand-alt: hsl(210, 100%, 45%);
   --color-themed-bg: var(--color-dark);
   --color-themed-bg-dimmed: var(--color-dark-dimmed);
   --color-themed-bg-dimmed-transparent: var(--color-dark-dimmed-transparent);
   --color-themed-bg-dimmed-more: var(--color-dark-dimmed-more);
   --color-themed-fg: var(--color-bright);
-  --color-themed-fg-50: var(--color-bright-72);
+  --color-themed-fg-72: var(--color-bright-72);
 
   --lineLength-maxWidth: 35rem;
   --img-maxWidth: 51rem;
@@ -77,7 +78,7 @@
   --color-themed-bg-dimmed-more: var(--color-dark-dimmed-more);
   --color-themed-bg-dimmed-transparent: var(--color-dark-dimmed-transparent);
   --color-themed-fg: var(--color-bright);
-  --color-themed-fg-50: var(--color-bright-72);
+  --color-themed-fg-72: var(--color-bright-72);
 }
 
 .theme-secondary {
@@ -86,7 +87,7 @@
   --color-themed-bg-dimmed-more: var(--color-bright-dimmed-more);
   --color-themed-bg-dimmed-transparent: var(--color-bright-dimmed-transparent);
   --color-themed-fg: var(--color-dark);
-  --color-themed-fg-50: var(--color-dark-72);
+  --color-themed-fg-72: var(--color-dark-72);
 }
 
 @media (--highRes) {

assets/css/_typography.css

@@ -5,12 +5,17 @@
   font-style: normal;
 }
 
+:root {
+  --font-family: 'gidole', sans-serif;
+  --font-family-mono: Monaco, Menlo, Consolas, 'Lucida Console', monospace;
+}
+
 html {
   font-size: var(--fontSize-html);
 }
 
 body {
-  font-family: 'gidole', sans-serif;
+  font-family: var(--font-family);
   line-height: var(--lineHeight-body);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -39,8 +44,12 @@ h2 {
 h1 {
   font-size: var(--fontSize-h1);
   letter-spacing: -0.02em;
-  margin-top: var(--lineHeight-margin-large);
   margin-bottom: var(--lineHeight-margin-small);
+  margin-top: var(--lineHeight-margin-large);
+
+  @nest .c-presentation & {
+    margin-top: 0;
+  }
 }
 
 h2 {
@@ -56,8 +65,7 @@ h3 {
   margin-bottom: var(--lineHeight-margin-xsmall);
 }
 
-*:not(h1):not(h2) + p,
-*:not(h1):not(h2) + code {
+*:not(h1):not(h2) + p {
   margin-top: var(--lineHeight-margin-small);
 }
 
@@ -72,25 +80,20 @@ input {
 
 pre,
 code {
-  font-family: Monaco, Menlo, Consolas, 'Lucida Console', monospace;
+  font-family: var(--font-family-mono);
   font-size: 0.8rem;
   line-height: calc(var(--lineHeight-body) * 3 / 4);
   letter-spacing: 0;
   user-select: all;
-}
 
-code {
-  position: relative;
-  display: block;
-  max-width: 100%;
-  min-width: 0; /* Fixes wrapping issues inside grids */
+  & > * {
+    font-size: 0.8rem;
+  }
 }
 
 pre {
-  padding: var(--spacer-small);
   border-radius: var(--spacer-xsmall);
   background-color: var(--color-themed-bg-dimmed);
-
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 
@@ -109,6 +112,11 @@ pre {
   }
 }
 
+code {
+  display: inline-block;
+  margin: var(--spacer-small);
+}
+
 .layout .u-section a:not(.u-button) {
   background-image: linear-gradient(var(--color-brand), var(--color-brand));
   background-repeat: no-repeat;
@@ -133,12 +141,12 @@ pre {
 
 .t-codeLabel {
   position: absolute;
-  font-size: 1em;
   top: 0;
   margin-top: 0;
+  color: var(--color-themed-fg-72);
+  font-size: 1em;
   right: var(--spacer-xsmall);
   transform: translateY(-50%);
-  opacity: var(--opacity-mid);
   z-index: 1;
   user-select: none;
 }

components/github-corner.vue

@@ -49,6 +49,12 @@ export default {}
   top: 0;
   right: 0;
   z-index: var(--zIndex-githubCorner);
+
+  @nest .is-presenting & {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 
 .c-githubCorner-svg {

components/navigation.vue

@@ -1,6 +1,8 @@
 <template>
   <nav
-    :class="$store.state.navigationVisible ? 'is-expanded' : ''"
+    :class="{
+      'is-expanded': $store.state.navigationVisible,
+    }"
     class="c-navigation"
   >
     <div
@@ -61,11 +63,13 @@
         >
           Blog
         </div>
-        <div
-          class="c-navigation-link c-navigation-link--wip"
+        <nuxt-link
+          class="c-navigation-link"
+          to="/talks"
+          @click.native="hideNavigation"
         >
           Talks
-        </div>
+        </nuxt-link>
       </div>
       <div
         class="c-navigation-links-donate"
@@ -109,14 +113,15 @@
         <path
           class="c-navigation-toggle-logo-a"
           d="M33.97 23.87c1.77 0 3.57 0 4.84 1.27.9.9 1.38 2.44.62 4.18h4.26l-1.75 4.55 5.12.02s-2.73 4.79-3.95 7.46c4.62 0 7.6 2.85 8.8 6.8.74 2.41 1.41 7 1.96 11.98H48.6c-.58-4.76-1.13-9.14-1.94-11.22-1-2.53-2.32-3.56-5.57-3.35-2.56 5.46-2.94 9.88-2.94 14.57h-5.27c0-9.8 2.04-14 7.1-23.8l-4.42-.02 2.01-5.34c-1.07.46-2.37.46-3.59.46.32-2.44.32-5.12 0-7.56z"
-          fill="#FFF" />
+          fill="#fff" />
       </svg>
     </div>
   </nav>
 </template>
 
 <script>
 import social from '~/components/social'
+
 export default {
   components: {
     'app-social': social,
@@ -162,6 +167,12 @@ export default {
   &.is-expanded {
     pointer-events: auto;
   }
+
+  @nest .is-presenting & {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 
 .c-navigation-links {

components/prism.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="u-position-relative c-prism">
+    <h3 class="t-codeLabel">{{ label }}</h3>
+    <prism :language="language">
+      <slot/>
+    </prism>
+  </div>
+</template>
+
+<script>
+import Prism from 'vue-prism-component'
+import 'prismjs'
+
+export default {
+  components: {
+    Prism,
+  },
+  props: {
+    language: {
+      default: 'javascript',
+      type: String,
+    },
+    label: {
+      default: 'Javascript',
+      type: String,
+    },
+  },
+}
+</script>
+
+<style lang="postcss">
+*:not(h1):not(h2) + .c-prism {
+  margin-top: var(--lineHeight-margin-small);
+}
+
+.c-prism {
+  & .selector,
+  & .keyword {
+    color: var(--color-brand-alt);
+  }
+  & .function {
+    color: var(--color-brand);
+  }
+  & .comment {
+    opacity: var(--opacity-mid);
+  }
+  & code {
+    color: var(--color-themed-fg-72);
+  }
+}
+</style>

components/tools/gradient/calculations/gradient-output.js

@@ -32,7 +32,7 @@ export default {
   },
   methods: {
     // lrgb as default value since it produces a result closes to most browser defaults
-    gradientCalc(colorMode = 'lrgb') {
+    gradientCalc(colorMode = 'lrgb', preview = false) {
       // Because number input in Safari is a bitch...
       let stepsNumber = Number(this.$store.state.gradient.steps.number)
       if (stepsNumber === undefined || stepsNumber < 2) {
@@ -44,7 +44,7 @@ export default {
       // Get the colorstops
       const colorStopsCoordinates =
         this.$store.state.gradient.settings.easingFunction === 'cubic-bezier'
-          ? cubicCoordinates(...this.getStoreBezierCoordinates())
+          ? cubicCoordinates(...this.getStoreBezierCoordinates(), 15)
           : stepsCoordinates(stepsNumber, this.$store.state.gradient.steps.skip)
 
       this.$store.commit('updateStopCoordinates', colorStopsCoordinates)
@@ -71,7 +71,12 @@ export default {
           .join(', ')} ${rounded(stop.x * 100, 1)}%`
       })
       const direction = this.getStoreDirection()
-      return `linear-gradient(${direction}, ${cssColorStops.join(', ')})`
+      return preview
+        ? `linear-gradient(
+    ${direction},
+    ${cssColorStops.join(',\n    ')}
+  );`
+        : `linear-gradient(${direction}, ${cssColorStops.join(', ')})`
     },
     getStoreDirection() {
       const deg = rounded(this.$store.state.gradient.direction.deg)

components/tools/gradient/editor.vue

@@ -5,7 +5,7 @@
       '--gradient--linear': `linear-gradient(${ gradientDirection }, ${ gradientColor1 }, ${ gradientColor2 })`
     }"
     :class="{
-      'is-active': $store.state.gradient.editorActive !== ''
+      'is-active': isEditorActive
     }"
     class="c-gradientEditor"
   >
@@ -279,19 +279,14 @@
         </div>
       </transition>
     </div>
-    <code>
-      <h3 class="t-codeLabel">CSS</h3>
-      <pre>{{ gradient }};</pre>
-    </code>
-    <code>
-      <h3 class="t-codeLabel">CSSWG Proposal</h3>
-      <pre>{{ prettyGradient }}</pre>
-    </code>
+    <prism language="css" label="CSSWG Proposal">{{ futureCSS }}</prism>
+    <prism language="css" label="CSS">{{ oldCSS }}</prism>
   </div>
 </template>
 
 <script>
 import selectChevron from '~/components/select-chevron'
+import prism from '~/components/prism'
 import colorEdit from '~/components/tools/gradient/color-edit'
 import easingEdit from '~/components/tools/gradient/easing-edit'
 import easingPreview from '~/components/tools/gradient/easing-preview'
@@ -307,9 +302,13 @@ export default {
     directionEdit,
     directionPreview,
     selectChevron,
+    prism,
   },
   mixins: [gradientOutput],
   computed: {
+    isEditorActive: function() {
+      return !!this.$store.state.gradient.editorActive
+    },
     gradient: function() {
       return this.gradientCalc(this.$store.state.gradient.settings.colorMode)
     },
@@ -321,6 +320,21 @@ export default {
   ${this.gradientColor2}
 );`
     },
+    oldCSS: function() {
+      return `.forNow {
+  ${this.gradientCalc(this.$store.state.gradient.settings.colorMode, true)}
+};`
+    },
+    futureCSS: function() {
+      return `#future {
+  linear-gradient(
+    ${this.gradientDirection},
+    ${this.gradientColor1},
+    ${this.gradientFunction},
+    ${this.gradientColor2}
+  );
+};`
+    },
   },
   methods: {
     toggleEditor(editor) {
@@ -384,7 +398,7 @@ export default {
 .c-gradientEditor-label {
   display: block;
   margin-bottom: var(--lineHeight-margin-xsmall);
-  color: var(--color-themed-fg-50);
+  color: var(--color-themed-fg-72);
 }
 
 .c-gradientEditor-editors {
@@ -428,7 +442,7 @@ export default {
 
 .c-gradientEditor-gradient-tooltip {
   color: var(--color-themed-bg);
-  background-color: var(--color-themed-fg-50);
+  background-color: var(--color-themed-fg-72);
   padding: var(--spacer-xsmall);
   border-radius: var(--spacer-xsmall);
 }

layouts/default.vue

@@ -1,9 +1,13 @@
 <template>
-  <div>
+  <div
+    :class="{
+      'is-presenting': $store.state.presentation.isLive
+    }"
+  >
     <div
       :class="{
         'is-dimmed': $store.state.overlayVisible,
-        'is-moused': $store.state.mouseElement
+        'is-moused': $store.state.mouseElement,
       }"
       class="layout ie-check"
     >