supleed2/udlink-docs
1
0
Fork 0
mirror of https://github.com/supleed2/udlink-docs.git synced 2024-12-22 14:15:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add small-screen view: @media (width < 600px)

Browse source 
Also add dynamic search box size
Also remove note about mobile view issues
This commit is contained in:
Aadi Desai 2023-11-12 22:30:32 +00:00
parent f6d3b031aa
commit e0c818b68b
Signed by: supleed2
SSH key fingerprint: SHA256:CkbNRs0yVzXEiUp2zd0PSxsfRUMFF9bLlKXtE1xEbKM
2 changed files with 41 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -115,9 +115,6 @@
<div class="options-description"> <div class="options-description">
<p>Use the default gateway (checked and updated if the current default gateway stops working in the future), <p>Use the default gateway (checked and updated if the current default gateway stops working in the future),
select a specific gateway, or use one of the extra features like Opensea or Block Explorer linking</p> select a specific gateway, or use one of the extra features like Opensea or Block Explorer linking</p>
<br>
<p><b>Note:</b> the formatting of this page is currently <u>very</u> broken on mobile, and is being actively
worked on.</p>
</div> </div>
<br> <br>
<a href="#"> <a href="#">

44
styles.css
View file

@ -120,8 +120,7 @@ body::-webkit-scrollbar {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
background-color: var(--input-box-bg-colour); background-color: var(--input-box-bg-colour);
color: var(--accent-colour); color: var(--accent-colour);
width: calc(300px - var(--input-prefix-width)); width: calc(max(300px, 50vw) - var(--input-prefix-width));
/* TODO: make dynamic */
padding: 8px; padding: 8px;
font-size: 16px; font-size: 16px;
border: none; border: none;
@ -288,4 +287,43 @@ body::-webkit-scrollbar {
margin: 0px 10%; margin: 0px 10%;
} }
/* TODO: @media (width < 600px) { stuff to change format of input box } */ @media screen and (width < 450px) {
.scroll-button {
display: none;
}
.input-container {
flex-direction: row;
flex-wrap: wrap;
width: calc(100% - 50px);
}
.input-prefix {
border-right: none;
border-bottom: var(--input-box-border);
align-items: center;
width: 100%;
border-radius: var(--input-box-border-radius) var(--input-box-border-radius) 0 0;
justify-content: center;
}
.user-input {
width: 100%;
text-align: center;
}
.input-button {
border-top: var(--input-box-border);
width: 50%;
}
.last-button {
border-left: var(--input-box-border);
border-radius: 0 0 var(--input-box-border-radius) 0;
}
#copy-button {
border-left: none;
border-radius: 0 0 0 var(--input-box-border-radius);
}
}