1.5

public/CHANGELOG.md

@@ -1,6 +1,22 @@
 Infinity-Squared CHANGELOG
 ==========================
 
+1.5 (August 2013)
+-----------------
+Big changes:
+* Internationalisation! See Wiki for instructions on how to use Infinity Squared in your language and translate it for other people to use.
+* A proper CSS mobile interface. When I tried to add internationalisation, it quickly became apparent that having two code bases was stupid.
+
+Bug fixes:
+* HTML5 doctype
+* Upgraded to qTip2
+* Including jQuery and qTip from CDN
+* No longer loading G+ code if it's not enabled
+* Parallel loading of scripts thanks to Chrome's audits
+* Rearranged the CSS so that it's more readable
+
+Many thanks to [Ozh](http://ozh.org) for help with internationalisation
+
 1.4 (February 2013)
 -------------------
 * Bookmarklets updated to the code relevant to YOURLS 1.6

public/README.md

@@ -1,11 +0,0 @@
-*DO NOT update to Infinity Squared 1.4 without upgrading your YOURLS installation to 1.6*
-
-Infinity Squared
-================
-A beautiful theme for YOURLS, carefully crafted by [Tom Slominski](http://tomslominski.net/).
-
-See the project's [Wiki pages](https://github.com/tomslominski/infinity-squared) at GitHub for the latest installation and upgrade instructions.
-
-qTip 2 is dual licensed under [MIT](http://en.wikipedia.org/wiki/MIT_License) or [GPLv2](http://en.wikipedia.org/wiki/GNU_General_Public_License) licenses.
-
-Formalize, jQuery and the Infinity Squared itself are also licenced on GPLv2.

public/config.php

@@ -4,7 +4,7 @@
 ISQ::$general = array(
 	'name' => 'kwl.me', // The name of your URL shortener
 	'qr' => 1, // Do you want to display a QR code?
-	'mobile' => 1 // Do you want to enable the mobile version?
+	'mobile' => 0 // Do you want to enable the mobile version?
 );
 
 // Menu- The width of ∞² menu allows you to have about 10 links

public/mobile.css

@@ -1,79 +0,0 @@
-body {
-	background:white;
-	color:#000;
-	font-family:'Ubuntu', sans-serif, Helvetica, Arial;
-	font-size: 62.5%;
-	width:100%;
-	margin:0;
-}
-a {
-	color:#013F6D;
-	text-decoration:none;
-}
-a:visited {
-	color:#013F6D;
-	text-decoration:none;
-}
-p {
-	font-size: 1.2em;
-}
-h1 {
-	background: url(img/noise.png) #013F6D;
-	width:100%;
-	text-align:center;
-	color:white;
-	font-size:7em;
-	border-top:4px #000 solid;
-	margin:0;
-	top:0
-}
-h1 a, h1 a:visited {
-	color:white;
-}
-/* Menu */
-.menu {
-	background: #000000; /* Old browsers */
-	background: -moz-linear-gradient(top,  #000000 0%, #141414 100%); /* FF3.6+ */
-	background: -webkit-linear-gradient(top,  #000000 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
-	background: -o-linear-gradient(top,  #000000 0%,#141414 100%); /* Opera 11.10+ */
-	background: -ms-linear-gradient(top,  #000000 0%,#141414 100%); /* IE10+ */
-	background: linear-gradient(to bottom,  #000000 0%,#141414 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
-	display: block;
-	float: left;
-	margin:0;
-	padding:0;
-	width:100%;
-	color:#FFF;
-	font-size:1.2em;
-	border-bottom:1px grey solid;
-	margin-bottom:4%;
-}
-.menu a {
-	color: #FFF;
-	text-decoration: none;
-	display: block;
-}
-.menu li {
-	list-style: none;
-	float: left;
-	line-height:38px;
-	padding: 1% 3%;
-}
-
-/* Getting down to business */
-.paragraph {
-	padding-left: 2%;
-}
-input {
-	width:98%;
-	margin-top:-10px;
-}
-
-/* Footer */
-footer {
-	padding-left: 2%;
-	line-height:150%;
-	margin-bottom:0;
-	text-align:center;
-}

public/style.css

@@ -1,121 +1,139 @@
-/* Main */
-body {
-	background:#F1F1F1;
-	color:#000;
-	font-family:'Ubuntu', sans-serif, Helvetica, Arial;
-	font-size: 62.5%;
-}
+/*
+Infinity Squared CSS
+https://github.com/tomslominski/infinity-squared
+*/
+
+/* General */
 ::selection {
-	background: #013F6D; /* Safari */
-	color:#FFF;
+	background: rgba(1,63,109,0.7);
+	color: #FFF;
 }
+
+input::selection {
+	background: rgba(1,63,109,0.7);
+	color: #FFF;
+}
+
 ::-moz-selection {
-	background: #013F6D; /* Firefox */
-	color:#FFF;
+	background: rgba(1,63,109,0.7);
+	color: #FFF;
 }
-h2 {
-	color:#000;
-	margin-bottom:-8px;
+
+input::-moz-selection {
+	background: rgba(1,63,109,0.7);
+	color: #FFF;
 }
-a {
-	color:#013F6D;
-	text-decoration:none;
-}
-a:visited {
-	color:#013F6D;
-	text-decoration:none;
+
+a, a:visited, .footer a, .footer a:visited {
+	color: #013F6D;
+	text-decoration: none;
 }
+
 p {
 	font-size: 1.2em;
 }
+
+/* Structure */
+body {
+	background: #F1F1F1;
+	color: black;
+	font-family: 'Ubuntu', sans-serif, Helvetica, Arial;
+	font-size: 62.5%;
+}
+
+#container {
+	width: 60%;
+	min-width: 720px;
+	margin: 0 auto;
+	background-color: white;
+}
+
 /* Header */
-.header {
-	width:95%;
-	padding:2.5%;
+header {
+	width: 95%;
+	padding: 2.5%;
 	margin: 0 auto;
 }
+
 h1 {
 	background: url(img/noise.png) #013F6D;
-	width:100%;
-	text-align:center;
-	color:#FFFFFF;
-	font-size:7em;
-	border-top:4px #000 solid;
-	margin-top:0;
-	margin-bottom:0;
+	width: 100%;
+	text-align: center;
+	color: white;
+	font-size: 7em;
+	border-top: 4px #000 solid;
+	margin: 0 auto;
 }
-h1 a {
-	color:#FFF;
-	text-decoration:none;
+
+h1 a, h1 a:visited {
+	color: white;
+	text-decoration: none;
 }
+
 h1 a:hover {
 	border-bottom: #FFF 1px dashed;
 }
-h1 a:visited {
-	color:#FFF;
-	text-decoration:none;
-}
+
 .menu {
 	background: #000000; /* Old browsers */
 	background: -moz-linear-gradient(top,  #000000 0%, #141414 100%); /* FF3.6+ */
 	background: -webkit-linear-gradient(top,  #000000 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
 	background: -o-linear-gradient(top,  #000000 0%,#141414 100%); /* Opera 11.10+ */
-	background: -ms-linear-gradient(top,  #000000 0%,#141414 100%); /* IE10+ */
 	background: linear-gradient(to bottom,  #000000 0%,#141414 100%); /* W3C */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
 	display: block;
 	float: left;
 	margin: 0 auto;
-	width:96%;
-	color:#FFF;
+	width: 96%;
+	color: white;
 	padding: 0 2% 0 2%;
-	margin-bottom:30px;
-	font-size:1.2em;
+	margin-bottom: 30px;
+	font-size: 1.2em;
 }
+
 .menu a {
 	color: #FFF;
 	text-decoration: none;
-	line-height:38px;
+	line-height: 38px;
 	display: block;
 	padding: 0 10px;
-	background:none;
+	background: none;
 	transition: background 800ms;
 	-moz-transition: background 800ms; /* Firefox 4 */
 	-webkit-transition: background 800ms; /* Safari and Chrome */
 	-o-transition: background 800ms; /* Opera */
 }
+
 .menu a:hover {
 	transition: background 800ms;
 	-moz-transition: background 800ms; /* Firefox 4 */
 	-webkit-transition: background 800ms; /* Safari and Chrome */
 	-o-transition: background 800ms; /* Opera */
-	background:#292929;
+	background: #292929;
 }
+
 .menu li {
 	list-style: none;
 	float: left;
-	line-height:38px;
-	width:auto;
-}
-/* Container */
-#container {
-	width: 60%;
-	min-width:720px;
-	margin-left: auto;
-	margin-right: auto; 
-	background-color: #FFF;
-	margin-top: 20px;
+	line-height: 38px;
+	width: auto;
 }
+
+/* Main style */
 .paragraph {
-	padding:0 2.5% 0 2.5%;
+	padding: 0 2.5% 0 2.5%;
 }
+
+h2 {
+	color: black;
+	margin-bottom: -8px;
+}
+
 .right {
 	width: 60%;
 	float: right;
 }
-div.bookmarklet {
-	width:20%;
-}
+
 a.bookmarklet {
 	border-radius: 11px;
 	background: #ddd url(../img/button.png) repeat-x;
@@ -130,73 +148,80 @@ a.bookmarklet {
 	overflow: visible;
 	padding: 3px 10px 4px;
 	text-shadow: #fff 0 1px 1px;
-	text-decoration:none;
-	margin-right:2%;
+	text-decoration: none;
+	margin-right: 2%;
 }
+
 /* Tooltips */
-.qtip-default, .qtip-default:after {
+.qtip-default {
 	border-color: #013F6D;
 	background-color: #013F6D;
 	color: #FFF;
 }
+
 .ui-tooltip-titlebar,
 .ui-tooltip-content{
 	border-color: #013F6D;
 	background-color: #013F6D;
 	color: #FFF;
 }
+
 /* Output */
-.output {
-	border: 3px #013F6D solid;
-	padding: 4px;
-	background: url(img/noise.png);
-	border-radius: 10px;
-	width:600px;
+.output label {
+	width: 30%;
+	float: left;
 }
-.output p {
-	margin:2px;
+
+.output input {
+	width: 70%
 }
-.output a, .output a:visited {
-	color:#013F6D;
-	text-decoration:none;
-}
-.output a:hover {
-	border-bottom: #013F6D 1px dashed;
-}
-.share-button, .twitter-share-button {
-	padding-right:3px;
+
+.error {
+	color: red;
 }
+
 /* Footer */
 .footer {
-	text-align:center;
-	border-top:3px solid #000;
-	margin-top:30px;
+	text-align: center;
+	border-top: 2px solid #000;
+	margin-top: 30px;
 }
+
 .footer p {
-	padding:20px 2% 20px 2%;
-	padding:20px 2% 20px 2%;
-	margin:0 auto;
-}
-.footer a {
-	color:#013F6D;
+	padding: 2%;
+	margin: 0 auto;
+	font-size: 1.1em;
 }
+
 .footer a:hover {
-	text-decoration:none;
-	border-bottom:dashed 1px #013F6D;
+	text-decoration: none;
+	border-bottom: dashed 1px #013F6D;
 }
-.footer a:visited {
-	color:#013F6D;
+
+/* Mobile */
+@media screen and (max-width: 720px) {
+body {
+	background:white;
+	margin:0;
 }
-/* Other */
-div#copybox {
-	width:600px;
-	height:auto;
+
+#container {
+	min-width:0;
+	width:100%;
+	margin:0;
+	padding:0;
 }
-div#sharebox {
-	height:auto;
-	width:600px;
-	margin-top: 20px
+
+header {
+	width:100%;
+	padding:0;
+}
+
+.menu li {
+	margin-top:0;
+}
+
+.desktop-only {
+	display:none;
 }
-.error {
-	color:red;
 }