From 40f219719553ff11fc506a79f4923ccd3cd8f4e9 Mon Sep 17 00:00:00 2001
From: Conrad Zelck <git@simpel.cc>
Date: Tue, 27 Feb 2024 23:08:19 +0100
Subject: [PATCH] fix: use shared header styles
Signed-off-by: Conrad Zelck <git@simpel.cc>
---
index.php | 110 +++++++++++++++++++++++++++-----------------------
style.css | 92 ++++++++++++-----------------------------
style.min.css | 1 +
3 files changed, 86 insertions(+), 117 deletions(-)
create mode 100644 style.min.css
diff --git a/index.php b/index.php
index 529a966..25cd37e 100644
--- a/index.php
+++ b/index.php
@@ -1,53 +1,60 @@
<html lang="en">
- <head>
- <?php include dirname($_SERVER['DOCUMENT_ROOT']) . "/simpel.cc/php/head.php"; ?>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <header>
- <?php include dirname($_SERVER['DOCUMENT_ROOT']) . "/simpel.cc/php/header.php"; ?>
- </header>
- <main>
- <div>
- <label for="searchinput">Search language or comment syntax:</label>
- <input type="search" id="searchinput" onkeyup="searchSyntax()" onsearch="searchSyntax()" title="Type in a scripting language or comments syntax" placeholder="search string …" autofocus>
- <table id="resulttable">
- <thead>
- <tr>
- <th title="programming, scripting or markdown language">language</th>
- <th title="line (L) or multiline (M) comment">type</th>
- <th>comment syntax</th>
- </tr>
- </thead>
- <tbody>
- <?php
- $file = fopen("comments.csv", "r");
- // Fetching data from csv file row by row
- while (($data = fgetcsv($file)) !== false) {
- // HTML tag for placing in row format
- echo "<tr>";
- foreach ($data as $i) {
- echo "<td>" . htmlspecialchars($i, ENT_QUOTES, 'UTF-8', false) . "</td>";
- }
- echo "</tr> \n";
- }
- fclose($file);
- ?>
- </tbody>
- </table>
- </div>
- </main>
- <footer>
- <p>sources:</p>
- <ul>
- <li class="source"><a href="https://en.wikipedia.org/wiki/Comparison_of_programming_languages_(syntax)" target="_blank">en.wikipedia.org/wiki/Comparison_of_programming_languages_(syntax)</a></li>
- <li class="source"><a href="http://rigaux.org/language-study/syntax-across-languages/Vrs.html" target="_blank">rigaux.org/language-study/syntax-across-languages/Vrs.html</a></li>
- <li class="source"><a href="https://pldb.com/languages/line-comments-feature.html" target="_blank">pldb.com/languages/line-comments-feature.html</a></li>
- <li class="source"><a href="https://pldb.com/languages/multiline-comments-feature.html" target="_blank">pldb.com/languages/multiline-comments-feature.html</a></li>
- </ul>
- </footer>
- </body>
- <script>
+
+<head>
+ <?php include dirname($_SERVER['DOCUMENT_ROOT']) . "/simpel.cc/php/head.php"; ?>
+ <link rel="stylesheet" href="style.min.css">
+</head>
+
+<body>
+ <header>
+ <?php include dirname($_SERVER['DOCUMENT_ROOT']) . "/simpel.cc/php/header.php"; ?>
+ </header>
+ <main>
+ <div>
+ <label for="searchinput">Search language or comment syntax:</label>
+ <input type="search" id="searchinput" onkeyup="searchSyntax()" onsearch="searchSyntax()"
+ title="Type in a scripting language or comments syntax" placeholder="search string …" autofocus>
+ <table id="resulttable">
+ <thead>
+ <tr>
+ <th title="programming, scripting or markdown language">language</th>
+ <th title="line (L) or multiline (M) comment">type</th>
+ <th>comment syntax</th>
+ </tr>
+ </thead>
+ <tbody>
+ <?php
+ $file = fopen("comments.csv", "r");
+ // Fetching data from csv file row by row
+ while (($data = fgetcsv($file)) !== false) {
+ // HTML tag for placing in row format
+ echo "<tr>";
+ foreach ($data as $i) {
+ echo "<td>" . htmlspecialchars($i, ENT_QUOTES, 'UTF-8', false) . "</td>";
+ }
+ echo "</tr> \n";
+ }
+ fclose($file);
+ ?>
+ </tbody>
+ </table>
+ </div>
+ </main>
+ <footer>
+ <p>sources:</p>
+ <ul>
+ <li class="source"><a href="https://en.wikipedia.org/wiki/Comparison_of_programming_languages_(syntax)"
+ target="_blank">en.wikipedia.org/wiki/Comparison_of_programming_languages_(syntax)</a></li>
+ <li class="source"><a href="http://rigaux.org/language-study/syntax-across-languages/Vrs.html"
+ target="_blank">rigaux.org/language-study/syntax-across-languages/Vrs.html</a></li>
+ <li class="source"><a href="https://pldb.com/languages/line-comments-feature.html"
+ target="_blank">pldb.com/languages/line-comments-feature.html</a></li>
+ <li class="source"><a href="https://pldb.com/languages/multiline-comments-feature.html"
+ target="_blank">pldb.com/languages/multiline-comments-feature.html</a></li>
+ </ul>
+ </footer>
+</body>
+<script>
function searchSyntax() {
var input, filter, table, tr, tdOne, tdThree, i, txtValue;
input = document.getElementById("searchinput");
@@ -68,5 +75,6 @@
}
}
}
- </script>
-</html>
+</script>
+
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 03dc234..8d06d91 100644
--- a/style.css
+++ b/style.css
@@ -1,84 +1,29 @@
body {
- min-height: 50vh;
- font-family: helvetica, Arial, sans-serif;
- font-size: 2vmin;
- background-color: #555;
- color: white;
- margin: 3vmin 4vmin 2vmin 4vmin;
-}
-
-/* iPad portait */
-@media (max-width: 768px) {
- body {
- font-size: 3vmin;
- }
-
- table {
- width: inherit !important;
- }
-}
-
-/* iPhone landscape only */
-@media (max-width: 568px) {
- body {
- font-size: 4vmin;
- }
-
- table {
- width: inherit !important;
- }
-}
-
-/* iPhone portait only */
-@media (max-width: 320px) {
- body {
- font-size: 4vmin;
- }
-
- table {
- width: inherit !important;
- }
-}
-
-a {
- color: #ffffff;
- text-decoration: none;
+ font-size: 2em;
+ overflow-y: scroll;
}
header {
margin-bottom: 1.5em;
}
-nav {
- display: flex;
- align-items: center;
- column-gap: 0.7em;
-}
-
-h1 {
- font-size: 1.5em;
- margin: 0;
-}
-
-#github {
- margin-left: auto;
-}
-
-#github-cat {
- height: 1.5em;
-}
-
main {
justify-content: center;
display: flex;
+ font-size: 0.75em;
}
label, input {
display: block;
}
+label {
+ font-size: 1.25em;
+ margin-bottom: 0.5em;
+}
+
input {
- font-size: medium;
+ font-size: inherit;
font-family: inherit;
height: 2.5em;
margin-top: 0.2em;
@@ -104,9 +49,9 @@ input[type="search"] {
}
table {
- font-size: medium;
+ font-size: inherit;
border: 1px solid white;
- margin-top: 2vmin;
+ margin-top: 1.4em;
width: 70ch;
max-width: calc(100vw - 8vmin);
border-collapse: collapse;
@@ -157,11 +102,26 @@ th:nth-child(3), td:nth-child(3) {
}
footer {
+ font-size: 0.75em;
margin: auto;
}
+footer p {
+ margin-block-end: 0em;
+ line-height: 1.5;
+}
+
+footer ul {
+ margin-top: 0em;
+}
+
+.source {
+ line-height: 1.5;
+}
+
.source a {
word-break: break-all;
+ text-decoration: none;
}
.source a:hover {
diff --git a/style.min.css b/style.min.css
new file mode 100644
index 0000000..a74bea3
--- /dev/null
+++ b/style.min.css
@@ -0,0 +1 @@
+body{font-size:2em;overflow-y:scroll;}header{margin-bottom:1.5em;}main{justify-content:center;display:flex;font-size:.75em;}label,input{display:block;}label{font-size:1.25em;margin-bottom:.5em;}input{font-size:inherit;font-family:inherit;height:2.5em;margin-top:.2em;padding:5px 10px;color:white;border:2px solid;cursor:pointer;-webkit-border-radius:5px;border-radius:5px;}input{color:#333;border-color:white;background-color:white;box-sizing:border-box;}input[type="search"]{width:70ch;max-width:calc(100vw - 8vmin);}table{font-size:inherit;border:1px solid white;margin-top:1.4em;width:70ch;max-width:calc(100vw - 8vmin);border-collapse:collapse;}table,td,th{padding-left:10px;padding-top:10px;padding-bottom:10px;}tr:nth-child(even){background-color:#555;}tr:nth-child(odd){background-color:#555;}tr,th{border-bottom:1px solid white;}tr:last-child{border-bottom:none;}td:nth-child(even),th:nth-child(even){border-left:1px solid white;border-right:1px solid white;}th{text-align:left;background-color:#444444;}th:nth-child(1),td:nth-child(1){width:35ch;}th:nth-child(2),td:nth-child(2){width:5ch;}th:nth-child(3),td:nth-child(3){width:32ch;}footer{font-size:.75em;margin:auto;}footer p{margin-block-end:0;line-height:1.5;}footer ul{margin-top:0;}.source{line-height:1.5;}.source a{word-break:break-all;text-decoration:none;}.source a:hover{text-decoration:underline;}
\ No newline at end of file
--
GitLab