1
0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-01-16 20:38:55 +01:00

feat: Move to static site

This commit is contained in:
Phuoc Nguyen 2022-09-12 08:41:38 +07:00
parent dbfaaf359c
commit e2ec4d94fc
69 changed files with 776 additions and 1090 deletions

106
.eleventy.js Normal file
View 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
View File

@ -0,0 +1 @@
README.md

1
.github/FUNDING.yml vendored
View File

@ -1 +0,0 @@
custom: ['https://paypal.me/phu0cng']

7
.gitignore vendored
View File

@ -1,7 +1,4 @@
.DS_Store
.netlify
.next
_site
node_modules
out
package-lock.json
tslint.log
package-lock.json

View File

@ -1,4 +1,3 @@
.netlify
.next
node_modules
out
_site
node_modules

View File

@ -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

View File

Before

Width:  |  Height:  |  Size: 703 B

After

Width:  |  Height:  |  Size: 703 B

View File

Before

Width:  |  Height:  |  Size: 429 B

After

Width:  |  Height:  |  Size: 429 B

View File

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 2.7 MiB

View File

Before

Width:  |  Height:  |  Size: 427 B

After

Width:  |  Height:  |  Size: 427 B

View File

Before

Width:  |  Height:  |  Size: 662 KiB

After

Width:  |  Height:  |  Size: 662 KiB

View File

@ -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
View 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
};
});
};

View 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>

View 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>

View 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
View 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
View 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
View 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>

View File

@ -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
View File

@ -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.

View File

@ -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'],
});

View File

@ -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"
}
}

View File

@ -1,3 +0,0 @@
User-agent: *
Disallow:
Sitemap: https://csslayout.io/sitemap.xml

View File

@ -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
View 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;
}
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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
View 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;
}

View 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;
}
}

View File

@ -1,8 +0,0 @@
.block-code {
font-size: 0.875rem;
font-family: 'Source code pro';
height: auto;
margin: 0;
overflow: auto;
padding: 1em;
}

View File

@ -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;
}
}

View File

@ -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);
}
}

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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
View 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;
}
}

View File

@ -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
View 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
View 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;
}
}

View File

@ -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';

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -1,7 +0,0 @@
.p-dropdown-content {
display: none;
}
.p-dropdown:hover .p-dropdown-content {
display: block;
}

View File

@ -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;
}

View File

@ -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);
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -1,3 +0,0 @@
.p-menu-item:hover {
background-color: rgba(0, 0, 0, 0.1);
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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%;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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
View 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;
}

View File

@ -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"]
}

View File

@ -1,11 +0,0 @@
{
"defaultSeverity": "error",
"extends": ["tslint:latest", "tslint-react"],
"jsRules": {},
"rules": {
"interface-name": false,
"jsx-no-multiline-js": false,
"quotemark": ["single"]
},
"rulesDirectory": []
}

View File

@ -1 +0,0 @@
export const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));

View File

@ -1,3 +0,0 @@
export function randomFromArray<T>(array: T[]): T {
return array[Math.floor(Math.random() * array.length)];
}

View File

@ -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];
}

View File

@ -1 +0,0 @@
export const slug = (item: string) => item.toLowerCase().split(' ').join('-');