mirror of
https://github.com/caddyserver/website.git
synced 2025-04-24 22:16:15 -04:00
Work on responsiveness
This commit is contained in:
Matthew Holt
Francis Lavoie
parent
1a5466c9c8
commit
02f328d563
4 changed files with 54 additions and 99 deletions
|
|
@ -14,7 +14,7 @@
|
|||
© {{now | date "2006"}} ZeroSSL. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
<div class="link-col" style="margin-left: auto;">
|
||||
<div class="link-col">
|
||||
<div class="col-header">Project</div>
|
||||
<a href="#">Features</a>
|
||||
<a href="#">Download</a>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<a href="https://twitter.com/caddyserver">Twitter / X</a>
|
||||
<a href="/research">Research</a>
|
||||
</div>
|
||||
<div class="link-col" style="margin-right: auto;">
|
||||
<div class="link-col">
|
||||
<div class="col-header">Contact</div>
|
||||
<a href="https://caddy.community">Sales</a>
|
||||
<a href="https://github.com/caddyserver">Email</a>
|
||||
|
|
|
|||
|
|
@ -565,6 +565,7 @@ footer a:hover {
|
|||
|
||||
footer .wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 75px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,89 +40,6 @@ h1 .subheading {
|
|||
|
||||
|
||||
|
||||
.asides {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
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;
|
||||
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-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;
|
||||
}
|
||||
|
||||
.asides p {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 1.5em;
|
||||
margin-top: 55px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sponsors-leaders {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
|
@ -353,7 +270,10 @@ div.ap-wrapper:fullscreen div.ap-player {
|
|||
}
|
||||
|
||||
img.cite {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -370,7 +290,7 @@ img.cite {
|
|||
.demobox h2 {
|
||||
position: absolute;
|
||||
top: -99px;
|
||||
font-size: 90px;
|
||||
font-size: min(90px, 50vw);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
|
|
@ -387,6 +307,7 @@ img.cite {
|
|||
|
||||
.demo-ips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
|
|
@ -401,6 +322,7 @@ img.cite {
|
|||
.demo-ip {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.record-type {
|
||||
|
|
@ -450,4 +372,30 @@ img.cite {
|
|||
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) {
|
||||
h1 {
|
||||
font-size: 55px;
|
||||
}
|
||||
}
|
||||
|
|
@ -335,6 +335,7 @@ section.dark h3.yellow {
|
|||
.asides {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 50px;
|
||||
justify-content: space-between;
|
||||
margin: 100px auto 150px auto;
|
||||
align-items: center;
|
||||
|
|
@ -351,20 +352,20 @@ section.dark h3.yellow {
|
|||
|
||||
.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;
|
||||
width: 100%;
|
||||
/* 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;
|
||||
width: 100%; */
|
||||
}
|
||||
|
||||
.asides > :last-child {
|
||||
/* .asides > :last-child {
|
||||
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-40-60 > :first-child { width: 40%; }
|
||||
.asides-40-60 > :last-child { width: 60%; }
|
||||
.asides-60-40 > :first-child { width: 60%; }
|
||||
.asides-60-40 > :last-child { width: 40%; }
|
||||
|
||||
.asides h2 {
|
||||
text-align: left;
|
||||
|
|
@ -415,6 +416,11 @@ div.ap-wrapper:fullscreen div.ap-player {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.display {
|
||||
perspective: 1500px;
|
||||
}
|
||||
|
|
@ -651,11 +657,11 @@ div.ap-wrapper:fullscreen div.ap-player {
|
|||
}
|
||||
|
||||
@media (min-width: 1001px) {
|
||||
.hero-content .display {
|
||||
/* .hero-content .display {
|
||||
transform: scale(1.1);
|
||||
position: relative;
|
||||
left: -7%;
|
||||
}
|
||||
} */
|
||||
|
||||
/* div.ap-wrapper div.ap-player {
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue