Skip to content
This repository has been archived by the owner on Apr 30, 2024. It is now read-only.

Commit

Permalink
fix: responsive design
Browse files Browse the repository at this point in the history
  • Loading branch information
@ct0l4
ct0l4 committed Dec 25, 2023
1 parent fa38532 commit 863b6c1
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 37 deletions.
13 changes: 8 additions & 5 deletions _includes/bin_table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<h1 id="page-title">Welcome to the hacker zone! Enjoy playing with our <span id="total-vms"></span> machines!</h1>
<article class="project-info">
<div class="media-links">
<a title="Support us on Ko-fi" href="https://ko-fi.com/vulnyx">
<a title="Support us on Ko-fi" href="https://ko-fi.com/vulnyx" target="_blank">
<img width="28" height="24" loading="lazy" src="https://storage.ko-fi.com/cdn/kofi_stroke_cup.svg" alt="Ko-fi Logo" loading="eager">
</a>
<a title="Discord" href="https://discord.gg/qdm3bN3Emb" target="_blank">
Expand Down Expand Up @@ -289,14 +289,14 @@ <h1 class="submit-vm">New VM Submission</h1>
<div class="tooltip">Copied!</div>
</td>
{% if data[1].firstUser %}
<td class="first-user">$ {{ data[1].firstUser }}</td>
<td class="first-user">{{ data[1].firstUser }}</td>
{% else %}
<td class="first-user">
<button type="button" class="submit-user-flag" title="Submit flag" onclick="showFlagForm('user', '{{ data[1].name }}')">Submit Flag</button>
</td>
{% endif %}
{% if data[1].firstRoot %}
<td class="first-root"># {{ data[1].firstRoot }}</td>
<td class="first-root">{{ data[1].firstRoot }}</td>
{% else %}
<td class="first-root">
<button type="button" class="submit-root-flag" title="Submit flag" onclick="showFlagForm('root', '{{ data[1].name }}')">Submit Flag</button>
Expand All @@ -322,7 +322,7 @@ <h1 class="submit-vm">New VM Submission</h1>
<line x1="21" y1="6" x2="21" y2="19" />
</svg>
</button>
<button class="writeup-btn" title="Add writeup" onclick="showWriteupForm('{{ data[1].name }}')">
<button class="add-writeup-btn" title="Add writeup" onclick="showWriteupForm('{{ data[1].name }}')">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="24" height="24"
viewBox="0 0 24 24" stroke-width="1.5" stroke="#00b341" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
Expand Down Expand Up @@ -351,7 +351,7 @@ <h1 class="writeup-title"></h1>
<line x1="21" y1="6" x2="21" y2="19" />
</svg>
</span>
<button class="writeup-btn" title="Add writeup" onclick="showWriteupForm('{{ data[1].name }}')">
<button class="add-writeup-btn" title="Add writeup" onclick="showWriteupForm('{{ data[1].name }}')">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="24" height="24"
viewBox="0 0 24 24" stroke-width="1.5" stroke="#00b341" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
Expand Down Expand Up @@ -453,6 +453,9 @@ <h1 class="submit-flag"></h1>
</section>
</main>
<footer>
<div class="footer-logo">
<img src="assets/logoSM.png" alt="VulNyx small footer logo" loading="lazy">
</div>
<p>© VulNyx 2023. All rights reserved.</p>
</footer>
<script>
Expand Down
90 changes: 58 additions & 32 deletions assets/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ main {

.wrapper {
width: 90vw;
margin: 1rem 0;
margin: 2rem 0;
}

.actions {
Expand Down Expand Up @@ -240,7 +240,11 @@ main {
gap: 0.5rem;
}

.filter-by, .order-by {
.order-by {
display: none;
}

.filter-by {
display: flex;
align-items: center;
cursor: pointer;
Expand Down Expand Up @@ -294,13 +298,13 @@ main {
.clear-search {
display: none;
position: absolute;
right: 6px;
right: 116px;
padding: 0.15rem;
border-radius: 0.25rem;
cursor: pointer;
background-color: #c8cbcf;
border: 1px solid transparent;
top: 33px;
top: 6px;
}

#bin-search {
Expand Down Expand Up @@ -528,7 +532,7 @@ details {
justify-content: center;
}

.writeup-btn {
.writeup-btn, .add-writeup-btn {
border: none;
background-color: inherit;
cursor: pointer;
Expand Down Expand Up @@ -894,13 +898,26 @@ footer {

footer p {
text-align: center;
margin-top: 1rem;
}

.footer-logo {
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}

.footer-logo img {
width: 50px;
height: 50px;
}

@media (min-width: 320px) and (max-width: 700px) {
header {
display: flex;
flex-direction: column;
/* align-items: center; */
justify-content: center;
gap: 0.5rem;
}
Expand All @@ -909,50 +926,65 @@ footer p {
margin-top: 1rem;
}

.wrapper, .header-container, .form-container {
width: 95vw;
}

.header-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
}

.card,
#card,
.tested,
#tested,
.url,
.md5,
#md5,
.first-user,
.first-root {
.first-root,
.size,
.submit-btn,
.add-writeup-btn {
display: none;
}

#bin-search {
width: 160px;
}

th, td, .level-btn, .badge {
padding: 0.25rem;
padding: 0.5rem;
font-size: 0.85rem;
}

.form-container {
width: 95vw;
#page-title {
font-size: 0.9rem;
width: 30ch;
}

#total-vms {
font-size: 1rem;
}

.actions {
height: 125px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}

#bin-search-wrapper {
max-width: 150px;
}

.vm-stats {
gap: 0.75rem
}

.filters {
align-items: center;
justify-content: start;
justify-content: end;
}

.filter-by, .order-by, #bin-search {
padding: 0.5rem;
}

#bin-search {
padding-left: 2rem;
.vm-stats, .filters {
gap: 0.25rem;
}

.card-container {
Expand All @@ -979,12 +1011,6 @@ footer p {
}
}

@media (min-width: 300px) and (max-width: 1500px) {
.wrapper, .header-container {
width: 95vw;
}
}

@media (min-width: 1600px) {
.wrapper, .header-container {
width: 80vw;
Expand Down

0 comments on commit 863b6c1

Please sign in to comment.