discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Header align fix (#115)

Browse Source 
Header align fix
This commit is contained in:
Ilya Y 2023-06-26 17:28:36 +03:00 committed by GitHub
parent c07c692973
commit b6ab772d18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Nav/Header.module.scss
View File

@ -47,19 +47,15 @@
color: var(--default-color);
flex-wrap: nowrap !important;
justify-content: flex-start;
margin: 0;
.fixed & {
left: 0;
position: fixed;
right: 0;
top: 0;
padding: 0 divide($container-padding-x, 2);
margin: 0;
padding: 0;
z-index: 9;
@include media-breakpoint-up(sm) {
padding: 0 $container-padding-x;
}
}
}
@ -68,15 +64,10 @@
color: var(--default-color);
display: inline-flex;
height: 56px;
padding: 0;
position: relative;
text-align: center;
z-index: 9;
@include media-breakpoint-up(sm) {
padding: 0 6rem 0 0;
}
img {
height: 20px;
object-fit: contain;
@ -121,7 +112,6 @@
.mainNavigationWrapper {
@include font-size(1.7rem);
padding-left: 0;
position: relative;
@include media-breakpoint-down(md) {
@ -190,7 +180,6 @@
display: inline-flex;
float: right;
padding-left: 0;
padding-right: 0;
@include media-breakpoint-up(sm) {
padding-left: divide($container-padding-x, 2);

8
src/components/Nav/Header.tsx
View File

@ -85,7 +85,7 @@ export const Header = (props: Props) => {
props.scrollToComments(value)
}
const logoColWidth = page().path === '/' ? 'col-md-6' : 'col-md-5'
const logoColWidth = page().path === '/' ? 'col-md-6' : 'col-md-5 col-xl-4'
return (
<header
@ -103,13 +103,13 @@ export const Header = (props: Props) => {
</Modal>
<div class={clsx(styles.mainHeaderInner, 'wide-container')}>
<nav class={clsx(styles.headerInner, 'row')} classList={{ fixed: fixed() }}>
<div class={clsx(styles.mainLogo, 'col-auto', logoColWidth)}>
<nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
<div class={clsx(logoColWidth, 'col-auto', styles.mainLogo)}>
<a href={getPagePath(router, 'home')}>
<img src="/logo.svg" alt={t('Discours')} />
</a>
</div>
<div class={clsx(styles.mainNavigationWrapper, 'col-md-6')}>
<div class={clsx('col', styles.mainNavigationWrapper, { ['offset-xl-1']: page().path !== '/' })}>
<Show when={props.title}>
<div class={styles.articleHeader}>{props.title}</div>
</Show>