| --- | |
| pageInfo: | |
| title: Dashy | |
| navLinks: | |
| - title: Home | |
| path: / | |
| - title: About | |
| path: /about | |
| - title: Source Code | |
| path: https://github.com/Lissy93/dashy |
A working demo of the pop-up can be found here.
I wanted a modal pop-up for images on my new Hugo site, and couldn't find one that worked with the styling that I do to the image path name.
I'm new to Hugo, but I feel that the solution is simple and effective. The close button has been optimzed for accessibility as it is named close, but
displays only × (×).
| .' '. __ | |
| . . . (__\_ | |
| . . . -{{_(|8) | |
| ' . . ' ' . . ' (__/ |
| __ .' '. | |
| _/__) . . . | |
| (8|)_}}- . . . | |
| `\__) '. . ' ' . . ' |
Expand Table of Contents
ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway now.
See the ES6 standard for full specification of the ECMAScript 6 language.
ES6 includes the following new features:
The key abstraction that React provides is that of a component. To reiterate, a component is some thing that is being rendered in the browser. It could be a button, a form with a bunch of fields in it, a navigation bar at the top of the page, a single input field, etc. Any of these could be its own component. React doesn't place any restrictions on how large or small a component can be. You could have an entire static site encapsulated in a single React component, but that at that point you may as well not be using React. So the first thing to remember about a component is that a component must render something. If nothing is being rendered from a component, then React will throw an error.
Let's write the most basic of components we can possibly write. Inside of BasicComponent.js, first import React at the top of the file. Our most basic of
components looks like this:
import React from 'react';
const BasicComponent = () => <div>Hello World!</div>;
| /* Smartphones (portrait and landscape) ----------- */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 480px) { | |
| /* Styles */ | |
| } | |
| /* Smartphones (landscape) ----------- */ | |
| @media only screen | |
| and (min-width : 321px) { | |
| /* Styles */ |
