d13forme/infinity-squared
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Small screen optimisation

Browse Source
This commit is contained in:
Tom Slominski
2015-03-22 14:58:56 +00:00
parent 298076d38f
commit f4265e77a9
2 changed files with 43 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
header.php
View File

@@ -25,7 +25,7 @@ isq_load_textdomain();
<title><?php echo ISQ::$general['name']; ?></title> <!-- Site title defined in theme settings --> <title><?php echo ISQ::$general['name']; ?></title> <!-- Site title defined in theme settings -->
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="<?php echo YOURLS_SITE; ?>/public/style.css" /><!-- Theme CSS --> <link rel="stylesheet" href="<?php echo YOURLS_SITE; ?>/public/style.css" /><!-- Theme CSS -->
<!-- App icons generated using http://realfavicongenerator.net --> <!-- App icons generated using http://realfavicongenerator.net -->

46
public/style.css
View File

@@ -32,6 +32,16 @@ body, input {
color: #FFF; color: #FFF;
} }
.desktop-only {
display: none;
}
@media screen and (min-width: 1024px) {
.desktop-only {
display: inline-block;
}
}
/* Structure and global design */ /* Structure and global design */
a, a:visited { a, a:visited {
color: #013F6D; color: #013F6D;
@@ -39,8 +49,9 @@ a, a:visited {
} }
.wrapper { .wrapper {
width: 60%; width: 100%;
margin: 0 auto; margin: 0 auto;
max-width: 900px;
} }
.content { .content {
@@ -55,6 +66,18 @@ a, a:visited {
display: none; display: none;
} }
@media screen and (min-width: 720px) {
.wrapper {
width: 80%;
}
}
@media screen and (min-width: 1024px) {
.wrapper {
width: 60%;
}
}
/* Header */ /* Header */
.site-header { .site-header {
margin: 0 auto; margin: 0 auto;
@@ -66,9 +89,10 @@ a, a:visited {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: white; color: white;
font-size: 6rem; font-size: 4rem;
border-top: 4px #000 solid; border-top: 4px #000 solid;
margin: 0 auto; margin: 0 auto;
font-weight: bold;
} }
.site-title a, .site-tite a:visited { .site-title a, .site-tite a:visited {
@@ -101,6 +125,18 @@ a, a:visited {
background: #292929; background: #292929;
} }
@media screen and (min-width: 720px) {
.site-title {
font-size: 5rem;
}
}
@media screen and (min-width: 1024px) {
.site-title {
font-size: 6rem;
}
}
/* Forms */ /* Forms */
.form-item { .form-item {
padding: 10px 0; padding: 10px 0;
@@ -150,6 +186,8 @@ input:not([type=submit]):not([type=file]) {
border: 1px solid #D8D8D8; border: 1px solid #D8D8D8;
margin-top: 5px; margin-top: 5px;
transition: box-shadow 0.5s, border 0.5s; transition: box-shadow 0.5s, border 0.5s;
-webkit-appearance: none;
border-radius: 0;
} }
.g-recaptcha { .g-recaptcha {
@@ -298,7 +336,7 @@ a.icon-github:hover {
} }
/* Mobile */ /* Mobile */
@media screen and (max-width: 720px) { /*@media screen and (max-width: 720px) {
body { body {
background:white; background:white;
margin:0; margin:0;
@@ -323,7 +361,7 @@ header {
.desktop-only, .zclip { .desktop-only, .zclip {
display:none; display:none;
} }
} }*/
/* Error page */ /* Error page */
#wrap > h1 > a { #wrap > h1 > a {