Nick Freear nfreear

## vue-slow-reveal.js.html
<!doctype html> <title> slow-reveal — Vue.js </title>

<link rel=stylesheet href="https://unpkg.com/vue-oneline@1.2.0/demo/demo.css">
<style>

.slow-reveal-start {
  opacity: 0;
}

.slow-reveal-end {

## bamboo-bicycle-design--25-may-2019.svg

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                nfreear
                / bamboo-bicycle-design--25-may-2019.svg
            
            
              Last active Jun 8, 2019
            
              
                Nick F's Bamboo Bike, 25-May-2019 | © Bamboo Bicycle Club ~ https://bamboobicycleclub.org

              
      View bamboo-bicycle-design--25-may-2019.svg
  
    
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## MY_COMPONENT_TPL.vue
<!--
    @copyright 2019 The Open University
    @author    Institute of Educational Technology
    @license   gpl-v3-or-later
-->

<script>
/**
 * The '_XXX_' component -- ...
 *

## v-translate.html
<!doctype html> <title> v-translate </title>

<style> body { margin: 2em auto; max-width: 30rem; } </style>


<div id="app">

  <h1> {{ 'i18n' | _ }} </h1>

  <h2> {{ 'Hello World!' | _('en') }} </h2>

## v-drag-on-drop.html
<!doctype html> <title> v-drag-on-drop </title>

<style>
body { margin: 1rem auto; max-width: 42rem; }

.demo > li,
.live-log {
  background: #eee;
  border: 1px dotted gray;
  border-radius: .2rem;

## bs-drop-horizontal-sideways-menu.html
<!doctype html> <title> *BS Drop-horizontal </title>

<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" />

<style>
.dropdown-menu {
  background: #eee;
  border-radius: 0;
}

## v-horiz-flip.html
<!doctype html> <title> *CSS / Vue Flip </title>

<h1> CSS / Vue horizontal flip </h1>


<style>
  /* entire container, keeps perspective */
  .flip-container {
  	perspective: 1000px;
  }

## snake-layout-static.html
<!doctype html> <title> *Snake - static </title>

<link rel=stylesheet href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" />

<style>
.snake-layout > * > div { background: darkgreen; color: white; font-size: 2rem; height: 234px; width: 416px; }

.d-flex > * { transition: all 5s ease-in-out; -X-flex-grow: 3; }
</style>

## bootstrap-vue-snake.html
<!doctype html> <title> *Snake layout — Vue & Bootstrap </title>

<link rel=stylesheet href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" />

<style>
:root {
  --oj-card-width: 416px;
  --oj-card-height: 234px;
}

## vue-draggable.js.html
<!doctype html> <title> Vue draggable </title>

<style>
  body { margin: 1rem auto; max-width: 35rem; }
  .draggable li { background: #eee; border: 1px solid gray; cursor: grab; margin: .5rem; padding: 1rem; }
  .my-handle { border: 1px solid red; }
</style>


<div id="app">