Stable navbar

This commit is contained in:
Franklin 2023-04-10 10:11:27 -04:00
parent a7a9d06bc6
commit 24b72dac63
14 changed files with 74 additions and 36 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

View File

@ -8,10 +8,21 @@ body {
flex-direction: column;
justify-content: center;
align-items: stretch;
padding-left: 5vw;
padding-right: 5vw;
padding-left: clamp(35px, 10%, 10vw);
padding-right: clamp(35px, 5%, 10vw);
padding-top: clamp(85px, 10vw, 160px)
}
@media only screen and (min-width: 1000px) {
.page-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
padding-left: clamp(35px, 25%, 10vw);
padding-right: clamp(35px, 25%, 10vw);
padding-top: clamp(85px, 10vw, 160px)
}
}
/*
@media only screen and (min-width: 750px) {
.page-container {

View File

@ -20,7 +20,8 @@
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
padding: 15px;
padding: 10px;
padding-left: 20px;
}
.navbar-hamburger {
@ -117,6 +118,9 @@
padding-bottom: 10px;
font-family: Poppins;
}
.navbar-item-selected {
cursor: default;
}
.navbar-item:hover {
background-color: #ffffff14;
scale: 1.15;
@ -127,10 +131,10 @@
.navbar-brand-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 10px;
flex-direction: column;
justify-content: center;
align-items: start;
height: 50px;
max-width: 350px;
}
@ -139,10 +143,9 @@
}
.navbar-image {
width: 60px;
height: 50px;
width: 26.6px;
height: 40px;
object-fit: cover;
margin-top: -10px;
}
/* Desktop view */
@ -160,7 +163,7 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: 7vw;
padding-left: 10vw;
}
.navbar {
@ -187,6 +190,12 @@
margin-top: 0px;
}
.navbar-image {
width: 40px;
height: 40px;
object-fit: cover;
}
.navbar-item {
color: #6B6B6B;
font-size: 12pt;

View File

@ -237,12 +237,11 @@
font-size: clamp(12px, 1.4vw, 21px);
}
.start-section-right-column-subject-1-photo {
width: clamp(250px, 27vw, 290px);
width: clamp(220px, 27vw, 290px);
}
.start-section-right-column-subject-2-photo {
width: clamp(240px, 25vw, 275px);
width: clamp(220px, 23vw, 275px);
margin-right: 20px;
margin-bottom: 2px;
}
.start-section-right-column-subject-2-title {
font-size: clamp(12px, 1.4vw, 21px);

View File

@ -951,7 +951,7 @@ function initSync(module) {
async function init(input) {
if (typeof input === 'undefined') {
input = new URL('bl-frontend-8ea2c9cc7a3c1e00_bg.wasm', import.meta.url);
input = new URL('bl-frontend-3471ad16c4b84cf4_bg.wasm', import.meta.url);
}
const imports = getImports();

View File

@ -8,10 +8,21 @@ body {
flex-direction: column;
justify-content: center;
align-items: stretch;
padding-left: 5vw;
padding-right: 5vw;
padding-left: clamp(35px, 10%, 10vw);
padding-right: clamp(35px, 5%, 10vw);
padding-top: clamp(85px, 10vw, 160px)
}
@media only screen and (min-width: 1000px) {
.page-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
padding-left: clamp(35px, 25%, 10vw);
padding-right: clamp(35px, 25%, 10vw);
padding-top: clamp(85px, 10vw, 160px)
}
}
/*
@media only screen and (min-width: 750px) {
.page-container {

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

12
dist/index.html vendored
View File

@ -2,10 +2,10 @@
<meta charset="utf-8">
<title>Blanco Lorenzo</title>
<link rel="stylesheet" href="/body-543b917958789c41.css">
<link rel="stylesheet" href="/navbar-b9323c6a829e08b2.css">
<link rel="stylesheet" href="/body-e8d660df182d57de.css">
<link rel="stylesheet" href="/navbar-561b968ed8df59d4.css">
<link rel="stylesheet" href="/footer-c920ca43256fdcb9.css">
<link rel="stylesheet" href="/start-e5bb49a25da0d3bc.css">
<link rel="stylesheet" href="/start-bd1c7d143fbbfa68.css">
<link rel="stylesheet" href="/services-e3fac511f8ec30fa.css">
<link rel="stylesheet" href="/call_to_action-c920ca43256fdcb9.css">
<link rel="stylesheet" href="/service_card-1dcd0bfd8e0f3c95.css">
@ -16,9 +16,9 @@
<base href="/">
<link rel="preload" href="/bl-frontend-8ea2c9cc7a3c1e00_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/bl-frontend-8ea2c9cc7a3c1e00.js"></head>
<body><script type="module">import init from '/bl-frontend-8ea2c9cc7a3c1e00.js';init('/bl-frontend-8ea2c9cc7a3c1e00_bg.wasm');</script><script>(function () {
<link rel="preload" href="/bl-frontend-3471ad16c4b84cf4_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/bl-frontend-3471ad16c4b84cf4.js"></head>
<body><script type="module">import init from '/bl-frontend-3471ad16c4b84cf4.js';init('/bl-frontend-3471ad16c4b84cf4_bg.wasm');</script><script>(function () {
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
var url = protocol + '//' + window.location.host + '/_trunk/ws';
var poll_interval = 5000;

View File

@ -20,7 +20,8 @@
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
padding: 15px;
padding: 10px;
padding-left: 20px;
}
.navbar-hamburger {
@ -117,6 +118,9 @@
padding-bottom: 10px;
font-family: Poppins;
}
.navbar-item-selected {
cursor: default;
}
.navbar-item:hover {
background-color: #ffffff14;
scale: 1.15;
@ -127,10 +131,10 @@
.navbar-brand-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 10px;
flex-direction: column;
justify-content: center;
align-items: start;
height: 50px;
max-width: 350px;
}
@ -139,10 +143,9 @@
}
.navbar-image {
width: 60px;
height: 50px;
width: 26.6px;
height: 40px;
object-fit: cover;
margin-top: -10px;
}
/* Desktop view */
@ -160,7 +163,7 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: 7vw;
padding-left: 10vw;
}
.navbar {
@ -187,6 +190,12 @@
margin-top: 0px;
}
.navbar-image {
width: 40px;
height: 40px;
object-fit: cover;
}
.navbar-item {
color: #6B6B6B;
font-size: 12pt;

View File

@ -237,12 +237,11 @@
font-size: clamp(12px, 1.4vw, 21px);
}
.start-section-right-column-subject-1-photo {
width: clamp(250px, 27vw, 290px);
width: clamp(220px, 27vw, 290px);
}
.start-section-right-column-subject-2-photo {
width: clamp(240px, 25vw, 275px);
width: clamp(220px, 23vw, 275px);
margin-right: 20px;
margin-bottom: 2px;
}
.start-section-right-column-subject-2-title {
font-size: clamp(12px, 1.4vw, 21px);

View File

@ -41,7 +41,7 @@ pub fn navigation_bar() -> Html {
<div class={"navbar-background"}>
<div class={"navbar-container"}>
<div class={"navbar-brand-container"} onclick={move |_| cloned_navigator_6.push(&Route::MainPage)}>
<img class={"navbar-image"} src={ if (*window_device_handle) == WindowDevice::Mobile {"images/logo-white.png"} else {"images/logo-color.png"}} alt=""/>
<img class={"navbar-image"} src={ if (*window_device_handle) == WindowDevice::Mobile {"images/blanco-lorenzo-logo-white-transparent.png"} else {"images/blanco-lorenzo-logo-gray-transparent.png"}} alt=""/>
</div>