experimenting with main page redesign
This commit is contained in:
partisan
parent
de2aaf117c
commit
9892760ada
3 changed files with 146 additions and 27 deletions
|
|
@ -67,13 +67,10 @@
|
|||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
|
@ -549,8 +546,9 @@ hr {
|
|||
margin: 0 auto;
|
||||
background: var(--search-bg-input);
|
||||
border-radius: 22px;
|
||||
position: absolute;
|
||||
width: 520px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
overflow: hidden;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -1891,6 +1889,99 @@ body, h1, p, a, input, button {
|
|||
color: var(--link) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Center the entire search page content */
|
||||
.search-page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Center the logo */
|
||||
.search-page-content h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Style for the search input */
|
||||
#search-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Style for the search button inside the search bar */
|
||||
#search-wrapper-ico {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Styles for the search type icons */
|
||||
.search-type-icons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* Style for each icon button */
|
||||
.icon-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Style for the icons */
|
||||
.icon-button .material-icons-round {
|
||||
font-size: 48px; /* Adjust the size of the icons */
|
||||
color: var(--sub-search-wrapper-ico);
|
||||
}
|
||||
|
||||
/* Style for the labels under icons */
|
||||
.icon-button p {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--sub-search-wrapper-ico);
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.icon-button:hover .material-icons-round {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.icon-button:hover p {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
/* Remove button default focus outline */
|
||||
.icon-button button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.material-icons-round {
|
||||
font-family: 'Material Icons Round';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/*
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -170,11 +170,11 @@ document.addEventListener('click', (event) => {
|
|||
}
|
||||
});
|
||||
|
||||
// Update visual feedback for selected type on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const activeButton = document.querySelector(`[name="t"][value="${selectedType}"]`);
|
||||
if (activeButton) {
|
||||
typeButtons.forEach(btn => btn.classList.remove('search-active'));
|
||||
activeButton.classList.add('search-active');
|
||||
}
|
||||
});
|
||||
// // Update visual feedback for selected type on page load
|
||||
// document.addEventListener("DOMContentLoaded", () => {
|
||||
// const activeButton = document.querySelector(`[name="t"][value="${selectedType}"]`);
|
||||
// if (activeButton) {
|
||||
// typeButtons.forEach(btn => btn.classList.remove('search-active'));
|
||||
// activeButton.classList.add('search-active');
|
||||
// }
|
||||
// });
|
||||
|
|
|
|||
|
|
@ -83,20 +83,48 @@
|
|||
</div>
|
||||
</div>
|
||||
<form action="/search" class="search-container" method="post" autocomplete="off">
|
||||
<div class="search-page-content">
|
||||
<h1>Ocásek</h1>
|
||||
<div class="wrapper">
|
||||
<input type="text" name="q" autofocus id="search-input" placeholder="Type to search..." />
|
||||
<button id="search-wrapper-ico" class="material-icons-round" name="t" value="text" type="submit">search</button>
|
||||
<input type="text" name="q" autofocus id="search-input"/> <!-- placeholder="Type to search..." -->
|
||||
<button id="search-wrapper-ico" class="material-icons-round" name="t" value="web" type="submit">search</button>
|
||||
<div class="autocomplete">
|
||||
<ul>
|
||||
</ul>
|
||||
<ul></ul>
|
||||
</div>
|
||||
<!-- <a id="clearSearch" class="material-icons-round">close</a> -->
|
||||
</div>
|
||||
<div class="search-button-wrapper">
|
||||
<div class="search-type-icons">
|
||||
<input type="hidden" name="p" value="1">
|
||||
<button name="t" value="text" type="submit">Search Text</button>
|
||||
<button name="t" value="image" type="submit">Search Images</button>
|
||||
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="text">search</button>
|
||||
<p>Web</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="image">image</button>
|
||||
<p>Images</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="video">movie</button>
|
||||
<p>Videos</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="forum">forum</button>
|
||||
<p>Forums</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="map">map</button>
|
||||
<p>Maps</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-button">
|
||||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="file">share</button>
|
||||
<p>Files</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue