Joseph Martinez hobo71

Floating Animation - CSS

Simple floating CSS animation using transform and box-shadow.

Summerbird's logo (SVG) animated in CSS

It uses CSS transform and perspective to create a unique hololens-like animation effect.

Can be used for many more use cases, you will probably have your own ideas.

This is an experimental idea, you may want to flesh it out for use in production.

A responsive grid based on flexbox. Requires only two classes to function, and is infinitely expandable! I also added a semantic version.

Add kiosk.js file with the content below to your www folder in config.

Like any other custom script, use ui-lovelace.yaml resources section to reference the kiosk.js file.

Make sure you add kiosk somewhere in your URL. You can use it in the id of your view or in the query string.

	#!/usr/bin/env ruby

	require 'tmpdir'
	require 'fileutils'

	dir = Dir.tmpdir()

	if File.directory?("#{dir}/bulma")
	FileUtils.remove_dir("#{dir}/bulma")
	end


	<div class="untitled">
	<div class="untitled__slides">
	<div class="untitled__slide">
	<div class="untitled__slideBg"></div>
	<div class="untitled__slideContent">
	<span>London</span>
	<span>Scout</span>
	<a class="button" href="https://unsplash.com/@scoutthecity" target="/black">Unsplash Profile</a>
	</div>

	<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
	<section>
	<div class="nav">
	<ul class="radial-nav">
	<li data-content="js"><a href="#">JS</a></li>
	<li data-content="css"><a href="#">CSS</a></li>
	<li data-content="html5"><a href="#">HTML5</a></li>
	<li data-content="jade"><a href="#">JADE</a></li>
	<li data-content="git"><a href="#">GIT</a></li>
	<li data-content="grunt"><a href="#">GRUNT</a></li>

	// Ensure CSS grid works with IE 11 spec.
	// https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/
	// sass-lint:disable no-vendor-prefixes, no-duplicate-properties
	@mixin display-grid {
	display: -ms-grid;
	display: grid;
	}

	// $columns values should be delimited by a space
	@mixin grid-template-columns($columns...) {

	linter:
	rules:
	- always_declare_return_types
	- always_put_control_body_on_new_line
	- always_put_required_named_parameters_first
	- always_require_non_null_named_parameters
	- always_specify_types
	- always_use_package_imports
	- annotate_overrides
	- avoid_annotating_with_dynamic