General improvement

This commit is contained in:
Dendy 2023-01-10 15:54:53 +01:00
parent 599da85947
commit 59cacfbe41
3 changed files with 211 additions and 156 deletions

104
main.php
View File

@ -1,87 +1,27 @@
<?php
include_once("utils/localization.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// Global variables
$_dr = $_SERVER['DOCUMENT_ROOT'];
<title><?= $trans('title') ?></title>
<meta name="author" content="Dendy">
// Parse path into array
// (e.g."/hello////13/thing" into ["hello", "13", "thing"])
$GLOBALS['PARSED_PATH'] = (function () {
/* - Usage of '#' as delimiters to be able to use '/' without escaping
* - (a|b) checks patterns a or b and captures it, (?:a|b) doesn't capture
*
* - (?:/|) is there to remove the first '/'
* - ([^/]+?) gets the content in a non-greedy way
* - (?:/|$) limits the capture to the next '/' or the end of the string
*/
preg_match_all('#(?:/|)([^/]+?)(?:/|$)#', $_SERVER['DOCUMENT_URI'], $matches);
<!-- Stylesheets -->
<link rel="stylesheet" href="static/style/reset.css">
<link rel="stylesheet" href="static/style/main.css">
</head>
// If it doesn't find anything, it is the root
$matches[1][0] = $matches[1][0] ?? '';
<body>
<div id="title">
<img src="static/resources/avi.png"/>
<div>
<h1><?= $trans('title') ?></h1>
<p><?= $trans('subtitle') ?></p>
</div>
</div>
// We don't care about the full pattern, just the captured group
return $matches[1];
})();
<div id="menu" class="section">
<ul>
<li><a href="#"><?= $trans('home') ?></a></li>
<li><a href="#"><?= $trans('gallery') ?></a></li>
<li><a href="#"><?= $trans('blog') ?></a></li>
<li><a href="#"><?= $trans('about') ?></a></li>
</ul>
<div id="lang-select">
LANG:<?php
foreach($langs as $lang){
printf(' <a href="/?lang=%s">%s</a>', $lang, strtoupper($lang));
}
?></div>
</div>
<div id="content" class="row">
<div id="main-section" class="section column middle">
<h2><?= $trans('welcome') ?></h2>
</div>
<div id="links" class="column right section">
<h2><?= $trans('links') ?></h2>
<h3><?= $trans('programming') ?></h3><ul>
<li><a href="https://git.fai.st/dendy"><?= $trans('git') ?></a></li>
</ul>
<h3><?= $trans('people') ?></h3>
<ul>
<li><a href="https://dusk.fai.st">Dusk</a></li>
<li><a href="https://yari.fai.st">Yarita</a></li>
<li><a href="https://lidiarock.one">LidiaRock1</a></li>
</ul>
</div>
<div id="contact" class="column right section">
<h2><?= $trans('contact') ?></h2>
<ul>
<li><a href="https://awoo.fai.st/dendy" rel="me" target="_blank">Fedi</a></li>
<li><a href="xmpp:dendy@fai.st">XMPP</a></li>
<li><a target="_blank" href="https://matrix.to/#/@dendy:fai.st">Matrix</a></li>
</ul>
<h2><?= $trans('keys') ?></h2>
<ul>
<li><a target="_blank" href="static/dendy.asc">PGP public key</a></li>
</ul>
</div>
</div>
<div class="section" id="fediring">
<ul>
<li><a href="https://fediring.net/previous?host=dendy.cat">&lt;-</a></li>
<li><a href="https://fediring.net/">Fediring</a></li>
<li><a href="https://fediring.net/next?host=dendy.cat">-&gt;</a></li>
</ul>
</div>
<div class="section" id="footer">
<?= $trans('copyright') ?>
</div>
</body>
</html>
match ($GLOBALS['PARSED_PATH'][0]) {
'' => include_once "$_dr/pages/index.php",
default => printf("404"),
};

95
pages/index.php Normal file
View File

@ -0,0 +1,95 @@
<?php
include_once "$_dr/utils/localization.php";
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $trans('title') ?></title>
<meta name="author" content="Dendy">
<!-- Stylesheets -->
<link rel="stylesheet" href="static/style/reset.css">
<link rel="stylesheet" href="static/style/main.css">
</head>
<body>
<div id="title">
<img src="static/resources/avi.png" />
<div>
<h1><?= $trans('title') ?></h1>
<p><?= $trans('subtitle') ?></p>
</div>
</div>
<nav id="navbar" class="section">
<ul>
<li><a href="#"><?= $trans('home') ?></a></li>
<li><a href="#"><?= $trans('gallery') ?></a></li>
<li><a href="#"><?= $trans('blog') ?></a></li>
<li><a href="#"><?= $trans('about') ?></a></li>
</ul>
<div id="lang-select">
LANG:<?php
foreach ($langs as $lang) {
printf(' <a href="/?lang=%s">%s</a>', $lang, strtoupper($lang));
}
?>
</div>
</nav>
<main class="row">
<div class="column middle">
<div class="section">
<header><?= $trans('welcomeHeader') ?></header>
<?= $trans('welcome') ?>
</div>
<div class="section">
<header><?= $trans('projectsHeader') ?></header>
<?= $trans('projects') ?>
</div>
</div>
<div id="links" class="column right section">
<header><?= $trans('links') ?></header>
<h3><?= $trans('programming') ?></h3>
<ul>
<li><a href="https://git.fai.st/dendy"><?= $trans('git') ?></a></li>
</ul>
<h3><?= $trans('people') ?></h3>
<ul>
<li><a href="https://dusk.fai.st">Dusk</a></li>
<li><a href="https://yari.fai.st">Yarita</a></li>
<li><a href="https://lidiarock.one">LidiaRock1</a></li>
<li><a href="https://sugui.me">Suguivy</a></li>
</ul>
</div>
<div id="contact" class="column right section">
<header><?= $trans('contact') ?></header>
<ul>
<li><a href="https://awoo.fai.st/dendy" target="_blank">Fedi</a></li>
<li><a href="xmpp:dendy@fai.st">XMPP</a></li>
<li><a target="_blank" href="https://matrix.to/#/@dendy:fai.st">Matrix</a></li>
<li><a type="application/pgp-keys" target="_blank" href="https://keys.openpgp.org/vks/v1/by-fingerprint/AB537E17CB430578DBFF75080168B35FFD7F608F">PGP public key</a></li>
</ul>
</div>
</main>
<div class="section" id="fediring">
<ul>
<li><a href="https://fediring.net/previous?host=dendy.cat">&lt;-</a></li>
<li><a href="https://fediring.net/">Fediring</a></li>
<li><a href="https://fediring.net/next?host=dendy.cat">-&gt;</a></li>
</ul>
</div>
<div class="section" id="footer">
<?= $trans('copyright') ?>
</div>
</body>

View File

@ -1,63 +1,84 @@
/**
/********************
* Generic elements *
**/
++++++++++++++++++**/
*{
box-sizing: border-box;
box-sizing: border-box;
}
body{
background-color: rgb(14,14,14);
background-image: url(../resources/background.png);
background-size: cover;
color: white;
margin: 40px 10%;
font-family: sans-serif;
background-color: rgb(14,14,14);
background-image: url(../resources/background.png);
background-size: cover;
color: white;
margin: 40px 10%;
font-family: sans-serif;
}
h1{
font-size: 40px;
font-weight: bold;
font-size: 40px;
font-weight: bold;
margin-bottom: 5px;
}
h2{
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
h3{
font-weight: bold;
margin-bottom: 5px;
font-weight: bold;
margin-bottom: 5px;
}
a{
text-decoration: none;
color: darkgrey;
text-decoration: none;
color: darkgrey;
}
a:hover{
a:hover{
background-color: darkgrey;
color: black;
}
color: black;
}
p{
margin-bottom: 10px;
margin-bottom: 10px;
}
b{
font-weight: bold;
}
/**
/******************
* General layout *
**/
+++++++++++++++++*/
main {
padding: 10px 0px;
}
.section{
background-color: rgba(5,5,5,0.6);
margin-bottom: 10px;
padding: 30px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 5px;
background-color: rgba(5,5,5,0.6);
margin-bottom: 10px;
padding: 20px;
border: 1px solid rgba(255,255,255,0.25);
}
.section header{
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.25);
}
.section p:last-of-type {
margin-bottom: 0px;
}
.row:after {
content: "";
@ -65,26 +86,25 @@ p{
clear: both;
}
.column{
float: left;
float: left;
}
.column.middle{
width: 75%;
padding: 30px;
.column.middle{
width: 75%;
min-height: 400px;
}
.column.right{
width: calc(25% - 10px);
margin-left: 10px;
}
}
.column.right{
width: calc(25% - 20px);
margin-left: 20px;
}
.column.right li::before{
content: "· ";
}
@media screen and (max-width: 1070px){
.column.middle{
@media screen and (max-width: 1070px){
.column.middle{
width: 100%;
margin-left: 0px;
}
margin-left: 0px;
}
.column.right {
width: calc(50% - 5px);
margin-left: 0px;
@ -93,26 +113,26 @@ p{
.column.right:last-of-type{
margin-right: 0px;
}
}
}
#footer{
padding: 20px;
padding: 20px;
}
/**
* Page title *
**/
/***************
* Page header *
***************/
#title{
margin-bottom: 10px;
margin-bottom: 10px;
}
#title img {
display: none;
float: left;
#title img {
display: none;
float: left;
/* overlap border */
transform: translateY(1px);
}
}
#title:after {
content: "";
display: table;
@ -121,33 +141,33 @@ p{
#title div {
padding-top: 20px;
}
@media screen and (min-width: 800px){
#title{
margin-bottom:0;
}
#title img{
display: block;
}
}
@media screen and (min-width: 800px){
#title{
margin-bottom:0;
}
#title img{
display: block;
}
}
#menu, #fediring{
padding:0;
overflow: hidden;
padding: 10px 15px;
#navbar, #fediring{
padding:0;
overflow: hidden;
padding: 10px 15px;
}
#menu li { float: left; }
#navbar li { float: left; }
#lang-select { float: right; }
#menu a, #fediring a{
/*display: block;*/
color: white;
text-align: center;
padding: 12px 15px;
}
#menu a:hover, #fediring a:hover, #menu a.activated{
background: rgba(255,255,255,1);
#navbar a, #fediring a{
/*display: block;*/
color: white;
text-align: center;
padding: 12px 15px;
}
#navbar a:hover, #fediring a:hover, #navbar a.activated{
background: rgba(255,255,255,1);
color: black
}
}
#fediring{
text-align: center;