warrenchen/innovedus_cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wrap header menu and tighten footer spacing

Browse Source
This commit is contained in:
warrenchen 2026-06-18 14:48:59 +09:00
parent 8c4ce7b92e
commit fe70e1847e
3 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
innovedus_cms/mysite/static/css/footer.css
View File

@ -63,7 +63,7 @@
padding: 0; padding: 0;
list-style: none; list-style: none;
column-count: 2; column-count: 2;
column-gap: 40px; column-gap: 28px;
} }
.footer-menu-list li { .footer-menu-list li {

44
innovedus_cms/mysite/static/css/mysite.css
View File

@ -75,10 +75,15 @@ a {
.menu-item { .menu-item {
position: relative; position: relative;
flex: 1 1 0; flex: 0 0 auto;
text-align: left; text-align: left;
} }
.menu-item:hover,
.menu-item:focus-within {
z-index: 20;
}
.menu-item-header { .menu-item-header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -172,10 +177,13 @@ a {
.submenu { .submenu {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 50%; left: 0;
transform: translateX(-50%); width: max-content;
min-width: 100%;
max-width: calc(100vw - 32px);
transform: none;
margin-top: -2px; margin-top: -2px;
margin-left: 20px; margin-left: 10px;
list-style: none; list-style: none;
padding-inline-start: 0; padding-inline-start: 0;
border-bottom: #0e1b42; border-bottom: #0e1b42;
@ -184,6 +192,7 @@ a {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
pointer-events: none; pointer-events: none;
z-index: 20;
transition: opacity 160ms ease, transform 160ms ease; transition: opacity 160ms ease, transform 160ms ease;
} }
@ -198,11 +207,11 @@ a {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
pointer-events: auto; pointer-events: auto;
transform: translateX(-50%) translateY(2px); transform: translateY(2px);
} }
.submenu-item { .submenu-item {
min-width: 94px; min-width: 0;
height: 36px; height: 36px;
border: #0e1b42; border: #0e1b42;
border-style: solid; border-style: solid;
@ -221,7 +230,8 @@ a {
display: block; display: block;
font-variation-settings: normal; font-variation-settings: normal;
font-family: "Inter:Regular", "Noto Sans JP:Regular", sans-serif; font-family: "Inter:Regular", "Noto Sans JP:Regular", sans-serif;
word-break: break-word; white-space: nowrap;
word-break: keep-all;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
@ -276,7 +286,7 @@ a {
border: 0; border: 0;
background: transparent; background: transparent;
outline: none; outline: none;
width: 153px; width: 140px;
} }
.template-darkbackground .header-search input[type="search"] { .template-darkbackground .header-search input[type="search"] {
@ -329,7 +339,19 @@ a {
} }
} }
@media (max-width: 768px) { @media (min-width: 768px) and (max-width: 1023px) {
.main-nav {
min-width: 0;
}
.main-menu {
flex-wrap: wrap;
row-gap: 4px;
}
.main-menu-link {
padding: 4px 4px;
}
} }
@media (min-width: 575px) and (max-width: 767px) { @media (min-width: 575px) and (max-width: 767px) {
@ -432,6 +454,8 @@ a {
.submenu { .submenu {
position: static; position: static;
min-width: 0;
max-width: none;
margin: 8px 0 0; margin: 8px 0 0;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
@ -463,6 +487,8 @@ a {
.submenu-item a { .submenu-item a {
padding: 6px 0 6px 18px; padding: 6px 0 6px 18px;
font-size: 14px; font-size: 14px;
white-space: normal;
word-break: break-word;
} }
} }

2
innovedus_cms/mysite/static/css/subscribe_fab.css
View File

@ -48,7 +48,7 @@
padding: 0 10px 0 0; padding: 0 10px 0 0;
border-radius: 36px; border-radius: 36px;
background: #ffffff1a; background: #ffffff1a;
border: 1px solid #ffffff80; border: 1px solid #0e1b0e;
transform: translateX(calc(100% - var(--fab-toggle-width))); transform: translateX(calc(100% - var(--fab-toggle-width)));
transition: transform 0.25s ease, background-color 0.2s ease; transition: transform 0.25s ease, background-color 0.2s ease;
backdrop-filter: blur(12px); backdrop-filter: blur(12px);