mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-24 14:06:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Work on homepage more

Browse source
This commit is contained in:
Matthew Holt 2023-11-08 17:40:38 -07:00 • committed by Francis Lavoie
parent 3080b07b44
commit 870345f5b9
No known key found for this signature in database
GPG key ID: 0F66EE1687682239
6 changed files with 365 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

35
new/resources/css/home.css
View file

@ -45,10 +45,15 @@ h1 .subheading {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
margin: 100px auto 150px auto;
align-items: center;
}
.hero-content .asides {
margin-top: 0;
margin-bottom: 75px;
}
.asides.top {
align-items: stretch;
}
@ -64,6 +69,11 @@ h1 .subheading {
margin-right: 0;
}
.asides-40-60 > :first-child { max-width: 40%; }
.asides-40-60 > :last-child { max-width: 60%; }
.asides-60-40 > :first-child { max-width: 60%; }
.asides-60-40 > :last-child { max-width: 40%; }
.asides h2 {
text-align: left;
max-width: none;
@ -87,6 +97,9 @@ h1 .subheading {
margin-top: 10px;
font-size: 14px;
text-align: center;
}
.hero-content .caption {
color: #fff;
}
@ -140,6 +153,7 @@ div.ap-wrapper:fullscreen div.ap-player {
.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.25%,rgba(246,246,246,0) 100%);
color: #222;
}
.display code.dark,
@ -149,6 +163,14 @@ div.ap-wrapper:fullscreen div.ap-player {
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;
@ -168,6 +190,17 @@ div.ap-wrapper:fullscreen div.ap-player {
}
.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; }

29
new/resources/css/marketing.css
View file

@ -3,6 +3,12 @@ body {
background-image: none;
}
img.gallery {
max-width: 100%;
box-shadow: 0 6px 10px rgb(0 0 0 / .15);
border-radius: 8px;
}
h1,
h2,
h3,
@ -49,7 +55,7 @@ h1 .subheading b {
p,
h2 {
max-width: 800px;
max-width: 850px;
}
h2 {
@ -230,10 +236,16 @@ section.light.gray {
}
.cols, h3 {
.cols, .spacing {
--gap: 50px;
}
.spacing {
display: flex;
gap: var(--gap);
flex-direction: column;
}
.cols {
display: flex;
flex-wrap: wrap;
@ -263,7 +275,6 @@ h3 {
border-left: 2px solid;
padding-top: .15em;
padding-bottom: .15em;
margin-bottom: 10px;
/* shove the border over but leave space between border and content */
margin-left: -1em;
@ -271,7 +282,7 @@ h3 {
}
p + h3 {
margin-top: var(--gap);
margin-top: 4em;
}
h3.plain {
@ -287,7 +298,6 @@ h3.plain {
.cols .col p {
font-family: Inter;
font-size: 90%;
font-weight: normal;
line-height: 1.5;
}
@ -313,8 +323,9 @@ section.dark h3.purple {
section.dark h3.blue {
color: rgb(113, 191, 255); border-color: rgb(113, 191, 255);
}
section.dark h3.yellow {
color: #ffcb50; border-color: #ffcb50;
}
@ -406,6 +417,10 @@ section.dark h3.blue {
color: #ffcffb;
}
.cols .sponsorship-primer:first-child {
margin-top: 0;
}
.sponsorship-primer h3 {
color: white;
font-size: 150%;