m/krtmn
1
0
Fork 0
mirror of https://github.com/kremalicious/krtmn.git synced 2024-12-22 01:03:28 +01:00
Code Releases Activity

redesign & refactor all the things

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-04-29 23:53:42 +02:00
parent c82fdf6f22
commit 5b67b889e1
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
13 changed files with 398 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.php
View File

@ -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>

10
user/css/_buttons.css Normal file
View File

@ -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;
}

28
user/css/_forms.css Normal file
View File

@ -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;
}

0
user/css/h5bp.css → user/css/_h5bp.css
View File

29
user/css/_menu.css Normal file
View File

@ -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;
}

40
user/css/_page-login.css Normal file
View File

@ -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
}

29
user/css/_page-plugins.css Normal file
View File

@ -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;
}

4
user/css/_page-tools.css Normal file
View File

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

97
user/css/_scaffolding.css Normal file
View File

@ -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;
}

36
user/css/_tables.css Normal file
View File

@ -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;
}

182
user/css/krtmn.css
View File

@ -1,82 +1,15 @@
html, body {
background: #e7eef4;
}
/* font reset */
html {
font-size: 16px;
}
@import '_h5bp.css';
@import '_scaffolding.css';
@import '_buttons.css';
@import '_forms.css';
@import '_tables.css';
@import '_menu.css';
/* 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: #56666e;
}
@import '_page-login.css';
@import '_page-tools.css';
@import '_page-plugins.css';
/* 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;
border-bottom: 1px solid #afc3cb;
text-align: right;
text-align: center;
}
#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 {
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 {
#main_table .timestamp {
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 {
}

41
user/css/public.css
View File

@ -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;
}

10
user/plugins/my-own-stuff/plugin.php → user/plugins/kremalicious/plugin.php
View File

@ -1,11 +1,11 @@
<?php
/*
Plugin Name: My Own Stuff
Plugin URI: http://mkretschmann.com
Description: modify title, custom css file
Plugin Name: Kremalicious
Plugin URI: http://matthiaskretschmann.com
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">';
}
?>