mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-07-27 12:42:28 +02:00
added compact mode switcher
This commit is contained in:
@@ -1,29 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
enum themes {
|
||||
dark = "dark",
|
||||
light = "light",
|
||||
}
|
||||
|
||||
function ThemeSwitcher() {
|
||||
const initTheme = document.documentElement.dataset.theme;
|
||||
const [theme, setTheme] = useState(initTheme);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("theme", theme ?? themes.light);
|
||||
document.documentElement.dataset.theme = theme;
|
||||
}, [theme]);
|
||||
|
||||
const getOppositeTheme = () => {
|
||||
return theme === themes.light ? themes.dark : themes.light;
|
||||
};
|
||||
|
||||
function toggleTheme() {
|
||||
const newTheme = theme === themes.dark ? themes.light : themes.dark;
|
||||
setTheme(newTheme);
|
||||
}
|
||||
|
||||
return <a href="#" onClick={toggleTheme}>{`Switch to ${getOppositeTheme()} mode`}</a>;
|
||||
}
|
||||
|
||||
export default ThemeSwitcher;
|
||||
@@ -27,6 +27,94 @@ Array [
|
||||
>
|
||||
↩ All articles
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>,
|
||||
<div>
|
||||
|
||||
@@ -28,6 +28,94 @@ exports[`Post renders correctly 1`] = `
|
||||
>
|
||||
↩ All articles
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Image } from "@/components/Image";
|
||||
import { Link } from "gatsby";
|
||||
import React, { FunctionComponent } from "react";
|
||||
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
|
||||
import * as styles from "./PostHeader.module.scss";
|
||||
|
||||
type Props = { author: { name: string; photo: string } };
|
||||
@@ -21,6 +22,7 @@ export const PostHeader: FunctionComponent<Props> = ({ author }) => {
|
||||
<Link to="/" style={{ lineHeight: "50px", marginRight: "10px" }}>
|
||||
↩ All articles
|
||||
</Link>
|
||||
<ThemeSwitcher showLabel={false} />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,8 +2,6 @@
|
||||
@import "../../../assets/scss/mixins";
|
||||
|
||||
.menu {
|
||||
@include margin-bottom(1);
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
@include margin-equal(0);
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { useSiteMetadata } from "@/hooks";
|
||||
import React from "react";
|
||||
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
|
||||
|
||||
import { Author } from "./Author";
|
||||
import { Contacts } from "./Contacts";
|
||||
import { Copyright } from "./Copyright";
|
||||
import { Menu } from "./Menu";
|
||||
|
||||
import * as styles from "./Sidebar.module.scss";
|
||||
import { useSiteMetadata } from "@/hooks";
|
||||
import ThemeSwitcher from "../DarkmodeSwitch/ThemeSwitcher";
|
||||
|
||||
type Props = {
|
||||
isIndex?: boolean;
|
||||
@@ -24,7 +23,7 @@ const Sidebar = ({ isIndex }: Props) => {
|
||||
<Contacts contacts={author.contacts} />
|
||||
<Copyright copyright={copyright} />
|
||||
<Menu menu={legalMenu} />
|
||||
<ThemeSwitcher />
|
||||
<ThemeSwitcher showLabel />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -141,12 +141,96 @@ exports[`Sidebar renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
39
src/components/ThemeSwitcher/ThemeSwitcher.tsx
Normal file
39
src/components/ThemeSwitcher/ThemeSwitcher.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
/* eslint-disable no-undef */
|
||||
import React, { FunctionComponent, useEffect, useState } from "react";
|
||||
import Toggle from "react-toggle";
|
||||
import { Moon } from "./components/Moon";
|
||||
import { Sun } from "./components/Sun";
|
||||
import "./theme.scss";
|
||||
import { Themes } from "./Themes";
|
||||
|
||||
type Props = { showLabel: boolean };
|
||||
|
||||
export const ThemeSwitcher: FunctionComponent<Props> = ({ showLabel }) => {
|
||||
const initTheme = document.documentElement.dataset.theme;
|
||||
const [theme, setTheme] = useState(initTheme);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("theme", theme ?? Themes.light);
|
||||
document.documentElement.dataset.theme = theme;
|
||||
}, [theme]);
|
||||
|
||||
function toggleTheme() {
|
||||
const newTheme = theme === Themes.dark ? Themes.light : Themes.dark;
|
||||
setTheme(newTheme);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{showLabel && "Switch color mode:"}
|
||||
{showLabel && <br />}
|
||||
<Toggle
|
||||
checked={theme === Themes.dark}
|
||||
icons={{
|
||||
checked: <Moon />,
|
||||
unchecked: <Sun />,
|
||||
}}
|
||||
onChange={toggleTheme}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
4
src/components/ThemeSwitcher/Themes.ts
Normal file
4
src/components/ThemeSwitcher/Themes.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export enum Themes {
|
||||
dark = "dark",
|
||||
light = "light",
|
||||
}
|
||||
18
src/components/ThemeSwitcher/components/Moon.tsx
Normal file
18
src/components/ThemeSwitcher/components/Moon.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { faMoon } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import React from "react";
|
||||
|
||||
export const Moon = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "1.1em",
|
||||
position: "absolute",
|
||||
top: "-4px",
|
||||
color: "#f1c40f",
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faMoon} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
19
src/components/ThemeSwitcher/components/Sun.tsx
Normal file
19
src/components/ThemeSwitcher/components/Sun.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { faSun } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import React from "react";
|
||||
|
||||
export const Sun = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
color: "#f39c12",
|
||||
position: "absolute",
|
||||
fontSize: "1em",
|
||||
top: "-3px",
|
||||
left: "-3px",
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faSun} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
116
src/components/ThemeSwitcher/theme.scss
Normal file
116
src/components/ThemeSwitcher/theme.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
.react-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: pan-x;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.react-toggle-screenreader-only {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.react-toggle--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
-webkit-transition: opacity 0.25s;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
background-color: #4D4D4D;
|
||||
border-radius: 30px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
bottom: 0px;
|
||||
height: 10px;
|
||||
left: 8px;
|
||||
line-height: 0;
|
||||
margin-bottom: auto;
|
||||
margin-top: auto;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track-check {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-x {
|
||||
bottom: 0px;
|
||||
height: 10px;
|
||||
line-height: 0;
|
||||
margin-bottom: auto;
|
||||
margin-top: auto;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0px;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track-x {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.react-toggle-thumb {
|
||||
background-color: #FAFAFA;
|
||||
border: 1px solid #4D4D4D;
|
||||
border-radius: 50%;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 22px;
|
||||
left: 1px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
transition: all 0.25s ease;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
left: 27px;
|
||||
}
|
||||
@@ -142,12 +142,96 @@ exports[`CategoriesTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -142,12 +142,96 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -142,12 +142,96 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -142,12 +142,96 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -142,12 +142,96 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -29,6 +29,94 @@ exports[`PostTemplate renders correctly 1`] = `
|
||||
>
|
||||
↩ All articles
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -142,12 +142,96 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -142,12 +142,96 @@ exports[`TagsTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user