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/07/02 08:53:36 UTC
[camel-website] 07/08: CAMEL-14958: change breakpoint at 1024 to
maintain consistency
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
commit a66c440a29d550ca26f77092b39a387fb9119827
Author: Aemie <ae...@hotmail.co.uk>
AuthorDate: Mon Jun 29 10:44:41 2020 +0530
CAMEL-14958: change breakpoint at 1024 to maintain consistency
---
antora-ui-camel/src/css/blog.css | 10 ++--------
antora-ui-camel/src/css/doc.css | 4 ++--
antora-ui-camel/src/css/frontpage.css | 2 +-
antora-ui-camel/src/css/header.css | 24 ++++++++++++++++++------
antora-ui-camel/src/css/nav.css | 12 +++---------
antora-ui-camel/src/css/static.css | 4 ++--
antora-ui-camel/src/css/toolbar.css | 2 +-
7 files changed, 29 insertions(+), 29 deletions(-)
diff --git a/antora-ui-camel/src/css/blog.css b/antora-ui-camel/src/css/blog.css
index 61832dc..b5eb413 100644
--- a/antora-ui-camel/src/css/blog.css
+++ b/antora-ui-camel/src/css/blog.css
@@ -193,7 +193,7 @@ article.blog p {
padding: 1rem;
}
-@media screen and (min-width: 1175px) {
+@media screen and (min-width: 1024px) {
.blog .pagination {
max-width: var(--static-max-width--desktop);
}
@@ -224,7 +224,7 @@ article.blog p {
color: var(--color-white);
}
-@media screen and (max-width: 1174px) {
+@media screen and (max-width: 1023px) {
article.blog:first-child {
margin-top: 5rem;
}
@@ -232,10 +232,4 @@ article.blog p {
.blog.list aside {
margin-top: 4.5rem;
}
-
- @media screen and (min-width: 1024px) {
- .blog.list aside {
- top: var(--navbar-mobile-height);
- }
- }
}
diff --git a/antora-ui-camel/src/css/doc.css b/antora-ui-camel/src/css/doc.css
index 9ade084..04ec620 100644
--- a/antora-ui-camel/src/css/doc.css
+++ b/antora-ui-camel/src/css/doc.css
@@ -37,13 +37,13 @@
margin: 1.5rem 0;
}
-@media screen and (min-width: 1175px) {
+@media screen and (min-width: 1024px) {
.doc > h1.page:first-child {
margin-top: 2.5rem;
}
}
-@media screen and (max-width: 1174px) {
+@media screen and (max-width: 1023px) {
.doc > h1.page:first-child {
margin-top: 5rem;
}
diff --git a/antora-ui-camel/src/css/frontpage.css b/antora-ui-camel/src/css/frontpage.css
index 7e92c10..0ee383d 100644
--- a/antora-ui-camel/src/css/frontpage.css
+++ b/antora-ui-camel/src/css/frontpage.css
@@ -251,7 +251,7 @@ section.frontpage h2 {
}
}
-@media screen and (max-width: 1174px) {
+@media screen and (max-width: 1023px) {
header.frontpage {
margin-top: var(--navbar-height);
}
diff --git a/antora-ui-camel/src/css/header.css b/antora-ui-camel/src/css/header.css
index 9fd6031..269c59d 100644
--- a/antora-ui-camel/src/css/header.css
+++ b/antora-ui-camel/src/css/header.css
@@ -28,7 +28,7 @@ body {
padding: 0 0.375rem;
}
-@media screen and (min-width: 1175px) {
+@media screen and (min-width: 1024px) {
.navbar-end > .navbar-item,
.navbar-end .navbar-link {
color: var(--navbar-font-color);
@@ -158,7 +158,7 @@ body {
margin: 0.25rem 0;
}
-@media screen and (max-width: 1174px) and (min-width: 480px) {
+@media screen and (max-width: 1023px) and (min-width: 480px) {
.navbar-menu.is-active {
display: block;
position: absolute;
@@ -227,7 +227,7 @@ body {
}
}
-@media screen and (max-width: 1174px) {
+@media screen and (max-width: 1023px) {
.navbar-menu.is-active {
display: block;
position: absolute;
@@ -297,7 +297,7 @@ body {
}
}
-@media screen and (min-width: 1175px) {
+@media screen and (min-width: 1024px) {
.navbar,
.navbar-menu,
.navbar-end {
@@ -320,6 +320,12 @@ body {
padding: 1rem 2rem 1rem 0;
}
+ @media screen and (max-width: 1080px) {
+ .navbar-item {
+ padding-right: 1.5rem;
+ }
+ }
+
.navbar-item.has-dropdown {
align-items: stretch;
padding-right: 2.8rem;
@@ -353,6 +359,12 @@ body {
margin-left: 2rem;
}
+ @media screen and (min-width: 1024px) and (max-width: 1080px) {
+ .navbar-end {
+ margin-left: 1rem;
+ }
+ }
+
.navbar-dropdown .navbar-item {
white-space: nowrap;
}
@@ -506,7 +518,7 @@ body {
fill: var(--navbar-font-color);
}
-@media screen and (max-width: 1174px) {
+@media screen and (max-width: 1023px) {
.navbar-tools {
display: flex;
align-items: flex-end;
@@ -520,7 +532,7 @@ body {
}
/* Styling for mobile use */
-@media (max-width: 1174px) {
+@media (max-width: 1023px) {
.navbar {
height: var(--navbar-mobile-height);
}
diff --git a/antora-ui-camel/src/css/nav.css b/antora-ui-camel/src/css/nav.css
index 9dcf08f..055f26a 100644
--- a/antora-ui-camel/src/css/nav.css
+++ b/antora-ui-camel/src/css/nav.css
@@ -66,22 +66,16 @@ html.is-clipped--nav {
height: var(--nav-panel-height);
}
-@media screen and (min-width: 1175px) {
+@media screen and (min-width: 1024px) {
.nav-panel-menu {
height: var(--nav-panel-height--desktop);
}
}
-@media screen and (max-width: 1174px) {
+@media screen and (max-width: 1023px) {
.nav-panel-menu {
margin-top: var(--navbar-height);
}
-
- @media screen and (min-width: 1024px) {
- .nav-panel-menu {
- height: calc(var(--nav-panel-height--desktop) - 2rem);
- }
- }
}
.nav-panel-menu:not(.is-active) .nav-menu {
@@ -324,6 +318,6 @@ html.is-clipped--nav {
background-size: 9.5rem;
background-position-x: 10px;
background-position-y: 10px;
- width: 10rem;
+ width: 4rem;
order: 1;
}
diff --git a/antora-ui-camel/src/css/static.css b/antora-ui-camel/src/css/static.css
index 0b05a85..76fc1b8 100644
--- a/antora-ui-camel/src/css/static.css
+++ b/antora-ui-camel/src/css/static.css
@@ -2,13 +2,13 @@
margin: var(--static-margin);
}
-@media screen and (min-width: 1175px) {
+@media screen and (min-width: 1024px) {
.static {
max-width: var(--static-max-width--desktop);
}
}
-@media screen and (max-width: 1174px) {
+@media screen and (max-width: 1023px) {
.static {
margin-top: 5rem;
}
diff --git a/antora-ui-camel/src/css/toolbar.css b/antora-ui-camel/src/css/toolbar.css
index e987d3b..a80c2a7 100644
--- a/antora-ui-camel/src/css/toolbar.css
+++ b/antora-ui-camel/src/css/toolbar.css
@@ -12,7 +12,7 @@
z-index: var(--z-index-toolbar);
}
-@media screen and (max-width: 1174px) {
+@media screen and (max-width: 1023px) {
.toolbar {
top: var(--navbar-mobile-height);
}