You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
334 lines
5.4 KiB
334 lines
5.4 KiB
@tailwind base;
|
|
|
|
a {
|
|
@apply text-blue-700;
|
|
}
|
|
|
|
a:hover {
|
|
@apply underline;
|
|
}
|
|
|
|
/* @tailwind components; */
|
|
|
|
/* @tailwind utilities; */
|
|
|
|
/* .content {
|
|
@apply tracking-wider leading-8 text-xl;
|
|
}
|
|
|
|
.content p {
|
|
@apply my-5;
|
|
}
|
|
|
|
.content h1 {
|
|
@apply text-5xl font-bold mt-12 mb-5 leading-10;
|
|
}
|
|
|
|
.content h2 {
|
|
@apply text-4xl font-bold mt-10 mb-5;
|
|
}
|
|
|
|
.content h3 {
|
|
@apply text-3xl font-bold mt-10 mb-5;
|
|
}
|
|
|
|
.content h4 {
|
|
@apply text-2xl font-bold mt-10 mb-5;
|
|
}
|
|
|
|
.content h5 {
|
|
@apply text-xl font-bold mt-10 mb-5;
|
|
}
|
|
|
|
.content h6 {
|
|
@apply text-lg font-bold mt-10 mb-5;
|
|
}
|
|
|
|
.content ul,
|
|
.content ol,
|
|
.content p {
|
|
@apply overflow-auto;
|
|
}
|
|
|
|
.content > div > ul,
|
|
.content > div > ol {
|
|
@apply my-6;
|
|
}
|
|
|
|
.content ul,
|
|
.content ol {
|
|
@apply pl-8;
|
|
}
|
|
|
|
.content ul {
|
|
@apply list-outside list-disc;
|
|
}
|
|
|
|
.content ol {
|
|
@apply list-outside list-decimal;
|
|
}
|
|
|
|
.content pre[class*='language-'] {
|
|
@apply my-8;
|
|
}
|
|
|
|
.content table {
|
|
@apply whitespace-nowrap my-8 border-collapse block overflow-auto;
|
|
}
|
|
|
|
.content th,
|
|
.content td {
|
|
@apply border px-8 py-4;
|
|
}
|
|
|
|
.content th {
|
|
@apply bg-gray-100;
|
|
} */
|
|
|
|
/*************************************/
|
|
|
|
/* latin-ext */
|
|
|
|
/* @font-face {
|
|
font-family: 'Bebas Neue';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('fonts/bebas-latin-ext.woff2') format('woff2');
|
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: 'Bebas Neue';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('fonts/bebas-latin.woff2') format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
} */
|
|
|
|
/* @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap'); */
|
|
|
|
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
|
|
|
|
html {
|
|
/* font-size: clamp(10px,2vmin,18px); */
|
|
font-size: 2vmin; /* need to figure out a way to add a minimum which doesn't break on mobile */
|
|
scroll-behavior: smooth;
|
|
color: black;
|
|
font-family: Nunito, sans-serif;
|
|
}
|
|
|
|
/* html, body, #page {
|
|
width: 100vw;
|
|
} */
|
|
|
|
/* html{
|
|
outline: 1px solid red;
|
|
outline-offset: -10px;
|
|
}
|
|
body{
|
|
outline: 1px solid orange;
|
|
outline-offset: -10px;
|
|
}
|
|
#page{
|
|
outline: 1px solid blue;
|
|
outline-offset: -10px;
|
|
} */
|
|
|
|
:root{
|
|
--r-1: 2rem;
|
|
--p-1: 1.5rem;
|
|
--c-bkg: white;
|
|
/* --c-1: #00C2FF; */
|
|
--c-1: #ececec;
|
|
--c-2: black;
|
|
--c-3: #0477d7;
|
|
--viewportWidth: calc(100vw - var(--scrollbarWidth));
|
|
}
|
|
|
|
@keyframes pageload {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
body {
|
|
animation: pageload 1.5s 1;
|
|
}
|
|
|
|
.site-logo {
|
|
height: 5rem;
|
|
width: 5rem;
|
|
transform: rotateZ(0deg) translateY(1.2rem);
|
|
transition: 0.2s all;
|
|
/* border: 3px solid var(--c-1); */
|
|
border-radius: 1rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.site-logo:hover {
|
|
transform: rotateZ(4deg) translateY(1.2rem) scale(1.1);
|
|
}
|
|
|
|
.site-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: baseline;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.no-flexbox-gap .site-header>*:not(:last-child) {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.site-title {
|
|
font-family: Bebas Neue;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 3rem;
|
|
line-height: 1;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
width: auto;
|
|
margin: 3rem 0 0 0;
|
|
}
|
|
|
|
#page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.page-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn {
|
|
transition: all 0.2s;
|
|
font-family: Nunito, sans-serif;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a:hover, .btn:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
article {
|
|
padding: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
width: min(60rem, var(--viewportWidth));
|
|
}
|
|
|
|
.no-flexbox-gap article > *:not(:last-child) {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
|
|
article > header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 2rem;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.no-flexbox-gap article > header > *:not(:last-child) {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
article > header > aside {
|
|
font-size: max(1rem, 10pt);
|
|
max-width: 60ch;
|
|
}
|
|
|
|
.inset {
|
|
background: var(--c-1);
|
|
padding: 4rem 0;
|
|
position: relative;
|
|
width: var(--viewportWidth);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.inset::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: var(--r-1);
|
|
border-radius: 0 0 var(--r-1) var(--r-1);
|
|
background: var(--c-bkg);
|
|
}
|
|
|
|
.inset::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: var(--r-1);
|
|
border-radius: var(--r-1) var(--r-1) 0 0;
|
|
background: var(--c-bkg);
|
|
}
|
|
|
|
.inset > article {
|
|
|
|
}
|
|
|
|
h1 {
|
|
font-family: Bebas Neue;
|
|
font-size: 3.5rem;
|
|
color: var(--c-2);
|
|
line-height: 0.77;
|
|
width: 17ch;
|
|
/* for scrolling */
|
|
padding-top: 0.75rem;
|
|
}
|
|
|
|
h2 {
|
|
font-family: Bebas Neue;
|
|
font-size: 3rem;
|
|
color: var(--c-2);
|
|
line-height: 0.85;
|
|
}
|
|
|
|
.blurb__wrapper {
|
|
border-radius: var(--radius);
|
|
background: var(--c-bkg);
|
|
}
|
|
|
|
@import '_nav.css';
|
|
|
|
@import '_hero.css';
|
|
|
|
@import '_blurb.css';
|
|
|
|
@import '_showcase.css';
|
|
|
|
@import '_screenshots.css';
|
|
|
|
@import '_systems.css';
|
|
|
|
@import '_pricing.css';
|
|
|
|
@import '_download.css';
|
|
|
|
@import '_reviews.css';
|
|
|
|
@import '_contact.css';
|
|
|
|
@import '_footer.css';
|