parent
60e0747d68
commit
d460e46d68
@ -1,4 +1,4 @@
|
|||||||
NEXT_PUBLIC_NAME="DubbelNull"
|
NEXT_PUBLIC_NAME="DubbelNull"
|
||||||
NEXT_PUBLIC_MOTTO="do more with less"
|
NEXT_PUBLIC_MOTTO="do more with less"
|
||||||
|
|
||||||
AIRTABLE_KEY=""
|
AIRTABLE_KEY=""
|
||||||
@ -1,18 +1,18 @@
|
|||||||
import styles from '../styles/components/Buttons.module.css';
|
import styles from '../styles/components/Buttons.module.css';
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<section className={styles.section}>
|
<section className={styles.section}>
|
||||||
<h2>Learn more</h2>
|
<h2>Learn more</h2>
|
||||||
<div>
|
<div>
|
||||||
<Link href="/about">About</Link>
|
<Link href="/about">About</Link>
|
||||||
<Link href="/contact">Contact</Link>
|
<Link href="/contact">Contact</Link>
|
||||||
<a href="https://twitter.com/DubbelNull" target="_blank" rel="noreferrer">Twitter</a>
|
<a href="https://twitter.com/DubbelNull" target="_blank" rel="noreferrer">Twitter</a>
|
||||||
<a href="https://gitlab.com/dubbelnull" target="_blank" rel="noreferrer">GitLab</a>
|
<a href="https://gitlab.com/dubbelnull" target="_blank" rel="noreferrer">GitLab</a>
|
||||||
<a href="https://discord.gg/976Xskh8Dd" target="_blank" rel="noreferrer">Discord</a>
|
<a href="https://discord.gg/976Xskh8Dd" target="_blank" rel="noreferrer">Discord</a>
|
||||||
<a href="https://status.dubbelnull.com" target="_blank" rel="noreferrer">Statuspage</a>
|
<a href="https://status.dubbelnull.com" target="_blank" rel="noreferrer">Statuspage</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,30 +1,30 @@
|
|||||||
export default function StyledButton(props: any) {
|
export default function StyledButton(props: any) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
a {
|
a {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: "Red Hat Display";
|
font-family: "Red Hat Display";
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.4em 1em;
|
padding: 0.4em 1em;
|
||||||
font-family: "Red Hat Display";
|
font-family: "Red Hat Display";
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
gap: var(--padding-sm);
|
gap: var(--padding-sm);
|
||||||
color: unset;
|
color: unset;
|
||||||
text-decoration: unset;
|
text-decoration: unset;
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
background-color: var(--background-color-dark);
|
background-color: var(--background-color-dark);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
<a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
|
<a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,31 +1,31 @@
|
|||||||
export default function StyledButton(props: any) {
|
export default function StyledButton(props: any) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
a {
|
a {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: "Red Hat Display";
|
font-family: "Red Hat Display";
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.4em 1em;
|
padding: 0.4em 1em;
|
||||||
font-family: "Red Hat Display";
|
font-family: "Red Hat Display";
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: var(--background-color-dark);
|
background-color: var(--background-color-dark);
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
gap: var(--padding-sm);
|
gap: var(--padding-sm);
|
||||||
color: unset;
|
color: unset;
|
||||||
text-decoration: unset;
|
text-decoration: unset;
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
background-color: var(--theme-color-500);
|
background-color: var(--theme-color-500);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
<a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
|
<a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,16 +1,15 @@
|
|||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import styles from '../styles/components/Footer.module.css';
|
import styles from '../styles/components/Footer.module.css';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import logo from "../public/img/logoblue.png";
|
import logo from "../public/img/logoblue.png";
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className={styles.footer}>
|
<footer className={styles.footer}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<p>Copyright © 2021 DubbelNull vof <br/> Kvk 81343493 -- The Netherlands</p>
|
<p>Copyright © 2021 DubbelNull vof<br/>Kvk 81343493 -- The Netherlands</p>
|
||||||
<p>Website built with NextJS & Netlify<br/>Dutch language option coming soon</p>
|
</div>
|
||||||
</div>
|
</footer>
|
||||||
</footer>
|
)
|
||||||
)
|
|
||||||
}
|
}
|
||||||
@ -1,28 +1,28 @@
|
|||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import styles from '../styles/components/Menu.module.css';
|
import styles from '../styles/components/Menu.module.css';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import logo from "../public/img/logoblue.png";
|
import logo from "../public/img/logoblue.png";
|
||||||
import ThemeToggle from './themetoggle';
|
import ThemeToggle from './themetoggle';
|
||||||
|
|
||||||
export default function Menu() {
|
export default function Menu() {
|
||||||
return (
|
return (
|
||||||
<menu className={styles.menu}>
|
<menu className={styles.menu}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<a>
|
<a>
|
||||||
<Image src={logo} alt="dubbelnull logo" />
|
<Image src={logo} alt="dubbelnull logo" />
|
||||||
<h2>{process.env.NEXT_PUBLIC_NAME?.toUpperCase()}</h2>
|
<h2>{process.env.NEXT_PUBLIC_NAME?.toUpperCase()}</h2>
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Link href="/about">About</Link>
|
<Link href="/about">About</Link>
|
||||||
<Link href="/showcase">Showcase</Link>
|
<Link href="/showcase">Showcase</Link>
|
||||||
<Link href="/services">Services</Link>
|
{/* <Link href="/services">Services</Link> */}
|
||||||
<Link href="/contact">Contact</Link>
|
<Link href="/contact">Contact</Link>
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</menu>
|
</menu>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,29 +1,29 @@
|
|||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
|
|
||||||
export default function GlobalLayout(props: any) {
|
export default function GlobalLayout(props: any) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Head>
|
<Head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
|
||||||
<title>{process.env.NEXT_PUBLIC_NAME}</title>
|
<title>{process.env.NEXT_PUBLIC_NAME}</title>
|
||||||
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png" />
|
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png" />
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png" />
|
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png" />
|
||||||
<link rel="icon" type="image/png" sizes="194x194" href="/img/favicons/favicon-194x194.png" />
|
<link rel="icon" type="image/png" sizes="194x194" href="/img/favicons/favicon-194x194.png" />
|
||||||
<link rel="icon" type="image/png" sizes="192x192" href="/img/favicons/android-chrome-192x192.png" />
|
<link rel="icon" type="image/png" sizes="192x192" href="/img/favicons/android-chrome-192x192.png" />
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png" />
|
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png" />
|
||||||
<link rel="manifest" href="/img/favicons/site.webmanifest" />
|
<link rel="manifest" href="/img/favicons/site.webmanifest" />
|
||||||
<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg" color="#2563eb" />
|
<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg" color="#2563eb" />
|
||||||
<link rel="shortcut icon" href="/img/favicons/favicon.ico" />
|
<link rel="shortcut icon" href="/img/favicons/favicon.ico" />
|
||||||
<meta name="apple-mobile-web-app-title" content="DubbelNull" />
|
<meta name="apple-mobile-web-app-title" content="DubbelNull" />
|
||||||
<meta name="application-name" content="DubbelNull" />
|
<meta name="application-name" content="DubbelNull" />
|
||||||
<meta name="msapplication-TileColor" content="#2d89ef" />
|
<meta name="msapplication-TileColor" content="#2d89ef" />
|
||||||
<meta name="msapplication-config" content="/img/favicons/browserconfig.xml" />
|
<meta name="msapplication-config" content="/img/favicons/browserconfig.xml" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,15 +1,15 @@
|
|||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import styles from "../styles/Index.module.css"
|
import styles from "../styles/Index.module.css"
|
||||||
|
|
||||||
export default function PageLayout(props: any) {
|
export default function PageLayout(props: any) {
|
||||||
return (
|
return (
|
||||||
<section className="container">
|
<section className="container">
|
||||||
<section className={styles.banner}>
|
<section className={styles.banner}>
|
||||||
<h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
|
<h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
|
||||||
</section>
|
</section>
|
||||||
<article>
|
<article>
|
||||||
{props.children}
|
{props.children}
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,3 +1,3 @@
|
|||||||
[build]
|
[build]
|
||||||
command = "npm run build"
|
command = "npm run build"
|
||||||
publish = ".next"
|
publish = ".next"
|
||||||
@ -1,46 +1,45 @@
|
|||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import styles from '../styles/Contact.module.css';
|
import styles from '../styles/Contact.module.css';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import StyledButton from '../components/elements/styledbutton';
|
import StyledButton from '../components/elements/styledbutton';
|
||||||
import SmallStyledButton from '../components/elements/smallstyledbutton';
|
import SmallStyledButton from '../components/elements/smallstyledbutton';
|
||||||
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
|
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
|
||||||
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
|
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
|
||||||
import { faDiscord } from '@fortawesome/free-brands-svg-icons'
|
import { faDiscord } from '@fortawesome/free-brands-svg-icons'
|
||||||
import { faPhoneSlash } from '@fortawesome/free-solid-svg-icons'
|
import { faPhoneSlash } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
export default function Contact() {
|
export default function Contact() {
|
||||||
return (
|
return (
|
||||||
<div className={"page " + styles.contact}>
|
<div className={"page " + styles.contact}>
|
||||||
<Head>
|
<Head>
|
||||||
<title>{process.env.NEXT_PUBLIC_NAME} | Contact</title>
|
<title>{process.env.NEXT_PUBLIC_NAME} | Contact</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<section className="container">
|
<section className="container">
|
||||||
<article className="content">
|
<article className="content">
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
section {
|
section {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-auto-flow: row;
|
grid-auto-flow: row;
|
||||||
grid-template-columns: auto auto;
|
grid-template-columns: auto auto;
|
||||||
gap: var(--padding-lg);
|
}
|
||||||
}
|
`}</style>
|
||||||
`}</style>
|
|
||||||
|
<section style={{display: "flex", flexDirection: "column", alignItems: "center" }}>
|
||||||
<section style={{display: "flex", flexDirection: "column", alignItems: "center" }}>
|
<h2 style={{padding: "0 0 var(--padding-lg) 0", margin: "unset"}}>{"📬 We typically respond within a few hours"}</h2>
|
||||||
<h2>{"📬 We typically respond within a few hours"}</h2>
|
|
||||||
|
<div style={{display: "flex", gap: "var(--padding)", justifyContent: "center"}}>
|
||||||
<div style={{display: "flex", gap: "var(--padding)", justifyContent: "center"}}>
|
<StyledButton href="mailto:contact@dubbelnull.com"><FontAwesomeIcon icon={faEnvelope}></FontAwesomeIcon> Shoot us an email</StyledButton>
|
||||||
<StyledButton href="mailto:contact@dubbelnull.com"><FontAwesomeIcon icon={faEnvelope}></FontAwesomeIcon> Shoot us an email</StyledButton>
|
<StyledButton href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faDiscord}></FontAwesomeIcon> Message us on Discord</StyledButton>
|
||||||
<StyledButton href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faDiscord}></FontAwesomeIcon> Message us on Discord</StyledButton>
|
<StyledButton href="https://twitter.com/DubbelNull" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> DM us on Twitter</StyledButton>
|
||||||
<StyledButton href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> DM us on Twitter</StyledButton>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
|
</article>
|
||||||
</article>
|
</section>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
)
|
||||||
)
|
|
||||||
}
|
}
|
||||||
@ -1,169 +1,167 @@
|
|||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import styles from '../styles/Index.module.css'
|
import styles from '../styles/Index.module.css'
|
||||||
import Buttons from '../components/buttons'
|
import Buttons from '../components/buttons'
|
||||||
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import { faTractor } from '@fortawesome/free-solid-svg-icons'
|
import { faTractor } from '@fortawesome/free-solid-svg-icons'
|
||||||
import { faBatteryFull } from '@fortawesome/free-solid-svg-icons'
|
import { faBatteryFull } from '@fortawesome/free-solid-svg-icons'
|
||||||
import { faHandshake } from '@fortawesome/free-solid-svg-icons'
|
import { faHandshake } from '@fortawesome/free-solid-svg-icons'
|
||||||
import { faMoneyBillWave } from '@fortawesome/free-solid-svg-icons'
|
import { faMoneyBillWave } from '@fortawesome/free-solid-svg-icons'
|
||||||
import { faForward } from '@fortawesome/free-solid-svg-icons'
|
import { faForward } from '@fortawesome/free-solid-svg-icons'
|
||||||
import { faStream } from '@fortawesome/free-solid-svg-icons'
|
import { faStream } from '@fortawesome/free-solid-svg-icons'
|
||||||
import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'
|
import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'
|
||||||
import { faQuoteRight } from '@fortawesome/free-solid-svg-icons'
|
import { faQuoteRight } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
import logo from '../public/img/logoblue.png'
|
import logo from '../public/img/logoblue.png'
|
||||||
import trick from '../public/img/trick.png'
|
import trick from '../public/img/trick.png'
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className={"page " + styles.index}>
|
<div className={"page " + styles.index}>
|
||||||
<Head>
|
<Head>
|
||||||
<title>{process.env.NEXT_PUBLIC_NAME} | {process.env.NEXT_PUBLIC_MOTTO}</title>
|
<title>{process.env.NEXT_PUBLIC_NAME} | {process.env.NEXT_PUBLIC_MOTTO}</title>
|
||||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<section className="container">
|
<section className="container">
|
||||||
<section className={styles.banner}>
|
<section className={styles.banner}>
|
||||||
<h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
|
<h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<article className={"content " + styles.indexanim}>
|
<article className={"content " + styles.indexanim}>
|
||||||
<h1 className={styles.description}>
|
<h1 className={styles.description}>
|
||||||
{"DubbelNull is a small IT development team from The Netherlands. We make and design web-based applications of all kinds including; "}
|
{"DubbelNull is a small IT development team from The Netherlands. We make and design web-based applications of all kinds including; "}
|
||||||
{"back-end servers, front-end experiences, mobile apps, and PWA. "}
|
{"back-end servers, front-end experiences, mobile apps, and PWA. "}
|
||||||
{"As long as it's based on web protocols, we can make it."}
|
{"As long as it's based on web protocols, we can make it."}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<section className={styles.features}>
|
<section className={styles.features}>
|
||||||
<div className={styles.block}>
|
<div className={styles.block}>
|
||||||
<FontAwesomeIcon fixedWidth icon={faTractor} size="2x" style={{color: "var(--theme-color)"}} />
|
<FontAwesomeIcon fixedWidth icon={faTractor} size="2x" style={{color: "var(--theme-color)"}} />
|
||||||
<div>
|
<div>
|
||||||
<h3>Crystal clear sense</h3>
|
<h3>Crystal clear sense</h3>
|
||||||
<p>
|
<p>
|
||||||
{"We understand the struggle of long meetings only to still have misunderstandings. "}
|
{"We understand the struggle of long meetings only to still have misunderstandings. "}
|
||||||
{"We are straight to the point and will "} <Link href="/services">inform you of your options</Link> {" upfront."}
|
{"We are straight to the point and will inform you of your options upfront."}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.block}>
|
<div className={styles.block}>
|
||||||
<FontAwesomeIcon fixedWidth icon={faHandshake} size="2x" style={{color: "var(--theme-color)"}} />
|
<FontAwesomeIcon fixedWidth icon={faHandshake} size="2x" style={{color: "var(--theme-color)"}} />
|
||||||
<div>
|
<div>
|
||||||
<h3>Service focused</h3>
|
<h3>Service focused</h3>
|
||||||
<p>
|
<p>
|
||||||
{"We can always work something out, even if what you need is not technically in our range of offerings. "}
|
{"We can always work something out, even if what you need is not technically in our range of offerings. "}
|
||||||
{"Our mission is to help make you succeed and own the IT space."}
|
{"Our mission is to help make you succeed and own the IT space."}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.block}>
|
<div className={styles.block}>
|
||||||
<FontAwesomeIcon fixedWidth icon={faForward} size="2x" style={{color: "var(--theme-color)"}} />
|
<FontAwesomeIcon fixedWidth icon={faForward} size="2x" style={{color: "var(--theme-color)"}} />
|
||||||
<div>
|
<div>
|
||||||
<h3>Future proof</h3>
|
<h3>Future proof</h3>
|
||||||
<p>
|
<p>
|
||||||
{"We work with the newest technologies and use agnostic systems to ensure they will keep working even if an individual piece gets outdated."}
|
{"We work with the newest technologies and use agnostic systems to ensure they will keep working even if an individual piece gets outdated."}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.block}>
|
<div className={styles.block}>
|
||||||
<FontAwesomeIcon fixedWidth icon={faBatteryFull} size="2x" style={{color: "var(--theme-color)"}} />
|
<FontAwesomeIcon fixedWidth icon={faBatteryFull} size="2x" style={{color: "var(--theme-color)"}} />
|
||||||
<div>
|
<div>
|
||||||
<h3>Involved and committed</h3>
|
<h3>Involved and committed</h3>
|
||||||
<p>
|
<p>
|
||||||
{"Our job resulted from our hobby as IT enthusiasts. Our enjoyment is to see your product succeed, so everything we do is geared towards that goal. "}
|
{"Our job resulted from our hobby as IT enthusiasts. Our enjoyment is to see your product succeed, so everything we do is geared towards that goal. "}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.block}>
|
<div className={styles.block}>
|
||||||
<FontAwesomeIcon fixedWidth icon={faMoneyBillWave} size="2x" style={{color: "var(--theme-color)"}} />
|
<FontAwesomeIcon fixedWidth icon={faMoneyBillWave} size="2x" style={{color: "var(--theme-color)"}} />
|
||||||
<div>
|
<div>
|
||||||
<h3>Price minded</h3>
|
<h3>Price minded</h3>
|
||||||
<p>
|
<p>
|
||||||
{"We are a small startup with very little background costs. "}
|
{"We are a small startup with very little background costs. "}
|
||||||
{"Those cost savings are directly forwarded to you, the client."}
|
{"Those cost savings are directly forwarded to you, the client."}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.block}>
|
<div className={styles.block}>
|
||||||
<FontAwesomeIcon fixedWidth icon={faStream} size="2x" style={{color: "var(--theme-color)"}} />
|
<FontAwesomeIcon fixedWidth icon={faStream} size="2x" style={{color: "var(--theme-color)"}} />
|
||||||
<div>
|
<div>
|
||||||
<h3>Flexible and versatile</h3>
|
<h3>Flexible and versatile</h3>
|
||||||
<p>
|
<p>
|
||||||
{"We work with a large range of technologies, "}
|
{"We work with a large range of technologies, "}
|
||||||
{"but we're not afraid to try out new things if the situation calls for it either."}
|
{"but we're not afraid to try out new things if the situation calls for it either."}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>See what our customers say</h2>
|
<h2>See what our customers say</h2>
|
||||||
|
|
||||||
<div className={styles.quote}>
|
<div className={styles.quote}>
|
||||||
<div>
|
<img src="/img/trick.png"/>
|
||||||
<FontAwesomeIcon icon={faQuoteLeft} size="6x" style={{color: "var(--theme-color)"}} />
|
<div>
|
||||||
</div>
|
<p>
|
||||||
<div>
|
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
|
||||||
<p>
|
{" The site is amazing, the work that went into this is incredible. "}
|
||||||
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
|
{" The look and small details make it so amazing. "}
|
||||||
{" The site is amazing, the work that went into this is incredible. "}
|
{" I highly recommend getting yourself a sight made by DubbelNull, their talent is outstanding and the customer service was amazing. "}
|
||||||
{" The look and small details make it so amazing. "}
|
{" They were always there to answer any questions I had and were happy to change the things I wanted. "}
|
||||||
{" I highly recommend getting yourself a sight made by DubbelNull, their talent is outstanding and the customer service was amazing. "}
|
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
|
||||||
{" They were always there to answer any questions I had and were happy to change the things I wanted. "}
|
</p>
|
||||||
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
|
<br/>
|
||||||
</p>
|
<i>— Trick @ <a href="https://trickthefox.com" target="_blank" rel="noreferrer">trickthefox.com</a></i>
|
||||||
<br/>
|
</div>
|
||||||
<i>— Trick @ <a href="https://trickthefox.com" target="_blank" rel="noreferrer">trickthefox.com</a></i>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
{/* <div className={styles.quote}>
|
||||||
|
<div>
|
||||||
{/* <div className={styles.quote}>
|
<p>
|
||||||
<div>
|
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
|
||||||
<p>
|
{" Lorem ipsum sodor dolor amalet. "}
|
||||||
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
|
{"Lorem ipsum sodor dolor amalet. "}
|
||||||
{" Lorem ipsum sodor dolor amalet. "}
|
{"Lorem ipsum sodor dolor amalet. "}
|
||||||
{"Lorem ipsum sodor dolor amalet. "}
|
{"Lorem ipsum sodor dolor amalet. "}
|
||||||
{"Lorem ipsum sodor dolor amalet. "}
|
{"Lorem ipsum sodor dolor amalet. "}
|
||||||
{"Lorem ipsum sodor dolor amalet. "}
|
{"Lorem ipsum sodor dolor amalet. "}
|
||||||
{"Lorem ipsum sodor dolor amalet. "}
|
{"Lorem ipsum sodor dolor amalet. "}
|
||||||
{"Lorem ipsum sodor dolor amalet. "}
|
{"Lorem ipsum sodor dolor amalet. "}
|
||||||
{"Lorem ipsum sodor dolor amalet. "}
|
{"Lorem ipsum sodor dolor amalet. "}
|
||||||
{"Lorem ipsum sodor dolor amalet. "}
|
{"Lorem ipsum sodor dolor amalet. "}
|
||||||
{"Lorem ipsum sodor dolor amalet. "}
|
{"Lorem ipsum sodor dolor amalet. "}
|
||||||
{"Lorem ipsum sodor dolor amalet. "}
|
{"Lorem ipsum sodor dolor amalet. "}
|
||||||
{"Lorem ipsum sodor dolor amalet. "}
|
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
|
||||||
{"Lorem ipsum sodor dolor amalet. "}
|
</p>
|
||||||
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
|
<br/>
|
||||||
</p>
|
<i>— Melvyn & Merete @ <a href="https://lifecentrelivingston.com" target="_blank" rel="noreferrer">lifecentrelivingston.com</a></i>
|
||||||
<br/>
|
</div>
|
||||||
<i>— Melvyn & Merete @ <a href="https://lifecentrelivingston.com" target="_blank" rel="noreferrer">lifecentrelivingston.com</a></i>
|
<div>
|
||||||
</div>
|
<FontAwesomeIcon icon={faQuoteLeft} size="6x" style={{color: "var(--theme-color)"}} />
|
||||||
<div>
|
</div>
|
||||||
<FontAwesomeIcon icon={faQuoteLeft} size="6x" style={{color: "var(--theme-color)"}} />
|
</div> */}
|
||||||
</div>
|
</section>
|
||||||
</div> */}
|
|
||||||
</section>
|
<hr/>
|
||||||
|
|
||||||
<hr/>
|
<section>
|
||||||
|
<Buttons />
|
||||||
<section>
|
</section>
|
||||||
<Buttons />
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</div>
|
||||||
</section>
|
)
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
@ -1,18 +1,18 @@
|
|||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import styles from '../styles/Services.module.css';
|
import styles from '../styles/Services.module.css';
|
||||||
|
|
||||||
export default function Services() {
|
export default function Services() {
|
||||||
return (
|
return (
|
||||||
<div className={"page " + styles.services}>
|
<div className={"page " + styles.services}>
|
||||||
<Head>
|
<Head>
|
||||||
<title>{process.env.NEXT_PUBLIC_NAME} | Services</title>
|
<title>{process.env.NEXT_PUBLIC_NAME} | Services</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<section className="container">
|
<section className="container">
|
||||||
<article className="content">
|
<article className="content">
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,29 +1,29 @@
|
|||||||
.aboutSection {
|
.aboutSection {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-auto-flow: row;
|
grid-auto-flow: row;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
grid-template-columns: 70% auto;
|
grid-template-columns: 70% auto;
|
||||||
gap: var(--padding-lg);
|
gap: var(--padding-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.aboutSectionReverse {
|
.aboutSectionReverse {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-auto-flow: row;
|
grid-auto-flow: row;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
grid-template-columns: auto 70%;
|
grid-template-columns: auto 70%;
|
||||||
gap: var(--padding-lg);
|
gap: var(--padding-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.aboutSection img, .aboutSectionReverse img {
|
.aboutSection img, .aboutSectionReverse img {
|
||||||
border-radius: var(--padding-sm);
|
border-radius: var(--padding-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
font-size: 0.90rem;
|
font-size: 0.90rem;
|
||||||
background-color: var(--theme-color);
|
background-color: var(--theme-color);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0.4em 0.8em;
|
padding: 0.4em 0.8em;
|
||||||
border-radius: var(--padding-xl);
|
border-radius: var(--padding-xl);
|
||||||
text-transform: lowercase;
|
text-transform: lowercase;
|
||||||
}
|
}
|
||||||
@ -1,129 +1,130 @@
|
|||||||
/* elements */
|
/* elements */
|
||||||
.index img {
|
.index img {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* layout */
|
/* layout */
|
||||||
.banner {
|
.banner {
|
||||||
background-image: url('/img/banner.png');
|
background-image: url('/img/banner.png');
|
||||||
height: 500px;
|
height: 500px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner h1 {
|
.banner h1 {
|
||||||
margin-top: -6.5rem;
|
margin-top: -6.5rem;
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* page properties */
|
/* page properties */
|
||||||
.description {
|
.description {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.features {
|
.features {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto auto;
|
grid-template-columns: auto auto;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block {
|
.block {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block p {
|
.block p {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block > div {
|
.block > div {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block * {
|
.block * {
|
||||||
margin: unset;
|
margin: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index h2 {
|
.index h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quote {
|
.quote {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--padding-lg);
|
gap: var(--padding);
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
width: 100%;
|
||||||
|
}
|
||||||
.quote p {
|
|
||||||
margin: unset;
|
.quote > img {
|
||||||
}
|
width: 100%;
|
||||||
|
}
|
||||||
.quote i {
|
|
||||||
font-size: 0.9rem;
|
.quote p {
|
||||||
color: grey;
|
margin: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block .show {
|
.quote i {
|
||||||
width: 100%;
|
font-size: 0.9rem;
|
||||||
}
|
color: grey;
|
||||||
|
}
|
||||||
.block .show img {
|
|
||||||
max-width: 100%;
|
.block .show {
|
||||||
}
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/* animation */
|
.block .show img {
|
||||||
.indexanim {
|
max-width: 100%;
|
||||||
-webkit-animation-name: indexanim;
|
}
|
||||||
animation-name: indexanim;
|
|
||||||
-webkit-animation-duration: 0.5s;
|
|
||||||
animation-duration: 0.5s;
|
/* animation */
|
||||||
margin-top: -10rem;
|
.indexanim {
|
||||||
}
|
-webkit-animation-name: indexanim;
|
||||||
|
animation-name: indexanim;
|
||||||
@keyframes indexanim {
|
-webkit-animation-duration: 0.5s;
|
||||||
0% {
|
animation-duration: 0.5s;
|
||||||
margin-top: 0;
|
margin-top: -10rem;
|
||||||
opacity: 0;
|
}
|
||||||
}
|
|
||||||
|
@keyframes indexanim {
|
||||||
100% {
|
0% {
|
||||||
margin-top: -10rem;
|
margin-top: 0;
|
||||||
opacity: 100;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
100% {
|
||||||
|
margin-top: -10rem;
|
||||||
/* mobile */
|
opacity: 100;
|
||||||
@media(max-aspect-ratio: 5/4) {
|
}
|
||||||
.features {
|
}
|
||||||
grid-template-columns: auto;
|
|
||||||
}
|
|
||||||
|
/* mobile */
|
||||||
.quote {
|
@media(max-aspect-ratio: 5/4) {
|
||||||
flex-direction: column;
|
.features {
|
||||||
}
|
grid-template-columns: auto;
|
||||||
|
}
|
||||||
.banner {
|
|
||||||
padding: var(--padding);
|
.banner {
|
||||||
}
|
padding: var(--padding);
|
||||||
|
}
|
||||||
.banner h1 {
|
|
||||||
font-size: 2em;
|
.banner h1 {
|
||||||
}
|
font-size: 2em;
|
||||||
|
}
|
||||||
.description {
|
|
||||||
font-size: 1em;
|
.description {
|
||||||
}
|
font-size: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,14 +1,14 @@
|
|||||||
.showcaseClient {
|
.showcaseClient {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50% auto;
|
grid-template-columns: 50% auto;
|
||||||
gap: var(--padding-lg);
|
gap: var(--padding-lg);
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.showcaseClient img {
|
.showcaseClient img {
|
||||||
border-radius: var(--padding);
|
border-radius: var(--padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
.showcaseClient h3 {
|
.showcaseClient h3 {
|
||||||
margin: unset;
|
margin: unset;
|
||||||
}
|
}
|
||||||
@ -1,43 +1,43 @@
|
|||||||
.section {
|
.section {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section * {
|
.section * {
|
||||||
margin-top: unset;
|
margin-top: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section a {
|
.section a {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: "Red Hat Display";
|
font-family: "Red Hat Display";
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.4em 1em;
|
padding: 0.4em 1em;
|
||||||
font-family: "Red Hat Display";
|
font-family: "Red Hat Display";
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: var(--background-color-dark);
|
background-color: var(--background-color-dark);
|
||||||
border: unset;
|
border: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section div {
|
.section div {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section a:hover {
|
.section a:hover {
|
||||||
background-color: var(--theme-color-500);
|
background-color: var(--theme-color-500);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: unset;
|
border: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* mobile */
|
/* mobile */
|
||||||
@media(max-aspect-ratio: 7/6) {
|
@media(max-aspect-ratio: 7/6) {
|
||||||
.section div {
|
.section div {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,29 +1,29 @@
|
|||||||
.footer {
|
.footer {
|
||||||
margin: var(--padding-lg) 0;
|
margin: var(--padding-lg) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer > div {
|
.footer > div {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer > div > *:last-child {
|
.footer > div > * {
|
||||||
text-align: right;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer * {
|
.footer * {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* mobile */
|
/* mobile */
|
||||||
@media(max-aspect-ratio: 5/4) {
|
@media(max-aspect-ratio: 5/4) {
|
||||||
.footer > div {
|
.footer > div {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer * {
|
.footer * {
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,79 +1,79 @@
|
|||||||
/* menu layout */
|
/* menu layout */
|
||||||
.menu {
|
.menu {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
margin: unset;
|
margin: unset;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu > div {
|
.menu > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu > div * {
|
.menu > div * {
|
||||||
margin: unset;
|
margin: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu img {
|
.menu img {
|
||||||
width: 2em;
|
width: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu > div > *:first-child {
|
.menu > div > *:first-child {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu > div > *:first-child h2 {
|
.menu > div > *:first-child h2 {
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu > div > *:last-child {
|
.menu > div > *:last-child {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* menu items */
|
/* menu items */
|
||||||
.menu a {
|
.menu a {
|
||||||
font-family: "Red Hat Display";
|
font-family: "Red Hat Display";
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.2em 0.5em;
|
padding: 0.2em 0.5em;
|
||||||
font-family: "Red Hat Display";
|
font-family: "Red Hat Display";
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: unset;
|
border: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .disabled a {
|
.menu .disabled a {
|
||||||
cursor: no-drop;
|
cursor: no-drop;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu a:hover {
|
.menu a:hover {
|
||||||
background-color: var(--theme-color-dilluted);
|
background-color: var(--theme-color-dilluted);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: unset;
|
border: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .disabled {
|
.menu .disabled {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* mobile */
|
/* mobile */
|
||||||
@media(max-aspect-ratio: 5/4) {
|
@media(max-aspect-ratio: 5/4) {
|
||||||
.menu > div {
|
.menu > div {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu > div > *:last-child {
|
.menu > div > *:last-child {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in new issue