From 02f328d5637a949f7f9e5062f9a641c66da3c77e Mon Sep 17 00:00:00 2001 From: Matthew Holt Date: Wed, 22 Nov 2023 11:16:30 -0700 Subject: [PATCH] Work on responsiveness --- new/includes/footer.html | 4 +- new/resources/css/common.css | 1 + new/resources/css/home.css | 118 +++++++++----------------------- new/resources/css/marketing.css | 30 ++++---- 4 files changed, 54 insertions(+), 99 deletions(-) diff --git a/new/includes/footer.html b/new/includes/footer.html index 9206e84..b0c302b 100644 --- a/new/includes/footer.html +++ b/new/includes/footer.html @@ -14,7 +14,7 @@ © {{now | date "2006"}} ZeroSSL. All rights reserved.

-
+
Project
Features Download @@ -34,7 +34,7 @@ Twitter / X Research
-
+
Contact
Sales Email diff --git a/new/resources/css/common.css b/new/resources/css/common.css index 32cba30..f2cb155 100644 --- a/new/resources/css/common.css +++ b/new/resources/css/common.css @@ -565,6 +565,7 @@ footer a:hover { footer .wrapper { display: flex; + flex-wrap: wrap; gap: 75px; } diff --git a/new/resources/css/home.css b/new/resources/css/home.css index b902537..d16b6f8 100644 --- a/new/resources/css/home.css +++ b/new/resources/css/home.css @@ -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; + } +} \ No newline at end of file diff --git a/new/resources/css/marketing.css b/new/resources/css/marketing.css index 4b4fdc6..901fdce 100644 --- a/new/resources/css/marketing.css +++ b/new/resources/css/marketing.css @@ -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 {