dendy
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
main.php
View File

@ -1,87 +1,27 @@
<?php <?php
include_once("utils/localization.php"); // Global variables
?> $_dr = $_SERVER['DOCUMENT_ROOT'];
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $trans('title') ?></title> // Parse path into array
<meta name="author" content="Dendy"> // (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 --> // If it doesn't find anything, it is the root
<link rel="stylesheet" href="static/style/reset.css"> $matches[1][0] = $matches[1][0] ?? '';
<link rel="stylesheet" href="static/style/main.css">
</head>
<body> // We don't care about the full pattern, just the captured group
<div id="title"> return $matches[1];
<img src="static/resources/avi.png"/> })();
<div>
<h1><?= $trans('title') ?></h1>
<p><?= $trans('subtitle') ?></p>
</div>
</div>
<div id="menu" class="section"> match ($GLOBALS['PARSED_PATH'][0]) {
<ul> '' => include_once "$_dr/pages/index.php",
<li><a href="#"><?= $trans('home') ?></a></li> default => printf("404"),
<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>

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>

168
static/style/main.css
View File

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