move all styling into an external css file

mateuszviste · Jul 22, 2020 · 8b28923 · 8b28923
1 parent e762927
commit 8b28923
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 8 deletions.
diff --git a/index.php b/index.php
@@ -1,19 +1,19 @@
 <!DOCTYPE html>
-<html style="background: #fff;">
+<html>
 
 <head>
   <meta charset="UTF-8">
   <title>SlankLink</title>
   <link rel="stylesheet" href="slanklink.css">
 </head>
 
-<body style="font-family: sans; font-size: 1.2em">
+<body>
 
 <h1>SlankLink</h1>
 
 <form action="./lnk.php" method="post">
-<p style="text-align: center; margin-top: 3em;">
-<input type="text" name="url" style="width: 50em;">
+<p>
+<input type="text" name="url" class="urlentry">
 <input type="submit" value="save">
 </p>
 </form>
@@ -48,14 +48,14 @@
 // validate & adjust url
 if (stristr($url, '://') === FALSE) $url = 'http://' . $url;
 
-echo "<p style=\"text-align: center;\"><span style=\"color: #777;\">target url:</span> {$url}</p>\n";
+echo "<p><span class=\"grey\">target url:</span> {$url}</p>\n";
 $id = rand(0, 60466175);
 
 $ids = base_convert($id, 10, 36);
 
 if (file_exists($ids)) {
-  echo '<p style="background-color: #f66; font-weight: bold; text-align: center; padding: 0.5em;">ERROR: collision. try again.</p>';
-  echo "<p style=\"color: #777;\">orig id: {$id}<br>\n";
+  echo '<p class="error">ERROR: collision. try again.</p>';
+  echo "<p class=\"debug\">orig id: {$id}<br>\n";
   echo "encd id: {$ids}</p>\n";
   goto SKIP;
 }
@@ -71,7 +71,7 @@
 if (isset($_SERVER['SERVER_PORT']) && (intval($_SERVER['SERVER_PORT']) != 80)) $selfaddr_root .= ':' . $_SERVER['SERVER_PORT'];
 $selfaddr_root .= dirname($_SERVER['REQUEST_URI']);
 
-echo "<p style=\"text-align: center;\">short url: <a href=\"{$ids}\">{$selfaddr_root}{$ids}</a></p>";
+echo "<p>short url: <a href=\"{$ids}\">{$selfaddr_root}{$ids}</a></p>";
 
 SKIP:
 ?>

diff --git a/slanklink.css b/slanklink.css
@@ -0,0 +1,34 @@
+html {
+  background-color: #fff;
+}
+
+body {
+  font-family: sans;
+  font-size: 1.2em;
+  text-align: center;
+}
+
+h1 {
+  margin: 1.7em auto;
+  font-weight: normal;
+  font-size: 2em;
+  color: #333;
+}
+
+p.error {
+  background-color: #f66;
+  font-weight: bold;
+  padding: 0.5em;
+}
+
+p.debug {
+  color: #777;
+}
+
+input.urlentry {
+  width: 50em;
+}
+
+span.grey {
+  color: #777;
+}