quad
/
site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Attempt to make mobile slightly less shit

This commit is contained in:
Dominik V. Salonen 2018-03-14 14:26:50 +01:00
parent 0c1d197b86
commit e7ae800d6f
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<title>Quad's site</title> <title>Quad's site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" />
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />

11
style.css
View File

@ -14,12 +14,14 @@ h1, h2, h3, h4, h5, p {
background-color: #2b2b2b; background-color: #2b2b2b;
min-width: 100vw; min-width: 100vw;
min-height: 100vh; min-height: 100vh;
max-width: 100vw;
max-height: 100vh;
overflow: hidden;
margin: 0; margin: 0;
color: #FFF; color: #FFF;
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
} }
/* TODO: Add some @Media thing with smaller margin-top on vertical devices */
#content { #content {
display: block; display: block;
margin-right: auto; margin-right: auto;
@ -30,6 +32,13 @@ h1, h2, h3, h4, h5, p {
max-height: 50vh; max-height: 50vh;
} }
@media only screen and (max-device-width: 600px) {
#content {
margin-top: 10vh;
max-height: 75vh;
}
}
#main-container { #main-container {
background-color: #3b3b3b; background-color: #3b3b3b;
margin-top: 10px; margin-top: 10px;