Skip to content
Snippets Groups Projects
Unverified Commit 40f21971 authored by Conrad Zelck's avatar Conrad Zelck
Browse files

fix: use shared header styles 


Signed-off-by: default avatarConrad Zelck <git@simpel.cc>
parent a25a43a8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.php
+ 59
− 51
View file @ 40f21971
<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
style.css
+ 26
− 66
View file @ 40f21971
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 {
......
style.min.css 0 → 100644
+ 1
− 0
View file @ 40f21971
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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment