Decreased header size some more and clickable logo
This commit is contained in:
Ryan
@@ -1,5 +1,9 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## Changes 4//13/2025
|
||||||
|
|
||||||
|
- Decreased header height some more and clickable logo.
|
||||||
|
|
||||||
## Changes 4/12/2025
|
## Changes 4/12/2025
|
||||||
|
|
||||||
- Moved Gallery view toggle button into header.
|
- Moved Gallery view toggle button into header.
|
||||||
|
|||||||
@@ -32,8 +32,8 @@ body {
|
|||||||
|
|
||||||
@media (min-width: 1300px) {
|
@media (min-width: 1300px) {
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
padding-left: 40px !important;
|
padding-left: 30px !important;
|
||||||
padding-right: 40px !important;
|
padding-right: 30px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -69,7 +69,7 @@ body {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 65px;
|
height: 55px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
background-color: #2196F3;
|
background-color: #2196F3;
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
@@ -82,28 +82,16 @@ body.dark-mode .header-container {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header-logo {
|
.header-logo {
|
||||||
max-height: 60px;
|
max-height: 50px;
|
||||||
width: auto;
|
width: auto;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-logo svg {
|
.header-logo svg {
|
||||||
height: 60px;
|
height: 50px;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
height: 80px;
|
|
||||||
padding: 0 20px;
|
|
||||||
background-color: #2196F3;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode header {
|
body.dark-mode header {
|
||||||
background-color: #1f1f1f;
|
background-color: #1f1f1f;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
|
||||||
|
|||||||
128
index.html
128
index.html
@@ -50,69 +50,71 @@
|
|||||||
<body>
|
<body>
|
||||||
<header class="header-container">
|
<header class="header-container">
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<div class="header-logo">
|
<a href="index.html">
|
||||||
<svg version="1.1" id="filingCabinetLogo" xmlns="http://www.w3.org/2000/svg"
|
<div class="header-logo">
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" xml:space="preserve">
|
<svg version="1.1" id="filingCabinetLogo" xmlns="http://www.w3.org/2000/svg"
|
||||||
<defs>
|
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" xml:space="preserve">
|
||||||
<!-- Gradient for the cabinet body -->
|
<defs>
|
||||||
<linearGradient id="cabinetGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
<!-- Gradient for the cabinet body -->
|
||||||
<stop offset="0%" style="stop-color:#2196F3;stop-opacity:1" />
|
<linearGradient id="cabinetGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
<stop offset="100%" style="stop-color:#1976D2;stop-opacity:1" />
|
<stop offset="0%" style="stop-color:#2196F3;stop-opacity:1" />
|
||||||
</linearGradient>
|
<stop offset="100%" style="stop-color:#1976D2;stop-opacity:1" />
|
||||||
<!-- Drop shadow filter with animated attributes for a lifting effect -->
|
</linearGradient>
|
||||||
<filter id="shadowFilter" x="-20%" y="-20%" width="140%" height="140%">
|
<!-- Drop shadow filter with animated attributes for a lifting effect -->
|
||||||
<feDropShadow id="dropShadow" dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.2">
|
<filter id="shadowFilter" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
<!-- Animate the vertical offset: from 2 to 1 (as it rises), hold, then back to 2 -->
|
<feDropShadow id="dropShadow" dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.2">
|
||||||
<animate attributeName="dy" values="2;1;1;2" keyTimes="0;0.2;0.8;1" dur="5s" fill="freeze" />
|
<!-- Animate the vertical offset: from 2 to 1 (as it rises), hold, then back to 2 -->
|
||||||
<!-- Animate the blur similarly: from 2 to 1.5 then back to 2 -->
|
<animate attributeName="dy" values="2;1;1;2" keyTimes="0;0.2;0.8;1" dur="5s" fill="freeze" />
|
||||||
<animate attributeName="stdDeviation" values="2;1.5;1.5;2" keyTimes="0;0.2;0.8;1" dur="5s"
|
<!-- Animate the blur similarly: from 2 to 1.5 then back to 2 -->
|
||||||
fill="freeze" />
|
<animate attributeName="stdDeviation" values="2;1.5;1.5;2" keyTimes="0;0.2;0.8;1" dur="5s"
|
||||||
</feDropShadow>
|
fill="freeze" />
|
||||||
</filter>
|
</feDropShadow>
|
||||||
</defs>
|
</filter>
|
||||||
<style type="text/css">
|
</defs>
|
||||||
/* Cabinet with gradient, white outline, and drop shadow */
|
<style type="text/css">
|
||||||
.cabinet {
|
/* Cabinet with gradient, white outline, and drop shadow */
|
||||||
fill: url(#cabinetGradient);
|
.cabinet {
|
||||||
stroke: white;
|
fill: url(#cabinetGradient);
|
||||||
stroke-width: 2;
|
stroke: white;
|
||||||
}
|
stroke-width: 2;
|
||||||
|
}
|
||||||
.divider {
|
|
||||||
stroke: #1565C0;
|
.divider {
|
||||||
stroke-width: 1.5;
|
stroke: #1565C0;
|
||||||
}
|
stroke-width: 1.5;
|
||||||
|
}
|
||||||
.drawer {
|
|
||||||
fill: #FFFFFF;
|
.drawer {
|
||||||
}
|
fill: #FFFFFF;
|
||||||
|
}
|
||||||
.handle {
|
|
||||||
fill: #1565C0;
|
.handle {
|
||||||
}
|
fill: #1565C0;
|
||||||
</style>
|
}
|
||||||
<!-- Group that will animate upward and then back down once -->
|
</style>
|
||||||
<g id="cabinetGroup">
|
<!-- Group that will animate upward and then back down once -->
|
||||||
<!-- Cabinet Body with rounded corners, white outline, and drop shadow -->
|
<g id="cabinetGroup">
|
||||||
<rect x="4" y="4" width="56" height="56" rx="6" ry="6" class="cabinet" filter="url(#shadowFilter)" />
|
<!-- Cabinet Body with rounded corners, white outline, and drop shadow -->
|
||||||
<!-- Divider lines for drawers -->
|
<rect x="4" y="4" width="56" height="56" rx="6" ry="6" class="cabinet" filter="url(#shadowFilter)" />
|
||||||
<line x1="5" y1="22" x2="59" y2="22" class="divider" />
|
<!-- Divider lines for drawers -->
|
||||||
<line x1="5" y1="34" x2="59" y2="34" class="divider" />
|
<line x1="5" y1="22" x2="59" y2="22" class="divider" />
|
||||||
<!-- Drawers with Handles -->
|
<line x1="5" y1="34" x2="59" y2="34" class="divider" />
|
||||||
<rect x="8" y="24" width="48" height="6" rx="1" ry="1" class="drawer" />
|
<!-- Drawers with Handles -->
|
||||||
<circle cx="54" cy="27" r="1.5" class="handle" />
|
<rect x="8" y="24" width="48" height="6" rx="1" ry="1" class="drawer" />
|
||||||
<rect x="8" y="36" width="48" height="6" rx="1" ry="1" class="drawer" />
|
<circle cx="54" cy="27" r="1.5" class="handle" />
|
||||||
<circle cx="54" cy="39" r="1.5" class="handle" />
|
<rect x="8" y="36" width="48" height="6" rx="1" ry="1" class="drawer" />
|
||||||
<rect x="8" y="48" width="48" height="6" rx="1" ry="1" class="drawer" />
|
<circle cx="54" cy="39" r="1.5" class="handle" />
|
||||||
<circle cx="54" cy="51" r="1.5" class="handle" />
|
<rect x="8" y="48" width="48" height="6" rx="1" ry="1" class="drawer" />
|
||||||
<!-- Additional detail: a small top handle on the cabinet door -->
|
<circle cx="54" cy="51" r="1.5" class="handle" />
|
||||||
<rect x="28" y="10" width="8" height="4" rx="1" ry="1" fill="#1565C0" />
|
<!-- Additional detail: a small top handle on the cabinet door -->
|
||||||
<!-- Animate transform: rises by 2 pixels over 1s, holds for 3s, then falls over 1s (total 5s) -->
|
<rect x="28" y="10" width="8" height="4" rx="1" ry="1" fill="#1565C0" />
|
||||||
<animateTransform attributeName="transform" type="translate" values="0 0; 0 -2; 0 -2; 0 0"
|
<!-- Animate transform: rises by 2 pixels over 1s, holds for 3s, then falls over 1s (total 5s) -->
|
||||||
keyTimes="0;0.2;0.8;1" dur="5s" fill="freeze" />
|
<animateTransform attributeName="transform" type="translate" values="0 0; 0 -2; 0 -2; 0 0"
|
||||||
</g>
|
keyTimes="0;0.2;0.8;1" dur="5s" fill="freeze" />
|
||||||
</svg>
|
</g>
|
||||||
</div>
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-title">
|
<div class="header-title">
|
||||||
<h1 data-i18n-key="header_title">FileRise</h1>
|
<h1 data-i18n-key="header_title">FileRise</h1>
|
||||||
|
|||||||
Reference in New Issue
Block a user