mirror of
https://github.com/IdleEndeavor/gamesearch.git
synced 2025-04-29 22:24:33 +02:00
Mobile Devices Support Revamped
- removed old @media query variables - moved engine selector to bottom of screen on mobile devices - additional info floating button now hidden on mobile devices - sidebar now hidden on mobile devices - share buttons below search bar removed - added custom share buttons only visible on mobile devices at the top of the screen
This commit is contained in:
IdleEndeavor
parent
24a2f39dcf
commit
053e2d34cc
@ -25,36 +25,6 @@ html, body {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.maindiv {
|
|
||||||
margin: auto;
|
|
||||||
position: relative;
|
|
||||||
text-align: left;
|
|
||||||
top: 25%;
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.maindiv img {
|
|
||||||
max-width: 85%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adminActions {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Search Box */
|
/* Search Box */
|
||||||
.searchbox {
|
.searchbox {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
@ -63,7 +33,6 @@ html, body {
|
|||||||
.search {
|
.search {
|
||||||
text-align: centre;
|
text-align: centre;
|
||||||
padding-top: 150px;
|
padding-top: 150px;
|
||||||
width: auto;
|
|
||||||
width: 60%;
|
width: 60%;
|
||||||
margin: 0 auto 0 auto;
|
margin: 0 auto 0 auto;
|
||||||
animation: slidein 0.3s ease;
|
animation: slidein 0.3s ease;
|
||||||
@ -626,4 +595,68 @@ html, body {
|
|||||||
|
|
||||||
.nav__icon {
|
.nav__icon {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.maindiv {
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
|
top: 25%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maindiv img {
|
||||||
|
max-width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
top: unset;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sharemobile {
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-button-mobile {
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
flex-basis: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-button-mobile img {
|
||||||
|
width: 40px;
|
||||||
|
height: auto;
|
||||||
|
margin: 0 10px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adminActions {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
.sharemobile {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -27,6 +27,15 @@
|
|||||||
<noscript>
|
<noscript>
|
||||||
<div id="noscript-warning">Rave Game Search uses Javascript to provide its search results. Kindly enable Javascript on your browser and reload the page to restore usability.</div>
|
<div id="noscript-warning">Rave Game Search uses Javascript to provide its search results. Kindly enable Javascript on your browser and reload the page to restore usability.</div>
|
||||||
</noscript>
|
</noscript>
|
||||||
|
<div class="sharemobile">
|
||||||
|
<div class="share-button-mobile">
|
||||||
|
<a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fravegamesearch.pages.dev&text=Rave%20Game%20Search:%20http%3A%2F%2Fravegamesearch.pages.dev" target="_blank" title="Tweet"><img alt="Tweet" src="img/social-icons/Twitter.png" /></a>
|
||||||
|
<a href="http://www.tumblr.com/share?v=3&u=http%3A%2F%2Fravegamesearch.pages.dev"e=Rave%20Game%20Search&s=" target="_blank" title="Post to Tumblr"><img alt="Post to Tumblr" src="img/social-icons/Tumblr.png" /></a>
|
||||||
|
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fravegamesearch.pages.dev&media=https://ravegamesearch.pages.dev/img/ravesearch-homepage-pic.png&description=An%20adaptation%20of%20the%20r%2Fpiracy%20Megathread.%20Rave%20Game%20Search%20helps%20you%20find%20free%20and%20safe%20download%20links%20to%20your%20favourite%20video%20games%20in%20a%20fast%20and%20easy%20to%20use%20UI." target="_blank" title="Pin it"><img alt="Pin it" src="img/social-icons/Pinterest.png" /></a>
|
||||||
|
<a href="http://www.reddit.com/submit?url=http%3A%2F%2Fravegamesearch.pages.dev&title=Rave%20Game%20Search" target="_blank" title="Submit to Reddit"><img alt="Submit to Reddit" src="img/social-icons/Reddit.png" /></a>
|
||||||
|
<a href="mailto:?subject=Rave%20Game%20Search&body=An%20adaptation%20of%20the%20r%2Fpiracy%20Megathread.%20Rave%20Game%20Search%20helps%20you%20find%20free%20and%20safe%20download%20links%20to%20your%20favourite%20video%20games%20in%20a%20fast%20and%20easy%20to%20use%20UI.:%20http%3A%2F%2Fravegamesearch.pages.dev" target="_blank" title="Send email"><img alt="Send email" src="img/social-icons/Email.png" /></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user