mirror of
https://github.com/caddyserver/website.git
synced 2025-04-22 21:16:15 -04:00
Update site for 2.0; add v2 landing page with asciinema video; docs
This commit is contained in:
Matthew Holt
parent
144a639efc
commit
e52e32ba7d
14 changed files with 3775 additions and 10 deletions
2563
src/resources/css/asciinema-player-2.6.1.css
Normal file
2563
src/resources/css/asciinema-player-2.6.1.css
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -57,10 +57,6 @@ header {
|
|||
height: 40px;
|
||||
}
|
||||
|
||||
#search {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
header nav {
|
||||
text-align: right;
|
||||
line-height: 40px;
|
||||
|
|
@ -89,17 +85,31 @@ header nav > a.current {
|
|||
font-size: 14px;
|
||||
padding: 8px;
|
||||
background: none;
|
||||
width: 150px;
|
||||
width: 200px;
|
||||
max-width: 100%;
|
||||
margin-right: 20px;
|
||||
margin-top: 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search:focus {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .ds-dropdown-menu {
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
}
|
||||
/* End Algolia search */
|
||||
|
||||
header nav .new {
|
||||
background-color: #ffe300;
|
||||
font-size: 75%;
|
||||
vertical-align: top;
|
||||
padding: 4px 8px;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
header nav .button {
|
||||
margin: 0 0 0 10px;
|
||||
padding-top: 2px;
|
||||
|
|
|
|||
391
src/resources/css/v2-landing.css
Normal file
391
src/resources/css/v2-landing.css
Normal file
|
|
@ -0,0 +1,391 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue