From 59cacfbe41b5978cc440ecdec4298d21685850fc Mon Sep 17 00:00:00 2001 From: Dendy Faist Date: Tue, 10 Jan 2023 15:54:53 +0100 Subject: [PATCH] General improvement --- main.php | 104 ++++++-------------------- pages/index.php | 95 ++++++++++++++++++++++++ static/style/main.css | 168 +++++++++++++++++++++++------------------- 3 files changed, 211 insertions(+), 156 deletions(-) create mode 100644 pages/index.php diff --git a/main.php b/main.php index af97ac5..d5c4bdc 100755 --- a/main.php +++ b/main.php @@ -1,87 +1,27 @@ - - - - +// Global variables +$_dr = $_SERVER['DOCUMENT_ROOT']; - <?= $trans('title') ?> - +// 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); - - - - + // If it doesn't find anything, it is the root + $matches[1][0] = $matches[1][0] ?? ''; - -
- -
-

-

-
-
+ // We don't care about the full pattern, just the captured group + return $matches[1]; +})(); - - -
-
-

-
- - - -
-

- -

- -
-
- -
- -
- - - - +match ($GLOBALS['PARSED_PATH'][0]) { + '' => include_once "$_dr/pages/index.php", + default => printf("404"), +}; diff --git a/pages/index.php b/pages/index.php new file mode 100644 index 0000000..2bad7f3 --- /dev/null +++ b/pages/index.php @@ -0,0 +1,95 @@ + + + + + + + + <?= $trans('title') ?> + + + + + + + + +
+ +
+

+

+
+
+ + + +
+
+
+
+ +
+ +
+
+ +
+
+ + + +
+
+ +
+
+ +
+ +
+ + + diff --git a/static/style/main.css b/static/style/main.css index 4cb053f..1f32468 100755 --- a/static/style/main.css +++ b/static/style/main.css @@ -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;