You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by zr...@apache.org on 2020/12/08 18:33:54 UTC
[camel-website] branch master updated: refactor: responsive design
This is an automated email from the ASF dual-hosted git repository.
zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git
The following commit(s) were added to refs/heads/master by this push:
new 03a6999 refactor: responsive design
03a6999 is described below
commit 03a69996594433ecdd078f6f4384f56f562acec9
Author: Zoran Regvart <zr...@apache.org>
AuthorDate: Tue Dec 8 12:20:00 2020 +0100
refactor: responsive design
With media selectors `max-width: 1023px` and `min-width: 1024px` the
breakpoint was set at 1023px not at 1024px as expected. This increases
`max-width` and `min-width` by 1px.
Also removes the `max-width` of `40rem` so we can occupy the full width
on smaller (<=1024px) resolutions.
And also centers images on the blog.
---
antora-ui-camel/src/css/base.css | 4 ++--
antora-ui-camel/src/css/blog.css | 14 ++++++++------
antora-ui-camel/src/css/body.css | 2 +-
antora-ui-camel/src/css/breadcrumbs.css | 2 +-
antora-ui-camel/src/css/doc.css | 5 ++---
antora-ui-camel/src/css/docs.css | 2 +-
antora-ui-camel/src/css/footer.css | 2 +-
antora-ui-camel/src/css/frontpage.css | 2 +-
antora-ui-camel/src/css/header.css | 10 +++++-----
antora-ui-camel/src/css/main.css | 4 ++--
antora-ui-camel/src/css/nav.css | 12 ++++++------
antora-ui-camel/src/css/page-versions.css | 2 +-
antora-ui-camel/src/css/static.css | 2 +-
antora-ui-camel/src/css/toc.css | 4 ++--
antora-ui-camel/src/css/toolbar.css | 6 +++---
antora-ui-camel/src/css/vars.css | 2 --
16 files changed, 37 insertions(+), 38 deletions(-)
diff --git a/antora-ui-camel/src/css/base.css b/antora-ui-camel/src/css/base.css
index 2945bdd..14761cb 100644
--- a/antora-ui-camel/src/css/base.css
+++ b/antora-ui-camel/src/css/base.css
@@ -4,7 +4,7 @@ body {
scroll-padding-top: var(--body-top);
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
body {
scroll-padding-top: var(--body-mobile-top);
}
@@ -27,7 +27,7 @@ html {
-webkit-text-size-adjust: 100%;
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
html {
font-size: var(--body-font-size--desktop);
}
diff --git a/antora-ui-camel/src/css/blog.css b/antora-ui-camel/src/css/blog.css
index c415d8e..2166a43 100644
--- a/antora-ui-camel/src/css/blog.css
+++ b/antora-ui-camel/src/css/blog.css
@@ -14,7 +14,7 @@
line-height: 2rem;
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
.blog.list aside {
margin-top: 0;
}
@@ -114,6 +114,9 @@ article.blog p {
max-width: 800px;
height: auto;
max-height: 600px;
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
}
.blog .post-content figcaption {
@@ -160,7 +163,7 @@ article.blog p {
display: inline;
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.blog {
max-width: var(--static-max-width--desktop);
}
@@ -209,12 +212,11 @@ article.blog p {
.blog .pagination {
margin: var(--static-margin);
- max-width: var(--static-max-width);
list-style: none;
padding: 1rem;
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.blog .pagination {
max-width: var(--static-max-width--desktop);
}
@@ -245,7 +247,7 @@ article.blog p {
color: var(--color-white);
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
.blog.list aside {
margin-top: 4.5rem;
}
@@ -276,7 +278,7 @@ article.blog p {
font-size: 1rem;
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
.blog .related article {
width: 100%;
padding-left: 0;
diff --git a/antora-ui-camel/src/css/body.css b/antora-ui-camel/src/css/body.css
index 222d751..ef10a00 100644
--- a/antora-ui-camel/src/css/body.css
+++ b/antora-ui-camel/src/css/body.css
@@ -3,7 +3,7 @@
word-wrap: break-word; /* aka overflow-wrap; used when hyphens are disabled or don't do the trick */
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.body {
display: flex;
}
diff --git a/antora-ui-camel/src/css/breadcrumbs.css b/antora-ui-camel/src/css/breadcrumbs.css
index b2c48c6..0884c4d 100644
--- a/antora-ui-camel/src/css/breadcrumbs.css
+++ b/antora-ui-camel/src/css/breadcrumbs.css
@@ -5,7 +5,7 @@
line-height: var(--nav-line-height);
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.breadcrumbs {
display: block;
}
diff --git a/antora-ui-camel/src/css/doc.css b/antora-ui-camel/src/css/doc.css
index a87cfb7..2928620 100644
--- a/antora-ui-camel/src/css/doc.css
+++ b/antora-ui-camel/src/css/doc.css
@@ -4,11 +4,10 @@
hyphens: auto;
line-height: var(--doc-line-height);
margin: var(--doc-margin);
- max-width: var(--doc-max-width);
padding: 0 1rem 4rem;
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.doc {
font-size: var(--doc-font-size--desktop);
margin: var(--doc-margin--desktop);
@@ -733,7 +732,7 @@
}
}
-@media screen and (max-width: 1023px) and (min-width: 480px) {
+@media screen and (max-width: 1024px) and (min-width: 480px) {
.doc p code,
.doc thead code {
font-size: var(--body-font-size);
diff --git a/antora-ui-camel/src/css/docs.css b/antora-ui-camel/src/css/docs.css
index ef9f8d4..586ccb2 100644
--- a/antora-ui-camel/src/css/docs.css
+++ b/antora-ui-camel/src/css/docs.css
@@ -46,7 +46,7 @@ a.button-dark {
width: 80%;
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
.docs,
.community {
padding: 0 1rem 4rem;
diff --git a/antora-ui-camel/src/css/footer.css b/antora-ui-camel/src/css/footer.css
index e6efd13..869edbe 100644
--- a/antora-ui-camel/src/css/footer.css
+++ b/antora-ui-camel/src/css/footer.css
@@ -150,7 +150,7 @@ footer .footer dl dt label:nth-child(2) {
display: none;
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
footer {
flex-direction: column;
}
diff --git a/antora-ui-camel/src/css/frontpage.css b/antora-ui-camel/src/css/frontpage.css
index 763d198..e9e1b44 100644
--- a/antora-ui-camel/src/css/frontpage.css
+++ b/antora-ui-camel/src/css/frontpage.css
@@ -274,7 +274,7 @@ section.frontpage.projects .project img {
/* css for tablet view */
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
header.frontpage h1 {
font-size: 3rem;
text-align: center;
diff --git a/antora-ui-camel/src/css/header.css b/antora-ui-camel/src/css/header.css
index c5844d2..9388164 100644
--- a/antora-ui-camel/src/css/header.css
+++ b/antora-ui-camel/src/css/header.css
@@ -6,7 +6,7 @@ body {
padding-top: var(--navbar-height);
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
body {
padding-top: var(--navbar-mobile-height);
}
@@ -37,7 +37,7 @@ html:not([data-scroll='0']) .navbar {
padding: 0 0.375rem;
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.navbar-end > .navbar-item {
color: var(--navbar-font-color);
text-transform: uppercase;
@@ -137,7 +137,7 @@ html:not([data-scroll='0']) .navbar {
position: relative;
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
.navbar-menu.is-active {
display: block;
position: absolute;
@@ -205,7 +205,7 @@ html:not([data-scroll='0']) .navbar {
}
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.navbar,
.navbar-menu,
.navbar-end {
@@ -427,7 +427,7 @@ div.footer-search h4 {
}
/* Styling for mobile use */
-@media (max-width: 1023px) {
+@media (max-width: 1024px) {
.navbar {
height: var(--navbar-mobile-height);
}
diff --git a/antora-ui-camel/src/css/main.css b/antora-ui-camel/src/css/main.css
index 1f102df..c8d14a4 100644
--- a/antora-ui-camel/src/css/main.css
+++ b/antora-ui-camel/src/css/main.css
@@ -1,10 +1,10 @@
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
aside.toc.sidebar {
display: none;
}
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
main {
flex: auto;
/* min-width: 0 required for flexbox to constrain overflowing elements */
diff --git a/antora-ui-camel/src/css/nav.css b/antora-ui-camel/src/css/nav.css
index 2f554f0..6a19b32 100644
--- a/antora-ui-camel/src/css/nav.css
+++ b/antora-ui-camel/src/css/nav.css
@@ -14,7 +14,7 @@
}
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.nav-container {
font-size: calc(15.5 / var(--rem-base) * 1rem);
flex: none;
@@ -29,7 +29,7 @@
padding: 0;
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
.nav-category {
margin-left: 1rem;
}
@@ -48,7 +48,7 @@
}
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.nav {
top: var(--navbar-height);
box-shadow: none;
@@ -73,13 +73,13 @@ html.is-clipped--nav {
height: var(--nav-panel-height);
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.nav-panel-menu {
height: var(--nav-panel-height--desktop);
}
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
.nav-panel-menu {
margin-top: var(--navbar-height);
}
@@ -150,7 +150,7 @@ html.is-clipped--nav {
background: var(--scrollbar-thumb-active-color);
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
.nav-menu::-webkit-scrollbar {
width: 0;
background: transparent;
diff --git a/antora-ui-camel/src/css/page-versions.css b/antora-ui-camel/src/css/page-versions.css
index b317e9c..63a8770 100644
--- a/antora-ui-camel/src/css/page-versions.css
+++ b/antora-ui-camel/src/css/page-versions.css
@@ -5,7 +5,7 @@
line-height: 1;
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.page-versions {
display: block;
}
diff --git a/antora-ui-camel/src/css/static.css b/antora-ui-camel/src/css/static.css
index ae73907..b33e010 100644
--- a/antora-ui-camel/src/css/static.css
+++ b/antora-ui-camel/src/css/static.css
@@ -2,7 +2,7 @@
margin: var(--static-margin);
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.static {
max-width: var(--static-max-width--desktop);
}
diff --git a/antora-ui-camel/src/css/toc.css b/antora-ui-camel/src/css/toc.css
index 14120eb..829e571 100644
--- a/antora-ui-camel/src/css/toc.css
+++ b/antora-ui-camel/src/css/toc.css
@@ -37,7 +37,7 @@
overflow-y: auto;
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.toc .toc-menu h3 {
font-size: calc(15 / var(--rem-base) * 1rem);
}
@@ -55,7 +55,7 @@
padding-left: 1.25rem;
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
.toc .toc-menu ul li ul li ul li a {
padding-left: 1.25rem;
}
diff --git a/antora-ui-camel/src/css/toolbar.css b/antora-ui-camel/src/css/toolbar.css
index cf5bb8d..789b105 100644
--- a/antora-ui-camel/src/css/toolbar.css
+++ b/antora-ui-camel/src/css/toolbar.css
@@ -18,7 +18,7 @@
max-width: 100vw;
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1024px) {
.toolbar {
top: var(--navbar-mobile-height);
}
@@ -40,7 +40,7 @@
margin-right: -0.25rem;
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.nav-toggle {
display: none;
}
@@ -70,7 +70,7 @@
padding-right: 0.5rem;
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1025px) {
.edit-this-page {
display: block;
}
diff --git a/antora-ui-camel/src/css/vars.css b/antora-ui-camel/src/css/vars.css
index 3dafbce..b3aed11 100644
--- a/antora-ui-camel/src/css/vars.css
+++ b/antora-ui-camel/src/css/vars.css
@@ -154,9 +154,7 @@
--toc-height: calc(100vh - var(--toc-top) - 2.5rem);
--toc-width: calc(162 / var(--rem-base) * 1rem);
--toc-width--widescreen: calc(216 / var(--rem-base) * 1rem);
- --doc-max-width: calc(720 / var(--rem-base) * 1rem);
--doc-max-width--desktop: calc(1366 / var(--rem-base) * 1rem);
- --static-max-width: calc(720 / var(--rem-base) * 1rem);
--static-max-width--desktop: calc(1366 / var(--rem-base) * 1rem);
/* stacking */
--z-index-nav: 1;