Improve header's responsive design

This commit is contained in:
Brieuc Dubois 2024-01-17 20:37:31 +01:00
parent 3f95e2811a
commit f5896509da
4 changed files with 16 additions and 4 deletions

View File

@ -150,6 +150,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
font-size: 1.5rem;
input { input {
background-color: #444; background-color: #444;
@ -186,8 +187,8 @@
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
height: 40px; height: 40px;
font-size: 2rem;
display: flex; display: flex;
font-size: 2rem;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;

View File

@ -105,6 +105,8 @@
</header> </header>
<style lang="less"> <style lang="less">
@import '../../styles/breakpoints.less';
header { header {
margin: 0 2%; margin: 0 2%;
padding: 20px 0; padding: 20px 0;
@ -116,13 +118,21 @@
} }
h2 { h2 {
flex-grow: 100000;
font-size: 3rem; font-size: 3rem;
.nosidebar({
padding-left: 50px;
});
} }
nav { nav {
display: flex; display: flex;
flex-grow: 1;
flex-shrink: 0;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center;
gap: 7px; gap: 7px;
button { button {
@ -133,6 +143,7 @@
border: none; border: none;
background-color: transparent; background-color: transparent;
font-size: 1.5rem; font-size: 1.5rem;
flex-shrink: 0;
&.defined { &.defined {
color: #6481cc; color: #6481cc;

View File

@ -146,8 +146,8 @@
.toggle { .toggle {
visibility: hidden; visibility: hidden;
position: fixed; position: fixed;
top: 5px; top: 18px;
left: 5px; left: 10px;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;

View File

@ -1,4 +1,4 @@
@one-column: 480px; @one-column: 520px;
.one-column(@rules) { .one-column(@rules) {
@media (max-width: @one-column) { @media (max-width: @one-column) {