Design changes mostly complete

TODO: Alerts

assets/less/_variables.less

@@ -12,8 +12,8 @@
 // Colours
 // -------------------
 
-@primaryColor: #69b5e1;
-@secondaryColor: #9d6ab4;
+@primaryColor: #24b9de;
+@secondaryColor: #000;
 
 @textColor: #000000;
-@baseColor: #EEEEEE;
+@baseColor: #ebebeb;

assets/less/base.less

@@ -36,10 +36,10 @@
 // Custom Styles
 // -------------------
 body {
- background-color: #ebebeb;
+ background-color: @baseColor;
+ display: none;
 }
 
-
 .verticle-center {
  min-height: 100%; /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-) */
@@ -50,19 +50,16 @@ body {
 .main-content {
  background-color: white;
  border-radius: 5px;
+ position: relative;
 }
 
-img {
+.logo {
  float: left;
  padding-top: 0.45em;
  padding-right: 1em;
 }
 
 .head-text {
- display: inline;
-}
-
-.head-text-container {
  display: flex;
 } 
 
@@ -74,46 +71,137 @@ img {
  width: 52%;
 }
 
-.url {
- background-color: #ebebeb;
-}
 
 .field-section {
  margin: auto;
  width: 80%;
+ padding-bottom: 1em;
+}
+
+.link-section {
+ margin: auto;
+ width: 60%;
+ padding-bottom: 1em;
 }
 
 input[type="text"] {
+ background-color: @baseColor;
  padding-right: 50px;
  display: inline;
  vertical-align: top;
- width: 80%;
+ width: 87%;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  height: 3em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
- color: #959595;
+ color: #000;
  text-transform: uppercase;
+ &:hover,:active, &:focus {
+ border: 1px solid @baseColor;
+ }
 }
 
-input[type="submit"] {
- background-color: #24b9de;
+input:focus::-webkit-input-placeholder { .transition(color 0.2s ease-in-out);color:transparent; }
+input:focus:-moz-placeholder { .transition(color 0.2s ease-in-out);color:transparent; } /* FF 4-18 */
+input:focus::-moz-placeholder { .transition(color 0.2s ease-in-out);color:transparent; } /* FF 19+ */
+input:focus:-ms-input-placeholder { .transition(color 0.2s ease-in-out);color:transparent; } /* IE 10+ */
+
+input::-webkit-input-placeholder { .transition(color 0.2s ease-in-out); }
+input:-moz-placeholder { .transition(color 0.2s ease-in-out); } /* FF 4-18 */
+input::-moz-placeholder { .transition(color 0.2s ease-in-out); } /* FF 19+ */
+input:-ms-input-placeholder { .transition(color 0.2s ease-in-out); } /* IE 10+ */
+
+input[type="submit"],
+.short-url-button {
+ background-color: @primaryColor;
  margin-left: -50px;
  height: 3em;
  width: 81px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
- width: 20%;
+ width: 22%;
  -webkit-border-radius: 0px 6px 6px 0px;
  -moz-border-radius: 0px 6px 6px 0px;
  border-radius: 0px 6px 6px 0px;
  .transition(background-color 0.2s ease-in-out);
  &:hover {
- background-color: darken(#24b9de, 10%);
+ background-color: darken(@primaryColor, 10%);
+ }
+}
+
+.short-url {
+ width: 80% !important;
+}
 
+.short-url-button {
+ width: 30% !important;
+}
+
+.footer {
+ position: fixed;
+ height: 2.2em;
+ padding-top: 0.8em;
+ color: black;
+ font-family: @headingFont;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 1em;
+ text-align: center;
+ z-index: 99999;
+ & span {
+ padding-right: 1.5em;
  }
+ a {
+ color: #a6a6a6;
+ .transition(color 0.1s ease-in-out);
+ &:hover {
+ text-decoration: none;
+ color: darken(#a6a6a6, 10%)
+ }
+ }
+} 
+
+.success-screen {
+ width: 100%;
+ height: 100%;
+ background-color: @primaryColor;
+}
+
+
+.info {
+ color: black;
+ display: inline-block;
+ width: 100%;
+ text-align: center;
+ font-family: Montserrat;
+ padding-bottom: 2em;
+}
+
+.close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 100px;
+ text-align:right;
+ padding: 0.3em;
+ a {
+ color: black;
+ }
+}
+
+.spin {
+ -webkit-transition: -webkit-transform .2s ease-in-out;
+ transition: transform .2s ease-in-out;
+}
+.spin:hover {
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+
+.light {
+ font-weight: 400;
 }

assets/less/desktop.less

@@ -33,5 +33,8 @@
  // Custom Styles
  // -------------------
 
+ input[type="submit"] {
+ width: 20%;
+ }
 
 }

assets/less/mobile.less

@@ -25,12 +25,36 @@
 @import "_variables.less"; // site variables
 @import "_mixins.less"; // grid and mixins
 
-@media (max-width: 767px) {
+@media (max-width: 500px) {
 
  @import "_layout.less";
 
 
  // Custom Styles
  // ------------------- 
-
+ .logo {
+ min-width: 100%;
+ padding-bottom: 1em;
+ }
+
+ .head {
+ text-align: center;
+ }
+
+ input[type="text"] {
+ width: 100%;
+ padding-right: 0;
+ }
+
+ input[type="submit"] {
+ width: 100%;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ margin-left: 0;
+ }
+
+ .footer {
+ font-size: 14px;
+ }
 }

assets/less/tablet.less

@@ -6,7 +6,7 @@
 // Grid Variables
 // -------------------
 
-@containerWidth: 768px;
+@containerWidth: 500px;
 @columnCount: 12;
 @gutterRatio: 25%;
 @paddingRatio: 100%;
@@ -25,12 +25,27 @@
 @import "_variables.less"; // site variables
 @import "_mixins.less"; // grid and mixins 
 
-@media (min-width: 768px) and (max-width: 959px) {
+@media (min-width: 501px) and (max-width: 959px) {
 
  @import "_layout.less";
 
 
  // Custom Styles
  // -------------------
-
+ .logo {
+ float: none;
+ }
+
+ input[type="text"] {
+ width: 100%;
+ padding-right: 0;
+ }
+
+ input[type="submit"] {
+ width: 40%;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ margin-left: 0;
+ }
 }

config.php

@@ -1,25 +1,37 @@
 <?php 
-// PHP Config - These control the look and details on your site. Consult documentation for more details.
-// GENERAL SETTINGS
-$siteTitle = "Sleeky for YOURLS"; // Title of the page.
-$siteDescription = "One of the most amazing YOURLS theme's in the world!"; // Description of your site for search engines.
-$siteName = "Sleeky"; // Name of your site. Used in the top section and footer. Example: Sleeky or Shorty or Linky. I think you get the point...
-$siteTagline = "The sleek public theme for YOURLS"; // The tagline of your site. Used underneath siteName in the top section.
-$siteUrl = "http://localhost:8888"; // The url of your site. Don't forgot to add http:// For example: http://shorturl.com or http://sho.rt
-$siteLogo = "/assets/img/logo.png"; // The small square logo displayed at the top of the page
-$siteLogoLarge = "/assets/img/logo-head.png"; // The rectangular logo displayed in navigation and footer.
-$siteFavicon = "/assets/img/favicon.ico"; // The favourite icon used by the browser for bookmarks. Must be a .ico file and 16px x 16px
-
-// About Area Settings
-$aboutHead = "About"; // About title at the top of the section.
-$aboutDescription = "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue."; // About description at the top of the section.
-
-$aboutPoint1 = "Clean"; // About Area Heading 1
-$aboutText1 = "Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod."; // 3 Column Text Area 1
-
-$aboutPoint2 = "Responsive"; // About Area Heading 2
-$aboutText2 = "Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod."; // 3 Column Text Area 1
-
-$aboutPoint3 = "Bootstrap Powered"; // About Area Heading 3
-$aboutText3 = "Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod."; // 3 Column Text Area 1
+// CONFIG - These control the look and details on your site. Consult documentation for more details.
+
+
+// GENERAL
+
+// Site URL
+define('siteURL', 'http://localhost:8888/');
+
+// Page title for your site
+define('title', 'Sleeky theme for YOURLS'); 
+
+// The short title of your site, used in the footer and in some sub pages
+define('shortTitle', 'Sleeky');
+
+// A description of your site, shown on the homepage.
+define('description', 'A quick description on why your site is so fantastic, what it does and why people should definetly start using it. Oh, and how it’s free.'); 
+
+// The favicon for your site
+define('favicon', '/assets/img/favicon.ico');
+
+// Logo for your site, displayed on home page
+define('logo', '/assets/img/logo-black.png');
+
+
+// FOOTER
+
+// These are the links in the footer. Add a new link for each new link.
+// The array follows a title link structure:
+// "TITLE" => "LINK",
+$footerLinks = [
+ "About" => "http://google.com",
+ "Contact" => "http://apple.com",
+ "Legal" => "http://example.com",
+];
+
 ?>