feat: Move to static site
106
.eleventy.js
Normal file
@ -0,0 +1,106 @@
|
||||
const fs = require('fs');
|
||||
const markdownIt = require('markdown-it');
|
||||
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
|
||||
const htmlmin = require('html-minifier');
|
||||
|
||||
module.exports = function(eleventyConfig) {
|
||||
// Copy the `img` and `css` folders to the output
|
||||
eleventyConfig.addPassthroughCopy('assets');
|
||||
|
||||
eleventyConfig.addPlugin(syntaxHighlight);
|
||||
|
||||
let markdownLibrary = markdownIt({
|
||||
html: true,
|
||||
linkify: true
|
||||
});
|
||||
eleventyConfig.setLibrary('md', markdownLibrary);
|
||||
|
||||
// Get the first `n` elements of a collection.
|
||||
eleventyConfig.addFilter("head", (array, n) => {
|
||||
if (!Array.isArray(array) || array.length === 0) {
|
||||
return [];
|
||||
}
|
||||
return (n < 0) ? array.slice(n) : array.slice(0, n);
|
||||
});
|
||||
|
||||
eleventyConfig.addCollection('sortByTitle', function(collectionApi) {
|
||||
return collectionApi.getAll()
|
||||
.filter(function(item) {
|
||||
let extension = item.inputPath.split('.').pop();
|
||||
return extension === 'md';
|
||||
})
|
||||
.sort(function(a, b) {
|
||||
return a.data.title - b.data.title;
|
||||
});
|
||||
});
|
||||
|
||||
eleventyConfig.addCollection('categories', function(collectionApi) {
|
||||
const categories = [];
|
||||
collectionApi.getAll()
|
||||
.filter(function(item) {
|
||||
let extension = item.inputPath.split('.').pop();
|
||||
return extension === 'md';
|
||||
})
|
||||
.forEach((item) => {
|
||||
const category = item.data.category;
|
||||
if (category && !categories.includes(category)) {
|
||||
categories.push(category);
|
||||
}
|
||||
});
|
||||
return categories.sort();
|
||||
});
|
||||
|
||||
eleventyConfig.addCollection('groupByCategories', function(collectionApi) {
|
||||
const categories = {};
|
||||
collectionApi.getAll()
|
||||
.filter(function(item) {
|
||||
let extension = item.inputPath.split('.').pop();
|
||||
return extension === 'md';
|
||||
})
|
||||
.forEach((item) => {
|
||||
const category = item.data.category;
|
||||
if (!category) {
|
||||
return;
|
||||
}
|
||||
Array.isArray(categories[category])
|
||||
? categories[category].push(item)
|
||||
: categories[category] = [item];
|
||||
});
|
||||
return categories;
|
||||
});
|
||||
|
||||
eleventyConfig.addTransform('minify-html', function(content) {
|
||||
if (this.outputPath && this.outputPath.endsWith('.html')) {
|
||||
return htmlmin.minify(content, {
|
||||
useShortDoctype: true,
|
||||
removeComments: true,
|
||||
collapseWhitespace: true
|
||||
});
|
||||
}
|
||||
return content;
|
||||
});
|
||||
|
||||
return {
|
||||
// Control which files Eleventy will process
|
||||
// e.g.: *.md, *.njk, *.html, *.liquid
|
||||
templateFormats: [
|
||||
'md',
|
||||
'njk',
|
||||
'html',
|
||||
'liquid',
|
||||
],
|
||||
// Pre-process *.md files with: (default: `liquid`)
|
||||
markdownTemplateEngine: 'njk',
|
||||
|
||||
// Pre-process *.html files with: (default: `liquid`)
|
||||
htmlTemplateEngine: 'njk',
|
||||
|
||||
// These are all optional (defaults are shown):
|
||||
dir: {
|
||||
input: 'contents',
|
||||
includes: '_includes',
|
||||
data: '_data',
|
||||
output: '_site'
|
||||
}
|
||||
};
|
||||
};
|
1
.eleventyignore
Normal file
@ -0,0 +1 @@
|
||||
README.md
|
1
.github/FUNDING.yml
vendored
@ -1 +0,0 @@
|
||||
custom: ['https://paypal.me/phu0cng']
|
7
.gitignore
vendored
@ -1,7 +1,4 @@
|
||||
.DS_Store
|
||||
.netlify
|
||||
.next
|
||||
_site
|
||||
node_modules
|
||||
out
|
||||
package-lock.json
|
||||
tslint.log
|
||||
package-lock.json
|
@ -1,4 +1,3 @@
|
||||
.netlify
|
||||
.next
|
||||
node_modules
|
||||
out
|
||||
_site
|
||||
node_modules
|
2
LICENSE
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 phuoc-ng
|
||||
Copyright (c) 2019 phuocng
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
Before Width: | Height: | Size: 703 B After Width: | Height: | Size: 703 B |
Before Width: | Height: | Size: 429 B After Width: | Height: | Size: 429 B |
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.7 MiB |
Before Width: | Height: | Size: 427 B After Width: | Height: | Size: 427 B |
Before Width: | Height: | Size: 662 KiB After Width: | Height: | Size: 662 KiB |
@ -1,34 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
// Run this script from the root folder
|
||||
// $ npm run screenshot slug-of-pattern-here
|
||||
|
||||
const puppeteer = require('puppeteer');
|
||||
|
||||
const main = () => {
|
||||
const args = process.argv;
|
||||
if (!args || !Array.isArray(args) || args.length < 2) {
|
||||
console.log('Please specific the pattern: npm run screenshot slug-of-pattern-here');
|
||||
return;
|
||||
}
|
||||
|
||||
const pattern = args[2];
|
||||
|
||||
(async () => {
|
||||
const browser = await puppeteer.launch();
|
||||
|
||||
const page = await browser.newPage();
|
||||
await page.goto(`http://localhost:3000/${pattern}`);
|
||||
|
||||
await page.waitForSelector('.demo__live');
|
||||
const element = await page.$('.demo__live');
|
||||
await element.screenshot({
|
||||
path: `public/assets/patterns/${pattern}.png`,
|
||||
});
|
||||
await page.close();
|
||||
|
||||
await browser.close();
|
||||
})();
|
||||
};
|
||||
|
||||
main();
|
11
contents/_data/github.js
Normal file
@ -0,0 +1,11 @@
|
||||
const fetch = require('node-fetch');
|
||||
|
||||
module.exports = async function() {
|
||||
return fetch('https://api.github.com/repos/phuocng/csslayout')
|
||||
.then(res => res.json())
|
||||
.then(json => {
|
||||
return {
|
||||
stargazers: json.stargazers_count
|
||||
};
|
||||
});
|
||||
};
|
3
contents/_includes/follow.njk
Normal file
@ -0,0 +1,3 @@
|
||||
<div class="follow">
|
||||
Follow me on <a class="follow__link" href="https://twitter.com/nghuuphuoc">Twitter</a> and <a class="follow__link" href="https://github.com/phuocng">GitHub</a> to get more useful contents.
|
||||
</div>
|
65
contents/_includes/layouts/base.njk
Normal file
@ -0,0 +1,65 @@
|
||||
<!doctype html>
|
||||
<html lang="{{ metadata.language }}">
|
||||
<head>
|
||||
<title>{{ title or metadata.title }} - CSS Layout</title>
|
||||
<link rel="icon" href="/assets/favicon.png" type="image/png" />
|
||||
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml" />
|
||||
<link rel="mask-icon" href="/assets/mask-favicon.svg" color="#1975FF" />
|
||||
<meta charset="utf-8">
|
||||
<meta name="author" content="Nguyen Huu Phuoc" />
|
||||
<meta name="description" content="{{ title or metadata.title }}" />
|
||||
<meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:description" content="{{ title or metadata.title }}" />
|
||||
<meta name="twitter:site" content="@nghuuphuoc" />
|
||||
<meta name="twitter:title" content="{{ title or metadata.title }} - CSS Layout" />
|
||||
<meta property="og:description" content="{{ title or metadata.title }}" />
|
||||
<meta property="og:site_name" content="CSS Layout" />
|
||||
<meta property="og:title" content="{{ title or metadata.title }} - CSS Layout" />
|
||||
<meta property="og:url" content="https://csslayout.io" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
|
||||
<link rel="stylesheet" href="/styles/index.min.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap">
|
||||
</head>
|
||||
<body>
|
||||
{{ content | safe }}
|
||||
<div class="container">
|
||||
<footer class="footer">
|
||||
<div class="footer__col">
|
||||
<div class="footer__heading">My products</div>
|
||||
<ul class="footer__list">
|
||||
<li class="footer__item"><a class="footer__link" href="https://blur.page" target="_blank">BlurPage</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://formvalidation.io" target="_blank">Form Validation</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://intersectionobserver.io" target="_blank">IntersectionObserver Examples</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://react-pdf-viewer.dev" target="_blank">React PDF Viewer</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__col">
|
||||
<div class="footer__heading">Learning resources</div>
|
||||
<ul class="footer__list">
|
||||
<li class="footer__item"><a class="footer__link" href="https://1loc.dev" target="_blank">1 LOC</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://crossbrowser.dev" target="_blank">Cross Browser</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://csslayout.io" target="_blank">CSS Layout</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://getfrontend.tips" target="_blank">Front-end Tips</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://htmldom.dev" target="_blank">HTML DOM</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://thisthat.dev" target="_blank">this vs that</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__col">
|
||||
<div class="footer__heading">Follow me</div>
|
||||
<ul class="footer__list">
|
||||
<li class="footer__item"><a class="footer__link" href="https://twitter.com/nghuuphuoc" target="_blank">Twitter</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://github.com/phuocng" target="_blank">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="footer__author">
|
||||
© 2020 — 2022<br>
|
||||
Nguyen Huu Phuoc.<br>
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
23
contents/_includes/layouts/post.njk
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
---
|
||||
{% set previousPost = collections.sortByTitle | getPreviousCollectionItem(page) %}
|
||||
{% set nextPost = collections.sortByTitle | getNextCollectionItem(page) %}
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="header__breadcrumb">
|
||||
<a class="header__link" href="/">/css-layout</a>
|
||||
</div>
|
||||
<a class="header__link header__link--primary" href="https://github.com/phuocng/csslayout">GitHub {{ github.stargazers }}★</a>
|
||||
</div>
|
||||
<div class="post">
|
||||
<h1 class="post__heading">{{ title }}</h1>
|
||||
<div class="post__content">{{ content | safe }}</div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
{% if previousPost %}<a class="nav__item nav__item--prev" href="{{ previousPost.url }}">{{ previousPost.data.title }}</a>{% endif %}
|
||||
{% if nextPost %}<a class="nav__item nav__item--next" href="{{ nextPost.url }}">{{ nextPost.data.title }}</a>{% endif %}
|
||||
</div>
|
||||
{% include "follow.njk" %}
|
||||
</div>
|
29
contents/index.njk
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
title: A collection of popular layouts and patterns made with CSS
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<div class="hero">
|
||||
<h1 class="hero__heading">A collection of popular layouts and patterns made with CSS</h1>
|
||||
<a class="hero__button" href="https://github.com/phuocng/csslayout">Star me on GitHub · {{ github.stargazers }}★</a>
|
||||
</div>
|
||||
|
||||
{% for cat in collections.categories %}
|
||||
{% set posts = collections.groupByCategories[cat] %}
|
||||
<div class="category">
|
||||
<h2 class="category__name">{{ cat }}</h2>
|
||||
<div class="category__posts">
|
||||
{%- for post in posts | head(8) -%}
|
||||
<div class="card__item">
|
||||
<a class="card__link" href="{{ post.url }}">{{ post.data.title }}</a>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
<a class="category__link" href="/{{ cat | lower | slug }}">See all {{ posts | length }} helpers</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% include "follow.njk" %}
|
||||
</div>
|
8
contents/robots.njk
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
permalink: '/robots.txt'
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
Sitemap: https://csslayout.io/sitemap.xml
|
||||
User-agent: *
|
||||
Disallow:
|
13
contents/sitemap.njk
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
permalink: /sitemap.xml
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
{% for page in collections.all %}
|
||||
<url>
|
||||
<loc>https://csslayout.io{{ page.url | url }}</loc>
|
||||
<lastmod>{{ page.date.toISOString() }}</lastmod>
|
||||
</url>
|
||||
{% endfor %}
|
||||
</urlset>
|
@ -1,13 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
const useInterval = (callback: () => void, delay?: number) => {
|
||||
useEffect(() => {
|
||||
const handler = () => callback();
|
||||
if (delay !== null) {
|
||||
const id = setInterval(handler, delay);
|
||||
return () => clearInterval(id);
|
||||
}
|
||||
}, [delay]);
|
||||
};
|
||||
|
||||
export default useInterval;
|
5
next-env.d.ts
vendored
@ -1,5 +0,0 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
@ -1,9 +0,0 @@
|
||||
const withMDX = require('@next/mdx')({
|
||||
extension: /\.mdx?$/,
|
||||
});
|
||||
|
||||
module.exports = withMDX({
|
||||
// `true` will transform `/about` to `/about/index.html`
|
||||
trailingSlash: true,
|
||||
pageExtensions: ['js', 'jsx', 'tsx', 'mdx'],
|
||||
});
|
50
package.json
@ -15,43 +15,31 @@
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/1milligram/csslayout"
|
||||
"url": "https://github.com/phuocng/csslayout"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/1milligram/csslayout/issues"
|
||||
"url": "https://github.com/phuocng/csslayout/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
"dev": "next dev",
|
||||
"format": "prettier --write \"**/*.+(css|html|json|js|jsx|mdx|scss|ts|tsx)\"",
|
||||
"preexport": "npm run build",
|
||||
"export": "next export",
|
||||
"deploy": "npm run export && netlify deploy --prod --dir=out",
|
||||
"lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'",
|
||||
"screenshot": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshot.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@1milligram/design": "^0.4.1",
|
||||
"@mdx-js/loader": "^2.0.0",
|
||||
"@mdx-js/react": "^2.0.0",
|
||||
"@next/mdx": "^12.1.0",
|
||||
"next": "^12.1.0",
|
||||
"prism-react-renderer": "^1.3.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
"build": "npm run build:eleventy && npm run build:sass",
|
||||
"build:sass": "sass styles/index.scss _site/styles/index.min.css --no-source-map --style compressed",
|
||||
"build:eleventy": "npx @11ty/eleventy",
|
||||
"deploy": "npm run build && netlify deploy --prod --dir=_site",
|
||||
"format": "prettier --write \"**/*.+(json|md|scss)\"",
|
||||
"start": "npm run watch:eleventy & npm run watch:sass",
|
||||
"watch:eleventy": "npx @11ty/eleventy --serve --port=8081",
|
||||
"watch:sass": "sass styles/index.scss _site/styles/index.min.css --no-source-map --style compressed --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^17.0.39",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"puppeteer": "^13.4.0",
|
||||
"prettier": "^2.5.1",
|
||||
"sass": "^1.49.9",
|
||||
"serve": "^13.0.2",
|
||||
"typescript": "^4.5.5",
|
||||
"ts-loader": "^9.2.6",
|
||||
"ts-node": "^10.5.0",
|
||||
"tslint": "^6.1.3",
|
||||
"tslint-react": "^5.0.0"
|
||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
|
||||
"html-minifier": "^4.0.0",
|
||||
"node-fetch": "^2.6.7",
|
||||
"prettier": "^2.7.1",
|
||||
"sass": "^1.54.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"@11ty/eleventy": "^1.0.2",
|
||||
"markdown-it": "^13.0.1"
|
||||
}
|
||||
}
|
||||
|
@ -1,3 +0,0 @@
|
||||
User-agent: *
|
||||
Disallow:
|
||||
Sitemap: https://csslayout.io/sitemap.xml
|
@ -1,107 +0,0 @@
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
|
||||
<url><loc>https://csslayout.io</loc></url>
|
||||
|
||||
<!-- Patterns -->
|
||||
<url><loc>https://csslayout.io/accordion</loc></url>
|
||||
<url><loc>https://csslayout.io/arrow-buttons</loc></url>
|
||||
<url><loc>https://csslayout.io/avatar</loc></url>
|
||||
<url><loc>https://csslayout.io/avatar-list</loc></url>
|
||||
<url><loc>https://csslayout.io/badge</loc></url>
|
||||
<url><loc>https://csslayout.io/breadcrumb</loc></url>
|
||||
<url><loc>https://csslayout.io/button-with-icon</loc></url>
|
||||
<url><loc>https://csslayout.io/card</loc></url>
|
||||
<url><loc>https://csslayout.io/card-layout</loc></url>
|
||||
<url><loc>https://csslayout.io/centering</loc></url>
|
||||
<url><loc>https://csslayout.io/chip</loc></url>
|
||||
<url><loc>https://csslayout.io/circular-navigation</loc></url>
|
||||
<url><loc>https://csslayout.io/close-button</loc></url>
|
||||
<url><loc>https://csslayout.io/color-swatch</loc></url>
|
||||
<url><loc>https://csslayout.io/concave-corners</loc></url>
|
||||
<url><loc>https://csslayout.io/cookie-banner</loc></url>
|
||||
<url><loc>https://csslayout.io/corner-ribbon</loc></url>
|
||||
<url><loc>https://csslayout.io/curved-background</loc></url>
|
||||
<url><loc>https://csslayout.io/custom-checkbox-button</loc></url>
|
||||
<url><loc>https://csslayout.io/custom-radio-button</loc></url>
|
||||
<url><loc>https://csslayout.io/diagonal-section</loc></url>
|
||||
<url><loc>https://csslayout.io/docked-at-corner</loc></url>
|
||||
<url><loc>https://csslayout.io/dot-leader</loc></url>
|
||||
<url><loc>https://csslayout.io/dot-navigation</loc></url>
|
||||
<url><loc>https://csslayout.io/drawer</loc></url>
|
||||
<url><loc>https://csslayout.io/drop-area</loc></url>
|
||||
<url><loc>https://csslayout.io/drop-cap</loc></url>
|
||||
<url><loc>https://csslayout.io/dropdown</loc></url>
|
||||
<url><loc>https://csslayout.io/fading-long-section</loc></url>
|
||||
<url><loc>https://csslayout.io/feature-comparison</loc></url>
|
||||
<url><loc>https://csslayout.io/feature-list</loc></url>
|
||||
<url><loc>https://csslayout.io/fixed-at-corner</loc></url>
|
||||
<url><loc>https://csslayout.io/fixed-at-side</loc></url>
|
||||
<url><loc>https://csslayout.io/floating-label</loc></url>
|
||||
<url><loc>https://csslayout.io/folder-structure</loc></url>
|
||||
<url><loc>https://csslayout.io/full-background</loc></url>
|
||||
<url><loc>https://csslayout.io/full-screen-menu</loc></url>
|
||||
<url><loc>https://csslayout.io/holy-grail</loc></url>
|
||||
<url><loc>https://csslayout.io/initial-avatar</loc></url>
|
||||
<url><loc>https://csslayout.io/input-addon</loc></url>
|
||||
<url><loc>https://csslayout.io/inverted-corners</loc></url>
|
||||
<url><loc>https://csslayout.io/keyboard-shortcut</loc></url>
|
||||
<url><loc>https://csslayout.io/layered-card</loc></url>
|
||||
<url><loc>https://csslayout.io/lined-paper</loc></url>
|
||||
<url><loc>https://csslayout.io/masonry-grid</loc></url>
|
||||
<url><loc>https://csslayout.io/media-object</loc></url>
|
||||
<url><loc>https://csslayout.io/mega-menu</loc></url>
|
||||
<url><loc>https://csslayout.io/menu</loc></url>
|
||||
<url><loc>https://csslayout.io/modal</loc></url>
|
||||
<url><loc>https://csslayout.io/nested-dropdowns</loc></url>
|
||||
<url><loc>https://csslayout.io/notification</loc></url>
|
||||
<url><loc>https://csslayout.io/overlay-play-button</loc></url>
|
||||
<url><loc>https://csslayout.io/pagination</loc></url>
|
||||
<url><loc>https://csslayout.io/popover-arrow</loc></url>
|
||||
<url><loc>https://csslayout.io/presence-indicator</loc></url>
|
||||
<url><loc>https://csslayout.io/previous-next-buttons</loc></url>
|
||||
<url><loc>https://csslayout.io/price-tag</loc></url>
|
||||
<url><loc>https://csslayout.io/pricing-table</loc></url>
|
||||
<url><loc>https://csslayout.io/progress-bar</loc></url>
|
||||
<url><loc>https://csslayout.io/property-list</loc></url>
|
||||
<url><loc>https://csslayout.io/questions-and-answers</loc></url>
|
||||
<url><loc>https://csslayout.io/radial-progress-bar</loc></url>
|
||||
<url><loc>https://csslayout.io/radio-button-group</loc></url>
|
||||
<url><loc>https://csslayout.io/radio-switch</loc></url>
|
||||
<url><loc>https://csslayout.io/rating</loc></url>
|
||||
<url><loc>https://csslayout.io/resizable-element</loc></url>
|
||||
<url><loc>https://csslayout.io/ribbon</loc></url>
|
||||
<url><loc>https://csslayout.io/same-height-columns</loc></url>
|
||||
<url><loc>https://csslayout.io/search-box</loc></url>
|
||||
<url><loc>https://csslayout.io/separator</loc></url>
|
||||
<url><loc>https://csslayout.io/sidebar</loc></url>
|
||||
<url><loc>https://csslayout.io/simple-grid</loc></url>
|
||||
<url><loc>https://csslayout.io/slider</loc></url>
|
||||
<url><loc>https://csslayout.io/spin-button</loc></url>
|
||||
<url><loc>https://csslayout.io/split-navigation</loc></url>
|
||||
<url><loc>https://csslayout.io/split-screen</loc></url>
|
||||
<url><loc>https://csslayout.io/stacked-cards</loc></url>
|
||||
<url><loc>https://csslayout.io/stamp-border</loc></url>
|
||||
<url><loc>https://csslayout.io/statistic</loc></url>
|
||||
<url><loc>https://csslayout.io/status-light</loc></url>
|
||||
<url><loc>https://csslayout.io/stepper-input</loc></url>
|
||||
<url><loc>https://csslayout.io/sticky-footer</loc></url>
|
||||
<url><loc>https://csslayout.io/sticky-header</loc></url>
|
||||
<url><loc>https://csslayout.io/sticky-sections</loc></url>
|
||||
<url><loc>https://csslayout.io/sticky-table-column</loc></url>
|
||||
<url><loc>https://csslayout.io/sticky-table-headers</loc></url>
|
||||
<url><loc>https://csslayout.io/switch</loc></url>
|
||||
<url><loc>https://csslayout.io/tab</loc></url>
|
||||
<url><loc>https://csslayout.io/teardrop</loc></url>
|
||||
<url><loc>https://csslayout.io/three-dimensions-card</loc></url>
|
||||
<url><loc>https://csslayout.io/timeline</loc></url>
|
||||
<url><loc>https://csslayout.io/toggle-password-visibility</loc></url>
|
||||
<url><loc>https://csslayout.io/tooltip</loc></url>
|
||||
<url><loc>https://csslayout.io/tree-diagram</loc></url>
|
||||
<url><loc>https://csslayout.io/triangle-buttons</loc></url>
|
||||
<url><loc>https://csslayout.io/upload-button</loc></url>
|
||||
<url><loc>https://csslayout.io/validation-icon</loc></url>
|
||||
<url><loc>https://csslayout.io/video-background</loc></url>
|
||||
<url><loc>https://csslayout.io/voting</loc></url>
|
||||
<url><loc>https://csslayout.io/watermark</loc></url>
|
||||
<url><loc>https://csslayout.io/wizard</loc></url>
|
||||
<url><loc>https://csslayout.io/zigzag-timeline</loc></url>
|
||||
</urlset>
|
29
styles/_common.scss
Normal file
@ -0,0 +1,29 @@
|
||||
:root {
|
||||
--container-width: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #e2e8f0;
|
||||
font-family: Space Grotesk, -apple-system, Arial, ui-sans-serif, system-ui;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
width: var(--container-width);
|
||||
}
|
||||
.divider {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.text--primary {
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
--container-width: 48rem;
|
||||
}
|
||||
}
|
@ -1,30 +0,0 @@
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #333;
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
@ -1,22 +0,0 @@
|
||||
.block-ad {
|
||||
background: #e6e6e6;
|
||||
border-radius: 0.25rem;
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
max-width: 15rem;
|
||||
}
|
||||
|
||||
/* Ads */
|
||||
.carbon-img {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.carbon-poweredby {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
text-align: right;
|
||||
}
|
||||
.carbon-text {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
}
|
@ -1,8 +0,0 @@
|
||||
.demo__live {
|
||||
height: 32rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.demo__html {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
15
styles/blocks/_card.scss
Normal file
@ -0,0 +1,15 @@
|
||||
.card__item {
|
||||
background-color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1);
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card__link {
|
||||
color: #6366f1;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
30
styles/blocks/_category.scss
Normal file
@ -0,0 +1,30 @@
|
||||
:root {
|
||||
--category__name-font-size: 1.5rem;
|
||||
--category__post-num-columns: 1;
|
||||
}
|
||||
.category__name {
|
||||
font-size: var(--category__name-font-size);
|
||||
}
|
||||
.category__posts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--category__post-num-columns), 1fr);
|
||||
column-gap: 1rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
.category__link {
|
||||
background: #4338ca;
|
||||
border-radius: 9999px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
margin: 1rem auto;
|
||||
width: 12rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
:root {
|
||||
--category__name-font-size: 2rem;
|
||||
--category__post-num-columns: 2;
|
||||
}
|
||||
}
|
@ -1,8 +0,0 @@
|
||||
.block-code {
|
||||
font-size: 0.875rem;
|
||||
font-family: 'Source code pro';
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
padding: 1em;
|
||||
}
|
@ -1,22 +0,0 @@
|
||||
.block-cover {
|
||||
align-items: center;
|
||||
color: var(--color-gray-9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
width: 7rem;
|
||||
}
|
||||
.block-cover__name {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding-top: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.block-cover {
|
||||
width: 8rem;
|
||||
}
|
||||
}
|
@ -1,87 +0,0 @@
|
||||
.block-cssscan {
|
||||
font-family: -apple-system, system-ui, Roboto, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.block-cssscan__inner {
|
||||
max-width: 1024px;
|
||||
background: #c2fbd7;
|
||||
border-radius: 1rem;
|
||||
padding: 2.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.block-cssscan__title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.block-cssscan__desc {
|
||||
opacity: 0.8;
|
||||
color: #333;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.block-cssscan__more {
|
||||
margin: 0;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.block-cssscan__image {
|
||||
position: absolute;
|
||||
transform: rotate(-7deg);
|
||||
transition: all 0.3s;
|
||||
top: 14%;
|
||||
right: -37%;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.block-cssscan__inner:hover {
|
||||
.block-cssscan__more {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.block-cssscan__image {
|
||||
transform: scale(1.1) rotate(-7deg);
|
||||
top: 10%;
|
||||
right: -35%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 0px) and (max-width: 1010px) {
|
||||
.block-cssscan {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.block-cssscan__inner {
|
||||
margin-top: 2em;
|
||||
min-height: 300px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.block-cssscan__image {
|
||||
top: initial;
|
||||
bottom: -14%;
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
right: -5%;
|
||||
}
|
||||
|
||||
.block-cssscan__inner:hover .block-cssscan__image {
|
||||
top: initial;
|
||||
bottom: -10%;
|
||||
right: -5%;
|
||||
transform: scale(1.1) rotate(-7deg);
|
||||
}
|
||||
}
|
@ -1,11 +1,29 @@
|
||||
.block-follow {
|
||||
background-color: #0465eb;
|
||||
.follow {
|
||||
background: #fff;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
margin: 2rem auto;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
max-width: 20rem;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
&::after {
|
||||
background-image: linear-gradient(45deg, #9333ea, #ea580c);
|
||||
border-radius: inherit;
|
||||
content: '';
|
||||
|
||||
/* Absolute position */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
margin: -0.5rem;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.follow__link {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
@ -1,11 +1,46 @@
|
||||
/* Footer */
|
||||
.block-footer {
|
||||
border-top: 1px solid #e1e1e1;
|
||||
padding-top: 4rem;
|
||||
:root {
|
||||
--footer-num-columns: 1;
|
||||
}
|
||||
.block-footer__copyright {
|
||||
color: #afafaf;
|
||||
margin: 2rem 0 4rem 0;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--footer-num-columns), 1fr);
|
||||
column-gap: var(--footer-column-gap, 0);
|
||||
font-size: 0.9rem;
|
||||
row-gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.footer__heading {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.footer__list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.footer__item {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.footer__link {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.footer__author {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
:root {
|
||||
--footer-num-columns: 3;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
--footer-column-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
@ -1,23 +1,25 @@
|
||||
.block-header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
.block-header__inner {
|
||||
.header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.block-header__cta {
|
||||
.header__breadcrumb {
|
||||
align-items: center;
|
||||
background-color: var(--mgd-color-primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.header__link {
|
||||
align-items: center;
|
||||
color: #222;
|
||||
display: flex;
|
||||
padding: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.header__link--primary {
|
||||
background: #6366f1;
|
||||
border-radius: 9999px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
height: 2rem;
|
||||
padding: 0 1.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
31
styles/blocks/_hero.scss
Normal file
@ -0,0 +1,31 @@
|
||||
:root {
|
||||
--hero-margin: 2rem;
|
||||
--hero-width: 100%;
|
||||
--hero__heading-font-size: 2rem;
|
||||
}
|
||||
.hero {
|
||||
margin: var(--hero-margin) auto;
|
||||
text-align: center;
|
||||
width: var(--hero-width);
|
||||
}
|
||||
.hero__heading {
|
||||
font-size: var(--hero__heading-font-size);
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin: 2rem auto;
|
||||
text-align: center;
|
||||
}
|
||||
.hero__button {
|
||||
background: #6366f1;
|
||||
border-radius: 9999px;
|
||||
color: #fff;
|
||||
padding: 1rem 2rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
:root {
|
||||
--hero-margin: 3rem;
|
||||
--hero-width: 75%;
|
||||
--hero__heading-font-size: 2.5rem;
|
||||
}
|
||||
}
|
@ -1,13 +0,0 @@
|
||||
.block-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 64rem;
|
||||
}
|
||||
.block-hero {
|
||||
text-align: center;
|
||||
}
|
||||
.block-hero__heading--secondary {
|
||||
color: #808080;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
41
styles/blocks/_nav.scss
Normal file
@ -0,0 +1,41 @@
|
||||
:root {
|
||||
--nav-flex-direction: column;
|
||||
--nav__item-margin-bottom: 1rem;
|
||||
--nav__item--next-margin-left: 0;
|
||||
--nav__item--prev-margin-right: 0;
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: var(--nav-flex-direction);
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nav__item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
background: #60a5fa;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
color: #f9fafb;
|
||||
margin-bottom: var(--nav__item-margin-bottom);
|
||||
padding: 0.25rem 1rem;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav__item--next {
|
||||
margin-left: var(--nav__item--next-margin-left);
|
||||
}
|
||||
.nav__item--prev {
|
||||
margin-right: var(--nav__item--prev-margin-right);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
--nav-flex-direction: row;
|
||||
--nav__item-margin-bottom: 0;
|
||||
--nav__item--next-margin-left: 1rem;
|
||||
--nav__item--prev-margin-right: 1rem;
|
||||
}
|
||||
}
|
127
styles/blocks/_post.scss
Normal file
@ -0,0 +1,127 @@
|
||||
:root {
|
||||
--post__heading-font-size: 2rem;
|
||||
--post__heading-line-height: 1.25;
|
||||
--post__content-heading-line-height: 1.25;
|
||||
}
|
||||
|
||||
.post {
|
||||
background-color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1);
|
||||
margin: 2rem 0 2rem 0;
|
||||
padding: 2rem 1rem 1rem 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post__heading {
|
||||
color: #6366f1;
|
||||
font-size: var(--post__heading-font-size);
|
||||
font-weight: 700;
|
||||
line-height: var(--post__heading-line-height);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post__content {
|
||||
line-height: 1.5;
|
||||
|
||||
a {
|
||||
color: #6366f1;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
padding: 0.25rem 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
line-height: var(--post__content-heading-line-height);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
line-height: var(--post__content-heading-line-height);
|
||||
}
|
||||
|
||||
hr {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
height: 1px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: ol-step-counter;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol li {
|
||||
counter-increment: ol-step-counter;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
ol li::before {
|
||||
background-color: #e5e7eb;
|
||||
border-radius: 50%;
|
||||
content: counter(ol-step-counter);
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
margin-left: -2rem;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #d1d5db;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0 0 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
--post__heading-font-size: 2.5rem;
|
||||
--post__content-heading-line-height: 1.5;
|
||||
}
|
||||
}
|
@ -1,35 +1,13 @@
|
||||
@import './reset';
|
||||
@import './common';
|
||||
|
||||
// Blocks
|
||||
@import 'blocks/ad';
|
||||
@import 'blocks/browser-frame';
|
||||
@import 'blocks/code';
|
||||
@import 'blocks/cover';
|
||||
@import 'blocks/css-scan';
|
||||
@import 'blocks/follow';
|
||||
@import 'blocks/footer';
|
||||
@import 'blocks/header';
|
||||
@import 'blocks/layout';
|
||||
@import './blocks/card';
|
||||
@import './blocks/category';
|
||||
@import './blocks/hero';
|
||||
@import './blocks/follow';
|
||||
@import './blocks/footer';
|
||||
@import './blocks/header';
|
||||
@import './blocks/nav';
|
||||
@import './blocks/post';
|
||||
|
||||
// Pages
|
||||
@import 'pages/home';
|
||||
|
||||
// Patterns
|
||||
@import 'patterns/concave-corners';
|
||||
@import 'patterns/dropcap';
|
||||
@import 'patterns/dropdown';
|
||||
@import 'patterns/floating-label';
|
||||
@import 'patterns/folder-structure';
|
||||
@import 'patterns/inverted-corners';
|
||||
@import 'patterns/layered-card';
|
||||
@import 'patterns/masonry-grid';
|
||||
@import 'patterns/mega-menu';
|
||||
@import 'patterns/menu';
|
||||
@import 'patterns/nested-dropdowns';
|
||||
@import 'patterns/price-tag';
|
||||
@import 'patterns/radio-button-group';
|
||||
@import 'patterns/star';
|
||||
@import 'patterns/three-dimensions-card';
|
||||
@import 'patterns/tooltip';
|
||||
@import 'patterns/tree-diagram';
|
||||
@import 'patterns/zigzag-timeline';
|
||||
// Themes
|
||||
@import './themes/dracula.scss';
|
||||
|
@ -1,28 +0,0 @@
|
||||
.page-home__hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-home__category {
|
||||
background: #fff;
|
||||
color: #808080;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
position: sticky;
|
||||
text-align: center;
|
||||
top: 3rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-home__category::before,
|
||||
.page-home__category::after {
|
||||
align-self: center;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.page-home__collection {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
@ -1,61 +0,0 @@
|
||||
:root {
|
||||
--concave-corners-background: rgba(0, 0, 0, 0.3);
|
||||
--concave-corners-size: 1rem;
|
||||
}
|
||||
|
||||
.concave-corners {
|
||||
background-color: var(--concave-corners-background);
|
||||
|
||||
/* Used to position the corners */
|
||||
position: relative;
|
||||
|
||||
/* Misc */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.concave-corners__corner {
|
||||
/* Absolute position */
|
||||
position: absolute;
|
||||
|
||||
/* Size */
|
||||
height: var(--concave-corners-size);
|
||||
width: var(--concave-corners-size);
|
||||
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.concave-corners__corner--tl {
|
||||
/* Position */
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
/* Border radius */
|
||||
border-radius: 0 0 var(--concave-corners-size) 0;
|
||||
}
|
||||
|
||||
.concave-corners__corner--tr {
|
||||
/* Position */
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
/* Border radius */
|
||||
border-radius: 0 0 0 var(--concave-corners-size);
|
||||
}
|
||||
|
||||
.concave-corners__corner--bl {
|
||||
/* Position */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
/* Border radius */
|
||||
border-radius: 0 var(--concave-corners-size) 0 0;
|
||||
}
|
||||
|
||||
.concave-corners__corner--br {
|
||||
/* Position */
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
/* Border radius */
|
||||
border-radius: var(--concave-corners-size) 0 0 0;
|
||||
}
|
@ -1,9 +0,0 @@
|
||||
.p-drop-cap:first-letter {
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
float: left;
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
margin: 0 8px 0 0;
|
||||
padding: 0 8px;
|
||||
}
|
@ -1,7 +0,0 @@
|
||||
.p-dropdown-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-dropdown:hover .p-dropdown-content {
|
||||
display: block;
|
||||
}
|
@ -1,9 +0,0 @@
|
||||
.p-floating-container label {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.p-floating-container input:not(:placeholder-shown) + label {
|
||||
background: #fff;
|
||||
transform: translate(0, -50%);
|
||||
opacity: 1;
|
||||
}
|
@ -1,49 +0,0 @@
|
||||
:root {
|
||||
--folder-structure-item-height: 1rem;
|
||||
--folder-structure-item-margin-left: 2rem;
|
||||
--folder-structure-item-padding-top: 1rem;
|
||||
}
|
||||
|
||||
.folder-structure ul {
|
||||
/* Reset */
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.folder-structure li {
|
||||
padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.folder-structure li::before {
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
|
||||
|
||||
/* Size */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.folder-structure li::after {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
|
||||
transform: translate(-100%, 0);
|
||||
|
||||
/* Size */
|
||||
width: var(--folder-structure-item-margin-left);
|
||||
}
|
||||
|
||||
/* Remove the border from the last item */
|
||||
.folder-structure li:last-child::before {
|
||||
height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
|
||||
}
|
@ -1,48 +0,0 @@
|
||||
:root {
|
||||
--inverted-corners-background: #52525b;
|
||||
--inverted-corners-size: 2rem;
|
||||
}
|
||||
|
||||
.inverted-corners {
|
||||
background-color: var(--inverted-corners-background);
|
||||
|
||||
/* Used to position the corner */
|
||||
position: relative;
|
||||
|
||||
/* Misc */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inverted-corners::before {
|
||||
content: '';
|
||||
|
||||
/* Absolute position */
|
||||
bottom: calc(-2 * var(--inverted-corners-size));
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
||||
/* Size */
|
||||
height: calc(2 * var(--inverted-corners-size));
|
||||
width: var(--inverted-corners-size);
|
||||
|
||||
/* Border */
|
||||
background-color: transparent;
|
||||
border-top-left-radius: var(--inverted-corners-size);
|
||||
box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
|
||||
}
|
||||
|
||||
/* Use case */
|
||||
.inverted-corners--speech {
|
||||
/* Border radius */
|
||||
border-bottom-right-radius: var(--inverted-corners-size);
|
||||
border-top-left-radius: var(--inverted-corners-size);
|
||||
border-top-right-radius: var(--inverted-corners-size);
|
||||
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Misc */
|
||||
color: #fff;
|
||||
}
|
@ -1,21 +0,0 @@
|
||||
.layered-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layered-card::before {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform: translate(1rem, 1rem);
|
||||
|
||||
/* Size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
/* Display under the main content */
|
||||
z-index: -1;
|
||||
}
|
@ -1,15 +0,0 @@
|
||||
.masonry-grid {
|
||||
column-count: 3;
|
||||
column-gap: 1rem;
|
||||
|
||||
/* Misc */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.masonry-grid__item {
|
||||
/* Prevent a column from breaking into multiple columns */
|
||||
break-inside: avoid;
|
||||
|
||||
/* Misc */
|
||||
margin-bottom: 1rem;
|
||||
}
|
@ -1,17 +0,0 @@
|
||||
.p-mega-menu-container {
|
||||
position: relative;
|
||||
}
|
||||
.p-mega-menu-content {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
display: none;
|
||||
left: 0px;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
.p-mega-menu-trigger:hover .p-mega-menu-content {
|
||||
display: block;
|
||||
}
|
@ -1,3 +0,0 @@
|
||||
.p-menu-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
@ -1,38 +0,0 @@
|
||||
.p-nested-dropdowns {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-nested-dropdowns li {
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-nested-dropdowns ul {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
display: none;
|
||||
left: 0;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.p-nested-dropdowns ul ul {
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.p-nested-dropdowns li:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.p-nested-dropdowns li:hover > ul {
|
||||
display: block;
|
||||
}
|
@ -1,58 +0,0 @@
|
||||
:root {
|
||||
--price-tag-background: rgba(0, 0, 0, 0.3);
|
||||
--price-tag-height: 2rem;
|
||||
}
|
||||
|
||||
.price-tag {
|
||||
background: var(--price-tag-background);
|
||||
color: #fff;
|
||||
|
||||
/* Center the price */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Used to position the triangle */
|
||||
position: relative;
|
||||
|
||||
/* Size */
|
||||
height: var(--price-tag-height);
|
||||
|
||||
/* Spacing */
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
/* The triangle */
|
||||
.price-tag::before {
|
||||
content: '';
|
||||
|
||||
border-color: transparent var(--price-tag-background) transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
|
||||
0rem;
|
||||
|
||||
/* Position */
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
transform: translate(-100%, 0px);
|
||||
}
|
||||
|
||||
/* The dot */
|
||||
.price-tag::after {
|
||||
content: '';
|
||||
|
||||
/* Make it like a cirle */
|
||||
background: #fff;
|
||||
border-radius: 9999rem;
|
||||
|
||||
/* Position */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-0.5rem, -50%);
|
||||
|
||||
/* Size */
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
}
|
@ -1,6 +0,0 @@
|
||||
.p-radio-button-group label {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.p-radio-button-group label:last-child {
|
||||
border-right-color: transparent;
|
||||
}
|
@ -1,28 +0,0 @@
|
||||
.p-rating {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
justify-content: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.p-rating .p-rating-star:hover,
|
||||
.p-rating .p-rating-star:hover ~ .p-rating-star {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.p-rating .p-rating-star:hover:before,
|
||||
.p-rating .p-rating-star:hover ~ .p-rating-star:before {
|
||||
color: #00449e;
|
||||
content: '\2605';
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.p-rating-star {
|
||||
background-color: transparent;
|
||||
border: transparent;
|
||||
margin: 0 2px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
@ -1,41 +0,0 @@
|
||||
:root {
|
||||
--three-dimensions-card-left-side-width: 1rem;
|
||||
}
|
||||
|
||||
.three-dimensions-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* The left side */
|
||||
.three-dimensions-card::before {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
top: var(--three-dimensions-card-left-side-width);
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
transform: translate(-100%, 0) skewY(-45deg);
|
||||
transform-origin: left top;
|
||||
|
||||
/* Size */
|
||||
height: 100%;
|
||||
width: var(--three-dimensions-card-left-side-width);
|
||||
}
|
||||
|
||||
/* The bottom side */
|
||||
.three-dimensions-card::after {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
transform: translate(0, 100%) skewX(-45deg);
|
||||
transform-origin: left top;
|
||||
|
||||
/* Size */
|
||||
height: var(--three-dimensions-card-left-side-width);
|
||||
width: 100%;
|
||||
}
|
@ -1,32 +0,0 @@
|
||||
.p-tooltip {
|
||||
position: relative;
|
||||
}
|
||||
.p-tooltip:hover .p-tooltip-arrow,
|
||||
.p-tooltip:hover .p-tooltip-content {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
.p-tooltip-arrow {
|
||||
border: 8px solid transparent;
|
||||
border-top-color: #00439e;
|
||||
bottom: 100%;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 8px);
|
||||
width: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.p-tooltip-content {
|
||||
background-color: #00439e;
|
||||
border-radius: 2px;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -8px);
|
||||
z-index: 10;
|
||||
}
|
@ -1,62 +0,0 @@
|
||||
.tree-diagram ul {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
/* Reset */
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 1rem 0.5rem 0rem 0.5rem;
|
||||
}
|
||||
|
||||
.tree-diagram ul ul::before {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.tree-diagram li {
|
||||
padding: 1rem 0.5rem 0rem 0.5rem;
|
||||
position: relative;
|
||||
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tree-diagram li::before {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
height: 1rem;
|
||||
|
||||
/* Position */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.tree-diagram li::after {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
|
||||
/* Position */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.tree-diagram li:first-child::before,
|
||||
.tree-diagram li:last-child::after {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
li.tree-diagram__root::before {
|
||||
border-right: none;
|
||||
}
|
@ -1,42 +0,0 @@
|
||||
.zigzag-timeline__item {
|
||||
/* Used to position the milestone */
|
||||
position: relative;
|
||||
|
||||
/* Border */
|
||||
border-bottom: 1px solid #71717a;
|
||||
|
||||
/* Take full width */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zigzag-timeline__milestone {
|
||||
/* Absolute position */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
/* Circle it */
|
||||
border-radius: 50%;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
|
||||
/* Misc */
|
||||
background: #71717a;
|
||||
}
|
||||
|
||||
/* Styles for even items */
|
||||
.zigzag-timeline__item:nth-child(2n) {
|
||||
border-left: 1px solid #71717a;
|
||||
}
|
||||
.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
|
||||
left: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Styles for odd items */
|
||||
.zigzag-timeline__item:nth-child(2n + 1) {
|
||||
border-right: 1px solid #71717a;
|
||||
}
|
||||
.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
124
styles/themes/_dracula.scss
Normal file
@ -0,0 +1,124 @@
|
||||
// https://github.com/PrismJS/prism-themes/blob/master/themes/prism-dracula.css
|
||||
|
||||
/**
|
||||
* Dracula Theme originally by Zeno Rocha [@zenorocha]
|
||||
* https://draculatheme.com/
|
||||
*
|
||||
* Ported for PrismJS by Albert Vallverdu [@byverdu]
|
||||
*/
|
||||
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #282a36;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #6272a4;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #ff79c6;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #bd93f9;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #50fa7b;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #8be9fd;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #ffb86c;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
@ -1,23 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/",
|
||||
"esModuleInterop": true,
|
||||
"sourceMap": true,
|
||||
"noImplicitAny": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"target": "esnext",
|
||||
"jsx": "preserve",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["bin", "node_modules"]
|
||||
}
|
11
tslint.json
@ -1,11 +0,0 @@
|
||||
{
|
||||
"defaultSeverity": "error",
|
||||
"extends": ["tslint:latest", "tslint-react"],
|
||||
"jsRules": {},
|
||||
"rules": {
|
||||
"interface-name": false,
|
||||
"jsx-no-multiline-js": false,
|
||||
"quotemark": ["single"]
|
||||
},
|
||||
"rulesDirectory": []
|
||||
}
|
@ -1 +0,0 @@
|
||||
export const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));
|
@ -1,3 +0,0 @@
|
||||
export function randomFromArray<T>(array: T[]): T {
|
||||
return array[Math.floor(Math.random() * array.length)];
|
||||
}
|
@ -1,12 +0,0 @@
|
||||
type Tuple<T> = [number, T[]];
|
||||
|
||||
export function randomItems<T>(arr: T[], count: number): T[] {
|
||||
const result = arr.concat().reduce(
|
||||
(p, _, __, arr) => {
|
||||
const [a, b] = p;
|
||||
return a < count ? [a + 1, b.concat(arr.splice((Math.random() * arr.length) | 0, 1))] : p;
|
||||
},
|
||||
[0, []] as Tuple<T>
|
||||
);
|
||||
return (result as Tuple<T>)[1];
|
||||
}
|
@ -1 +0,0 @@
|
||||
export const slug = (item: string) => item.toLowerCase().split(' ').join('-');
|