fix: Menu scroll size

lenra-io · Apr 6, 2022 · 70853ce · 70853ce
1 parent ff717f5
commit 70853ce
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/src/static/css/.layout.css b/src/static/css/.layout.css
@@ -24,26 +24,28 @@ nav > a {
  overflow: hidden;
  transition-property: none;
  text-align: center;
- height: calc(var(--base) * 4);
- margin: calc(var(--base) * 2) auto calc(var(--base) * 6) auto;
+ height: var(--header-height);
+ padding: var(--header-vertical-padding) auto;
 }
 
 nav > a::before {
  content: " ";
  position: absolute;
- top: 0;
+ top: 50%;
  left: 0;
- height: 100%;
+ height: calc(var(--base) * 4);
  width: 100%;
  background-image: var(--logo-horizontal-image-white);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
+ transform: translateY(-50%);
 }
 
 nav > ul {
  overflow: auto;
- height: calc(100% - var(--base) * 9 - var(--base) * 1.5 * 2);
+ height: calc(100% - var(--header-height));
+ padding-top: calc(var(--base) * 4);
  padding-bottom: calc(var(--base) * 2);
 }
 
@@ -108,8 +110,8 @@ nav li.selected > a {
 }
 
 body > section > header {
- position: relative;
- height: calc(var(--base) * 8);
+ background: white;
+ height: var(--header-height);
  box-shadow: 0px calc(var(--base) * 0.5) calc(var(--base) * 2) rgba(169, 178, 196, 0.25), 0px 1px var(--base) rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
@@ -123,7 +125,7 @@ body > section > header > h1 {
 
 @media (max-width: 800pt) {
  nav {
- position: absolute;
+ position: fixed;
  left: 0;
  transform: translateX(-100%);
  z-index: 1;
@@ -180,8 +182,9 @@ body > section > header > h1 {
  left: 25%;
  display: block;
  background-image: 
- linear-gradient(180deg, currentcolor, currentcolor),
- linear-gradient(180deg, currentcolor, currentcolor);
+ linear-gradient(180deg, white, white),
+ linear-gradient(180deg, white, white),
+ linear-gradient(180deg, white, white);
  background-repeat: no-repeat;
  background-position: center 0%, center 50%;
  background-size: 100% 15%;

diff --git a/src/static/css/components/.tab.css b/src/static/css/components/.tab.css
@@ -1,6 +1,7 @@
 table {
  border-collapse: collapse;
  width: 100%;
+ min-width: 500px;
  margin-bottom: calc(var(--base) * 2);
 }
 

diff --git a/src/static/css/main.css b/src/static/css/main.css
@@ -29,6 +29,7 @@
  --line-height: calc(2 / 1.5);/* 2 * base / font-size */
  --header-vertical-padding: calc(var(--base) * 2);
  --header-horizontal-padding: calc(var(--base) * 4);
+ --header-height: calc(var(--header-vertical-padding) * 2 + var(--base) * 4);/* Button height + 2 * padding */
 }
 
 html, body {
@@ -51,14 +52,13 @@ body > section {
  width: 100%;
  position: relative;
  height: 100%;
- overflow-y: auto;
  scroll-behavior: smooth;
 }
 
 main {
  flex: 1;
- /* max-width: 1200px; */
  padding: calc(var(--base) * 3) calc(var(--base) * 4) calc(var(--base) * 5);
+ overflow: auto;
 }
 
 h1, h2, h3 {
@@ -73,11 +73,6 @@ h2, h3, p {
  padding-bottom: calc(var(--base) * 2);
 }
 
-/* p {
- font-size: 14px;
- color: var(--dark-grey);
-} */
-
 main li {
  list-style-position: inside;
  list-style-type: disc;