pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert multiple pages into SPA

Browse Source
This commit is contained in:
Wim Brand
2025-10-09 15:48:23 +02:00
parent c616b2da7f
commit 06d04a1abc
110 changed files with 1245 additions and 1319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
res/static/style/layout.css
View File

@@ -58,12 +58,6 @@ a>svg {
box-sizing: border-box;
}
html,
body {
/* This makes sure that no scrollbar shows up when the menu is open on small screens*/
overflow-x: hidden;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
@@ -76,12 +70,6 @@ body {
transition: opacity 0.2s;
}
.checkers {
background-image: var(--background_pattern);
background-color: var(--background_pattern_color);
background-repeat: repeat;
}
header,
footer {
text-align: center;
@@ -90,24 +78,16 @@ footer {
}
footer {
background-image: url("/res/img/nebula.webp");
background-color: var(--background_color);
background-blend-mode: luminosity;
box-shadow: inset 0 0 10px -4px var(--shadow_color);
border-radius: 8px;
margin: 16px;
background-color: var(--shaded_background);
backdrop-filter: blur(4px);
border-top: 1px solid var(--separator);
}
footer>.footer_content {
background: var(--body_background);
color: var(--body_text_color);
display: inline-block;
width: 1000px;
max-width: 100%;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 8px;
margin: 120px 0 60px 0;
}
header>h1 {
@@ -173,52 +153,17 @@ pre>code {
transition: left 0.5s;
}
.page_body {
position: relative;
right: 0;
height: auto;
left: 0;
margin-left: 300px;
min-width: 300px;
display: block;
text-align: center;
/* Center the header and body */
overflow-y: auto;
overflow-x: hidden;
transition: margin 0.5s;
}
.page_content {
background: var(--body_background);
border-radius: 6px;
overflow: hidden;
background: var(--shaded_background);
backdrop-filter: blur(4px);
text-align: center;
}
.page_content,
.page_margins,
footer {
margin-right: 20px;
margin-left: 20px;
}
@media (max-width: 1100px) {
@media (max-width: 1000px) {
.page_navigation {
left: -300px;
}
.page_body {
margin-left: 0;
margin-right: 0;
width: 100%;
}
.page_content,
.page_margins,
footer {
margin-left: 0;
margin-right: 0;
}
header>h1 {
/* We want the header text to appear below the menu button, so the top
margin needs to be fairly large when the screen is small */
@@ -537,6 +482,12 @@ input[type="color"] {
line-height: 1.3em;
}
.button.flat {
background: none;
color: var(--body_text_color);
box-shadow: none;
}
button:hover,
.button:hover,
input[type="submit"]:hover,