mirror of
https://github.com/caddyserver/website.git
synced 2025-04-26 23:16:16 -04:00
More work on marketing pages
This commit is contained in:
Matthew Holt
Francis Lavoie
parent
12564261f4
commit
f44e6af8ad
16 changed files with 479 additions and 145 deletions
|
|
@ -307,7 +307,6 @@ button.purple,
|
|||
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;
|
||||
font-size: 90%;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25)
|
||||
}
|
||||
|
||||
|
|
@ -563,6 +562,10 @@ footer a:hover {
|
|||
color: #76b8b8;
|
||||
}
|
||||
|
||||
footer .logo-area {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
footer .wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -572,7 +575,7 @@ footer .wrapper {
|
|||
footer .nostalgia {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
footer .nostalgia-badges {
|
||||
|
|
@ -582,6 +585,7 @@ footer .nostalgia-badges {
|
|||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
footer .nostalgia p {
|
||||
|
|
|
|||
|
|
@ -85,6 +85,9 @@ button.primary:hover,
|
|||
.button.primary:hover {
|
||||
color: white;
|
||||
}
|
||||
.button.purple:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
.hero-content {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ h1 {
|
|||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
line-height: .9;
|
||||
|
||||
background-image: unset;
|
||||
-webkit-background-clip: unset;
|
||||
|
|
@ -38,6 +39,9 @@ h1 .subheading {
|
|||
margin-top: .75em;
|
||||
}
|
||||
|
||||
h3 a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
.sponsors-leaders {
|
||||
|
|
@ -190,23 +194,27 @@ h1 .subheading {
|
|||
|
||||
|
||||
.testimonials-container {
|
||||
height: 100vh;
|
||||
height: 80vh;
|
||||
position: relative;
|
||||
}
|
||||
.testimonials {
|
||||
--testimonial-spacing: 25px;
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(0, 1fr);
|
||||
grid-auto-flow: column;
|
||||
gap: var(--testimonial-spacing);
|
||||
padding-top: 150px;
|
||||
padding-bottom: 150px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 75px;
|
||||
padding-bottom: 75px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.testimonial-col {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
}
|
||||
.testimonials-container::before {
|
||||
content: "";
|
||||
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 400px, rgba(255,255,255,0) 600px, rgba(255,255,255,1) 100%);
|
||||
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;
|
||||
|
|
@ -227,6 +235,7 @@ h1 .subheading {
|
|||
border-radius: 5px;
|
||||
padding: 1em;
|
||||
margin: var(--testimonial-spacing) 0;
|
||||
background: white;
|
||||
}
|
||||
.testimonial-quote {
|
||||
margin-bottom: 1em;
|
||||
|
|
@ -240,6 +249,14 @@ h1 .subheading {
|
|||
.testimonial-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: .5em;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.testimonial-name:hover {
|
||||
color: inherit;
|
||||
}
|
||||
.testimonial-name[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.testimonial-name::before {
|
||||
content: '—';
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ h1 {
|
|||
font-weight: 800;
|
||||
text-align: center;
|
||||
color: #65D1C6;
|
||||
line-height: .9;
|
||||
margin-bottom: 1em;
|
||||
|
||||
background-image: linear-gradient(to right, #47E27C 25%, #4ED3FB 75%);
|
||||
|
|
@ -31,8 +30,7 @@ h1 {
|
|||
}
|
||||
|
||||
h1 .subheading {
|
||||
margin: 2em auto 0;
|
||||
margin-top: 2em;
|
||||
margin: 1em auto 0;
|
||||
text-transform: none;
|
||||
font-size: 42px;
|
||||
font-weight: normal;
|
||||
|
|
@ -80,8 +78,13 @@ h2 {
|
|||
|
||||
.hero-content {
|
||||
padding-top: 100px;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.email em {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -174,7 +177,7 @@ section {
|
|||
|
||||
.hero section.transparent {
|
||||
background: none;
|
||||
padding: 50px 0;
|
||||
padding: 0;
|
||||
color: #cbe2e4;
|
||||
}
|
||||
|
||||
|
|
@ -643,6 +646,8 @@ div.ap-wrapper:fullscreen div.ap-player {
|
|||
}
|
||||
.asides {
|
||||
flex-direction: column;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.display {
|
||||
margin-top: 50px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
.hero-content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
p.footnote {
|
||||
margin-top: 2em;
|
||||
font-size: 12px;
|
||||
|
|
@ -189,8 +193,10 @@ ul.check li.minus::before {
|
|||
background-color: rgb(0 0 0 / .75);
|
||||
}
|
||||
|
||||
/* Keep the buttons above the glow effect for legibility */
|
||||
.button.purple {
|
||||
font-size: 90%;
|
||||
|
||||
/* Keep the buttons above the glow effect for legibility */
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
|
|||
74
new/resources/css/support.css
Normal file
74
new/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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue