zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-25 01:32:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #473 from nottnottloop/cssimprovements2

Browse source 
Improve responsiveness for mobile screens for sites with large site stats
This commit is contained in:
Kyle Drake 2024-01-22 09:07:01 -06:00 • committed by GitHub
commit 2e2ddec790
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 39 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
sass/_project-sass/_project-Main.scss
View file

@ -1127,6 +1127,25 @@ a.tag:hover {
margin-left: 0; margin-left: 0;
} }
} }
.interior .header-Outro .col.col-50.signup-Area.site-display-preview-wrapper {
@media (max-device-width:480px), screen and (max-width:800px) {
padding: 0 7%;
}
}
.interior .header-Outro .site-display-preview {
@media (max-device-width:480px), screen and (max-width:800px) {
margin: 0 auto 5px;
}
}
.interior .header-Outro .site-info-row {
@media (max-device-width:480px), screen and (max-width:800px) {
padding: 20px 0%;
}
}
.interior .header-Outro .stats { .interior .header-Outro .stats {
margin-bottom: 1.3em; margin-bottom: 1.3em;
float: left; float: left;
@ -1134,18 +1153,32 @@ a.tag:hover {
margin-top: 1.9em; margin-top: 1.9em;
@media (max-device-width:480px), screen and (max-width:800px) { @media (max-device-width:480px), screen and (max-width:800px) {
float: none;
width: 270px;
margin: 0.9em auto 5.5em auto;
text-align: center; text-align: center;
margin-top: 0.5em;
display: flex;
justify-content: center;
} }
} }
.interior .header-Outro .stats .tips { .interior .header-Outro .stats .tips {
@media (max-device-width:480px), screen and (max-width:800px) { @media (max-device-width:480px), screen and (max-width:800px) {
display: none; display: none;
} }
} }
.interior .header-Outro .stats .stat {
float: left;
text-align: center;
margin-right: 28px;
color: #84997E;
@media (max-device-width:480px), screen and (max-width:800px) {
margin: 0;
width: fit-content;
min-width: 90px;
}
}
.interior .header-Outro .stats strong { .interior .header-Outro .stats strong {
font-size: 1.5em; font-size: 1.5em;
font-weight: normal; font-weight: normal;
@ -1157,17 +1190,7 @@ a.tag:hover {
clear: both; clear: both;
display: block; display: block;
} }
.interior .header-Outro .stats .stat {
float: left;
text-align: center;
margin-right: 28px;
color: #84997E;
@media (max-device-width:480px), screen and (max-width:800px) {
margin: 0;
width: 90px;
}
}
.interior .header-Outro .stats .stat.tips { .interior .header-Outro .stats .stat.tips {
width: 60px; width: 60px;
} }

6
views/site.erb
View file

@ -8,9 +8,9 @@
</div> </div>
</div> </div>
<% end %> <% end %>
<div class="row content"> <div class="row content site-info-row">
<div class="col col-50 signup-Area large"> <div class="col col-50 signup-Area site-display-preview-wrapper large">
<div class="signup-Form"> <div class="signup-Form site-display-preview">
<fieldset class="content"> <fieldset class="content">
<a href="<%= site.uri %>" class="screenshot" style="background-image:url(<%= site.screenshot_url('index.html', '540x405') %>);"></a> <a href="<%= site.uri %>" class="screenshot" style="background-image:url(<%= site.screenshot_url('index.html', '540x405') %>);"></a>
</fieldset> </fieldset>