alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

feat(Style): change layout to allow navbar to expand the whole width

Browse source
This commit is contained in:
Alexander Navarro 2024-03-15 10:12:50 -03:00
parent d7a9817514
commit 8f36d1cd02
3 changed files with 20 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/assets/style/style.scss
View file

@ -13,7 +13,7 @@ html {
font-size: calc(15px + 0.390625vw); font-size: calc(15px + 0.390625vw);
} }
body { body > main {
max-width: 95vw; /* leave some space in the end by default */ max-width: 95vw; /* leave some space in the end by default */
margin: auto; margin: auto;
padding: 15px 0; padding: 15px 0;
@ -27,7 +27,7 @@ section:not(.clean) {
border-radius: var(--prj-border-radius); border-radius: var(--prj-border-radius);
} }
section:not(:first-child) { section:not(:first-of-type) {
margin-top: var(--prj-spacing-4); margin-top: var(--prj-spacing-4);
} }
@ -70,10 +70,19 @@ p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.container {
max-width: 100%;
}
/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */ /* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
@each $name, $size in $screen-sizes { @each $name, $size in $screen-sizes {
@media screen and (min-width: $size) { @media screen and (min-width: $size) {
body { body > main {
max-width: $size;
}
.container {
margin: auto;
max-width: $size; max-width: $size;
} }
} }

11
src/components/Navbar.astro
View file

@ -11,8 +11,8 @@ const links = [
]; ];
--- ---
<div id="main-navbar"> <div id="main-navbar" class="pt-1">
<nav class="navbar navbar-desktop d-none d-lg-block"> <nav class="navbar navbar-desktop d-none d-lg-block container">
<ul class="list-unstyle hstack"> <ul class="list-unstyle hstack">
{ {
links.map((link) => ( links.map((link) => (
@ -63,12 +63,13 @@ const links = [
</script> </script>
<style lang="scss"> <style lang="scss">
.navbar-desktop { nav {
margin-left: auto; width: 100%;
} }
nav { .navbar-desktop ul {
width: fit-content; width: fit-content;
margin-left: auto;
} }
ul { ul {

4
src/layouts/Layout.astro
View file

@ -5,8 +5,8 @@ export interface Props {
} }
import '../assets/style/style.scss'; import '../assets/style/style.scss';
import Navbar from '../components/Navbar.astro'; import Navbar from '@components/Navbar.astro';
import Spinner from '../components/Spinner.astro'; import Spinner from '@components/Spinner.astro';
const { title } = Astro.props; const { title } = Astro.props;
--- ---