Hotfix: Nom des dossiers + Ajout /functions/slug
This commit is contained in:
Divlo
@@ -0,0 +1,25 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env*
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@@ -0,0 +1,6 @@
|
||||
.footer {
|
||||
border-top: var(--border-header-footer);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import './Footer.css';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="footer">
|
||||
<p className="footer-text"><a href="https://divlo.fr/" target="_blank" rel="noopener noreferrer">Divlo</a> | Tous droits réservés</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
.FunctionCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
|
||||
border: 1px solid black;
|
||||
border-radius: 1rem;
|
||||
margin: 0 0 50px 0;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
}
|
||||
.FunctionCard__container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.FunctionCard:hover {
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
/* col-md */
|
||||
@media (min-width: 768px) {
|
||||
.FunctionCard {
|
||||
margin: 0 30px 50px 30px;
|
||||
}
|
||||
}
|
||||
/* col-xl */
|
||||
@media (min-width: 1200px) {
|
||||
.FunctionCard {
|
||||
margin: 0 20px 50px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.FunctionCard__top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.FunctionCard__image {
|
||||
width: 150px;
|
||||
}
|
||||
.FunctionCard__title {
|
||||
font-size: 1.4em;
|
||||
margin: 0;
|
||||
color: var(--important);
|
||||
font-weight: 300;
|
||||
}
|
||||
.FunctionCard__description {
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
.FunctionCard__info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.FunctionCard__category {
|
||||
border-radius: 0.5em;
|
||||
padding: 0.5em;
|
||||
margin-right: 20px;
|
||||
font-size: 16.4px;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import Link from 'next/link';
|
||||
import { useState, forwardRef } from 'react';
|
||||
import Loader from '../Loader';
|
||||
import './FunctionCard.css';
|
||||
|
||||
const FunctionCard = forwardRef((props, ref) => {
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const handleLoad = () => {
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={"/functions/[slug]"}
|
||||
as={`/functions/${props.slug}`}
|
||||
>
|
||||
{/* FunctionCard a une hauteur pendant chargement */}
|
||||
<div ref={ref} style={isLoading ? { height: "360px", justifyContent: "center" } : null} className={"FunctionCard col-sm-24 col-md-10 col-xl-7"}>
|
||||
|
||||
{isLoading && <Loader width="125px" height="125px" />}
|
||||
|
||||
<div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}>
|
||||
<div className="FunctionCard__top">
|
||||
<img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={props.image} />
|
||||
<h2 className="FunctionCard__title">{props.title}</h2>
|
||||
<p className="FunctionCard__description">{props.description}</p>
|
||||
</div>
|
||||
<div className="FunctionCard__info">
|
||||
<p className="FunctionCard__category" style={{ backgroundColor: props.category.color }}>{props.category.name}</p>
|
||||
<p className="FunctionCard__publication-date">{props.publicationDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
|
||||
export default FunctionCard;
|
||||
@@ -0,0 +1,37 @@
|
||||
import Head from 'next/head';
|
||||
|
||||
const HeadTag = ({ title, image, description }) => (
|
||||
<Head>
|
||||
<title>{title || ""}</title>
|
||||
<link rel="icon" type="image/png" href={image} />
|
||||
|
||||
{/* Meta Tag */}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href="function.divlo.fr"/>
|
||||
<meta name="Language" content="fr" />
|
||||
<meta name="theme-color" content="#ffd800" />
|
||||
|
||||
{/* Open Graph Metadata */}
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://function.divlo.fr/" />
|
||||
<meta property="og:image" content={image} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:locale" content="fr_FR" />
|
||||
<meta property="og:site_name" content="FunctionProject" />
|
||||
|
||||
{/* Twitter card Metadata */}
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:description" content={description} />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:site" content="@Divlo_FR" />
|
||||
<meta name="twitter:image:src" content={image} />
|
||||
<meta name="twitter:creator" content="@Divlo_FR" />
|
||||
|
||||
{/* Preloader script */}
|
||||
<script src="/js/preloader.js"></script>
|
||||
</Head>
|
||||
);
|
||||
|
||||
export default HeadTag;
|
||||
@@ -0,0 +1,161 @@
|
||||
/* HEADER */
|
||||
.Header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: .5rem 1rem;
|
||||
|
||||
border-bottom: var(--border-header-footer);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.Header {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.Header > .container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.Header > .container {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
/* Brand */
|
||||
.Header__brand-link {
|
||||
display: inline-block;
|
||||
padding-top: .3125rem;
|
||||
padding-bottom: .3125rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#brand-link__logo-small-screen {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 496px) {
|
||||
#brand-link__logo {
|
||||
display: none;
|
||||
}
|
||||
.Header__brand-link {
|
||||
width: 30%;
|
||||
}
|
||||
#brand-link__logo-small-screen {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.Header .Header__navbar {
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
.Header__navbar {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar__list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: auto;
|
||||
}
|
||||
.navbar__list.navbar__list-active {
|
||||
margin: 0 !important;
|
||||
display: flex;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.navbar__list {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
.navbar-link {
|
||||
display: block;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
/* Details Styling */
|
||||
.navbar-link:hover {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, .75);
|
||||
}
|
||||
.navbar-link, .navbar-link-active {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
.navbar-link-active, .navbar-link-active:hover, .Header__brand-link {
|
||||
color: var(--text-color);
|
||||
}
|
||||
.navbar-item {
|
||||
list-style: none;
|
||||
}
|
||||
.navbar-link {
|
||||
font-size: 16px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
/* Hamburger Icon */
|
||||
.Header__hamburger {
|
||||
display: none;
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
border-radius: .25rem;
|
||||
position: relative;
|
||||
}
|
||||
.Header__hamburger > span, .Header__hamburger > span::before, .Header__hamburger > span::after {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 1.3px;
|
||||
background-color: rgba(255, 255, 255);
|
||||
}
|
||||
.Header__hamburger > span {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: background-color .3s ease-in-out;
|
||||
}
|
||||
.Header__hamburger > span::before, .Header__hamburger > span::after {
|
||||
content: '';
|
||||
transition: transform .3s ease-in-out;
|
||||
}
|
||||
.Header__hamburger > span::before {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
.Header__hamburger > span::after {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
.Header__hamburger-active span {
|
||||
background-color: transparent;
|
||||
}
|
||||
.Header__hamburger-active > span::before {
|
||||
transform: translateY(0px) rotateZ(45deg);
|
||||
}
|
||||
.Header__hamburger-active > span::after {
|
||||
transform: translateY(0px) rotateZ(-45deg);
|
||||
}
|
||||
/* Apparition du hamburger */
|
||||
@media (max-width: 992px) {
|
||||
.Header__hamburger {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import NavigationLink from './NavigationLink';
|
||||
import './Header.css';
|
||||
|
||||
export default function Header() {
|
||||
|
||||
const [hamburgerIcon, setHamburgerIcon] = useState("");
|
||||
const [navbarList, setNavbarList] = useState("");
|
||||
|
||||
const toggleNavbar = () => {
|
||||
if (hamburgerIcon) {
|
||||
setHamburgerIcon("");
|
||||
setNavbarList("");
|
||||
} else {
|
||||
setHamburgerIcon("Header__hamburger-active");
|
||||
setNavbarList("navbar__list-active");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="Header">
|
||||
<div className="container">
|
||||
|
||||
{/* Brand */}
|
||||
<Link href={"/"}>
|
||||
<a className="Header__brand-link">
|
||||
<img id="brand-link__logo" src="/images/FunctionProject_brand-logo.png" alt="FunctionProject" />
|
||||
<img id="brand-link__logo-small-screen" src="/images/FunctionProject_icon_small.png" alt="FunctionProject" />
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
{/* Hamburger icon on Mobile */}
|
||||
<div onClick={toggleNavbar} className={"Header__hamburger " + hamburgerIcon}>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="Header__navbar">
|
||||
<ul className={"navbar__list " + navbarList}>
|
||||
<NavigationLink name="Accueil" path="/" />
|
||||
<NavigationLink name="Fonctions" path="/functions" />
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import './Header.css';
|
||||
|
||||
export default function NavigationLink(props) {
|
||||
|
||||
const { pathname } = useRouter();
|
||||
|
||||
return (
|
||||
<li className="navbar-item">
|
||||
<Link href={props.path}>
|
||||
<a className={`navbar-link ${pathname === props.path ? "navbar-link-active" : null}`}>
|
||||
{props.name}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
const Loader = ({ width, height, speed }) => (
|
||||
<svg width={width} height={height} viewBox="0 0 100 100">
|
||||
<g transform="translate(50 50) rotate(0) scale(1 1) translate(-50 -50)">
|
||||
<image style={{transformOrigin: "50% 50%", animation: `${speed} linear 0s infinite normal forwards running Loader__spin`}} x="0" y="0" width="100" height="100" href="/images/FunctionProject_icon.png"></image>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
Loader.defaultProps = {
|
||||
width: "100px",
|
||||
height: "100px",
|
||||
speed: ".9s"
|
||||
}
|
||||
|
||||
export default Loader;
|
||||
@@ -0,0 +1,11 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL } from './config';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: API_URL,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
export default api;
|
||||
@@ -0,0 +1 @@
|
||||
export const API_URL = "http://localhost:8080";
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import api from '../config/api';
|
||||
|
||||
/**
|
||||
* @param {String} url
|
||||
* @param {*} defaultData
|
||||
* @param {String} method
|
||||
* @param {Object} options
|
||||
*/
|
||||
function useAPI(url, defaultData = [], method = "get", options = {}) {
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [data, setData] = useState(defaultData);
|
||||
const [hasError, setHasError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
api[method](url, options)
|
||||
.then((result) => {
|
||||
setData(result.data);
|
||||
setIsLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
setHasError(true);
|
||||
console.error(error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return [isLoading, data, hasError];
|
||||
}
|
||||
|
||||
export default useAPI;
|
||||
@@ -0,0 +1,3 @@
|
||||
const withCSS = require('@zeit/next-css');
|
||||
const withFonts = require('next-fonts');
|
||||
module.exports = withFonts(withCSS());
|
||||
Generated
+7995
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "functionproject-next",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"prod": "next export"
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"axios": "^0.19.2",
|
||||
"next": "9.3.1",
|
||||
"next-fonts": "^1.0.3",
|
||||
"nprogress": "^0.2.0",
|
||||
"react": "16.13.0",
|
||||
"react-dom": "16.13.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { Fragment } from 'react';
|
||||
import Link from 'next/link';
|
||||
import HeadTag from '../components/HeadTag';
|
||||
import '../public/css/pages/404.css';
|
||||
|
||||
const Error404 = () => (
|
||||
<Fragment>
|
||||
<HeadTag
|
||||
title="Erreur 404"
|
||||
description="Cette page n'existe pas!"
|
||||
image="/images/error404.png"
|
||||
/>
|
||||
<div className="Error404__container">
|
||||
<h1>Erreur <span className="important">404</span></h1>
|
||||
<p className="text-center">
|
||||
Cette page n'existe pas! <Link href={"/"}><a>Revenir à la page d'accueil ?</a></Link>
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
{`
|
||||
#__next {
|
||||
padding-top: 0;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
export default Error404;
|
||||
@@ -0,0 +1,31 @@
|
||||
/* Libraries Imports */
|
||||
import { Fragment } from 'react';
|
||||
import Router from 'next/router'
|
||||
import NProgress from 'nprogress';
|
||||
|
||||
/* Components Imports */
|
||||
import Header from '../components/Header/Header';
|
||||
import Footer from '../components/Footer/Footer';
|
||||
|
||||
/* CSS Imports */
|
||||
import '../public/fonts/Montserrat/Montserrat.css';
|
||||
import '../public/css/normalize.css';
|
||||
import '../public/css/grid.css';
|
||||
import '../public/css/general.css';
|
||||
import '../public/css/nprogress.css';
|
||||
|
||||
Router.events.on('routeChangeStart', () => NProgress.start());
|
||||
Router.events.on('routeChangeComplete', () => NProgress.done());
|
||||
Router.events.on('routeChangeError', () => NProgress.done());
|
||||
|
||||
const App = ({ Component, pageProps }) => (
|
||||
<Fragment>
|
||||
<Header />
|
||||
<div className="content container-fluid">
|
||||
<Component {...pageProps} />
|
||||
</div>
|
||||
<Footer />
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,28 @@
|
||||
import Document, { Html, Head, Main, NextScript } from "next/document";
|
||||
import Loader from '../components/Loader';
|
||||
|
||||
class MyDocument extends Document {
|
||||
static async getInitialProps(ctx) {
|
||||
const initialProps = await Document.getInitialProps(ctx);
|
||||
return { ...initialProps };
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html lang="fr">
|
||||
<Head />
|
||||
<body>
|
||||
<div id="preloader">
|
||||
<Loader />
|
||||
</div>
|
||||
<div className="isLoading">
|
||||
<Main />
|
||||
</div>
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument;
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Fragment } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import HeadTag from '../../components/HeadTag';
|
||||
import { API_URL } from '../../config/config';
|
||||
|
||||
const FunctionComponent = () => {
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<HeadTag
|
||||
title={router.query.slug}
|
||||
description={router.query.slug}
|
||||
image={`${API_URL}/images/functions/${router.query.slug}.png`}
|
||||
/>
|
||||
<div className="container text-center">
|
||||
<div className="row justify-content-center">
|
||||
<h1>{router.query.slug}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunctionComponent;
|
||||
@@ -0,0 +1,100 @@
|
||||
import { Fragment, useState, useEffect, useRef, useCallback } from 'react';
|
||||
import HeadTag from '../../components/HeadTag';
|
||||
import FunctionCard from '../../components/FunctionCard/FunctionCard';
|
||||
import Loader from '../../components/Loader';
|
||||
import '../../public/css/pages/functions.css';
|
||||
import { API_URL } from '../../config/config';
|
||||
import api from '../../config/api';
|
||||
import useAPI from '../../hooks/useAPI';
|
||||
|
||||
const Functions = () => {
|
||||
|
||||
// State de recherche et de catégories
|
||||
const [, categories] = useAPI('/categories');
|
||||
const [inputSearch, setInputSearch] = useState({ search: "", selectedCategory: "0" });
|
||||
|
||||
// State pour afficher les fonctions
|
||||
const [functionsData, setFunctionsData] = useState({ hasMore: true, rows: [] });
|
||||
const [isLoadingFunctions, setLoadingFunctions] = useState(true);
|
||||
const [pageFunctions, setPageFunctions] = useState(1);
|
||||
|
||||
// Permet la pagination au scroll
|
||||
const observer = useRef();
|
||||
const lastFunctionCardRef = useCallback((node) => {
|
||||
if (isLoadingFunctions) return;
|
||||
if (observer.current) observer.current.disconnect();
|
||||
observer.current = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && functionsData.hasMore) {
|
||||
setPageFunctions(pageFunctions + 1);
|
||||
}
|
||||
}, { threshold: 1 });
|
||||
if (node) observer.current.observe(node);
|
||||
}, [isLoadingFunctions, functionsData.hasMore]);
|
||||
|
||||
const getFunctionsData = () => {
|
||||
setLoadingFunctions(true);
|
||||
return new Promise(async (next) => {
|
||||
const result = await api.get(`/functions?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`);
|
||||
setLoadingFunctions(false);
|
||||
next(result.data);
|
||||
});
|
||||
}
|
||||
|
||||
// Récupère les fonctions si la page change
|
||||
useEffect(() => {
|
||||
getFunctionsData().then((data) => setFunctionsData({
|
||||
hasMore: data.hasMore,
|
||||
rows: [...functionsData.rows, ...data.rows]
|
||||
}));
|
||||
}, [pageFunctions]);
|
||||
|
||||
// Récupère les fonctions si la catégorie/recherche change
|
||||
useEffect(() => {
|
||||
getFunctionsData().then((data) => setFunctionsData(data));
|
||||
}, [inputSearch.selectedCategory, inputSearch.search]);
|
||||
|
||||
const handleChange = (event) => {
|
||||
const inputSearchNew = { ...inputSearch };
|
||||
inputSearchNew[event.target.name] = event.target.value;
|
||||
setInputSearch(inputSearchNew);
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<HeadTag
|
||||
title="Fonctions"
|
||||
description="Liste des fonctions."
|
||||
image="/images/FunctionProject_icon_small.png"
|
||||
/>
|
||||
|
||||
<div className="container text-center">
|
||||
<div className="row justify-content-center">
|
||||
<h1 className="Functions__title">Fonctions</h1>
|
||||
</div>
|
||||
|
||||
<div className="Functions__search-container row justify-content-center">
|
||||
<select name="selectedCategory" value={inputSearch.selectedCategory} onChange={handleChange} className="Functions__select form-control">
|
||||
<option value="0">Toutes catégories</option>
|
||||
{categories.map((category) => (
|
||||
<option key={category.id} value={category.id} className="Functions__select-option" style={{ backgroundColor: category.color }}>{category.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<input value={inputSearch.search} onChange={handleChange} type="search" className="form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..."></input>
|
||||
</div>
|
||||
|
||||
<div className="row justify-content-center">
|
||||
{functionsData.rows.map((f, index) => {
|
||||
// Si c'est le dernier élément
|
||||
if (functionsData.rows.length === index + 1) {
|
||||
return <FunctionCard ref={lastFunctionCardRef} key={f.id} slug={f.slug} image={API_URL + f.image} title={f.title} description={f.description} category={f.categorie} publicationDate={new Date(f.createdAt).toLocaleDateString('fr-FR')} />;
|
||||
}
|
||||
return <FunctionCard key={f.id} slug={f.slug} image={API_URL + f.image} title={f.title} description={f.description} category={f.categorie} publicationDate={new Date(f.createdAt).toLocaleDateString('fr-FR')} />;
|
||||
})}
|
||||
</div>
|
||||
{isLoadingFunctions && <Loader />}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default Functions;
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Fragment, useEffect } from 'react';
|
||||
import HeadTag from '../components/HeadTag';
|
||||
|
||||
const Home = () => {
|
||||
|
||||
useEffect(() => {
|
||||
console.log(
|
||||
'%c ⚙️ FunctionProject',
|
||||
'color: #ffd800; font-weight: bold; background-color: #181818;padding: 10px;border-radius: 10px;font-size: 20px'
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<HeadTag
|
||||
title="FunctionProject"
|
||||
description="FunctionProject est un projet créé par Divlo qui a pour but de rassembler plein de mini-programme permettant de faire plusieurs choses comme savoir la météo, générer un nombre aléatoire, etc."
|
||||
image="/images/FunctionProject_icon_small.png"
|
||||
/>
|
||||
<div>Home</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@@ -0,0 +1,117 @@
|
||||
/* GENERAL */
|
||||
:root {
|
||||
--border-header-footer: 3px rgba(255, 255, 255, .7) solid;
|
||||
--background-color: #181818;
|
||||
--text-color: rgb(222, 222, 222);
|
||||
--important: #ffd800;
|
||||
}
|
||||
html {
|
||||
line-height: initial;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
#__next {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
padding-top: 99px; /* Height of the Header */
|
||||
}
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 1.9;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
.centeredContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* LOADING */
|
||||
.isLoading {
|
||||
display: none;
|
||||
}
|
||||
#preloader {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@keyframes Loader__spin {
|
||||
0% {
|
||||
animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* UTILITIES */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
a, .important {
|
||||
color: var(--important);
|
||||
text-decoration: none;
|
||||
}
|
||||
.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
.form-control {
|
||||
display: block;
|
||||
height: calc(1.5em + .75rem + 2px);
|
||||
padding: .375rem .75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: .5em;
|
||||
}
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
padding: .375rem .75rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: .25rem;
|
||||
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||
}
|
||||
.btn-dark:hover {
|
||||
color: #fff;
|
||||
background-color: #23272b;
|
||||
border-color: #1d2124;
|
||||
}
|
||||
.btn-dark {
|
||||
color: #fff;
|
||||
background-color: #343a40;
|
||||
border-color: #343a40;
|
||||
}
|
||||
@@ -0,0 +1,595 @@
|
||||
/*!
|
||||
* Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
|
||||
* Edited by Divlo (col, col-sm, col-md, col-lg, col-xl) and 24 columns (no offsets)
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16, .col-17, .col-18, .col-19, .col-20, .col-21, .col-22, .col-23, .col-24,
|
||||
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-13, .col-sm-14, .col-sm-15, .col-sm-16, .col-sm-17, .col-sm-18, .col-sm-19, .col-sm-20, .col-sm-21, .col-sm-22, .col-sm-23, .col-sm-24,
|
||||
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-13, .col-md-14, .col-md-15, .col-md-16, .col-md-17, .col-md-18, .col-md-19, .col-md-20, .col-md-21, .col-md-22, .col-md-23, .col-md-24,
|
||||
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-13, .col-lg-14, .col-lg-15, .col-lg-16, .col-lg-17, .col-lg-18, .col-lg-19, .col-lg-20, .col-lg-21, .col-lg-22, .col-lg-23, .col-lg-24,
|
||||
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-13, .col-xl-14, .col-xl-15, .col-xl-16, .col-xl-17, .col-xl-18, .col-xl-19, .col-xl-20, .col-xl-21, .col-xl-22, .col-xl-23, .col-xl-24 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/* col- */
|
||||
.col-1 {
|
||||
flex: 0 0 4.16667%;
|
||||
max-width: 4.16667%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
flex: 0 0 8.33333%;
|
||||
max-width: 8.33333%;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
flex: 0 0 12.5%;
|
||||
max-width: 12.5%;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
flex: 0 0 16.66667%;
|
||||
max-width: 16.66667%;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
flex: 0 0 20.83333%;
|
||||
max-width: 20.83333%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
flex: 0 0 29.16667%;
|
||||
max-width: 29.16667%;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
flex: 0 0 33.33333%;
|
||||
max-width: 33.33333%;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
flex: 0 0 37.5%;
|
||||
max-width: 37.5%;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
flex: 0 0 41.66667%;
|
||||
max-width: 41.66667%;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
flex: 0 0 45.83333%;
|
||||
max-width: 45.83333%;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-13 {
|
||||
flex: 0 0 54.16667%;
|
||||
max-width: 54.16667%;
|
||||
}
|
||||
|
||||
.col-14 {
|
||||
flex: 0 0 58.33333%;
|
||||
max-width: 58.33333%;
|
||||
}
|
||||
|
||||
.col-15 {
|
||||
flex: 0 0 62.5%;
|
||||
max-width: 62.5%;
|
||||
}
|
||||
|
||||
.col-16 {
|
||||
flex: 0 0 66.66667%;
|
||||
max-width: 66.66667%;
|
||||
}
|
||||
|
||||
.col-17 {
|
||||
flex: 0 0 70.83333%;
|
||||
max-width: 70.83333%;
|
||||
}
|
||||
|
||||
.col-18 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-19 {
|
||||
flex: 0 0 79.16667%;
|
||||
max-width: 79.16667%;
|
||||
}
|
||||
|
||||
.col-20 {
|
||||
flex: 0 0 83.33333%;
|
||||
max-width: 83.33333%;
|
||||
}
|
||||
|
||||
.col-21 {
|
||||
flex: 0 0 87.5%;
|
||||
max-width: 87.5%;
|
||||
}
|
||||
|
||||
.col-22 {
|
||||
flex: 0 0 91.66667%;
|
||||
max-width: 91.66667%;
|
||||
}
|
||||
|
||||
.col-23 {
|
||||
flex: 0 0 95.83333%;
|
||||
max-width: 95.83333%;
|
||||
}
|
||||
|
||||
.col-24 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* col-sm */
|
||||
@media (min-width: 576px) {
|
||||
.col-sm-1 {
|
||||
flex: 0 0 4.16667%;
|
||||
max-width: 4.16667%;
|
||||
}
|
||||
.col-sm-2 {
|
||||
flex: 0 0 8.33333%;
|
||||
max-width: 8.33333%;
|
||||
}
|
||||
.col-sm-3 {
|
||||
flex: 0 0 12.5%;
|
||||
max-width: 12.5%;
|
||||
}
|
||||
.col-sm-4 {
|
||||
flex: 0 0 16.66667%;
|
||||
max-width: 16.66667%;
|
||||
}
|
||||
.col-sm-5 {
|
||||
flex: 0 0 20.83333%;
|
||||
max-width: 20.83333%;
|
||||
}
|
||||
.col-sm-6 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-sm-7 {
|
||||
flex: 0 0 29.16667%;
|
||||
max-width: 29.16667%;
|
||||
}
|
||||
.col-sm-8 {
|
||||
flex: 0 0 33.33333%;
|
||||
max-width: 33.33333%;
|
||||
}
|
||||
.col-sm-9 {
|
||||
flex: 0 0 37.5%;
|
||||
max-width: 37.5%;
|
||||
}
|
||||
.col-sm-10 {
|
||||
flex: 0 0 41.66667%;
|
||||
max-width: 41.66667%;
|
||||
}
|
||||
.col-sm-11 {
|
||||
flex: 0 0 45.83333%;
|
||||
max-width: 45.83333%;
|
||||
}
|
||||
.col-sm-12 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.col-sm-13 {
|
||||
flex: 0 0 54.16667%;
|
||||
max-width: 54.16667%;
|
||||
}
|
||||
.col-sm-14 {
|
||||
flex: 0 0 58.33333%;
|
||||
max-width: 58.33333%;
|
||||
}
|
||||
.col-sm-15 {
|
||||
flex: 0 0 62.5%;
|
||||
max-width: 62.5%;
|
||||
}
|
||||
.col-sm-16 {
|
||||
flex: 0 0 66.66667%;
|
||||
max-width: 66.66667%;
|
||||
}
|
||||
.col-sm-17 {
|
||||
flex: 0 0 70.83333%;
|
||||
max-width: 70.83333%;
|
||||
}
|
||||
.col-sm-18 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.col-sm-19 {
|
||||
flex: 0 0 79.16667%;
|
||||
max-width: 79.16667%;
|
||||
}
|
||||
.col-sm-20 {
|
||||
flex: 0 0 83.33333%;
|
||||
max-width: 83.33333%;
|
||||
}
|
||||
.col-sm-21 {
|
||||
flex: 0 0 87.5%;
|
||||
max-width: 87.5%;
|
||||
}
|
||||
.col-sm-22 {
|
||||
flex: 0 0 91.66667%;
|
||||
max-width: 91.66667%;
|
||||
}
|
||||
.col-sm-23 {
|
||||
flex: 0 0 95.83333%;
|
||||
max-width: 95.83333%;
|
||||
}
|
||||
.col-sm-24 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* col-md */
|
||||
@media (min-width: 768px) {
|
||||
.col-md-1 {
|
||||
flex: 0 0 4.16667%;
|
||||
max-width: 4.16667%;
|
||||
}
|
||||
.col-md-2 {
|
||||
flex: 0 0 8.33333%;
|
||||
max-width: 8.33333%;
|
||||
}
|
||||
.col-md-3 {
|
||||
flex: 0 0 12.5%;
|
||||
max-width: 12.5%;
|
||||
}
|
||||
.col-md-4 {
|
||||
flex: 0 0 16.66667%;
|
||||
max-width: 16.66667%;
|
||||
}
|
||||
.col-md-5 {
|
||||
flex: 0 0 20.83333%;
|
||||
max-width: 20.83333%;
|
||||
}
|
||||
.col-md-6 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-md-7 {
|
||||
flex: 0 0 29.16667%;
|
||||
max-width: 29.16667%;
|
||||
}
|
||||
.col-md-8 {
|
||||
flex: 0 0 33.33333%;
|
||||
max-width: 33.33333%;
|
||||
}
|
||||
.col-md-9 {
|
||||
flex: 0 0 37.5%;
|
||||
max-width: 37.5%;
|
||||
}
|
||||
.col-md-10 {
|
||||
flex: 0 0 41.66667%;
|
||||
max-width: 41.66667%;
|
||||
}
|
||||
.col-md-11 {
|
||||
flex: 0 0 45.83333%;
|
||||
max-width: 45.83333%;
|
||||
}
|
||||
.col-md-12 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.col-md-13 {
|
||||
flex: 0 0 54.16667%;
|
||||
max-width: 54.16667%;
|
||||
}
|
||||
.col-md-14 {
|
||||
flex: 0 0 58.33333%;
|
||||
max-width: 58.33333%;
|
||||
}
|
||||
.col-md-15 {
|
||||
flex: 0 0 62.5%;
|
||||
max-width: 62.5%;
|
||||
}
|
||||
.col-md-16 {
|
||||
flex: 0 0 66.66667%;
|
||||
max-width: 66.66667%;
|
||||
}
|
||||
.col-md-17 {
|
||||
flex: 0 0 70.83333%;
|
||||
max-width: 70.83333%;
|
||||
}
|
||||
.col-md-18 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.col-md-19 {
|
||||
flex: 0 0 79.16667%;
|
||||
max-width: 79.16667%;
|
||||
}
|
||||
.col-md-20 {
|
||||
flex: 0 0 83.33333%;
|
||||
max-width: 83.33333%;
|
||||
}
|
||||
.col-md-21 {
|
||||
flex: 0 0 87.5%;
|
||||
max-width: 87.5%;
|
||||
}
|
||||
.col-md-22 {
|
||||
flex: 0 0 91.66667%;
|
||||
max-width: 91.66667%;
|
||||
}
|
||||
.col-md-23 {
|
||||
flex: 0 0 95.83333%;
|
||||
max-width: 95.83333%;
|
||||
}
|
||||
.col-md-24 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* col-lg */
|
||||
@media (min-width: 992px) {
|
||||
.col-lg-1 {
|
||||
flex: 0 0 4.16667%;
|
||||
max-width: 4.16667%;
|
||||
}
|
||||
.col-lg-2 {
|
||||
flex: 0 0 8.33333%;
|
||||
max-width: 8.33333%;
|
||||
}
|
||||
.col-lg-3 {
|
||||
flex: 0 0 12.5%;
|
||||
max-width: 12.5%;
|
||||
}
|
||||
.col-lg-4 {
|
||||
flex: 0 0 16.66667%;
|
||||
max-width: 16.66667%;
|
||||
}
|
||||
.col-lg-5 {
|
||||
flex: 0 0 20.83333%;
|
||||
max-width: 20.83333%;
|
||||
}
|
||||
.col-lg-6 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-lg-7 {
|
||||
flex: 0 0 29.16667%;
|
||||
max-width: 29.16667%;
|
||||
}
|
||||
.col-lg-8 {
|
||||
flex: 0 0 33.33333%;
|
||||
max-width: 33.33333%;
|
||||
}
|
||||
.col-lg-9 {
|
||||
flex: 0 0 37.5%;
|
||||
max-width: 37.5%;
|
||||
}
|
||||
.col-lg-10 {
|
||||
flex: 0 0 41.66667%;
|
||||
max-width: 41.66667%;
|
||||
}
|
||||
.col-lg-11 {
|
||||
flex: 0 0 45.83333%;
|
||||
max-width: 45.83333%;
|
||||
}
|
||||
.col-lg-12 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.col-lg-13 {
|
||||
flex: 0 0 54.16667%;
|
||||
max-width: 54.16667%;
|
||||
}
|
||||
.col-lg-14 {
|
||||
flex: 0 0 58.33333%;
|
||||
max-width: 58.33333%;
|
||||
}
|
||||
.col-lg-15 {
|
||||
flex: 0 0 62.5%;
|
||||
max-width: 62.5%;
|
||||
}
|
||||
.col-lg-16 {
|
||||
flex: 0 0 66.66667%;
|
||||
max-width: 66.66667%;
|
||||
}
|
||||
.col-lg-17 {
|
||||
flex: 0 0 70.83333%;
|
||||
max-width: 70.83333%;
|
||||
}
|
||||
.col-lg-18 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.col-lg-19 {
|
||||
flex: 0 0 79.16667%;
|
||||
max-width: 79.16667%;
|
||||
}
|
||||
.col-lg-20 {
|
||||
flex: 0 0 83.33333%;
|
||||
max-width: 83.33333%;
|
||||
}
|
||||
.col-lg-21 {
|
||||
flex: 0 0 87.5%;
|
||||
max-width: 87.5%;
|
||||
}
|
||||
.col-lg-22 {
|
||||
flex: 0 0 91.66667%;
|
||||
max-width: 91.66667%;
|
||||
}
|
||||
.col-lg-23 {
|
||||
flex: 0 0 95.83333%;
|
||||
max-width: 95.83333%;
|
||||
}
|
||||
.col-lg-24 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* col-xl */
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
flex: 0 0 4.16667%;
|
||||
max-width: 4.16667%;
|
||||
}
|
||||
.col-xl-2 {
|
||||
flex: 0 0 8.33333%;
|
||||
max-width: 8.33333%;
|
||||
}
|
||||
.col-xl-3 {
|
||||
flex: 0 0 12.5%;
|
||||
max-width: 12.5%;
|
||||
}
|
||||
.col-xl-4 {
|
||||
flex: 0 0 16.66667%;
|
||||
max-width: 16.66667%;
|
||||
}
|
||||
.col-xl-5 {
|
||||
flex: 0 0 20.83333%;
|
||||
max-width: 20.83333%;
|
||||
}
|
||||
.col-xl-6 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-xl-7 {
|
||||
flex: 0 0 29.16667%;
|
||||
max-width: 29.16667%;
|
||||
}
|
||||
.col-xl-8 {
|
||||
flex: 0 0 33.33333%;
|
||||
max-width: 33.33333%;
|
||||
}
|
||||
.col-xl-9 {
|
||||
flex: 0 0 37.5%;
|
||||
max-width: 37.5%;
|
||||
}
|
||||
.col-xl-10 {
|
||||
flex: 0 0 41.66667%;
|
||||
max-width: 41.66667%;
|
||||
}
|
||||
.col-xl-11 {
|
||||
flex: 0 0 45.83333%;
|
||||
max-width: 45.83333%;
|
||||
}
|
||||
.col-xl-12 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.col-xl-13 {
|
||||
flex: 0 0 54.16667%;
|
||||
max-width: 54.16667%;
|
||||
}
|
||||
.col-xl-14 {
|
||||
flex: 0 0 58.33333%;
|
||||
max-width: 58.33333%;
|
||||
}
|
||||
.col-xl-15 {
|
||||
flex: 0 0 62.5%;
|
||||
max-width: 62.5%;
|
||||
}
|
||||
.col-xl-16 {
|
||||
flex: 0 0 66.66667%;
|
||||
max-width: 66.66667%;
|
||||
}
|
||||
.col-xl-17 {
|
||||
flex: 0 0 70.83333%;
|
||||
max-width: 70.83333%;
|
||||
}
|
||||
.col-xl-18 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.col-xl-19 {
|
||||
flex: 0 0 79.16667%;
|
||||
max-width: 79.16667%;
|
||||
}
|
||||
.col-xl-20 {
|
||||
flex: 0 0 83.33333%;
|
||||
max-width: 83.33333%;
|
||||
}
|
||||
.col-xl-21 {
|
||||
flex: 0 0 87.5%;
|
||||
max-width: 87.5%;
|
||||
}
|
||||
.col-xl-22 {
|
||||
flex: 0 0 91.66667%;
|
||||
max-width: 91.66667%;
|
||||
}
|
||||
.col-xl-23 {
|
||||
flex: 0 0 95.83333%;
|
||||
max-width: 95.83333%;
|
||||
}
|
||||
.col-xl-24 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
Vendored
+349
@@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
/* Make clicks pass-through */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: var(--important);
|
||||
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
/* Fancy blur effect */
|
||||
#nprogress .peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px var(--important), 0 0 5px var(--important);
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||
transform: rotate(3deg) translate(0px, -4px);
|
||||
}
|
||||
|
||||
/* Remove these to get rid of the spinner */
|
||||
#nprogress .spinner {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-top-color: var(--important);
|
||||
border-left-color: var(--important);
|
||||
border-radius: 50%;
|
||||
|
||||
-webkit-animation: nprogress-spinner 400ms linear infinite;
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent #nprogress .spinner,
|
||||
.nprogress-custom-parent #nprogress .bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@-webkit-keyframes nprogress-spinner {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes nprogress-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.Error404__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.Functions__title {
|
||||
padding: 20px 0 20px 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.Functions__search-container {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.Functions__select-option {
|
||||
color: rgb(221, 220, 220);
|
||||
}
|
||||
.Functions__search-input {
|
||||
width: 40%;
|
||||
}
|
||||
/* col-sm */
|
||||
@media (max-width: 576px) {
|
||||
.Functions__search-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.Functions__select {
|
||||
width: 90%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.Functions__search-input {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
/* montserrat-100normal - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 100;
|
||||
src: local("Montserrat Thin "), local("Montserrat-Thin"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-100.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("/fonts/Montserrat/files/montserrat-latin-100.woff")
|
||||
format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-100italic - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
font-weight: 100;
|
||||
src: local("Montserrat Thin italic"), local("Montserrat-Thinitalic"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-100italic.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("/fonts/Montserrat/files/montserrat-latin-100italic.woff") format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-200normal - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 200;
|
||||
src: local("Montserrat Extra Light "), local("Montserrat-Extra Light"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-200.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("/fonts/Montserrat/files/montserrat-latin-200.woff")
|
||||
format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-200italic - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
font-weight: 200;
|
||||
src: local("Montserrat Extra Light italic"),
|
||||
local("Montserrat-Extra Lightitalic"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-200italic.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("/fonts/Montserrat/files/montserrat-latin-200italic.woff") format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-300normal - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 300;
|
||||
src: local("Montserrat Light "), local("Montserrat-Light"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-300.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("/fonts/Montserrat/files/montserrat-latin-300.woff")
|
||||
format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-300italic - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
font-weight: 300;
|
||||
src: local("Montserrat Light italic"), local("Montserrat-Lightitalic"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-300italic.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("/fonts/Montserrat/files/montserrat-latin-300italic.woff") format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-400normal - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src: local("Montserrat Regular "), local("Montserrat-Regular"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-400.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("/fonts/Montserrat/files/montserrat-latin-400.woff")
|
||||
format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-400italic - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src: local("Montserrat Regular italic"), local("Montserrat-Regularitalic"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-400italic.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("/fonts/Montserrat/files/montserrat-latin-400italic.woff") format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-500normal - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 500;
|
||||
src: local("Montserrat Medium "), local("Montserrat-Medium"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-500.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("/fonts/Montserrat/files/montserrat-latin-500.woff")
|
||||
format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-500italic - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
font-weight: 500;
|
||||
src: local("Montserrat Medium italic"), local("Montserrat-Mediumitalic"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-500italic.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("/fonts/Montserrat/files/montserrat-latin-500italic.woff") format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-600normal - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 600;
|
||||
src: local("Montserrat SemiBold "), local("Montserrat-SemiBold"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-600.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("/fonts/Montserrat/files/montserrat-latin-600.woff")
|
||||
format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-600italic - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
font-weight: 600;
|
||||
src: local("Montserrat SemiBold italic"), local("Montserrat-SemiBolditalic"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-600italic.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("/fonts/Montserrat/files/montserrat-latin-600italic.woff") format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-700normal - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 700;
|
||||
src: local("Montserrat Bold "), local("Montserrat-Bold"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-700.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("/fonts/Montserrat/files/montserrat-latin-700.woff")
|
||||
format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-700italic - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
font-weight: 700;
|
||||
src: local("Montserrat Bold italic"), local("Montserrat-Bolditalic"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-700italic.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("/fonts/Montserrat/files/montserrat-latin-700italic.woff") format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-800normal - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 800;
|
||||
src: local("Montserrat ExtraBold "), local("Montserrat-ExtraBold"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-800.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("/fonts/Montserrat/files/montserrat-latin-800.woff")
|
||||
format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-800italic - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
font-weight: 800;
|
||||
src: local("Montserrat ExtraBold italic"),
|
||||
local("Montserrat-ExtraBolditalic"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-800italic.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("/fonts/Montserrat/files/montserrat-latin-800italic.woff") format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-900normal - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 900;
|
||||
src: local("Montserrat Black "), local("Montserrat-Black"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-900.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("/fonts/Montserrat/files/montserrat-latin-900.woff")
|
||||
format("woff"); /* Modern Browsers */
|
||||
}
|
||||
|
||||
/* montserrat-900italic - latin */
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
font-weight: 900;
|
||||
src: local("Montserrat Black italic"), local("Montserrat-Blackitalic"),
|
||||
url("/fonts/Montserrat/files/montserrat-latin-900italic.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("/fonts/Montserrat/files/montserrat-latin-900italic.woff") format("woff"); /* Modern Browsers */
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
@@ -0,0 +1,4 @@
|
||||
window.addEventListener('load', () => {
|
||||
document.querySelector('.isLoading').classList.remove('isLoading');
|
||||
document.getElementById('preloader').remove();
|
||||
});
|
||||
Reference in New Issue
Block a user