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,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"
|
||||
@ -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,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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue