redesign & refactor all the things

index.php

@@ -15,7 +15,7 @@ $items = yourls_api_stats( 'last', 1 );
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
 	<title>krt.mn</title>
-	<meta name="description" content="personal url shortener of web &amp; ui designer matthias kretschmann">
+	<meta name="description" content="personal url shortener of designer &amp; developer matthias kretschmann">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -34,15 +34,33 @@ $items = yourls_api_stats( 'last', 1 );
 
     <article class="content">
         <header>
-    		<h1><i class="icon-bookmark"></i><a href="<?php yourls_site_url(); ?>/admin">krt.mn</a></h1>
+            <svg class="logo" version="1.1"
+            	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+            	width="60px" height="60px" viewBox="0 0 60 60">
+                <g>
+                	<line class="st0" x1="29" y1="43" x2="29" y2="59"/>
+                	<line class="st0" x1="29" y1="1" x2="29" y2="5"/>
+                	<line class="st0" x1="29" y1="21" x2="29" y2="27"/>
+                	<polygon class="st0" points="51,21 7,21 7,5 51,5 59,13 	"/>
+                	<polygon class="st0" points="9,43 53,43 53,27 9,27 1,35 	"/>
+                </g>
+            </svg>
+
+    		<h1><a href="<?php yourls_site_url(); ?>/admin">krt.mn</a></h1>
     	</header>
     	<main role="main">
     		<?php foreach( $items['links'] as $item ) { ?>
-    			<p>Latest short url: <a href="<?php echo $item['shorturl']; ?>"><?php echo $item['shorturl']; ?> <span class="title"><?php echo $item['title']; ?></span></a></p>
+    			<p>
+                    <span class="label">latest short url:</span>
+                    <a href="<?php echo $item['shorturl']; ?>">
+                        <?php echo $item['shorturl']; ?>
+                        <span class="title"><?php echo $item['title']; ?></span>
+                    </a>
+                </p>
     		<?php } ?>
     	</main>
     	<footer>
-			<p><small>personal url shortener of designer &amp; developer <a href="https://matthiaskretschmann.com">matthias kretschmann</a>. You should follow me on <a href="https://twitter.com/kremalicious">twitter</a>.</small></p>
+			<p>personal url shortener of designer &amp; developer <a href="https://matthiaskretschmann.com">matthias kretschmann</a>. you should follow me on <a href="https://twitter.com/kremalicious">twitter</a>.</p>
     	</footer>
     </article>
 

user/css/_buttons.css

@@ -0,0 +1,10 @@
+/*Buttons*/
+input.button {
+    background: #57bbae;
+    color: #fff;
+    border: none;
+    font-weight: 400;
+    text-transform: uppercase;
+    padding: .5rem 1rem;
+    border-radius: .25rem;
+}

user/css/_forms.css

@@ -0,0 +1,28 @@
+/* Forms */
+
+Input.text,
+select,
+textarea {
+    background: rgba(255,255,255,.6);
+    padding: .5rem;
+    font-weight: 500;
+    margin: 0;
+    border: 1px solid transparent;
+    transition: .2s ease-out;
+}
+
+Input.text:focus,
+select:focus,
+textarea:focus {
+    background: #fff;
+    border: 1px solid #3a9085;
+    outline: 0;
+    box-shadow: 0 1px 10px rgba(1, 85, 101, .15);
+}
+
+label {
+    font-size: .8rem;
+    font-weight: 500;
+    margin-bottom: .3rem;
+    display: block;
+}

user/css/_menu.css

@@ -0,0 +1,29 @@
+ul#admin_menu {
+    min-height: 0;
+    margin-bottom: 4rem;
+    border-bottom: 1px solid #3a9085;
+    font-size: 1rem;
+}
+
+ul#admin_menu li {
+    display: inline-block;
+}
+
+ul#admin_menu li a {
+
+}
+
+.admin_menu_toplevel a,
+#admin_menu_help_link a {
+    padding: 1rem;
+    margin: 0 1rem;
+    display: block;
+}
+
+.admin_menu_toplevel a:first-child {
+    margin-left: -1em;
+}
+
+#admin_menu_logout_link {
+    float: right;
+}

user/css/_page-login.css

@@ -0,0 +1,40 @@
+
+.login {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    height: 100vh;
+}
+
+.login #wrap,
+.login #login {
+    width: 100%;
+    max-width: 20em;
+    margin: 0;
+}
+
+#login p {
+    font-weight: normal;
+}
+
+.login form p:not(:nth-child(3)):not(.error) {
+    margin-bottom: 1rem;
+}
+
+.login form br {
+    display: none;
+}
+
+.login input.button {
+    display: block;
+    width: 100%;
+}
+
+
+.error {
+    padding: 1rem;
+    margin: 2rem auto;
+    border-radius: .2rem;
+    color: #BA5B5B
+}

user/css/_page-plugins.css

@@ -0,0 +1,29 @@
+
+body.desktop td.actions input,
+body.desktop td.actions a {
+    visibility: visible;
+
+}
+
+tr.plugin .actions {
+    text-align: center;
+}
+
+tr.plugin .actions a {
+    border: 1px solid #b4bfc4;
+    text-transform: uppercase;
+    padding: .25rem .5rem;
+    font-size: .7rem;
+    border-radius: .25rem;
+}
+
+tr.plugin.active td,
+#main_table tbody tr.plugin.active td,
+table.tblSorter tbody tr.plugin.active td {
+    background: rgba(72, 168, 114, .1);
+    border-color: #57bbae;
+}
+
+tr.plugin.active a {
+    font-weight: normal;
+}

user/css/_page-tools.css

@@ -0,0 +1,4 @@
+
+.sub_wrap {
+    margin: auto;
+}

user/css/_scaffolding.css

@@ -0,0 +1,97 @@
+* {
+    box-sizing: border-box;
+}
+
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+html, body {
+	background: #e7eef4;
+}
+
+body {
+    padding: 2rem;
+    padding-top: 0;
+}
+
+/* font reset */
+html {
+    font-size: 16px;
+}
+
+/* Typography reset */
+body,
+div, p, td,
+table.tblSorter,
+Input.text, select, textarea,
+input.button,
+table.tblSorter tbody td {
+    font-size: 1rem;
+    font-family: 'Avenir Next', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 1.4;
+    color: #6b7f88;
+}
+
+p {
+    margin-top: 0;
+    margin-bottom: 1.4rem;
+}
+
+h1, h2, h3 {
+    font-weight: 500;
+    color: #015565;
+}
+
+/* Small text */
+#main_table tfoot th,
+#main_table tfoot th div,
+table.tblSorter thead tr th,
+table.tblSorter tfoot tr th,
+table.tblSorter th.header,
+thead th,
+thead th div {
+    font-size: .8rem;
+}
+
+/* Space/background reset */
+#wrap,
+#new_url,
+#new_url div,
+#footer p,
+table.tblSorter,
+table.tblSorter thead tr .tablesorter-header,
+table.tblSorter tbody td,
+table.tblSorter tbody tr.normal-row td,
+table.tblSorter tfoot tr,
+table.tblSorter tfoot tr th,
+table.tblSorter thead tr th, table.tblSorter tfoot tr th, table.tblSorter th.header,
+Input.text, select, textarea,
+div.share {
+    background: none;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+}
+
+
+#wrap > h1 { display: none; }
+
+
+/* Links */
+a, a:link, a:active, a:visited {
+	color: #3a9085;
+	text-decoration: none;
+    transition: .2s ease-out;
+}
+
+a:hover,
+a:focus {
+    color: #57bbae;
+}
+
+
+strong {
+    font-weight: 500;
+}

user/css/_tables.css

@@ -0,0 +1,36 @@
+#main_table {
+    margin: 3rem 0;
+    max-width: 100%;
+    width: auto;
+}
+
+table.tblSorter tbody td {
+    padding: 1rem;
+}
+
+#main_table thead tr th,
+#main_table tbody tr td {
+    padding: 1rem;
+}
+
+#main_table thead tr th,
+table.tblSorter thead tr th {
+    border-bottom: 1px solid #afc3cb;
+    font-weight: 500;
+}
+
+#main_table tbody td,
+table.tblSorter tbody td {
+    border-bottom: 1px dashed #afc3cb;
+}
+
+#main_table tfoot th {
+    border-top: 1px solid #afc3cb;
+    margin-top: 2rem;
+    padding-top: 2rem;
+}
+
+table.tblSorter tbody tr.alt-row:hover td,
+table.tblSorter tbody tr.normal-row:hover td {
+    background: none;
+}

user/css/krtmn.css

@@ -1,82 +1,15 @@
-html, body {
-	background: #e7eef4;
-}
 
-/* font reset */
+@import '_h5bp.css';
-html {
+@import '_scaffolding.css';
-    font-size: 16px;
+@import '_buttons.css';
-}
+@import '_forms.css';
+@import '_tables.css';
+@import '_menu.css';
 
-/* Typography reset */
+@import '_page-login.css';
-body,
+@import '_page-tools.css';
-div, p, td,
+@import '_page-plugins.css';
-table.tblSorter,
-Input.text, select, textarea,
-input.button,
-table.tblSorter tbody td {
-    font-size: 1rem;
-    font-family: 'Avenir Next', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    line-height: 1.4;
-    color: #56666e;
-}
 
-/* Small text */
-#main_table tfoot th,
-#main_table tfoot th div,
-table.tblSorter thead tr th,
-table.tblSorter tfoot tr th,
-table.tblSorter th.header,
-thead th,
-thead th div {
-    font-size: .8rem;
-}
-
-/* Space/background reset */
-#wrap,
-#new_url,
-#new_url div,
-#footer p,
-table.tblSorter,
-table.tblSorter thead tr .tablesorter-header,
-table.tblSorter tbody td,
-table.tblSorter tbody tr.normal-row td,
-table.tblSorter tfoot tr,
-table.tblSorter tfoot tr th,
-table.tblSorter thead tr th, table.tblSorter tfoot tr th, table.tblSorter th.header,
-Input.text, select, textarea,
-div.share {
-    background: none;
-    border: none;
-    border-radius: 0;
-    padding: 0;
-}
-
-#wrap > h1 { display: none; }
-
-
-/* Links */
-a, a:link, a:active, a:visited {
-	color: #3a9085;
-	text-decoration: none;
-}
-
-ul#admin_menu li {
-    display: inline-block;
-}
-
-.admin_menu_toplevel a,
-#admin_menu_help_link a {
-    padding: 1rem;
-    margin: 0 1rem;
-}
-
-.admin_menu_toplevel a:first-child {
-    margin-left: -1em;
-}
-
-#admin_menu_logout_link {
-    float: right;
-}
 
 /*
 
@@ -84,90 +17,91 @@ ul#admin_menu li {
 
 */
 
-/* Forms */
-Input.text, select, textarea {
-    background: #fff;
-    padding: .3rem .5rem;
-    font-weight: 500;
-}
-
-Input.text:focus, select:focus, textarea:focus {
-    border: none;
-    outline: none;
-}
-
-/*Buttons*/
-input.button {
-    background: #3a9085;
-    color: #fff;
-    border: none;
-    font-weight: 400;
-    text-transform: uppercase;
-    padding: .5rem 1rem;
-}
 
 #new_url_form {
     padding: 3rem 0;
     margin: 3rem 0;
-    border-top: 1px solid #afc3cb;
+    text-align: center;
-    border-bottom: 1px solid #afc3cb;
-    text-align: right;
 }
 
 #add-url,
 #add-keyword,
 #add-button {
     padding: 1rem;
-    font-size: 1.2rem;
+}
+
+#add-url,
+#add-keyword {
+    font-size: 1.5rem;
 }
 
 #add-url {
-    width: calc(100% - 2rem);
+    width: 100%;
     margin-bottom: 1rem;
+
+     /*hide that weird : */
+    position: relative;
+    margin-top: -20px;
+}
+
+#add-keyword,
+#add-button {
+    width: 100%;
+}
+
+#add-keyword {
+    display: block;
+    max-width: 10em;
+    margin: .5rem auto 2rem auto;
 }
 
 #add-button {
     padding: 1rem 2rem;
+    font-size: 1.2rem;
 }
 
 #new_url_form strong:first-child { display: none; }
 
-#main_table {
+#main_table .timestamp {
-    margin: 3rem 0;
-    max-width: 100%;
-}
-
-#main_table tbody td {
-    padding: 1rem 0;
-}
-
-#main_table tfoot th {
-    border-top: 1px solid #afc3cb;
-    margin-top: 2rem;
-    padding-top: 2rem;
-}
-
-#main_table .timestamp,
-#main_table .ip {
     font-size: .8rem;
     vertical-align: middle;
     color: #80939b;
 }
 
+#main_table_head_ip,
+#main_table .ip {
+    display: none;
+}
+
 #main_table .clicks {
     vertical-align: middle;
     text-align: right;
+    font-style: italic;
+    font-weight: 500;
 }
 
 td.url small a {
     color: #80939b;
 }
 
-table.tblSorter tbody tr.alt-row:hover td,
-table.tblSorter tbody tr.normal-row:hover td {
-    background: rgba(255,255,255,.3);
-}
-
 #shareboxes {
     margin-bottom: 3rem;
 }
+
+#footer p {
+    font-size: .8rem;
+    color: #b4bfc4;
+}
+
+#footer p a {
+    background-color: transparent;
+}
+
+
+#filter_form {
+
+}
+
+#pagination {
+
+}

user/css/public.css

@@ -7,6 +7,47 @@
     height: 100vh;
 }
 
+#public h1 {
+    font-size: 3rem;
+    font-weight: 400;
+    margin-top: 1rem;
+}
+
+#public main {
+    margin-bottom: 3rem;
+}
+
+#public main p {
+    font-size: 1.2rem;
+}
+
+#public .label,
+#public .title {
+    display: block;
+}
+
+#public .title {
+    color: #6b7f88;
+}
+
+#public .label {
+    margin-bottom: 1rem;
+    font-weight: 500
+}
+
 .content {
     max-width: 35em;
 }
+
+.logo {
+    fill:none;
+    stroke: #6b7f88;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-miterlimit: 10;
+}
+
+#public footer p {
+    color: #80939b;
+}

user/plugins/kremalicious/plugin.php

@@ -1,11 +1,11 @@
 <?php
 /*
-Plugin Name: My Own Stuff
+Plugin Name: Kremalicious
-Plugin URI: http://mkretschmann.com
+Plugin URI: http://matthiaskretschmann.com
-Description: modify title, custom css file
+Description: Customize all the things.
 Version: 0.1
 Author: kremalicious
-Author URI: http://mkretschmann.com
+Author URI: http://matthiaskretschmann.com
 */
 
 if( !defined( 'YOURLS_ABSPATH' ) ) die();
@@ -52,6 +52,4 @@ function krtmn_viewport() {
 	echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
 }
 
-
-
 ?>