YoelCieno

" START customize options
set number
syntax on
set helplang=es

"" Set the mouse
set mouse=a

"" Show the character closed to )] or }
set showmatch

YoelCieno

$color-gray-0_75: #eff2f6bf;
$color-gray-1: #eff2f6;
$color-gray-2: #ebeff6;
$color-gray-3: #dae4f0;
$color-gray-4: #c9d4e1;
$color-gray-5: #b5c3d6;
$color-gray-6: #a7b8cd;
$color-gray-7: #e3e2e1; // proposal-status
$color-gray-8: #cac9c7; // proposal-status-bar
$color-gray-9: #c7bfbf; // blocked-status

YoelCieno

// Max height two to two ))
@for $height from 15 through 5 {
    .max-height-#{$height * 2} {
      max-height: $height * 2vw;
    }
}

// Simple @for
@for $n from 1 through 4 {
    .max-w-#{$n * 25} {

YoelCieno

<div id="app">
  <button @click="showModal = true" class="button">Show Modal</button>
  <transition name="fade" appear>
    <div class="modal-overlay" 
         v-if="showModal" 
         @click="showModal = false"></div>
  </transition>
  <transition name="pop" appear>
    <div class="modal" 
         role="dialog" 

YoelCieno

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

YoelCieno

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

YoelCieno

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

YoelCieno

" START customize options

set number
syntax on
set helplang=es

"" Show the character closed to )] or }
set showmatch

"" Respect previous indent

YoelCieno

CSS 3D Chess Board Model with Pieces ♟️

I'm not so good to play chess. All I know is how to pronounce the word. But I love to play it.

It's my first day to learn chess and I made this CSS 3D Chess Board Model with Pieces to make the learning more fun.

Made it entirely in DOM, no canvas, no 3D libraries, plain DIV 500+ elements only. I'll turn it into a functional game after learning it properly, of course in canvas.

A Pen by Yoel Cieno on CodePen.

YoelCieno

Font Face

A mixin for writing @font-face rules in SASS.

Usage

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face(Samplino, fonts/Samplino);