mirror of
https://github.com/caddyserver/website.git
synced 2025-04-26 06:56:15 -04:00
New Website: Phase I (#357)
* Initial commit; starting new design Dropdown menu * Begin docs layout of new design * Get themes under control; button hover splash * Some basic responsiveness * Finish responsive layout; several bug fixes * Avoid flash during color scheme change * Begin building top of homepage * docs: Start building quick-assist feature * Work on homepage a little more * Keep working on homepage * More homepage progress * Some sponsor SVGs * Add sponsor features * Implement basic Sponsor Experience box * Reorganize some styles * WIP sponsors page * Start features page WIP * Minor improvements * Fix headings; work on features page * WIP features page * Continue work on marketing pages * Continue work on features page * More features WIP * Continue features page... * More work on features page * Keeping going :) * Continue home and features pages * More homepage/features content, screenshots, tweaks * Minor fixes to features page * Minor tweaks * Work on testimonials * Work on homepage more * More homepage work * Continue work on homepage * Add some sponsor logos * Some citation screenshots * Add citations * Start making homepage responsive * Re-add cache busting Fix docs * Use markdown syntax highlighting on frontpage * Rework AJQuery to $_ to not interfere with jQuery * Rewrite quick assist with AlpineJS, use markdown for contents * More work on marketing pages * Rebase and fix code displays * Syntax highlight on-demand example, fix rollover * Adjust on-demand demo * Work on responsiveness * Keep working on responsiveness * Mainly finish making design responsive * Thiccer favicon * More work on marketing pages * Keep on going * Fix link * Move new site into src folder * Add open graph image * Add recorded demo for homepage * Tweak caption * Fix Poppins font for now * Minor tweaks * Trim demo ending * Remove unfinished pages Also update Framer logo --------- Co-authored-by: Francis Lavoie <lavofr@gmail.com>
This commit is contained in:
Matt Holt
GitHub
parent
5bb6d92c63
commit
07c51663ab
191 changed files with 13008 additions and 4970 deletions
|
|
@ -1,289 +0,0 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
/* by setting the min-height of both html and body to 100%,
|
||||
it ensures that flex items are centered on screen, but
|
||||
also allows body to overflow screen height for tall content */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 16px sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background: #e8ebf0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2b9cff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0f6ab9;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
margin: auto;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
|
||||
display: flex;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.card section {
|
||||
padding: 50px;
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.card section.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
background: #f3f7ff;
|
||||
border-right: 1px solid #e8ebf0;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
line-height: 1.25em;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card .logo {
|
||||
width: 100%;
|
||||
max-width: 100px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-fields {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
font-family: 'PT Mono', 'Source Code Pro', monospace;
|
||||
}
|
||||
|
||||
.card input,
|
||||
.card button {
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.card input[type=text],
|
||||
.card input[type=email],
|
||||
.card input[type=password] {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.card button {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.card {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.swal-content p {
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
#reset-password-step2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.logo-container {
|
||||
text-align: center;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.help {
|
||||
border-bottom: 1px dotted #222;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.beta {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
font-family: Maven Pro, sans-serif;
|
||||
}
|
||||
|
||||
.container > nav {
|
||||
background: #f8faff;
|
||||
width: 25%;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.container > nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.container > nav ul a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #546c75;
|
||||
}
|
||||
|
||||
.container > nav ul a:hover {
|
||||
color: #01324b;
|
||||
background-color: #ebf3fb;
|
||||
}
|
||||
|
||||
.container > nav ul a.current {
|
||||
background-color: #e0ecfb;
|
||||
font-weight: bold;
|
||||
color: #01324b;
|
||||
}
|
||||
|
||||
.container > main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container > main.dashboard {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.container section {
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
|
||||
margin: 25px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
form .field {
|
||||
padding: 0 20px 20px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 20px auto;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
form label b {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
form .description {
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
form button,
|
||||
form input[type=submit] {
|
||||
font-size: 16px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
cursor: pointer;
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
|
||||
|
||||
section .pad {
|
||||
margin: 15px 20px;
|
||||
}
|
||||
|
||||
section button:not([type=submit]),
|
||||
section .button:not([type=submit]) {
|
||||
font-size: 14px;
|
||||
padding: 6px 15px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
section h1 {
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #ebf3ff;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
input[name=path] {
|
||||
font-size: 14px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
width: auto;
|
||||
/* max-width: 450px; */
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
color: #aaa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
h1 {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 80px;
|
||||
text-align: center;
|
||||
margin: 100px auto;
|
||||
}
|
||||
|
||||
.panels {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.panels > * {
|
||||
flex: 1;
|
||||
margin: 0 50px;
|
||||
}
|
||||
|
||||
.panels > :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.panels {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.panels > * {
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -81,81 +81,81 @@
|
|||
.chroma .vi { color: #0673bf } /* Name.Variable.Instance */
|
||||
.chroma .il { color: #008076 } /* Literal.Number.Integer.Long */
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/*
|
||||
Solarized Dark (High Contrast)
|
||||
Derived from http://ethanschoonover.com/solarized
|
||||
*/
|
||||
.chroma {
|
||||
background: linear-gradient(0deg, #18384d 0%, #122537 100%);
|
||||
color: #93a1a1;
|
||||
}
|
||||
.chroma .c { color: #586e75 } /* Comment */
|
||||
.chroma .err { color: #93a1a1 } /* Error */
|
||||
.chroma .g { color: #93a1a1 } /* Generic */
|
||||
.chroma .k { color: #76a507 } /* Keyword */
|
||||
.chroma .l { color: #93a1a1 } /* Literal */
|
||||
.chroma .n { color: #93a1a1 } /* Name */
|
||||
.chroma .o { color: #76a507 } /* Operator */
|
||||
.chroma .x { color: #ec662e } /* Other */
|
||||
.chroma .p { color: #93a1a1 } /* Punctuation */
|
||||
.chroma .cm { color: #586e75 } /* Comment.Multiline */
|
||||
.chroma .cp { color: #76a507 } /* Comment.Preproc */
|
||||
.chroma .c1 { color: #586e75 } /* Comment.Single */
|
||||
.chroma .cs { color: #76a507 } /* Comment.Special */
|
||||
.chroma .gd { color: #dc322f; background-color: #efdede } /* Generic.Deleted */
|
||||
.chroma .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
|
||||
.chroma .gr { color: #dc322f } /* Generic.Error */
|
||||
.chroma .gh { color: #ec662e } /* Generic.Heading */
|
||||
.chroma .gi { color: #76a507 } /* Generic.Inserted */
|
||||
.chroma .go { color: #93a1a1 } /* Generic.Output */
|
||||
.chroma .gp { color: #93a1a1 } /* Generic.Prompt */
|
||||
.chroma .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
|
||||
.chroma .gu { color: #ec662e } /* Generic.Subheading */
|
||||
.chroma .gt { color: #93a1a1 } /* Generic.Traceback */
|
||||
.chroma .kc { color: #ec662e } /* Keyword.Constant */
|
||||
.chroma .kd { color: #0090f5 } /* Keyword.Declaration */
|
||||
.chroma .kn { color: #76a507 } /* Keyword.Namespace */
|
||||
.chroma .kp { color: #76a507 } /* Keyword.Pseudo */
|
||||
.chroma .kr { color: #0090f5 } /* Keyword.Reserved */
|
||||
.chroma .kt { color: #dc322f } /* Keyword.Type */
|
||||
.chroma .ld { color: #93a1a1 } /* Literal.Date */
|
||||
.chroma .m { color: #09a598 } /* Literal.Number */
|
||||
.chroma .s { color: #09a598 } /* Literal.String */
|
||||
.chroma .na { color: #93a1a1 } /* Name.Attribute */
|
||||
.chroma .nb { color: #B58900 } /* Name.Builtin */
|
||||
.chroma .nc { color: #0090f5 } /* Name.Class */
|
||||
.chroma .no { color: #ec662e } /* Name.Constant */
|
||||
.chroma .nd { color: #0090f5 } /* Name.Decorator */
|
||||
.chroma .ni { color: #ec662e } /* Name.Entity */
|
||||
.chroma .ne { color: #ec662e } /* Name.Exception */
|
||||
.chroma .nf { color: #0090f5 } /* Name.Function */
|
||||
.chroma .nl { color: #93a1a1 } /* Name.Label */
|
||||
.chroma .nn { color: #93a1a1 } /* Name.Namespace */
|
||||
.chroma .nx { color: #93a1a1 } /* Name.Other */
|
||||
.chroma .py { color: #93a1a1 } /* Name.Property */
|
||||
.chroma .nt { color: #0090f5 } /* Name.Tag */
|
||||
.chroma .nv { color: #0090f5 } /* Name.Variable */
|
||||
.chroma .ow { color: #76a507 } /* Operator.Word */
|
||||
.chroma .w { color: #93a1a1 } /* Text.Whitespace */
|
||||
.chroma .mf { color: #09a598 } /* Literal.Number.Float */
|
||||
.chroma .mh { color: #09a598 } /* Literal.Number.Hex */
|
||||
.chroma .mi { color: #09a598 } /* Literal.Number.Integer */
|
||||
.chroma .mo { color: #09a598 } /* Literal.Number.Oct */
|
||||
.chroma .sb { color: #586e75 } /* Literal.String.Backtick */
|
||||
.chroma .sc { color: #09a598 } /* Literal.String.Char */
|
||||
.chroma .sd { color: #93a1a1 } /* Literal.String.Doc */
|
||||
.chroma .s2 { color: #09a598 } /* Literal.String.Double */
|
||||
.chroma .se { color: #ec662e } /* Literal.String.Escape */
|
||||
.chroma .sh { color: #93a1a1 } /* Literal.String.Heredoc */
|
||||
.chroma .si { color: #09a598 } /* Literal.String.Interpol */
|
||||
.chroma .sx { color: #09a598 } /* Literal.String.Other */
|
||||
.chroma .sr { color: #dc322f } /* Literal.String.Regex */
|
||||
.chroma .s1 { color: #09a598 } /* Literal.String.Single */
|
||||
.chroma .ss { color: #09a598 } /* Literal.String.Symbol */
|
||||
.chroma .bp { color: #0090f5 } /* Name.Builtin.Pseudo */
|
||||
.chroma .vc { color: #0090f5 } /* Name.Variable.Class */
|
||||
.chroma .vg { color: #0090f5 } /* Name.Variable.Global */
|
||||
.chroma .vi { color: #0090f5 } /* Name.Variable.Instance */
|
||||
.chroma .il { color: #09a598 } /* Literal.Number.Integer.Long */
|
||||
|
||||
|
||||
/*
|
||||
Solarized Dark (High Contrast)
|
||||
Derived from http://ethanschoonover.com/solarized
|
||||
*/
|
||||
.dark .chroma:not(.light) {
|
||||
background: linear-gradient(to bottom, #24454f, transparent);
|
||||
color: #93a1a1;
|
||||
}
|
||||
.dark .chroma:not(.light) .c { color: #586e75 } /* Comment */
|
||||
.dark .chroma:not(.light) .err { color: #93a1a1 } /* Error */
|
||||
.dark .chroma:not(.light) .g { color: #93a1a1 } /* Generic */
|
||||
.dark .chroma:not(.light) .k { color: #76a507 } /* Keyword */
|
||||
.dark .chroma:not(.light) .l { color: #93a1a1 } /* Literal */
|
||||
.dark .chroma:not(.light) .n { color: #93a1a1 } /* Name */
|
||||
.dark .chroma:not(.light) .o { color: #76a507 } /* Operator */
|
||||
.dark .chroma:not(.light) .x { color: #ec662e } /* Other */
|
||||
.dark .chroma:not(.light) .p { color: #93a1a1 } /* Punctuation */
|
||||
.dark .chroma:not(.light) .cm { color: #586e75 } /* Comment.Multiline */
|
||||
.dark .chroma:not(.light) .cp { color: #76a507 } /* Comment.Preproc */
|
||||
.dark .chroma:not(.light) .c1 { color: #586e75 } /* Comment.Single */
|
||||
.dark .chroma:not(.light) .cs { color: #76a507 } /* Comment.Special */
|
||||
.dark .chroma:not(.light) .gd { color: #dc322f; background-color: #efdede } /* Generic.Deleted */
|
||||
.dark .chroma:not(.light) .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
|
||||
.dark .chroma:not(.light) .gr { color: #dc322f } /* Generic.Error */
|
||||
.dark .chroma:not(.light) .gh { color: #ec662e } /* Generic.Heading */
|
||||
.dark .chroma:not(.light) .gi { color: #76a507 } /* Generic.Inserted */
|
||||
.dark .chroma:not(.light) .go { color: #93a1a1 } /* Generic.Output */
|
||||
.dark .chroma:not(.light) .gp { color: #93a1a1 } /* Generic.Prompt */
|
||||
.dark .chroma:not(.light) .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
|
||||
.dark .chroma:not(.light) .gu { color: #ec662e } /* Generic.Subheading */
|
||||
.dark .chroma:not(.light) .gt { color: #93a1a1 } /* Generic.Traceback */
|
||||
.dark .chroma:not(.light) .kc { color: #ec662e } /* Keyword.Constant */
|
||||
.dark .chroma:not(.light) .kd { color: #0090f5 } /* Keyword.Declaration */
|
||||
.dark .chroma:not(.light) .kn { color: #76a507 } /* Keyword.Namespace */
|
||||
.dark .chroma:not(.light) .kp { color: #76a507 } /* Keyword.Pseudo */
|
||||
.dark .chroma:not(.light) .kr { color: #0090f5 } /* Keyword.Reserved */
|
||||
.dark .chroma:not(.light) .kt { color: #dc322f } /* Keyword.Type */
|
||||
.dark .chroma:not(.light) .ld { color: #93a1a1 } /* Literal.Date */
|
||||
.dark .chroma:not(.light) .m { color: #09a598 } /* Literal.Number */
|
||||
.dark .chroma:not(.light) .s { color: #09a598 } /* Literal.String */
|
||||
.dark .chroma:not(.light) .na { color: #93a1a1 } /* Name.Attribute */
|
||||
.dark .chroma:not(.light) .nb { color: #B58900 } /* Name.Builtin */
|
||||
.dark .chroma:not(.light) .nc { color: #0090f5 } /* Name.Class */
|
||||
.dark .chroma:not(.light) .no { color: #ec662e } /* Name.Constant */
|
||||
.dark .chroma:not(.light) .nd { color: #0090f5 } /* Name.Decorator */
|
||||
.dark .chroma:not(.light) .ni { color: #ec662e } /* Name.Entity */
|
||||
.dark .chroma:not(.light) .ne { color: #ec662e } /* Name.Exception */
|
||||
.dark .chroma:not(.light) .nf { color: #0090f5 } /* Name.Function */
|
||||
.dark .chroma:not(.light) .nl { color: #93a1a1 } /* Name.Label */
|
||||
.dark .chroma:not(.light) .nn { color: #93a1a1 } /* Name.Namespace */
|
||||
.dark .chroma:not(.light) .nx { color: #93a1a1 } /* Name.Other */
|
||||
.dark .chroma:not(.light) .py { color: #93a1a1 } /* Name.Property */
|
||||
.dark .chroma:not(.light) .nt { color: #0090f5 } /* Name.Tag */
|
||||
.dark .chroma:not(.light) .nv { color: #0090f5 } /* Name.Variable */
|
||||
.dark .chroma:not(.light) .ow { color: #76a507 } /* Operator.Word */
|
||||
.dark .chroma:not(.light) .w { color: #93a1a1 } /* Text.Whitespace */
|
||||
.dark .chroma:not(.light) .mf { color: #09a598 } /* Literal.Number.Float */
|
||||
.dark .chroma:not(.light) .mh { color: #09a598 } /* Literal.Number.Hex */
|
||||
.dark .chroma:not(.light) .mi { color: #09a598 } /* Literal.Number.Integer */
|
||||
.dark .chroma:not(.light) .mo { color: #09a598 } /* Literal.Number.Oct */
|
||||
.dark .chroma:not(.light) .sb { color: #586e75 } /* Literal.String.Backtick */
|
||||
.dark .chroma:not(.light) .sc { color: #09a598 } /* Literal.String.Char */
|
||||
.dark .chroma:not(.light) .sd { color: #93a1a1 } /* Literal.String.Doc */
|
||||
.dark .chroma:not(.light) .s2 { color: #09a598 } /* Literal.String.Double */
|
||||
.dark .chroma:not(.light) .se { color: #ec662e } /* Literal.String.Escape */
|
||||
.dark .chroma:not(.light) .sh { color: #93a1a1 } /* Literal.String.Heredoc */
|
||||
.dark .chroma:not(.light) .si { color: #09a598 } /* Literal.String.Interpol */
|
||||
.dark .chroma:not(.light) .sx { color: #09a598 } /* Literal.String.Other */
|
||||
.dark .chroma:not(.light) .sr { color: #dc322f } /* Literal.String.Regex */
|
||||
.dark .chroma:not(.light) .s1 { color: #09a598 } /* Literal.String.Single */
|
||||
.dark .chroma:not(.light) .ss { color: #09a598 } /* Literal.String.Symbol */
|
||||
.dark .chroma:not(.light) .bp { color: #0090f5 } /* Name.Builtin.Pseudo */
|
||||
.dark .chroma:not(.light) .vc { color: #0090f5 } /* Name.Variable.Class */
|
||||
.dark .chroma:not(.light) .vg { color: #0090f5 } /* Name.Variable.Global */
|
||||
.dark .chroma:not(.light) .vi { color: #0090f5 } /* Name.Variable.Instance */
|
||||
.dark .chroma:not(.light) .il { color: #09a598 } /* Literal.Number.Integer.Long */
|
||||
|
|
|
|||
|
|
@ -1,3 +1,99 @@
|
|||
:root {
|
||||
--monospace-fonts: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
:root,
|
||||
.light {
|
||||
--body-bg: white;
|
||||
--text-color: #2c2c2c;
|
||||
--text-color-muted: #7087a0;
|
||||
--header-bg: rgba(118, 179, 194, 0.11);
|
||||
--header-border-color: #ebf0f2;
|
||||
--topbar-link-color-hover: black;
|
||||
--topbar-link-bg-hover: rgb(244, 249, 251);
|
||||
--main-nav-link-color: #546c75;
|
||||
--main-nav-link-hover-color: #01324b;
|
||||
--link-color: #0097f2;
|
||||
--link-decoration-color: #ddd;
|
||||
--link-hover-color: rgb(27, 170, 70);
|
||||
--heading-color: var(--text-color);
|
||||
--code-bg: #f2f8f9;
|
||||
--dropdown-bg: #e8ecef;
|
||||
--dropdown-linkbox: white;
|
||||
--dropdown-link-title-color: #384f61;
|
||||
--dropdown-link-color: #647687;
|
||||
--dropdown-link-hover-bg: rgb(239, 244, 248);
|
||||
--dropdown-link-hover-color: #142633;
|
||||
--dropdown-featured-bg: linear-gradient(to bottom, rgb(239 244 247), transparent);
|
||||
--dropdown-featured-hover-bg: rgb(223, 233, 238); /* rgb(232, 255, 254); */
|
||||
--dropdown-shadow-color: rgb(0 0 0 / .25);
|
||||
--box-bg: var(--header-border-color);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--body-bg: #0d171a;
|
||||
--text-color: #cbe2e4; /* #a4c0c2 */
|
||||
--text-color-muted: #92b2d5;
|
||||
--header-bg: rgba(44, 130, 164, 0.11);
|
||||
--header-border-color: transparent;
|
||||
--topbar-link-color-hover: white;
|
||||
--topbar-link-bg-hover: rgb(255 255 255 / .1);
|
||||
--main-nav-link-color: #86a7b1;
|
||||
--main-nav-link-hover-color: #e2e9ec;
|
||||
--link-color: #34a1e4;
|
||||
--link-decoration-color: #375862;
|
||||
--link-hover-color: rgb(42, 228, 98);
|
||||
--heading-color: #dee8ee;
|
||||
--code-bg: #1f3237;
|
||||
--dropdown-bg: #152125; /* #34414b; */
|
||||
--dropdown-linkbox: #1d2c32;
|
||||
--dropdown-link-title-color: #f0f3f5;
|
||||
--dropdown-link-color: #9ebeca;
|
||||
--dropdown-link-hover-color: white;
|
||||
--dropdown-link-hover-bg: rgb(30, 48, 63);
|
||||
--dropdown-featured-bg: linear-gradient(to bottom, rgb(46, 58, 66), transparent);
|
||||
--dropdown-featured-hover-bg: rgb(64, 82, 92);
|
||||
--dropdown-shadow-color: black;
|
||||
--box-bg: var(--header-bg);
|
||||
}
|
||||
|
||||
.dark #logo-light,
|
||||
.dark-header #logo-light,
|
||||
#logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark #logo-dark,
|
||||
.dark-header #logo-dark {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -5,279 +101,599 @@
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: Inter, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: Inter, system-ui;
|
||||
font-size: 18px;
|
||||
/* -webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale; */
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 4;
|
||||
background-color: var(--body-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
section.dark,
|
||||
footer {
|
||||
background-color: #002020;
|
||||
color: white;
|
||||
}
|
||||
|
||||
main a {
|
||||
color: var(--link-color);
|
||||
text-decoration-line: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
text-underline-offset: 2px;
|
||||
text-decoration-color: var(--link-decoration-color);
|
||||
transition: all .15s;
|
||||
}
|
||||
|
||||
main a:hover {
|
||||
color: var(--link-hover-color);
|
||||
text-decoration-color: var(--link-color);
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--monospace-fonts);
|
||||
font-feature-settings: "liga" 0; /* prevent the merging of chars like "fi", relevant for Chivo Mono especially */
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 1400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0694f1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ff3f2c;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 25px 0;
|
||||
background: var(--header-bg);
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#logo {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#zerossl-project {
|
||||
font-size: 12px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#zerossl-logo {
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
header nav {
|
||||
text-align: right;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
header nav > a {
|
||||
display: inline-block;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
header a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
header nav > a:hover {
|
||||
color: #ff3f2c;
|
||||
header nav>ul {
|
||||
background: linear-gradient(to right, rgb(100 190 121), rgb(54 206 255));
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
header nav > a.current {
|
||||
font-weight: bold;
|
||||
.topbar {
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid hsl(203deg 100% 79% / 20%);
|
||||
}
|
||||
|
||||
/* Algolia DocSearch */
|
||||
#search {
|
||||
.topbar .wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.topbar a {
|
||||
display: inline-block;
|
||||
padding: 10px 10px 8px;
|
||||
color: #719bcc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topbar a:hover {
|
||||
background: var(--topbar-link-bg-hover);
|
||||
color: var(--topbar-link-color-hover);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.navbar .actions,
|
||||
.navbar nav ul {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.navbar nav>ul>li>a {
|
||||
-webkit-text-fill-color: rgba(0 0 0 / .1);
|
||||
}
|
||||
|
||||
.navbar nav>ul>li>a:hover {
|
||||
-webkit-text-fill-color: rgba(255 255 255 / .4);
|
||||
}
|
||||
|
||||
.navbar nav {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar nav>ul>li>a,
|
||||
.navbar .button {
|
||||
text-decoration: none;
|
||||
transition: all 200ms;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.navbar nav>ul>li>a {
|
||||
padding: 20px 1.5em;
|
||||
display: block;
|
||||
font-family: Figtree, system-ui;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.navbar .button {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.4em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.DocSearch-Container {
|
||||
color: initial;
|
||||
}
|
||||
.DocSearch-Footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
/* End Algolia DocSearch */
|
||||
|
||||
header nav .new {
|
||||
background-color: #ffe300;
|
||||
font-size: 75%;
|
||||
vertical-align: top;
|
||||
padding: 4px 8px;
|
||||
border-radius: 1em;
|
||||
.logo-link {
|
||||
line-height: 0; /* avoid extra space along the bottom for some reason */
|
||||
}
|
||||
|
||||
header nav .button {
|
||||
margin: 0 0 0 10px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.logo {
|
||||
height: 2.25em;
|
||||
}
|
||||
|
||||
.navbar .actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
border-radius: 2em;
|
||||
padding: 10px 20px;
|
||||
margin: 15px 0;
|
||||
height: auto;
|
||||
transition: all .2s;
|
||||
padding: .6em 1.5em;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
|
||||
/* necessary for hoversplash: */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: rgb(54 206 255);
|
||||
border: 1px solid rgb(54 206 255);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover {
|
||||
transform: scale(1.05);
|
||||
color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
button.primary,
|
||||
.button.primary {
|
||||
background: linear-gradient(135deg, white 25%, rgba(167, 183, 193) 80%);
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
button.primary:hover,
|
||||
.button.primary:hover {
|
||||
color: #1a71cb;
|
||||
}
|
||||
|
||||
button:active,
|
||||
.button:active {
|
||||
transform: translateY(2px);
|
||||
transition: all 75ms;
|
||||
transform: scale(.95);
|
||||
box-shadow: 1px 1px 3px inset rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button.red,
|
||||
.button.red {
|
||||
background-color: #d9552b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.red:hover,
|
||||
.button.red:hover {
|
||||
background-color: #fd511a;
|
||||
}
|
||||
|
||||
button.blue,
|
||||
.button.blue {
|
||||
background-color: #0082d0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.blue:hover,
|
||||
.button.blue:hover {
|
||||
background-color: #00aaff;
|
||||
}
|
||||
|
||||
button.gray,
|
||||
.button.gray {
|
||||
background-color: #4c6a79;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.gray:hover,
|
||||
.button.gray:hover {
|
||||
background-color: #4f8098;
|
||||
}
|
||||
|
||||
button.big,
|
||||
.button.big {
|
||||
font-size: 125%;
|
||||
text-transform: uppercase;
|
||||
button.purple,
|
||||
.button.purple {
|
||||
border: none;
|
||||
background: linear-gradient(165deg, rgba(170,81,212,1) 20%, rgba(37,159,235,1) 100%);
|
||||
color: white !important; /* sigh... to prevent being stepped on by very specific link color rule on the sponsors page */
|
||||
font-weight: bold;
|
||||
padding: 20px 50px;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25)
|
||||
}
|
||||
|
||||
button svg,
|
||||
.button svg {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
|
||||
@keyframes hoverSplash {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-splash {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
/* z-index: 1; */
|
||||
width: 200%;
|
||||
height: 0;
|
||||
padding-bottom: 200%;
|
||||
border-radius: 50%;
|
||||
/* transform: translate3d(-50%,-50%,0) scale3d(0,0,1); */
|
||||
animation: 1s cubic-bezier(.16, 1, .3, 1) hoverSplash;
|
||||
}
|
||||
|
||||
button .hover-splash,
|
||||
.button .hover-splash {
|
||||
background-color: rgba(24, 156, 233, 0.6);
|
||||
}
|
||||
|
||||
button.primary .hover-splash,
|
||||
.button.primary .hover-splash {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
|
||||
.dropdown {
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
background: var(--dropdown-bg);
|
||||
border-radius: 15px;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 50px 75px var(--dropdown-shadow-color);
|
||||
visibility: hidden;
|
||||
top: calc(100% - 5px);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-trigger:hover .dropdown {
|
||||
visibility: visible;
|
||||
transform-origin: top left;
|
||||
animation: rotateMenu 300ms ease;
|
||||
}
|
||||
|
||||
@keyframes rotateMenu {
|
||||
0% {
|
||||
transform: rotateX(-90deg) scale(0.75);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateX(0deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dropdown .row {
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.dropdown .plainbox,
|
||||
.dropdown .linkbox {
|
||||
display: flex;
|
||||
gap: 4em;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.dropdown .plainbox {
|
||||
padding-top: .5em;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.dropdown .plainbox a {
|
||||
color: var(--dropdown-link-color);
|
||||
}
|
||||
|
||||
.dropdown .plainbox a:hover {
|
||||
color: var(--dropdown-link-hover-color);
|
||||
}
|
||||
|
||||
.dropdown .linkbox {
|
||||
background: var(--dropdown-linkbox);
|
||||
gap: 3em;
|
||||
--link-padding-x: 10px;
|
||||
}
|
||||
|
||||
.dropdown .links-header {
|
||||
font-family: Poppins, ui-rounded;
|
||||
font-weight: 600;
|
||||
color: var(--dropdown-link-title-color);
|
||||
font-size: 20px;
|
||||
margin-bottom: 14px;
|
||||
padding-left: var(--link-padding-x);
|
||||
}
|
||||
|
||||
.dropdown .col {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.dropdown .col a {
|
||||
display: block;
|
||||
color: var(--dropdown-link-color);
|
||||
text-decoration: none;
|
||||
padding: 5px var(--link-padding-x);
|
||||
border-radius: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
.dropdown .col a:hover {
|
||||
color: var(--dropdown-link-hover-color);
|
||||
background-color: var(--dropdown-link-hover-bg);
|
||||
}
|
||||
|
||||
.dropdown .flatlinks a,
|
||||
.dropdown .featured a {
|
||||
transition: background-color 150ms;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dropdown .flatlinks a {
|
||||
background: var(--dropdown-linkbox);
|
||||
padding: 1em 2em;
|
||||
color: var(--dropdown-link-color);
|
||||
}
|
||||
|
||||
.dropdown .flatlinks a b,
|
||||
.dropdown .featured a b {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dropdown .flatlinks a b {
|
||||
color: var(--dropdown-link-title-color);
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
.dropdown .flatlinks a:hover {
|
||||
/* background: rgb(239, 244, 248); */
|
||||
background: var(--dropdown-link-hover-bg);
|
||||
}
|
||||
|
||||
.dropdown .featured a b {
|
||||
color: var(--dropdown-link-title-color);
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.dropdown .featured a:hover b {
|
||||
color: var(--dropdown-link-hover-color);
|
||||
}
|
||||
|
||||
|
||||
.dropdown .featured {
|
||||
gap: 1em;
|
||||
padding: 1em;
|
||||
/* background: white; */
|
||||
}
|
||||
|
||||
.dropdown .featured a {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
line-height: 1.4;
|
||||
border-radius: 10px;
|
||||
color: var(--dropdown-link-color);
|
||||
background-color: var(--dropdown-linkbox);
|
||||
background-image: var(--dropdown-featured-bg);
|
||||
/* background-image: linear-gradient(to bottom, rgb(239 244 247), rgba(252,252,252,0)); */
|
||||
/* background: linear-gradient(137deg, rgb(241 251 247) 0%, rgb(242 248 255) 100%); */
|
||||
flex: 1;
|
||||
box-shadow: 0 1px 2px rgb(0 0 0 / .2);
|
||||
}
|
||||
|
||||
.dropdown .featured a:hover {
|
||||
background-color: var(--dropdown-featured-hover-bg);
|
||||
}
|
||||
|
||||
.dropdown .featured a b {
|
||||
display: block;
|
||||
color: var(--dropdown-link-title-color);
|
||||
font-size: 16px;
|
||||
margin-bottom: .5em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
#current-theme {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.construction-images {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.construction img {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
button.disabled,
|
||||
.button.disabled,
|
||||
button:disabled,
|
||||
.button:disabled {
|
||||
background-color: #aaa !important;
|
||||
color: white !important;
|
||||
transform: none !important;
|
||||
cursor: not-allowed;
|
||||
.construction p {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: #e71414;
|
||||
}
|
||||
|
||||
|
||||
p button,
|
||||
p .button {
|
||||
font-size: 18px;
|
||||
padding: 12px 30px;
|
||||
}
|
||||
|
||||
|
||||
article a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd {
|
||||
font-family: 'PT Mono', 'Source Code Pro', monospace;
|
||||
padding: 3px 6px;
|
||||
font-size: 95%;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
kbd {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 80%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
footer > div {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#footer-logo {
|
||||
float: left;
|
||||
max-width: 150px;
|
||||
margin-right: 35px;
|
||||
vertical-align: middle;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
text-align: right;
|
||||
padding: 75px 0;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
color: #7c9393;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
header {
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
footer p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
transition: .25s;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #76b8b8;
|
||||
}
|
||||
|
||||
footer .logo-area {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
footer .wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 75px;
|
||||
}
|
||||
|
||||
footer .nostalgia {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
footer .nostalgia-badges {
|
||||
gap: 25px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
footer .nostalgia p {
|
||||
margin: 0 auto 15px;
|
||||
color: #d2f7e7;
|
||||
}
|
||||
|
||||
footer .w3c {
|
||||
width: 80px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
footer .logo {
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
footer .link-col {
|
||||
font-size: initial;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
footer .col-header {
|
||||
font-size: 110%;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
footer .link-col a {
|
||||
display: block;
|
||||
color: #b7c8c8;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer .link-col a:hover {
|
||||
color: #35655e;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Asciinema customizations */
|
||||
.ap-player pre.ap-terminal {
|
||||
font-family: var(--monospace-fonts);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1150px) {
|
||||
.dropdown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header nav {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-direction: column;
|
||||
margin-top: 0;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
footer > div {
|
||||
width: initial;
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#footer-logo {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0 auto 25px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
text-align: center;
|
||||
.wrapper {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 950px) {
|
||||
header nav ul {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.topbar .wrapper {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.navbar nav {
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
.navbar .actions {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.navbar nav > ul > li > a {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
article {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
padding-top: 8%;
|
||||
}
|
||||
|
||||
.renderbox {
|
||||
border-radius: 0;
|
||||
font-size: 20px;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.toggle-obj {
|
||||
padding: 0 .5em;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.group:hover > .toggle-obj {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
pre > code.json {
|
||||
background-color: #07212b;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,298 +0,0 @@
|
|||
body {
|
||||
background-color: #f0f6f9;
|
||||
}
|
||||
|
||||
.notice {
|
||||
border: 1px solid hsl(42.1, 100%, 46.7%);
|
||||
line-height: 1.5;
|
||||
background: hsl(23.2, 100%, 93.9%);
|
||||
border-radius: 5px;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
|
||||
.notice code {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.download-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
|
||||
font-size: 20px;
|
||||
margin-top: 20px;
|
||||
position: sticky; /* uwu 💓 */
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.download-bar > * {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#platform {
|
||||
padding: 5px 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#download {
|
||||
margin: 0;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#filter {
|
||||
margin-top: 1em;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#filter.found {
|
||||
color: green;
|
||||
}
|
||||
#filter.not-found {
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
.warning {
|
||||
margin-top: 20px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 5px 15px;
|
||||
border-radius: 1em;
|
||||
color: rgb(255, 208, 0);
|
||||
background: #333;
|
||||
}
|
||||
|
||||
#darwin-warning {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
select:disabled,
|
||||
#optional-packages.disabled {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.loader {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
text-indent: -9999em;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #aaa;
|
||||
background: -moz-linear-gradient(left, #aaa 10%, rgba(255, 255, 255, 0) 42%);
|
||||
background: -webkit-linear-gradient(left, #aaa 10%, rgba(255, 255, 255, 0) 42%);
|
||||
background: -o-linear-gradient(left, #aaa 10%, rgba(255, 255, 255, 0) 42%);
|
||||
background: -ms-linear-gradient(left, #aaa 10%, rgba(255, 255, 255, 0) 42%);
|
||||
background: linear-gradient(to right, #aaa 10%, rgba(255, 255, 255, 0) 42%);
|
||||
animation: load3 1.4s infinite linear;
|
||||
transform: translateZ(0);
|
||||
vertical-align: middle;
|
||||
margin-right: .5em;
|
||||
margin-top: -2px;
|
||||
}
|
||||
#signature .loader {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.loader:before {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: #fff;
|
||||
border-radius: 100% 0 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
}
|
||||
.loader:after {
|
||||
background: #aaa;
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
@-webkit-keyframes load3 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes load3 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#optional-packages {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.package {
|
||||
display: flex;
|
||||
padding: 2em;
|
||||
background: rgba(255, 255, 255, .4);
|
||||
border: 10px solid transparent;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
.package:hover {
|
||||
transform: scale(1.02);
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 20px -2px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.package.selected {
|
||||
border-color: rgb(25, 97, 192);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.package-icon {
|
||||
font-size: 48px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.package-data {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.package-meta {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.package-downloads {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.package-version-input {
|
||||
text-align: center;
|
||||
max-width: 75px;
|
||||
padding: 4px;
|
||||
margin-left: 5px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.package-link {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.package-host {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.package-modules {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.package-no-modules {
|
||||
font-style: italic;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.module {
|
||||
margin: 10px 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.module-link {
|
||||
font-weight: bold;
|
||||
font-family: 'PT Mono', monospace;
|
||||
}
|
||||
|
||||
.module-desc {
|
||||
font-size: 14px;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.swal-custom-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.swal-custom-content ol {
|
||||
margin: 1em 0 1em 2em;
|
||||
}
|
||||
|
||||
.swal-custom-content li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.download-bar {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.download-bar {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.download-bar > * {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
144
src/resources/css/features.css
Normal file
144
src/resources/css/features.css
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
h3 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* .datagrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2em;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.datagrid h4 {
|
||||
color: #668591;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: .5em;
|
||||
min-width: 200px;
|
||||
} */
|
||||
|
||||
.legend {
|
||||
margin-bottom: -100px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 24px;
|
||||
color: var(--text-color-muted);
|
||||
text-align: center;
|
||||
max-width: 750px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.legend .nonstandard {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
font-size: 90%;
|
||||
margin: 50px 0 125px;
|
||||
}
|
||||
|
||||
.feature-list:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
display: grid;
|
||||
gap: 2em;
|
||||
padding: 2em 0;
|
||||
border-bottom: 2px dashed #a4c8ff25; /* #e6eaf0 */
|
||||
}
|
||||
|
||||
.feature-row:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.feature-row .benefits {
|
||||
color: var(--text-color-muted);
|
||||
}
|
||||
|
||||
.feature-row .benefits p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.feature-row .detail {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.feature-row ul.detail,
|
||||
.feature-row .detail ul {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.feature-row .detail ul {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.feature-row ul li {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.feature-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nonstandard {
|
||||
color: #e76100; /* #005c94 */
|
||||
}
|
||||
|
||||
.dark .nonstandard {
|
||||
color: #fb8a26;
|
||||
}
|
||||
|
||||
|
||||
.split {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 75px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.split > * {
|
||||
flex: 1;
|
||||
margin-right: 50px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.split picture {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.split img,
|
||||
.benefits img {
|
||||
margin: 2em 0 0;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 6px 10px rgb(0 0 0 / .15);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (min-width: 600px) and (max-width: 899px) {
|
||||
.feature-row .detail {
|
||||
grid-area: 1/2/span 3/2;
|
||||
}
|
||||
.feature-row .benefits {
|
||||
grid-area: 2 / 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.feature-row {
|
||||
grid: repeat(3,auto) / 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.feature-row {
|
||||
grid: auto / 1fr 2fr 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,338 +1,423 @@
|
|||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
.bgtext,
|
||||
.demobox {
|
||||
font-family: Poppins, ui-rounded;
|
||||
}
|
||||
|
||||
|
||||
.hero {
|
||||
background-image: url('/resources/images/bg-teal.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
padding-bottom: 100px;
|
||||
background-position: center;
|
||||
padding-bottom: 20vw;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.demobox .or {
|
||||
margin: -1em 0 1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
font-size: 70px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
text-align: center;
|
||||
margin: 70px 0 20px;
|
||||
margin-bottom: 0;
|
||||
line-height: .9;
|
||||
|
||||
background-image: unset;
|
||||
-webkit-background-clip: unset;
|
||||
background-clip: unset;
|
||||
-webkit-text-fill-color: unset;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
h1 .color-dodge {
|
||||
mix-blend-mode: color-dodge;
|
||||
}
|
||||
|
||||
h1 .the {
|
||||
font-size: 60%;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h1 .subheading {
|
||||
margin-top: .75em;
|
||||
}
|
||||
|
||||
h3 a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
.sponsors-leaders {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 75px auto;
|
||||
padding: 35px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sponsors-leaders::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
padding: 40px;
|
||||
background-color: rgb(207 27 189 / .2);
|
||||
filter: blur(10px);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sponsors-leaders h3 {
|
||||
color: #EB5EDD;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
margin-bottom: 2em;
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sponsor-logos {
|
||||
display: flex;
|
||||
column-gap: 50px;
|
||||
row-gap: 25px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 900px;
|
||||
margin: 1.5em auto;
|
||||
}
|
||||
|
||||
.sponsors-divider {
|
||||
border-top: 1px solid #634772;
|
||||
max-width: 200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.wavy-top {
|
||||
background-color: #C4D5E0;
|
||||
margin-top: -10vw;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
padding-top: 14vw;
|
||||
padding-bottom: 300px;
|
||||
}
|
||||
|
||||
.wavy-top::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -16vw;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url('/resources/images/home-curvey-bg.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bgtext {
|
||||
color: #86A6A3;
|
||||
opacity: .5;
|
||||
width: 90%;
|
||||
min-width: 65vw;
|
||||
max-width: 1200px;
|
||||
font-size: min(15vw, 300px);
|
||||
text-align: center;
|
||||
max-width: 60rem;
|
||||
margin: 0 auto 50px;
|
||||
line-height: 1.5em;
|
||||
line-height: .85;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
mix-blend-mode: color-burn;
|
||||
pointer-events: none;
|
||||
|
||||
position: absolute;
|
||||
top: 5vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 55px;
|
||||
.bgtext .site-on {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
max-width: 600px;
|
||||
margin-top: 20px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.download-container {
|
||||
.wavy-top h2 {
|
||||
color: #003E4B;
|
||||
font-size: min(3vw, 52px);
|
||||
text-align: center;
|
||||
width: 60vw;
|
||||
max-width: 950px;
|
||||
font-weight: normal;
|
||||
margin: 0 auto 200px;
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
.wavy-top h2 b,
|
||||
.section-upset b {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section-upset {
|
||||
background: white;
|
||||
max-width: 1600px;
|
||||
margin: -350px auto 0;
|
||||
padding: 100px 50px 0;
|
||||
border-radius: 20px;
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
box-shadow: 0 -15px 20px -2px rgb(0 0 0 / .1);
|
||||
}
|
||||
|
||||
.section-upset h2 {
|
||||
background: linear-gradient(195deg, rgb(6, 79, 107) 25%, rgba(139, 189, 224, 1) 49%, rgb(72, 129, 164)50%, rgb(8, 44, 58) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
font-size: 80px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 100px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.testimonials-container {
|
||||
height: 80vh;
|
||||
position: relative;
|
||||
}
|
||||
.testimonials {
|
||||
--testimonial-spacing: 25px;
|
||||
gap: var(--testimonial-spacing);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 75px;
|
||||
padding-bottom: 75px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.download-container .button.big {
|
||||
margin-bottom: 15px;
|
||||
.testimonial-col {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 100px 0;
|
||||
.testimonials-container::before {
|
||||
content: "";
|
||||
background: linear-gradient(0deg, #f5f8f9 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, #f5f8f9 100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
section.alternate:nth-child(even) {
|
||||
background-color: #f5f8f9;
|
||||
.testimonial-picture {
|
||||
width: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
section.alternate:nth-child(odd) .side-by-side {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.side-by-side {
|
||||
width: 100%;
|
||||
.testimonial {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 1em;
|
||||
border: 1px solid rgb(222, 233, 240);
|
||||
border-radius: 5px;
|
||||
padding: 1em;
|
||||
margin: var(--testimonial-spacing) 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.side-by-side > * {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.side-by-side img {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.code-caption {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 75px auto 20px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'PT Mono', monospace;
|
||||
}
|
||||
|
||||
code.block {
|
||||
display: block;
|
||||
background: #2f2f2f;
|
||||
color: #eee;
|
||||
font-size: 20px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
line-height: 1.25em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
code.caddyfile {
|
||||
background-color: #dbebf3;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.cf-key {
|
||||
color: #d22500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cf-comment {
|
||||
color: #7291a0;
|
||||
}
|
||||
|
||||
.cf-dir {
|
||||
color: #006c96;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cf-arg {
|
||||
color: #008000;
|
||||
}
|
||||
|
||||
.cf-subdir {
|
||||
color: #835234;
|
||||
}
|
||||
|
||||
code.rest {
|
||||
background-color: #f0f5f4; /*#073d59;*/
|
||||
color: #253a28;
|
||||
}
|
||||
|
||||
.footnote {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
iframe.github-stars {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.side-by-side,
|
||||
section.alternate:nth-child(odd) .side-by-side {
|
||||
flex-direction: column;
|
||||
}
|
||||
section.alternate:nth-child(odd) .side-by-side > img {
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.side-by-side-content {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.side-by-side > * {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* TODO: */
|
||||
/* TAKEN FROM features.css */
|
||||
|
||||
.features-start {
|
||||
background: linear-gradient(0deg, #13a8f5 0%, #18b125 100%);
|
||||
color: white;
|
||||
padding: 35px 0;
|
||||
}
|
||||
|
||||
|
||||
.main-features {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.main-feature {
|
||||
text-align: center;
|
||||
padding: 0 2rem;
|
||||
margin: 3rem 0;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.main-feature img {
|
||||
height: 130px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.main-feature .title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.main-feature p {
|
||||
text-align: left;
|
||||
.testimonial-quote {
|
||||
margin-bottom: 1em;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.feature-points {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 28px;
|
||||
.testimonial-name,
|
||||
.testimonial-role {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.feature-point {
|
||||
width: 33.333%;
|
||||
min-width: 300px;
|
||||
padding: 1rem 3rem;
|
||||
.testimonial-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: .5em;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#features-title {
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
display: block;
|
||||
margin: 50px auto 0;
|
||||
position: relative;
|
||||
top: 40px;
|
||||
.testimonial-name:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.features-area h3 {
|
||||
border-bottom: 3px solid #2BABED;
|
||||
.testimonial-name[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.features-area h4 {
|
||||
text-align: center;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 40px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 40px;
|
||||
.testimonial-name::before {
|
||||
content: '—';
|
||||
}
|
||||
|
||||
.features-area h5 {
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
.testimonial-role {
|
||||
color: var(--text-color-muted);
|
||||
font-style: italic;
|
||||
font-size: 20px;
|
||||
line-height: 2rem;
|
||||
color: #000;
|
||||
max-width: 550px;
|
||||
text-align: center;
|
||||
margin: 2rem auto 0;
|
||||
}
|
||||
|
||||
.features {
|
||||
|
||||
|
||||
|
||||
.smallstep {
|
||||
max-width: 150px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.gold {
|
||||
color: gold;
|
||||
background: linear-gradient(63deg, rgba(212,167,36,1) 8%, rgba(251,228,63,1) 50%, rgba(241,218,57,1) 75%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.col .cite {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
img.cite {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.demobox {
|
||||
position: relative;
|
||||
color: #003e4b;
|
||||
background: radial-gradient(circle at 200px 100px, rgba(184,255,239,1) 0%, rgba(234,249,255,1) 280px);
|
||||
font-size: 20px;
|
||||
padding: 50px;
|
||||
border-radius: 15px;
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
||||
.demobox h2 {
|
||||
font-size: 90px;
|
||||
font-weight: 700;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
margin-top: -1.65em;
|
||||
|
||||
background: linear-gradient(0deg, rgba(27,180,186,1) 10%, rgba(0,61,75,1) 50%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.demobox p {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.demo-ips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.feature {
|
||||
width: 33.333%;
|
||||
padding: 25px;
|
||||
.demo-ips code {
|
||||
background: #ecffff;
|
||||
display: flex;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 16px rgb(0 0 0 / .1);
|
||||
}
|
||||
|
||||
.feature p {
|
||||
margin-top: 5px;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
.record-type,
|
||||
.demo-ip {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.main-feature {
|
||||
width: 50%;
|
||||
margin: 3rem 0;
|
||||
padding: 0 1rem;
|
||||
.record-type {
|
||||
color: #6ea9b7;
|
||||
border-right: 1px solid #cef4f1;
|
||||
}
|
||||
|
||||
.demo-help {
|
||||
border-top: 1px solid #b5d3d9;
|
||||
font-size: 75%;
|
||||
color: #628991;
|
||||
font-family: Inter;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.demo-help p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.franken {
|
||||
background-color: #b3d133;
|
||||
color: #390075;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1350px) {
|
||||
h1 {
|
||||
font-size: 95px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
width: 50%;
|
||||
h1 .subheading {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-bottom: 55px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bgtext {
|
||||
font-size: 25vw;
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.wavy-top h2 {
|
||||
font-size: 5vw;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.section-upset {
|
||||
padding: 50px 15px 0;
|
||||
}
|
||||
|
||||
.section-upset h2 {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.pitch {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.feature-highlight {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.main-feature {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feature {
|
||||
width: 100%;
|
||||
h1 {
|
||||
font-size: 55px;
|
||||
}
|
||||
}
|
||||
662
src/resources/css/marketing.css
Normal file
662
src/resources/css/marketing.css
Normal file
|
|
@ -0,0 +1,662 @@
|
|||
body {
|
||||
background-color: #123245;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
img.gallery {
|
||||
max-width: 100%;
|
||||
box-shadow: 0 6px 10px rgb(0 0 0 / .15);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: Poppins, ui-rounded;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 120px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
color: #65D1C6;
|
||||
margin-bottom: 1em;
|
||||
|
||||
background-image: linear-gradient(to right, #47E27C 25%, #4ED3FB 75%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
h1 .subheading {
|
||||
margin: 1em auto 0;
|
||||
text-transform: none;
|
||||
font-size: 42px;
|
||||
font-weight: normal;
|
||||
line-height: 1.3;
|
||||
font-family: Figtree;
|
||||
max-width: 850px;
|
||||
|
||||
--subheading-color: #b1fffe;
|
||||
color: var(--subheading-color);
|
||||
-webkit-text-fill-color: var(--subheading-color);
|
||||
}
|
||||
|
||||
h1 .subheading b {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
p,
|
||||
h2 {
|
||||
max-width: 950px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 50px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.feature h2:not(:first-child) {
|
||||
margin-top: 175px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hero {
|
||||
background-color: hsla(201,63%,15%,1);
|
||||
background-image:
|
||||
radial-gradient(at 50% 96%, hsla(0,100%,20%,0.35) 0px, transparent 50%),
|
||||
radial-gradient(at 5% 30%, hsla(136,95%,15%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 91% 35%, hsla(214,83%,25%,1) 0px, transparent 75%),
|
||||
radial-gradient(at 82% 73%, hsla(265,72%,20%,1) 0px, transparent 50%);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding-top: 100px;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.email em {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.button.cool {
|
||||
position: relative;
|
||||
color: rgb(226 254 214);
|
||||
border: none;
|
||||
|
||||
/* necessary for gradient dropshadow: */
|
||||
transform-style: preserve-3d;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.button.cool::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
background: linear-gradient(to right, #65E823,#D67FDB) border-box;
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff 0 0) padding-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
mask:
|
||||
linear-gradient(#fff 0 0) padding-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
|
||||
@property --a {
|
||||
syntax: '<angle>';
|
||||
inherits: false;
|
||||
initial-value: 0deg;
|
||||
}
|
||||
|
||||
@keyframes a {
|
||||
from {
|
||||
--a: 0deg;
|
||||
}
|
||||
to {
|
||||
--a: 360deg;
|
||||
}
|
||||
}
|
||||
|
||||
.button.cool sh {
|
||||
position: absolute;
|
||||
inset: -100px;
|
||||
border: 100px solid #0000;
|
||||
border-radius: 110px; /* a little more than the inset+border+border-radius */
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
transform: translateZ(-1px); /* hack the z-index so as to be behind the transparent element */
|
||||
pointer-events: none;
|
||||
}
|
||||
.button.cool sh::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
background: conic-gradient(from var(--a), rgb(207, 19, 175) 0.42%, #ee6907 59.24%, #70d52c);
|
||||
filter: blur(25px);
|
||||
transform: translate(0px,0px);
|
||||
|
||||
--a: 0deg; /* needed for firefox to have a valid output ? */
|
||||
animation: a 1s linear infinite;
|
||||
opacity: 0;
|
||||
transition: opacity .5s;
|
||||
}
|
||||
.button.cool:hover sh::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
section {
|
||||
padding: 200px 0;
|
||||
background: var(--body-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.hero section.transparent {
|
||||
background: none;
|
||||
padding-top: 0;
|
||||
color: #cbe2e4;
|
||||
}
|
||||
|
||||
.hero section.transparent h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero-content a,
|
||||
.hero section.transparent a {
|
||||
color: #75b8c8;
|
||||
}
|
||||
|
||||
.hero-content a:hover,
|
||||
.hero section.transparent a:hover {
|
||||
color: #82e7ff;
|
||||
}
|
||||
|
||||
.dark section.gray {
|
||||
background-color: #1b1c1c;
|
||||
}
|
||||
|
||||
section.gray,
|
||||
section.light.gray {
|
||||
background-color: #f5f8f9;
|
||||
}
|
||||
|
||||
.diagonal {
|
||||
padding: 200px 0;
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
.diagonal.up { transform: skewY(-5deg); }
|
||||
.diagonal.up > * { transform: skewY(5deg); }
|
||||
|
||||
.diagonal.down { transform: skewY(5deg); }
|
||||
.diagonal.down > * { transform: skewY(-5deg); }
|
||||
|
||||
.feature p {
|
||||
font-weight: 500;
|
||||
margin-top: 2em;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
|
||||
.cols, .spacing {
|
||||
--gap: 50px;
|
||||
}
|
||||
|
||||
.spacing {
|
||||
display: flex;
|
||||
gap: var(--gap);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cols {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content:space-around;
|
||||
gap: var(--gap);
|
||||
color: #424242;
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
section.dark .cols {
|
||||
color: #aec6c3;
|
||||
}
|
||||
|
||||
|
||||
.cols .col {
|
||||
min-width: 350px;
|
||||
padding-left: 1em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
border-left: 2px solid;
|
||||
padding-top: .15em;
|
||||
padding-bottom: .15em;
|
||||
|
||||
/* shove the border over but leave space between border and content */
|
||||
margin-left: -1em;
|
||||
padding-left: calc(1em - 2px);
|
||||
}
|
||||
|
||||
p + h3 {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
h3.plain {
|
||||
border-left: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.hero h3 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.col p {
|
||||
font-family: Inter;
|
||||
font-size: 90%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.hero .col p {
|
||||
color: rgb(255 255 255 / .8);
|
||||
}
|
||||
|
||||
h3.green {
|
||||
color: #23a460; border-color: #23a460;
|
||||
}
|
||||
h3.purple {
|
||||
color: rgb(179, 80, 179); border-color: rgb(179, 80, 179);
|
||||
}
|
||||
h3.blue {
|
||||
color: rgb(14, 110, 189); border-color: rgb(14, 110, 189);
|
||||
}
|
||||
section.dark h3.green {
|
||||
color: #41e68f; border-color: #41e68f;
|
||||
}
|
||||
section.dark h3.purple {
|
||||
color: rgb(238, 89, 238); border-color: rgb(238, 89, 238);
|
||||
}
|
||||
section.dark h3.blue {
|
||||
color: rgb(113, 191, 255); border-color: rgb(113, 191, 255);
|
||||
}
|
||||
section.dark h3.yellow {
|
||||
color: #ffcb50; border-color: #ffcb50;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.asides {
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
justify-content: space-between;
|
||||
margin: 100px auto 150px auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-content .asides {
|
||||
margin-top: 0;
|
||||
margin-bottom: 75px;
|
||||
}
|
||||
|
||||
.asides.top {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.asides > * {
|
||||
flex: 1;
|
||||
min-width: 0; /* kind of a hack that allows proper sizing of pre children; see https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow */
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.asides-40-60 > :first-child { flex: 2 }
|
||||
.asides-40-60 > :last-child { flex: 3 }
|
||||
.asides-60-40 > :first-child { flex: 3 }
|
||||
.asides-60-40 > :last-child { flex: 2 }
|
||||
|
||||
.asides h2 {
|
||||
text-align: left;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.asides h3 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.asides p {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 1.5em;
|
||||
margin-top: 55px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.caption {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-content .caption {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#video-demo {
|
||||
display: block;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
div.ap-wrapper div.ap-player {
|
||||
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
div.ap-wrapper:fullscreen div.ap-player {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ap-player pre.ap-terminal {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.display {
|
||||
perspective: 1500px;
|
||||
}
|
||||
|
||||
.display .chroma,
|
||||
.display.dark .chroma,
|
||||
.display.light .chroma {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.display code {
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.display code {
|
||||
font-size: 110%;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 20px 40px;
|
||||
white-space: pre;
|
||||
font-weight: bold;
|
||||
overflow-x: auto;
|
||||
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.display.dark code {
|
||||
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.display.left code {
|
||||
box-shadow: -10px 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.display.right > * {
|
||||
transform: rotateY(-25deg);
|
||||
}
|
||||
.display.left > * {
|
||||
transform: rotateY(25deg);
|
||||
}
|
||||
|
||||
.display code.light,
|
||||
.display .chroma.light {
|
||||
background: #fff linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(241,241,241,0.5) 46%,rgba(225,225,225,0.5) 46.25%,rgba(246,246,246,0) 100%);
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.display code.dark,
|
||||
.ap-player {
|
||||
/* background: #333 linear-gradient(135deg, rgba(0, 0, 0, 0) 0%,rgba(125, 125, 125, 0.3) 46%,rgba(45, 45, 45, 0.8) 46.8%,rgba(0, 0, 0, 0) 100%); */
|
||||
background: rgb(0 0 0 / .7) linear-gradient(135deg, transparent 0%, rgb(200 200 200 / 0.25) 46%, rgb(200 200 200 / .15) 46.5%, transparent 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.light .display code.dark {
|
||||
background: #333 linear-gradient(135deg, rgba(0, 0, 0, 0) 0%,rgba(125, 125, 125, 0.3) 46%,rgba(45, 45, 45, 0.8) 46.8%,rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
|
||||
.display .comment {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.blinking {
|
||||
animation: blinking 1s infinite;
|
||||
background-color: #fff;
|
||||
width: .5em;
|
||||
height: 1.2em;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes blinking {
|
||||
0% { background-color: #fff; }
|
||||
45% { background-color: #fff; }
|
||||
60% { background-color: transparent; }
|
||||
99% { background-color: transparent; }
|
||||
100% { background-color: #fff; }
|
||||
}
|
||||
|
||||
|
||||
.rollover-green,
|
||||
.rollover-purple,
|
||||
.rollover-blue,
|
||||
.rollover-yellow {
|
||||
transition: background-color 250ms;
|
||||
}
|
||||
|
||||
.rollover-green.show { background-color: #41e68fc7; }
|
||||
.rollover-purple.show { background-color: #a52fa59d; }
|
||||
.rollover-blue.show { background-color: #0a62aaa3; }
|
||||
.rollover-yellow.show { background-color: #ffcb50; }
|
||||
|
||||
.dark .rollover-green.show { background-color: #41e68e7c; }
|
||||
.dark .rollover-purple.show { background-color: #a52fa58c; }
|
||||
.dark .rollover-blue.show { background-color: #0a62aa96; }
|
||||
.dark .rollover-yellow.show { background-color: #ffcb5064; }
|
||||
|
||||
.light .rollover-green.show { background-color: #41e68e4b; }
|
||||
.light .rollover-purple.show { background-color: rgba(230, 78, 230, 0.522); }
|
||||
.light .rollover-blue.show { background-color: #65b4f586; }
|
||||
.light .rollover-yellow.show { background-color: #ffcb50d5; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.sponsor-experience,
|
||||
.sponsorship-primer {
|
||||
max-width: 700px; /* TODO: TEMPORARY! */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sponsor-experience {
|
||||
border-radius: 10px;
|
||||
padding: 30px 50px 40px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 50px;
|
||||
}
|
||||
|
||||
.sponsor-experience::before {
|
||||
content: "Sponsor Experience";
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
color: rgb(255 255 255 / .7);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sponsor-experience .experience-content {
|
||||
flex: 1;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.sponsor-experience .experience-quote {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.sponsor-experience .experience-logo {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.sponsor-experience .experience-credit {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sponsor-experience cite {
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: rgb(255 255 255 / .7);
|
||||
}
|
||||
|
||||
.sponsor-experience cite b {
|
||||
display: block;
|
||||
font-size: 125%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sponsor-experience .experience-picture {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
|
||||
.sponsor-experience.stripe {
|
||||
background: linear-gradient(to right, #635bff 30%, #d4b8ff);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.sponsorship-primer {
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(50deg, #670d7f, #531cc7);
|
||||
padding: 40px 50px;
|
||||
margin: 50px auto;
|
||||
color: #ffcffb;
|
||||
}
|
||||
|
||||
.cols .sponsorship-primer:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sponsorship-primer h3 {
|
||||
color: white;
|
||||
font-size: 150%;
|
||||
font-weight: normal;
|
||||
border: none;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.sponsorship-primer p {
|
||||
margin: 1em 0 1.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.sponsorship-primer p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
h1,
|
||||
h2 {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
h1 {
|
||||
font-size: 75px;
|
||||
}
|
||||
.asides {
|
||||
flex-direction: column;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.display {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.display.right > * {
|
||||
transform: none;
|
||||
}
|
||||
.display.left > * {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
4
src/resources/css/on-demand.css
Normal file
4
src/resources/css/on-demand.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.hero-content {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
239
src/resources/css/sponsor.css
Normal file
239
src/resources/css/sponsor.css
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
.hero-content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
p.footnote {
|
||||
margin-top: 2em;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.plan {
|
||||
--plan-border: 1px solid #eceff133;
|
||||
border: var(--plan-border);
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:not(.overlay) .plan {
|
||||
background-image: linear-gradient(220deg, rgba(76, 170, 255, 0.31) 0%, rgba(77, 101, 141, 0.26) 52%, rgba(112, 174, 255, 0.18) 54%, rgba(13, 58, 93, 0.08) 100%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.plan-header,
|
||||
.plan-content {
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.plan-header {
|
||||
display: flex;
|
||||
border-bottom: var(--plan-border);
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
color: #fff;
|
||||
font-size: 115%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.plan-price {
|
||||
font-weight: bold;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.plan-period {
|
||||
font-size: 75%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.plan-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.plan p,
|
||||
.plan li {
|
||||
font-weight: normal;
|
||||
font-size: 90%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.plan p {
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.plan p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.plan-action {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
section ul,
|
||||
section ol {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
section li {
|
||||
margin: .75em 0 .75em 2.5em;
|
||||
}
|
||||
|
||||
ul.check,
|
||||
ul.minus {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.check li::before,
|
||||
ul.minus li.check::before,
|
||||
ul.minus li::before,
|
||||
ul.check li.minus::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin-left: -1.75em;
|
||||
}
|
||||
|
||||
ul.check li::before,
|
||||
ul.minus li.check::before {
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='16' title='check' fill='%23dddddd'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z' /%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
ul.minus li::before,
|
||||
ul.check li.minus::before {
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-minus' width='24' height='24' viewBox='0 0 24 24' stroke-width='4' stroke='%23dddddd' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 8l11 0'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Hover glowy effect taken from here: https://codepen.io/inescodes/pen/PoxMyvX */
|
||||
.plans {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plan {
|
||||
--hsl: var(--hue), var(--saturation), var(--lightness);
|
||||
}
|
||||
|
||||
.plan.indie {
|
||||
--hue: 120;
|
||||
--saturation: 90%;
|
||||
--lightness: 40%;
|
||||
}
|
||||
.plan.indie .plan-price { color: #38d959; }
|
||||
.plan.startup {
|
||||
--hue: 290;
|
||||
--saturation: 95%;
|
||||
--lightness: 61%;
|
||||
}
|
||||
.plan.startup .plan-price { color: #e66dff; }
|
||||
.plan.business {
|
||||
--hue: 180;
|
||||
--saturation: 100%;
|
||||
--lightness: 50%;
|
||||
}
|
||||
.plan.business .plan-price { color: #50e6ff; }
|
||||
.plan.enterprise {
|
||||
--hue: 0;
|
||||
--saturation: 0%;
|
||||
--lightness: 50%;
|
||||
}
|
||||
.plan.enterprise .plan-price { color: white; }
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
opacity: var(--opacity, 0);
|
||||
-webkit-mask: radial-gradient(25rem 25rem at var(--x) var(--y),
|
||||
#000 1%,
|
||||
transparent 50%);
|
||||
mask: radial-gradient(25rem 25rem at var(--x) var(--y),
|
||||
#000 1%,
|
||||
transparent 50%);
|
||||
transition: 400ms mask ease;
|
||||
will-change: mask;
|
||||
}
|
||||
|
||||
.overlay .plan {
|
||||
position: absolute;
|
||||
background-color: hsla(var(--hsl), 0.15); /* alpha channel here is how intense the radial gradient is */
|
||||
border-color: hsla(var(--hsl), 1);
|
||||
box-shadow: 0 0 0 1px inset hsl(var(--hsl));
|
||||
}
|
||||
|
||||
:not(.overlay) > .plan {
|
||||
transition: 400ms background ease;
|
||||
will-change: background;
|
||||
}
|
||||
|
||||
.overlay .plan:nth-child(2n-1):hover{
|
||||
background-color: hsla(var(--hsl), 0.2);
|
||||
}
|
||||
|
||||
.plan:nth-child(2n):hover {
|
||||
--lightness: 25%;
|
||||
background-color: hsla(var(--hsl), 0.4);
|
||||
}
|
||||
|
||||
/* as a special case, the enterprise ones should go dark */
|
||||
.plan.enterprise:hover {
|
||||
background-color: rgb(0 0 0 / .75);
|
||||
}
|
||||
|
||||
.button.purple {
|
||||
font-size: 90%;
|
||||
|
||||
/* Keep the buttons above the glow effect for legibility */
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.sides {
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
align-items: center;
|
||||
margin: 100px 0;
|
||||
}
|
||||
|
||||
.sides > * {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.side-flex {
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
flex: 1.5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1150px) {
|
||||
.sides {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.side-flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
74
src/resources/css/support.css
Normal file
74
src/resources/css/support.css
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
h1 {
|
||||
line-height: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.plans {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
|
||||
.plan {
|
||||
background: white;
|
||||
padding: 2em;
|
||||
color: #222;
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.plan.community {
|
||||
max-width: calc(min(400px, 85%));
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
background: rgb(255 255 255 / .85)
|
||||
}
|
||||
|
||||
.plan.sponsor {
|
||||
max-width: 600px;
|
||||
box-shadow: 0 0 25px rgb(0 0 0 / .5);
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.plan.sponsor .plan-title {
|
||||
color: #9227da;
|
||||
}
|
||||
|
||||
.plan p,
|
||||
.plan ul {
|
||||
margin: 1.5em 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.plan ul {
|
||||
margin: -1em 0 2em 2em;
|
||||
}
|
||||
|
||||
.plan a {
|
||||
color: #3465f6;
|
||||
}
|
||||
|
||||
.plan a:hover {
|
||||
color: #7134f6;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.plans {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.plan {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.plan.community {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,391 +0,0 @@
|
|||
body {
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
#v2logo {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 100px auto 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 150px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p, ul, ol {
|
||||
font-size: 16px;
|
||||
line-height: 175%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 1.5em;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: Montserrat;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 40px;
|
||||
font-weight: normal;
|
||||
margin: 0 auto 50px;
|
||||
max-width: 650px;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: 48px Inter;
|
||||
max-width: 1000px;
|
||||
text-align: center;
|
||||
margin: 0 auto 80px;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 22px;
|
||||
font-family: Montserrat;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
max-width: 800px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
p + h3 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.lead h3 {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.lead p {
|
||||
font-size: 18px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: #fff;
|
||||
filter: brightness(120%);
|
||||
}
|
||||
|
||||
.button.purple { background-color: #3a43be; /* #7615d7 */ }
|
||||
.button.cyan { background-color: #00a8dd; }
|
||||
.button.green { background-color: #00a80d; }
|
||||
|
||||
|
||||
code {
|
||||
background: #e7e7e7;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img.smallstep {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.action .button {
|
||||
padding: 15px 45px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.asides {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 75px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.asides.top {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.asides > * {
|
||||
flex: 1;
|
||||
margin-right: 50px;
|
||||
min-width: 0; /* kind of a hack that allows proper sizing of pre children; see https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow */
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.asides > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.asides h2 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.asides p {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.thanks {
|
||||
width: 90%;
|
||||
max-width: 750px;
|
||||
padding: 2em;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
animation: colorchange 20s infinite;
|
||||
font-size: 16px;
|
||||
border: 20px solid;
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
@keyframes colorchange {
|
||||
from, to { border-color: #fd9898; }
|
||||
10% { border-color: #fdb998; }
|
||||
20% { border-color: #fdda98; }
|
||||
30% { border-color: #fdf298; }
|
||||
40% { border-color: #a0fd98; }
|
||||
50% { border-color: #98fdef; }
|
||||
60% { border-color: #98bbfd; }
|
||||
70% { border-color: #a098fd; }
|
||||
80% { border-color: #f598fd; }
|
||||
90% { border-color: #fd98be; }
|
||||
}
|
||||
|
||||
.thanks h2 {
|
||||
font-family: 'Dancing Script';
|
||||
font-size: 52px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.thanks .to {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.thanks .to a {
|
||||
margin: 10px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.thanks .to a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.thanks .to img {
|
||||
width: 150px;
|
||||
max-height: 60px;
|
||||
/* width: 150px; */
|
||||
/* max-width: 150px; */
|
||||
}
|
||||
|
||||
.thanks .to .sponsors {
|
||||
font-size: 125%;
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thanks hr {
|
||||
max-width: 120px;
|
||||
border: none;
|
||||
border-top: 3px solid #dbdbdb;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.thanks p {
|
||||
line-height: 140%;
|
||||
max-width: none;
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.grid > div {
|
||||
margin-left: -1px;
|
||||
margin-bottom: -1px;
|
||||
flex-grow: 1;
|
||||
border: 1px solid #aaa;
|
||||
min-width: 33.3333%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.grid > div b {
|
||||
font-weight: 300;
|
||||
font-family: Montserrat;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 6px;
|
||||
display: block;
|
||||
font-size: 140%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.caption {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
asciinema-player {
|
||||
display: block;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.asciinema-player-wrapper .asciinema-player {
|
||||
box-shadow: -10px 10px 15px rgba(0, 0, 0, 0.25);
|
||||
transform: scale(1.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.asciinema-terminal {
|
||||
border: none;
|
||||
padding: 10px;
|
||||
padding-bottom: 35px; /* for when the control bar is visible */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.display {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
|
||||
.display code {
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.display code {
|
||||
max-width: 800px;
|
||||
font-size: 110%;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 20px 40px;
|
||||
white-space: pre;
|
||||
font-weight: bold;
|
||||
overflow-x: auto;
|
||||
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.display.right > * {
|
||||
transform: rotateY(-25deg);
|
||||
}
|
||||
.display.left > * {
|
||||
transform: rotateY(25deg);
|
||||
}
|
||||
|
||||
.display code.light {
|
||||
background: #fff linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(241,241,241,0.5) 46%,rgba(225,225,225,0.5) 46.5%,rgba(246,246,246,0) 100%);
|
||||
}
|
||||
|
||||
.display code.dark,
|
||||
.asciinema-terminal {
|
||||
background: #333 linear-gradient(135deg, rgba(0, 0, 0, 0) 0%,rgba(125, 125, 125, 0.5) 46%,rgba(45, 45, 45, 0.5) 46.5%,rgba(0, 0, 0, 0) 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.blinking {
|
||||
animation: blinking 1s infinite;
|
||||
background-color: #fff;
|
||||
width: .5em;
|
||||
height: 1.2em;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes blinking {
|
||||
0% { background-color: #fff; }
|
||||
45% { background-color: #fff; }
|
||||
60% { background-color: transparent; }
|
||||
99% { background-color: transparent; }
|
||||
100% { background-color: #fff; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.diagonal {
|
||||
padding: 200px 0;
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
.diagonal.up { transform: skewY(-5deg); }
|
||||
.diagonal.up > * { transform: skewY(5deg); }
|
||||
|
||||
.diagonal.down { transform: skewY(5deg); }
|
||||
.diagonal.down > * { transform: skewY(-5deg); }
|
||||
|
||||
section.gray {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.display {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.display.right > * {
|
||||
transform: none;
|
||||
}
|
||||
.display.left > * {
|
||||
transform: none;
|
||||
}
|
||||
.asides > * {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue