diff --git a/index.html b/index.html
index 0249aa5..3b5e90d 100644
--- a/index.html
+++ b/index.html
@@ -28,9 +28,10 @@
--bg-color-dark: #1a1a1a;
--text-color-light: #000000;
--text-color-dark: #ffffff;
- --sidebar-width: 300px;
--accent-color: #10b981;
--accent-color-hover: #059669;
+ --sidebar-width: 300px;
+ --footer-height: 152.13px;
}
body {
@@ -151,11 +152,15 @@
text-align: center;
border-top: 1px solid #e1e4e8;
background: var(--bg-color-light);
- position: fixed;
+ position: sticky;
bottom: 0;
- left: 0;
- right: 0;
z-index: 100;
+ content-visibility: auto;
+ }
+
+ .site-footer.closed {
+ height: 0;
+ padding: 0px 20px;
}
.dark-mode .site-footer {
@@ -214,9 +219,9 @@
}
/* Add padding to main content to prevent overlap with fixed footer */
- .layout-wrapper {
+ /* .layout-wrapper {
padding-bottom: 100px;
- }
+ } */
@media (max-width: 768px) {
.footer-content {
@@ -238,10 +243,10 @@
align-items: flex-start;
}
- .site-footer {
+ .site-footer {
position: static;
text-align: left;
- }
+ }
.layout-wrapper {
padding-bottom: 0;
@@ -478,7 +483,6 @@
gap: 8px;
align-items: center;
}
-
.chat-button {
background: transparent;
border: none;
@@ -507,17 +511,46 @@
}
.content-wrapper {
+ position: relative;
display: flex;
+ padding-left: var(--sidebar-width);
+ /* padding-bottom: var(--footer-height); */
+ flex-direction: column;
flex: 1;
+ transition: padding 0.2s ease;
}
+ .content-wrapper.closed-sidebar {
+ padding-left: 150px;
+ padding-right: 150px;
+ }
+
+ /* .content-wrapper.closed-footer {
+ padding-bottom: var(--footer-height);
+ } */
+
.sidebar {
width: var(--sidebar-width);
+ position: absolute;
+ left: 0;
padding: 20px;
border-right: 1px solid #e1e4e8;
- height: calc(100vh - 140px);
+ height: calc(100vh - var(--header-height));
overflow-y: auto;
background-color: var(--bg-color-light);
+ transition: transform 0.2s ease, flex-basis 0.2s ease;
+ flex-basis: auto;
+ }
+
+ .sidebar-sticky {
+ top: var(--header-height);
+ height: calc(100vh - var(--header-height));
+ position: sticky;
+ z-index: 100;
+ }
+
+ .sidebar.closed {
+ transform: translateX(-300px);
}
.dark-mode .sidebar {
@@ -527,7 +560,6 @@
.main-content {
flex: 1;
- height: calc(100vh - 140px);
overflow-y: auto;
padding: 20px;
}
@@ -635,6 +667,60 @@
opacity: 1;
}
+ .layout-buttons {
+ display: flex;
+ justify-content: center;
+ }
+
+ #closeSidebar {
+ background: transparent;
+ color: var(--accent-color);
+ cursor: pointer;
+ padding: 0;
+ opacity: 0.8;
+ transition: all 0.2s ease;
+ border: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ rotate: 90deg;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ }
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ #closeFooter {
+ background: transparent;
+ color: var(--accent-color);
+ cursor: pointer;
+ opacity: 0.8;
+ transition: all 0.2s ease;
+ border: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transform: translateY(-0.6px);
+ svg {
+ width: 24px;
+ height: 24px;
+ margin-bottom: 2px;
+ }
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ .hidden {
+ display: none;
+ }
+
.copy-button svg {
width: 16px;
height: 16px;
@@ -722,10 +808,16 @@
@media (max-width: 768px) {
.content-wrapper {
flex-direction: column;
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .sidebar-sticky {
+ display: none;
}
.sidebar {
- width: 100%;
+ width: 100%;
height: auto;
border-right: none;
border-bottom: 1px solid #e1e4e8;
@@ -739,10 +831,23 @@
height: auto;
}
+ .site-header {
+ --site-header-height: 120px;
+ height: var(--site-header-height);
+ }
+
.header-right {
gap: 8px;
}
+ .header-left {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 1px;
+ }
+
.mode-text {
display: none;
}
@@ -802,7 +907,7 @@
.modal-title {
font-size: 1.4rem;
- font-weight: 600;
+ font-weight: 60;
margin: 0;
padding-right: 80px;
color: var(--text-color-light);
@@ -1395,10 +1500,11 @@
-