some fixes!!

main
Midnight 3 years ago
parent 60e0747d68
commit d460e46d68

@ -1,4 +1,4 @@
NEXT_PUBLIC_NAME="DubbelNull"
NEXT_PUBLIC_MOTTO="do more with less"
NEXT_PUBLIC_NAME="DubbelNull"
NEXT_PUBLIC_MOTTO="do more with less"
AIRTABLE_KEY=""

@ -1,18 +1,18 @@
import styles from '../styles/components/Buttons.module.css';
import Link from 'next/link'
export default function Footer() {
return (
<section className={styles.section}>
<h2>Learn more</h2>
<div>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
<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://discord.gg/976Xskh8Dd" target="_blank" rel="noreferrer">Discord</a>
<a href="https://status.dubbelnull.com" target="_blank" rel="noreferrer">Statuspage</a>
</div>
</section>
)
import styles from '../styles/components/Buttons.module.css';
import Link from 'next/link'
export default function Footer() {
return (
<section className={styles.section}>
<h2>Learn more</h2>
<div>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
<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://discord.gg/976Xskh8Dd" target="_blank" rel="noreferrer">Discord</a>
<a href="https://status.dubbelnull.com" target="_blank" rel="noreferrer">Statuspage</a>
</div>
</section>
)
}

@ -1,30 +1,30 @@
export default function StyledButton(props: any) {
return (
<div>
<style jsx>{`
a {
justify-content: center;
text-align: center;
font-family: "Red Hat Display";
display: inline-flex;
align-items: center;
padding: 0.4em 1em;
font-family: "Red Hat Display";
font-weight: 500;
font-size: 1em;
border-radius: 8px;
transition-duration: 0.2s;
gap: var(--padding-sm);
color: unset;
text-decoration: unset;
}
a:hover {
background-color: var(--background-color-dark);
text-decoration: none;
transition-duration: 0.2s;
}
`}</style>
<a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
</div>
)
export default function StyledButton(props: any) {
return (
<div>
<style jsx>{`
a {
justify-content: center;
text-align: center;
font-family: "Red Hat Display";
display: inline-flex;
align-items: center;
padding: 0.4em 1em;
font-family: "Red Hat Display";
font-weight: 500;
font-size: 1em;
border-radius: 8px;
transition-duration: 0.2s;
gap: var(--padding-sm);
color: unset;
text-decoration: unset;
}
a:hover {
background-color: var(--background-color-dark);
text-decoration: none;
transition-duration: 0.2s;
}
`}</style>
<a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
</div>
)
}

@ -1,31 +1,31 @@
export default function StyledButton(props: any) {
return (
<div>
<style jsx>{`
a {
justify-content: center;
text-align: center;
font-family: "Red Hat Display";
display: inline-flex;
align-items: center;
padding: 0.4em 1em;
font-family: "Red Hat Display";
font-weight: 500;
font-size: 1.1em;
border-radius: 8px;
background-color: var(--background-color-dark);
transition-duration: 0.2s;
gap: var(--padding-sm);
color: unset;
text-decoration: unset;
}
a:hover {
background-color: var(--theme-color-500);
text-decoration: none;
transition-duration: 0.2s;
}
`}</style>
<a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
</div>
)
export default function StyledButton(props: any) {
return (
<div>
<style jsx>{`
a {
justify-content: center;
text-align: center;
font-family: "Red Hat Display";
display: inline-flex;
align-items: center;
padding: 0.4em 1em;
font-family: "Red Hat Display";
font-weight: 500;
font-size: 1.1em;
border-radius: 8px;
background-color: var(--background-color-dark);
transition-duration: 0.2s;
gap: var(--padding-sm);
color: unset;
text-decoration: unset;
}
a:hover {
background-color: var(--theme-color-500);
text-decoration: none;
transition-duration: 0.2s;
}
`}</style>
<a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
</div>
)
}

@ -1,16 +1,15 @@
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/components/Footer.module.css';
import Link from 'next/link';
import logo from "../public/img/logoblue.png";
export default function Footer() {
return (
<footer className={styles.footer}>
<div className="container">
<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>
</footer>
)
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/components/Footer.module.css';
import Link from 'next/link';
import logo from "../public/img/logoblue.png";
export default function Footer() {
return (
<footer className={styles.footer}>
<div className="container">
<p>Copyright © 2021 DubbelNull vof<br/>Kvk 81343493 -- The Netherlands</p>
</div>
</footer>
)
}

@ -1,28 +1,28 @@
import Image from 'next/image';
import styles from '../styles/components/Menu.module.css';
import Link from 'next/link';
import logo from "../public/img/logoblue.png";
import ThemeToggle from './themetoggle';
export default function Menu() {
return (
<menu className={styles.menu}>
<div className="container">
<Link href="/">
<a>
<Image src={logo} alt="dubbelnull logo" />
<h2>{process.env.NEXT_PUBLIC_NAME?.toUpperCase()}</h2>
</a>
</Link>
<div>
<Link href="/about">About</Link>
<Link href="/showcase">Showcase</Link>
<Link href="/services">Services</Link>
<Link href="/contact">Contact</Link>
<ThemeToggle />
</div>
</div>
</menu>
)
import Image from 'next/image';
import styles from '../styles/components/Menu.module.css';
import Link from 'next/link';
import logo from "../public/img/logoblue.png";
import ThemeToggle from './themetoggle';
export default function Menu() {
return (
<menu className={styles.menu}>
<div className="container">
<Link href="/">
<a>
<Image src={logo} alt="dubbelnull logo" />
<h2>{process.env.NEXT_PUBLIC_NAME?.toUpperCase()}</h2>
</a>
</Link>
<div>
<Link href="/about">About</Link>
<Link href="/showcase">Showcase</Link>
{/* <Link href="/services">Services</Link> */}
<Link href="/contact">Contact</Link>
<ThemeToggle />
</div>
</div>
</menu>
)
}

@ -1,32 +1,32 @@
import styles from '../styles/components/Buttons.module.css';
import Link from 'next/link'
import { useState, useEffect } from "react";
export default function ThemeToggle() {
const [activeTheme, setActiveTheme] = useState("light");
const inactiveTheme = activeTheme === "light" ? "dark" : "light";
useEffect(() => {
const savedTheme = window.localStorage.getItem("theme");
savedTheme && setActiveTheme(savedTheme);
}, []);
useEffect(() => {
document.body.dataset.theme = activeTheme;
window.localStorage.setItem("theme", activeTheme);
}, [activeTheme]);
if(activeTheme == 'light') {
return (
<a onClick={() => setActiveTheme(inactiveTheme)} href="#">
<span>🌙</span>
</a>
)
} else {
return (
<a onClick={() => setActiveTheme(inactiveTheme)} href="#">
<span></span>
</a>
)
}
import styles from '../styles/components/Buttons.module.css';
import Link from 'next/link'
import { useState, useEffect } from "react";
export default function ThemeToggle() {
const [activeTheme, setActiveTheme] = useState("light");
const inactiveTheme = activeTheme === "light" ? "dark" : "light";
useEffect(() => {
const savedTheme = window.localStorage.getItem("theme");
savedTheme && setActiveTheme(savedTheme);
}, []);
useEffect(() => {
document.body.dataset.theme = activeTheme;
window.localStorage.setItem("theme", activeTheme);
}, [activeTheme]);
if(activeTheme == 'light') {
return (
<a onClick={() => setActiveTheme(inactiveTheme)} href="#">
<span>🌙</span>
</a>
)
} else {
return (
<a onClick={() => setActiveTheme(inactiveTheme)} href="#">
<span></span>
</a>
)
}
}

@ -1,29 +1,29 @@
import Head from 'next/head'
export default function GlobalLayout(props: any) {
return (
<div>
<Head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{process.env.NEXT_PUBLIC_NAME}</title>
<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="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="16x16" href="/img/favicons/favicon-16x16.png" />
<link rel="manifest" href="/img/favicons/site.webmanifest" />
<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg" color="#2563eb" />
<link rel="shortcut icon" href="/img/favicons/favicon.ico" />
<meta name="apple-mobile-web-app-title" content="DubbelNull" />
<meta name="application-name" content="DubbelNull" />
<meta name="msapplication-TileColor" content="#2d89ef" />
<meta name="msapplication-config" content="/img/favicons/browserconfig.xml" />
<meta name="theme-color" content="#000000" />
</Head>
{props.children}
</div>
)
import Head from 'next/head'
export default function GlobalLayout(props: any) {
return (
<div>
<Head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{process.env.NEXT_PUBLIC_NAME}</title>
<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="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="16x16" href="/img/favicons/favicon-16x16.png" />
<link rel="manifest" href="/img/favicons/site.webmanifest" />
<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg" color="#2563eb" />
<link rel="shortcut icon" href="/img/favicons/favicon.ico" />
<meta name="apple-mobile-web-app-title" content="DubbelNull" />
<meta name="application-name" content="DubbelNull" />
<meta name="msapplication-TileColor" content="#2d89ef" />
<meta name="msapplication-config" content="/img/favicons/browserconfig.xml" />
<meta name="theme-color" content="#000000" />
</Head>
{props.children}
</div>
)
}

@ -1,15 +1,15 @@
import Head from 'next/head'
import styles from "../styles/Index.module.css"
export default function PageLayout(props: any) {
return (
<section className="container">
<section className={styles.banner}>
<h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
</section>
<article>
{props.children}
</article>
</section>
)
import Head from 'next/head'
import styles from "../styles/Index.module.css"
export default function PageLayout(props: any) {
return (
<section className="container">
<section className={styles.banner}>
<h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
</section>
<article>
{props.children}
</article>
</section>
)
}

@ -1,3 +1,3 @@
[build]
command = "npm run build"
[build]
command = "npm run build"
publish = ".next"

@ -8,7 +8,7 @@ import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false; /* eslint-disable import/first */
function MyApp({ Component, pageProps }: AppProps) {
function App({ Component, pageProps }: AppProps) {
return (
<SiteLayout>
<Menu />
@ -17,4 +17,4 @@ function MyApp({ Component, pageProps }: AppProps) {
</SiteLayout>
)
}
export default MyApp
export default App

@ -1,100 +1,94 @@
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/About.module.css';
import Link from 'next/link';
import StyledButton from '../components/elements/styledbutton';
import SmallStyledButton from '../components/elements/smallstyledbutton';
import pascal from '../public/img/mid.png'
import marco from '../public/img/marco.png'
export default function About() {
return (
<div className={"page " + styles.about}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | About</title>
</Head>
<section className="container">
<article className="content">
<section>
<h2>{" About DubbelNull"}</h2>
<h5>
{"We are a new and small IT business from The Netherlands developing and designing all sorts of applications for clients. "}
{"In January of 2021 DubbelNull was founded by Marco and their son Pascal as a result from their passion for IT. "}
<br/><br/>
{"We get our motivation from seeing clients succeed thanks to the products we craft for them. "}
{"And in an effort to service those clients we keep expanding our set of skills and learning together. "}
<br/><br/>
{"Currently we specialize PHP and NodeJS based webdevelopment stacks including templaters like ReactJS and Blade, "}
{"but we also use pre-made platforms like WordPress and MyBB. "}
{"What tool we use depends entirely on what we feel is right for your budget and project. "}
<br/><br/>
{"For more information on exactly what kind of projects we handle, feel free to visit our "} <Link href="/services">Services</Link> {" page. "}
</h5>
</section>
<hr/>
<section style={{textAlign: "center"}} id="technologies">
<h2>{"We 💖 the newest tech"}</h2>
<div style={{display: "flex", flexWrap: "wrap", gap: "var(--padding-sm)", justifyContent: "center"}}>
<StyledButton>#wordpress</StyledButton>
<StyledButton>#graphql</StyledButton>
<StyledButton>#laravel</StyledButton>
<StyledButton>#express</StyledButton>
<StyledButton>#nextjs</StyledButton>
<StyledButton>#tailwindcss</StyledButton>
<StyledButton>#livewire</StyledButton>
<StyledButton>#reactjs</StyledButton>
<StyledButton>#typescript</StyledButton>
<StyledButton>#nestjs</StyledButton>
<StyledButton>#php</StyledButton>
</div>
<h3>{"and we're always eager to learn new stuff!"}</h3>
</section>
<hr/>
<section>
<div className={styles.aboutSectionReverse}>
<div>
<Image src={marco} alt="picture of marco van ginkel" />
</div>
<div>
<h3>{"💼 Marco van Ginkel"} <span className={styles.tag}>{"Client relations & communication"}</span></h3>
<p>
{"lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet "}
</p>
</div>
</div>
<br/>
<div className={styles.aboutSection}>
<div>
<h3>{"🐱‍💻 Pascal van Ginkel"} <span className={styles.tag}>{"Full-stack webdeveloper"}</span></h3>
<p>
{"Hello, I'm Pascal. The person behind the majority of development at DubbelNull. "}
{"I have a passion for everything tech and always dive into new technologies, but my favorite by far is webdevelopment. "}
{"I started making my own things nearly 6 years ago and have gotten a lot of experience with a wide range of concepts and technologies since then. "}
{"I am also following a Software Engineering major at the Saxion University of Applied Sciences currently. "}
</p>
</div>
<div>
<Image src={pascal} alt="picture of mid" />
</div>
</div>
</section>
</article>
</section>
</div>
)
import Head from 'next/head';
import styles from '../styles/About.module.css';
import Link from 'next/link';
import StyledButton from '../components/elements/styledbutton';
export default function About() {
return (
<div className={"page " + styles.about}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | About</title>
</Head>
<section className="container">
<article className="content">
<section>
<h2>{" About DubbelNull"}</h2>
<h5>
{"We are a new and small IT business from The Netherlands developing and designing all sorts of applications for clients. "}
{"In January of 2021 DubbelNull was founded by Marco and their son Pascal as a result from their passion for IT. "}
<br/><br/>
{"We get our motivation from seeing clients succeed thanks to the products we craft for them. "}
{"And in an effort to service those clients we keep expanding our set of skills and learning together. "}
<br/><br/>
{"Currently we specialize PHP and NodeJS based webdevelopment stacks including templaters like ReactJS and Blade, "}
{"but we also use pre-made platforms like WordPress and MyBB. "}
{"What tool we use depends entirely on what we feel is right for your budget and project. "}
<br/><br/>
{"For more information on exactly what kind of projects we handle, feel free to visit our "} <Link href="/services">Services</Link> {" page. "}
</h5>
</section>
<hr/>
<section style={{textAlign: "center"}} id="technologies">
<h2>{"We 💖 the newest tech"}</h2>
<div style={{display: "flex", flexWrap: "wrap", gap: "var(--padding-sm)", justifyContent: "center"}}>
<StyledButton>#wordpress</StyledButton>
<StyledButton>#graphql</StyledButton>
<StyledButton>#websockets</StyledButton>
<StyledButton>#laravel</StyledButton>
<StyledButton>#express</StyledButton>
<StyledButton>#tailwindcss</StyledButton>
<StyledButton>#svelte</StyledButton>
<StyledButton>#typescript</StyledButton>
<StyledButton>#nestjs</StyledButton>
<StyledButton>#php</StyledButton>
</div>
<h3>{"and we're always eager to learn new stuff!"}</h3>
</section>
<hr/>
<section>
<div className={styles.aboutSectionReverse}>
<div>
<img src="/img/mid.png" alt="picture of pascal" />
</div>
<div>
<h3>{"💻 Pascal van Ginkel"} <span className={styles.tag}>{"Full-stack webdeveloper"}</span></h3>
<p>
{"Hello, I'm Pascal. The person behind the majority of development at DubbelNull. "}<br/>
{"I am a versatile full-stack software engineer. I know my way around many languages and work with a variety of frameworks/libraries like Laravel, NestJS, React and Svelte."} <br/><br/>
{"I started making my own things over half a decade ago and have gotten a lot of experience with a wide range of concepts and technologies since then."}<br/>
{"I am currently studying Software Engineering at the Saxion University of Applied Sciences and specialize in web related development. "}
</p>
</div>
</div>
<br/>
<div className={styles.aboutSection}>
<div>
<h3>{"💼 Marco van Ginkel"} <span className={styles.tag}>{"Client relations & communication"}</span></h3>
<p>
{"Hello, I'm Marco. I do client relations and financial administration at DubbelNull."}
</p>
</div>
<div>
<img src="/img/marco.png" alt="picture of marco" />
</div>
</div>
</section>
</article>
</section>
</div>
)
}

@ -1,46 +1,45 @@
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Contact.module.css';
import Link from 'next/link';
import StyledButton from '../components/elements/styledbutton';
import SmallStyledButton from '../components/elements/smallstyledbutton';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faDiscord } from '@fortawesome/free-brands-svg-icons'
import { faPhoneSlash } from '@fortawesome/free-solid-svg-icons'
export default function Contact() {
return (
<div className={"page " + styles.contact}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | Contact</title>
</Head>
<section className="container">
<article className="content">
<style jsx>{`
section {
display: grid;
grid-auto-flow: row;
grid-template-columns: auto auto;
gap: var(--padding-lg);
}
`}</style>
<section style={{display: "flex", flexDirection: "column", alignItems: "center" }}>
<h2>{"📬 We typically respond within a few hours"}</h2>
<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="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={faTwitter}></FontAwesomeIcon> DM us on Twitter</StyledButton>
</div>
</section>
</article>
</section>
</div>
)
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Contact.module.css';
import Link from 'next/link';
import StyledButton from '../components/elements/styledbutton';
import SmallStyledButton from '../components/elements/smallstyledbutton';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faDiscord } from '@fortawesome/free-brands-svg-icons'
import { faPhoneSlash } from '@fortawesome/free-solid-svg-icons'
export default function Contact() {
return (
<div className={"page " + styles.contact}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | Contact</title>
</Head>
<section className="container">
<article className="content">
<style jsx>{`
section {
display: grid;
grid-auto-flow: row;
grid-template-columns: auto auto;
}
`}</style>
<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>
<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="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>
</div>
</section>
</article>
</section>
</div>
)
}

@ -1,169 +1,167 @@
import Head from 'next/head'
import Link from 'next/link';
import Image from 'next/image'
import styles from '../styles/Index.module.css'
import Buttons from '../components/buttons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTractor } from '@fortawesome/free-solid-svg-icons'
import { faBatteryFull } from '@fortawesome/free-solid-svg-icons'
import { faHandshake } from '@fortawesome/free-solid-svg-icons'
import { faMoneyBillWave } from '@fortawesome/free-solid-svg-icons'
import { faForward } from '@fortawesome/free-solid-svg-icons'
import { faStream } from '@fortawesome/free-solid-svg-icons'
import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'
import { faQuoteRight } from '@fortawesome/free-solid-svg-icons'
import logo from '../public/img/logoblue.png'
import trick from '../public/img/trick.png'
export default function Home() {
return (
<div className={"page " + styles.index}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | {process.env.NEXT_PUBLIC_MOTTO}</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<section className="container">
<section className={styles.banner}>
<h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
</section>
<article className={"content " + styles.indexanim}>
<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; "}
{"back-end servers, front-end experiences, mobile apps, and PWA. "}
{"As long as it's based on web protocols, we can make it."}
</h1>
<hr />
<section className={styles.features}>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faTractor} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Crystal clear sense</h3>
<p>
{"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."}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faHandshake} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Service focused</h3>
<p>
{"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."}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faForward} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Future proof</h3>
<p>
{"We work with the newest technologies and use agnostic systems to ensure they will keep working even if an individual piece gets outdated."}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faBatteryFull} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Involved and committed</h3>
<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. "}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faMoneyBillWave} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Price minded</h3>
<p>
{"We are a small startup with very little background costs. "}
{"Those cost savings are directly forwarded to you, the client."}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faStream} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Flexible and versatile</h3>
<p>
{"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."}
</p>
</div>
</div>
</section>
<hr />
<section>
<h2>See what our customers say</h2>
<div className={styles.quote}>
<div>
<FontAwesomeIcon icon={faQuoteLeft} size="6x" style={{color: "var(--theme-color)"}} />
</div>
<div>
<p>
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
{" The site is amazing, the work that went into this is incredible. "}
{" The look and small details make it so amazing. "}
{" I highly recommend getting yourself a sight made by DubbelNull, their talent is outstanding and the customer service was amazing. "}
{" They were always there to answer any questions I had and were happy to change the things I wanted. "}
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
</p>
<br/>
<i> Trick @ <a href="https://trickthefox.com" target="_blank" rel="noreferrer">trickthefox.com</a></i>
</div>
</div>
<br/>
{/* <div className={styles.quote}>
<div>
<p>
<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. "}
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
</p>
<br/>
<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> */}
</section>
<hr/>
<section>
<Buttons />
</section>
</article>
</section>
</div>
)
import Head from 'next/head'
import Link from 'next/link';
import Image from 'next/image'
import styles from '../styles/Index.module.css'
import Buttons from '../components/buttons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTractor } from '@fortawesome/free-solid-svg-icons'
import { faBatteryFull } from '@fortawesome/free-solid-svg-icons'
import { faHandshake } from '@fortawesome/free-solid-svg-icons'
import { faMoneyBillWave } from '@fortawesome/free-solid-svg-icons'
import { faForward } from '@fortawesome/free-solid-svg-icons'
import { faStream } from '@fortawesome/free-solid-svg-icons'
import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'
import { faQuoteRight } from '@fortawesome/free-solid-svg-icons'
import logo from '../public/img/logoblue.png'
import trick from '../public/img/trick.png'
export default function Home() {
return (
<div className={"page " + styles.index}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | {process.env.NEXT_PUBLIC_MOTTO}</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<section className="container">
<section className={styles.banner}>
<h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
</section>
<article className={"content " + styles.indexanim}>
<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; "}
{"back-end servers, front-end experiences, mobile apps, and PWA. "}
{"As long as it's based on web protocols, we can make it."}
</h1>
<hr />
<section className={styles.features}>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faTractor} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Crystal clear sense</h3>
<p>
{"We understand the struggle of long meetings only to still have misunderstandings. "}
{"We are straight to the point and will inform you of your options upfront."}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faHandshake} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Service focused</h3>
<p>
{"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."}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faForward} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Future proof</h3>
<p>
{"We work with the newest technologies and use agnostic systems to ensure they will keep working even if an individual piece gets outdated."}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faBatteryFull} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Involved and committed</h3>
<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. "}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faMoneyBillWave} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Price minded</h3>
<p>
{"We are a small startup with very little background costs. "}
{"Those cost savings are directly forwarded to you, the client."}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faStream} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Flexible and versatile</h3>
<p>
{"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."}
</p>
</div>
</div>
</section>
<hr />
<section>
<h2>See what our customers say</h2>
<div className={styles.quote}>
<img src="/img/trick.png"/>
<div>
<p>
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
{" The site is amazing, the work that went into this is incredible. "}
{" The look and small details make it so amazing. "}
{" I highly recommend getting yourself a sight made by DubbelNull, their talent is outstanding and the customer service was amazing. "}
{" They were always there to answer any questions I had and were happy to change the things I wanted. "}
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
</p>
<br/>
<i> Trick @ <a href="https://trickthefox.com" target="_blank" rel="noreferrer">trickthefox.com</a></i>
</div>
</div>
<br/>
{/* <div className={styles.quote}>
<div>
<p>
<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. "}
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
</p>
<br/>
<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> */}
</section>
<hr/>
<section>
<Buttons />
</section>
</article>
</section>
</div>
)
}

@ -1,18 +1,18 @@
import Head from 'next/head';
import styles from '../styles/Services.module.css';
export default function Services() {
return (
<div className={"page " + styles.services}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | Services</title>
</Head>
<section className="container">
<article className="content">
</article>
</section>
</div>
)
import Head from 'next/head';
import styles from '../styles/Services.module.css';
export default function Services() {
return (
<div className={"page " + styles.services}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | Services</title>
</Head>
<section className="container">
<article className="content">
</article>
</section>
</div>
)
}

@ -1,83 +1,78 @@
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Showcase.module.css';
import larumNidis from "../public/img/larumnidis.png";
import lifeCentreLivingston from "../public/img/lifecentrelivingston.png";
import breehoef from "../public/img/breehoef.jpg";
export default function Showcase() {
return (
<div className={"page " + styles.showcase}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | Showcase</title>
</Head>
<section className="container">
<article className="content">
<section>
<h2> Highlighted clients</h2>
<h5>{`
Take a look at some of our happy past clients and the projects we made for them.
Websites made before 2021 listed here were made before DubbelNull was founded by our Webdeveloper Pascal.
`}</h5>
</section>
<section className={styles.showcaseClient}>
<div>
<h3>🏘 Larum Nidis</h3>
<p>{`
This site was built with Wordpress in 2019 for a Dutch client.
It is designed to mostly be a one-pager design, but can be extended to have more pages with ease.
`}</p>
</div>
<div>
<Image src={larumNidis} />
</div>
</section>
<section className={styles.showcaseClient}>
<div>
<h3> Life Centre Livingston</h3>
<p>{`
This site was made in 2018 with Wordpress for a local church and has many features like galleries, calendar,
blogging and file uploads.
`}</p>
</div>
<div>
<Image src={lifeCentreLivingston} />
</div>
</section>
<section className={styles.showcaseClient}>
<div>
<h3>🐄 Breehoef</h3>
<p>{`
A Dutch care farm contacted us in 2019 to update their website's content.
Along the way we ended up rebuilding the site with HTML5 to keep supporting new browsers while
retaining the old-school feeling that they loved and wanted to keep.
`}</p>
</div>
<div>
<Image src={breehoef} />
</div>
</section>
<hr/>
<section>
<h2>🏗 Other experiences and projects</h2>
<h5>{`
In our every day lives we come across shortcomings or needs in technology, and sometimes we create our own solutions for them.
Sometimes we believe that these solutions could help more people and decide to release them publicly so that anyone can use them.
These applications also help us further showcase our quality and abilities to potential clients.
They are not ready for use yet, but you can still read more about them below.
`}</h5>
{`Maker, Picto Designer, Flame, The Moonlit Den, UNIVERSE`}
</section>
</article>
</section>
</div>
)
import Head from 'next/head';
import styles from '../styles/Showcase.module.css';
export default function Showcase() {
return (
<div className={"page " + styles.showcase}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | Showcase</title>
</Head>
<section className="container">
<article className="content">
<section>
<h2> Highlighted clients</h2>
<h5>{`
Take a look at some of our happy past clients and the projects we made for them.
Websites made before 2021 listed here were made before DubbelNull was founded by our Webdeveloper Pascal.
`}</h5>
</section>
<section className={styles.showcaseClient}>
<div>
<h3>🏘 Larum Nidis</h3>
<p>{`
This site was built with Wordpress in 2019 for a Dutch client.
It is designed to mostly be a one-pager design, but can be extended to have more pages with ease.
`}</p>
</div>
<div>
<img src="/img/larumnidis.png" />
</div>
</section>
<section className={styles.showcaseClient}>
<div>
<h3> Life Centre Livingston</h3>
<p>{`
This site was made in 2018 with Wordpress for a local church and has many features like galleries, calendar,
blogging and file uploads.
`}</p>
</div>
<div>
<img src="/img/lifecentrelivingston.png" />
</div>
</section>
<section className={styles.showcaseClient}>
<div>
<h3>🐄 Breehoef</h3>
<p>{`
A Dutch care farm contacted us in 2019 to update their website's content.
Along the way we ended up rebuilding the site with HTML5 to keep supporting new browsers while
retaining the old-school feeling that they loved and wanted to keep.
`}</p>
</div>
<div>
<img src="/img/breehoef.jpg" />
</div>
</section>
{/* <hr/>
<section>
<h2>🏗 Other experiences and projects</h2>
<h5>{`
In our every day lives we come across shortcomings or needs in technology, and sometimes we create our own solutions for them.
Sometimes we believe that these solutions could help more people and decide to release them publicly so that anyone can use them.
These applications also help us further showcase our quality and abilities to potential clients.
They are not ready for use yet, but you can still read more about them below.
`}</h5>
{`Maker, Picto Designer, Flame, The Moonlit Den, UNIVERSE`}
</section> */}
</article>
</section>
</div>
)
}

@ -1,29 +1,29 @@
.aboutSection {
display: grid;
grid-auto-flow: row;
width: 100%;
grid-template-columns: 70% auto;
gap: var(--padding-lg);
}
.aboutSectionReverse {
display: grid;
grid-auto-flow: row;
width: 100%;
grid-template-columns: auto 70%;
gap: var(--padding-lg);
}
.aboutSection img, .aboutSectionReverse img {
border-radius: var(--padding-sm);
}
.tag {
font-size: 0.90rem;
background-color: var(--theme-color);
color: white;
padding: 0.4em 0.8em;
border-radius: var(--padding-xl);
text-transform: lowercase;
.aboutSection {
display: grid;
grid-auto-flow: row;
width: 100%;
grid-template-columns: 70% auto;
gap: var(--padding-lg);
}
.aboutSectionReverse {
display: grid;
grid-auto-flow: row;
width: 100%;
grid-template-columns: auto 70%;
gap: var(--padding-lg);
}
.aboutSection img, .aboutSectionReverse img {
border-radius: var(--padding-sm);
}
.tag {
font-size: 0.90rem;
background-color: var(--theme-color);
color: white;
padding: 0.4em 0.8em;
border-radius: var(--padding-xl);
text-transform: lowercase;
}

@ -1,129 +1,130 @@
/* elements */
.index img {
border-radius: 50%;
}
/* layout */
.banner {
background-image: url('/img/banner.png');
height: 500px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner h1 {
margin-top: -6.5rem;
font-size: 3em;
font-weight: 500;
}
/* page properties */
.description {
font-weight: normal;
text-align: center;
width: 100%;
margin: auto;
}
.features {
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
gap: 50px;
width: 100%;
}
.block {
display: flex;
gap: 20px;
align-items: flex-start;
}
.block p {
font-size: 1rem;
}
.block > div {
display: grid;
gap: 10px;
}
.block * {
margin: unset;
}
.index h2 {
text-align: center;
}
.quote {
display: flex;
gap: var(--padding-lg);
align-items: flex-start;
}
.quote p {
margin: unset;
}
.quote i {
font-size: 0.9rem;
color: grey;
}
.block .show {
width: 100%;
}
.block .show img {
max-width: 100%;
}
/* animation */
.indexanim {
-webkit-animation-name: indexanim;
animation-name: indexanim;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
margin-top: -10rem;
}
@keyframes indexanim {
0% {
margin-top: 0;
opacity: 0;
}
100% {
margin-top: -10rem;
opacity: 100;
}
}
/* mobile */
@media(max-aspect-ratio: 5/4) {
.features {
grid-template-columns: auto;
}
.quote {
flex-direction: column;
}
.banner {
padding: var(--padding);
}
.banner h1 {
font-size: 2em;
}
.description {
font-size: 1em;
}
/* elements */
.index img {
border-radius: 50%;
}
/* layout */
.banner {
background-image: url('/img/banner.png');
height: 500px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner h1 {
margin-top: -6.5rem;
font-size: 3em;
font-weight: 500;
}
/* page properties */
.description {
font-weight: normal;
text-align: center;
width: 100%;
margin: auto;
}
.features {
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
gap: 50px;
width: 100%;
}
.block {
display: flex;
gap: 20px;
align-items: flex-start;
}
.block p {
font-size: 1rem;
}
.block > div {
display: grid;
gap: 10px;
}
.block * {
margin: unset;
}
.index h2 {
text-align: center;
}
.quote {
display: flex;
gap: var(--padding);
align-items: flex-start;
width: 100%;
}
.quote > img {
width: 100%;
}
.quote p {
margin: unset;
}
.quote i {
font-size: 0.9rem;
color: grey;
}
.block .show {
width: 100%;
}
.block .show img {
max-width: 100%;
}
/* animation */
.indexanim {
-webkit-animation-name: indexanim;
animation-name: indexanim;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
margin-top: -10rem;
}
@keyframes indexanim {
0% {
margin-top: 0;
opacity: 0;
}
100% {
margin-top: -10rem;
opacity: 100;
}
}
/* mobile */
@media(max-aspect-ratio: 5/4) {
.features {
grid-template-columns: auto;
}
.banner {
padding: var(--padding);
}
.banner h1 {
font-size: 2em;
}
.description {
font-size: 1em;
}
}

@ -1,14 +1,14 @@
.showcaseClient {
display: grid;
grid-template-columns: 50% auto;
gap: var(--padding-lg);
justify-content: flex-start;
}
.showcaseClient img {
border-radius: var(--padding);
}
.showcaseClient h3 {
margin: unset;
.showcaseClient {
display: grid;
grid-template-columns: 50% auto;
gap: var(--padding-lg);
justify-content: flex-start;
}
.showcaseClient img {
border-radius: var(--padding);
}
.showcaseClient h3 {
margin: unset;
}

@ -1,43 +1,43 @@
.section {
text-align: center;
}
.section * {
margin-top: unset;
}
.section a {
justify-content: center;
text-align: center;
font-family: "Red Hat Display";
display: inline-flex;
align-items: center;
padding: 0.4em 1em;
font-family: "Red Hat Display";
font-weight: 500;
font-size: 1.1em;
border-radius: 8px;
background-color: var(--background-color-dark);
border: unset;
}
.section div {
display: flex;
gap: 10px;
justify-content: center;
align-items: stretch;
}
.section a:hover {
background-color: var(--theme-color-500);
text-decoration: none;
border: unset;
}
/* mobile */
@media(max-aspect-ratio: 7/6) {
.section div {
flex-direction: column;
}
.section {
text-align: center;
}
.section * {
margin-top: unset;
}
.section a {
justify-content: center;
text-align: center;
font-family: "Red Hat Display";
display: inline-flex;
align-items: center;
padding: 0.4em 1em;
font-family: "Red Hat Display";
font-weight: 500;
font-size: 1.1em;
border-radius: 8px;
background-color: var(--background-color-dark);
border: unset;
}
.section div {
display: flex;
gap: 10px;
justify-content: center;
align-items: stretch;
}
.section a:hover {
background-color: var(--theme-color-500);
text-decoration: none;
border: unset;
}
/* mobile */
@media(max-aspect-ratio: 7/6) {
.section div {
flex-direction: column;
}
}

@ -1,29 +1,29 @@
.footer {
margin: var(--padding-lg) 0;
}
.footer > div {
padding: 0 10px;
display: flex;
justify-content: space-between;
}
.footer > div > *:last-child {
text-align: right;
}
.footer * {
font-size: 0.9em;
}
/* mobile */
@media(max-aspect-ratio: 5/4) {
.footer > div {
flex-direction: column;
}
.footer * {
text-align: center !important;
}
.footer {
margin: var(--padding-lg) 0;
}
.footer > div {
padding: 0 10px;
display: flex;
justify-content: center;
}
.footer > div > * {
text-align: center;
}
.footer * {
font-size: 0.9em;
}
/* mobile */
@media(max-aspect-ratio: 5/4) {
.footer > div {
flex-direction: column;
}
.footer * {
text-align: center !important;
}
}

@ -1,79 +1,79 @@
/* menu layout */
.menu {
padding: 10px 0;
margin: unset;
width: 100%;
background-color: var(--background-color);
z-index: 10;
}
.menu > div {
display: flex;
justify-content: space-between;
}
.menu > div * {
margin: unset;
}
.menu img {
width: 2em;
}
.menu > div > *:first-child {
display: inline-flex;
gap: 0.5em;
}
.menu > div > *:first-child h2 {
font-weight: 900;
}
.menu > div > *:last-child {
display: inline-flex;
gap: 1em;
}
/* menu items */
.menu a {
font-family: "Red Hat Display";
display: inline-flex;
align-items: center;
padding: 0.2em 0.5em;
font-family: "Red Hat Display";
font-weight: 500;
font-size: 0.9em;
border-radius: 8px;
border: unset;
}
.menu .disabled a {
cursor: no-drop;
}
.menu a:hover {
background-color: var(--theme-color-dilluted);
text-decoration: none;
border: unset;
}
.menu .disabled {
display: flex;
align-items: stretch;
}
/* mobile */
@media(max-aspect-ratio: 5/4) {
.menu > div {
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu > div > *:last-child {
flex-wrap: wrap;
justify-content: center;
}
/* menu layout */
.menu {
padding: 10px 0;
margin: unset;
width: 100%;
background-color: var(--background-color);
z-index: 10;
}
.menu > div {
display: flex;
justify-content: space-between;
}
.menu > div * {
margin: unset;
}
.menu img {
width: 2em;
}
.menu > div > *:first-child {
display: inline-flex;
gap: 0.5em;
}
.menu > div > *:first-child h2 {
font-weight: 900;
}
.menu > div > *:last-child {
display: inline-flex;
gap: 1em;
}
/* menu items */
.menu a {
font-family: "Red Hat Display";
display: inline-flex;
align-items: center;
padding: 0.2em 0.5em;
font-family: "Red Hat Display";
font-weight: 500;
font-size: 0.9em;
border-radius: 8px;
border: unset;
}
.menu .disabled a {
cursor: no-drop;
}
.menu a:hover {
background-color: var(--theme-color-dilluted);
text-decoration: none;
border: unset;
}
.menu .disabled {
display: flex;
align-items: stretch;
}
/* mobile */
@media(max-aspect-ratio: 5/4) {
.menu > div {
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu > div > *:last-child {
flex-wrap: wrap;
justify-content: center;
}
}

@ -20,7 +20,7 @@
}
body, body[data-theme="light"] {
--background-color: #F3F4F6;
--background-color-light: #1044b427;
--background-color-dark: #E5E7EB;
@ -29,7 +29,7 @@ body, body[data-theme="light"] {
--text-color: black;
}
body, body[data-theme="dark"] {
body, body[data-theme="dark"] {
--background-color: #1F2937;
--background-color-light: #374151;
--background-color-dark: #374151;
@ -54,6 +54,10 @@ body {
scroll-behavior: smooth;
}
img {
max-width: 100%;
}
p, b, i {
font-size: 1rem;
}

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save