templateoptions

19 files changed, 189 insertions, 112 deletions

diff --git a/app/class/art2.php b/app/class/art2.php
index 4e81532..8bf2729 100644
--- a/app/class/art2.php
+++ b/app/class/art2.php
@@ -15,7 +15,7 @@ class Art2
 	protected $javascript;
 	protected $body;
 	protected $header;
-	protected $section;
+	protected $main;
 	protected $nav;
 	protected $aside;
 	protected $footer;
@@ -45,7 +45,7 @@ class Art2
 	const LENCOULEUR = 7;
 	const DEBUT = '(?id=';
 	const FIN = ')';
-	const TABS = ['section', 'css', 'header', 'body', 'nav', 'aside', 'footer', 'javascript'];
+	const TABS = ['main', 'css', 'header', 'body', 'nav', 'aside', 'footer', 'javascript'];
 	const VAR_DATE = ['date', 'datecreation', 'datemodif', 'daterender'];
 
 	  
@@ -87,7 +87,7 @@ class Art2
 		$this->setjavascript('');
 		$this->setbody('');
 		$this->setheader('');
-		$this->setsection('');
+		$this->setmain('');
 		$this->setnav('');
 		$this->setaside('');
 		$this->setfooter('');
@@ -98,13 +98,13 @@ class Art2
 		$this->setsecure(3);
 		$this->setinvitepassword('invitepassword');
 		$this->setinvitepassword('readpassword');
-		$this->setinterface('section');
+		$this->setinterface('main');
 		$this->setlinkfrom([]);
 		$this->setlinkto([]);
 		$this->settemplatebody('');
 		$this->settemplatecss('');
 		$this->settemplatejavascript('');
-		$this->settemplateoptions(['externalcss', 'externaljavascript', 'favicon', 'reccursive', 'quickcss']);
+		$this->settemplateoptions(['externalcss', 'externaljavascript', 'favicon', 'reccursivecss', 'quickcss']);
 		$this->setfavicon('');
 		$this->setthumbnail('');
 		$this->setaffcount(0);
@@ -250,9 +250,9 @@ class Art2
 		return $this->header;
 	}
 
-	public function section($type = 'string')
+	public function main($type = 'string')
 	{
-		return $this->section;
+		return $this->main;
 	}
 
 	public function nav($type = "string")
@@ -536,10 +536,10 @@ class Art2
 		}
 	}
 
-	public function setsection($section)
+	public function setmain($main)
 	{
-		if (strlen($section) < self::LENTEXT and is_string($section)) {
-			$this->section = $section;
+		if (strlen($main) < self::LENTEXT and is_string($main)) {
+			$this->main = $main;
 		}
 	}
 
@@ -557,14 +557,18 @@ class Art2
 		}
 	}
 
-	public function setexternalcss(array $externalcss)
+	public function setexternalcss($externalcss)
 	{
-		$this->externalcss = $externalcss;
+		if(is_array($externalcss)) {
+			$this->externalcss = array_values(array_filter($externalcss));
+		}
 	}
 
 	public function setexternalscript(array $externalscript)
 	{
-		$this->externalscript = $externalscript;
+		if(is_array($externalscript)) {
+			$this->externalscript = array_values(array_filter($externalscript));
+		}
 	}
 
 	public function setfooter($footer)
@@ -664,7 +668,7 @@ class Art2
 	public function settemplateoptions($templateoptions)
 	{
 		if(is_array($templateoptions)) {
-			$this->templateoptions = $templateoptions;
+			$this->templateoptions = array_filter($templateoptions);
 		}
 	}
 
diff --git a/app/class/config.php b/app/class/config.php
index 7d2320e..b778d83 100644
--- a/app/class/config.php
+++ b/app/class/config.php
@@ -15,7 +15,7 @@ abstract class Config
 	protected static $basepath = '';
 	protected static $route404;
 	protected static $existnot = 'This page does not exist yet';
-	protected static $defaultbody = '%HEADER%'. PHP_EOL .PHP_EOL . '%NAV%'. PHP_EOL .PHP_EOL . '%ASIDE%'. PHP_EOL .PHP_EOL . '%SECTION%'. PHP_EOL .PHP_EOL . '%FOOTER%';
+	protected static $defaultbody = '%HEADER%'. PHP_EOL .PHP_EOL . '%NAV%'. PHP_EOL .PHP_EOL . '%ASIDE%'. PHP_EOL .PHP_EOL . '%MAIN%'. PHP_EOL .PHP_EOL . '%FOOTER%';
 	protected static $defaultart = '';
 	protected static $defaultfavicon = '';
 	protected static $showeditmenu = true;
diff --git a/app/class/controllerart.php b/app/class/controllerart.php
index 3ada9d1..ee99b6a 100644
--- a/app/class/controllerart.php
+++ b/app/class/controllerart.php
@@ -118,7 +118,7 @@ class Controllerart extends Controller
 
 
         if ($this->importart() && $this->canedit()) {
-            $tablist = ['section' => $this->art->section(), 'css' => $this->art->css(), 'header' => $this->art->header(), 'nav' => $this->art->nav(), 'aside' => $this->art->aside(), 'footer' => $this->art->footer(), 'body' => $this->art->body(), 'javascript' => $this->art->javascript()];
+            $tablist = ['main' => $this->art->main(), 'css' => $this->art->css(), 'header' => $this->art->header(), 'nav' => $this->art->nav(), 'aside' => $this->art->aside(), 'footer' => $this->art->footer(), 'body' => $this->art->body(), 'javascript' => $this->art->javascript()];
 
             $faviconlist = $this->mediamanager->listfavicon();
             $idlist = $this->artmanager->list();
diff --git a/app/class/model.php b/app/class/model.php
index 78abbfa..ee8de26 100644
--- a/app/class/model.php
+++ b/app/class/model.php
@@ -14,7 +14,7 @@ abstract class Model
 	const MEDIA_EXTENSIONS = array('jpeg', 'jpg', 'JPG', 'png', 'gif', 'mp3', 'mp4', 'mov', 'wav', 'flac', 'pdf');
 	const MEDIA_TYPES = ['image', 'video', 'sound', 'other'];
 
-	const TEXT_ELEMENTS = ['header', 'nav', 'section', 'aside', 'footer'];
+	const TEXT_ELEMENTS = ['header', 'nav', 'main', 'aside', 'footer'];
 	const EDIT_SYMBOLS = ['pen', 'tool', 'none'];
 
 	public static function dirtopath($dir)
diff --git a/app/class/modelart.php b/app/class/modelart.php
index 03163e3..e8203e1 100644
--- a/app/class/modelart.php
+++ b/app/class/modelart.php
@@ -2,7 +2,7 @@
 class Modelart extends Modeldb
 {
 
-	const SELECT = ['title', 'id', 'description', 'tag', 'date', 'datecreation', 'datemodif', 'daterender', 'css', 'quickcss', 'javascript', 'body', 'header', 'section', 'nav', 'aside', 'footer', 'render', 'secure', 'invitepassword', 'interface', 'linkfrom', 'linkto', 'template', 'affcount', 'editcount'];
+	const SELECT = ['title', 'id', 'description', 'tag', 'date', 'datecreation', 'datemodif', 'daterender', 'css', 'quickcss', 'javascript', 'body', 'header', 'main', 'nav', 'aside', 'footer', 'render', 'secure', 'invitepassword', 'interface', 'linkfrom', 'linkto', 'template', 'affcount', 'editcount'];
 	const BY = ['datecreation', 'title', 'id', 'description', 'datemodif', 'secure'];
 	const ORDER = ['DESC', 'ASC'];
 
diff --git a/app/class/modelrender.php b/app/class/modelrender.php
index c76fa69..dba363b 100644
--- a/app/class/modelrender.php
+++ b/app/class/modelrender.php
@@ -50,7 +50,7 @@ class Modelrender extends Modelart
 			$templateid = $this->art->templatebody();
 			$templateart = $this->get($templateid);
 			if(self::REMPLACE_SELF_ELEMENT) {
-				$templatebody = preg_replace_callback('~\%(SECTION|ASIDE|NAV|HEADER|FOOTER)!\%~', function ($match) use ($templateid) {
+				$templatebody = preg_replace_callback('~\%(MAIN|ASIDE|NAV|HEADER|FOOTER)!\%~', function ($match) use ($templateid) {
 					return '%'. $match[1] . '.' . $templateid . '%';
 				}, $templateart->body());
 			} else {
@@ -69,7 +69,7 @@ class Modelrender extends Modelart
 	public function getbody(string $body)
 	{
 		$rend = $this;
-		$body = preg_replace_callback('~\%(SECTION|ASIDE|NAV|HEADER|FOOTER)((:[a-z0-9-_]+|!)(\+([a-z0-9-_]+|!))*)?\%~', function ($match) use ($rend) {
+		$body = preg_replace_callback('~\%(MAIN|ASIDE|NAV|HEADER|FOOTER)((:[a-z0-9-_]+|!)(\+([a-z0-9-_]+|!))*)?\%~', function ($match) use ($rend) {
 			$element = strtolower($match[1]);
 			$getelement = '';
 			if (isset($match[2]) && !empty($match[2])) {
@@ -147,6 +147,15 @@ class Modelrender extends Modelart
 		}
 		$head .= '<meta name="description" content="' . $this->art->description() . '" />' . PHP_EOL;
 		$head .= '<meta name="viewport" content="width=device-width" />' . PHP_EOL;
+
+		foreach ($this->art->externalcss() as $externalcss) {
+			$head .= '<link href="'.$externalcss.'" rel="stylesheet" />' . PHP_EOL;
+		}
+
+		foreach ($this->art->externalscript() as $externalscript) {
+			$head .= '<script src="'.$externalscript.'"></script>' . PHP_EOL;
+		}
+
 		$head .= '<link href="' . Model::globalpath() . 'fonts.css" rel="stylesheet" />' . PHP_EOL;
 		$head .= '<link href="' . Model::globalpath() . 'global.css" rel="stylesheet" />' . PHP_EOL;
 
diff --git a/app/class/w.article.php b/app/class/w.article.php
index 2476353..6c504f8 100644
--- a/app/class/w.article.php
+++ b/app/class/w.article.php
@@ -5,19 +5,19 @@ if ($app->exist($_GET['id'])) {
     $art = $app->get($_GET['id']);
 
     if (isset($_GET['edit']) and $_GET['edit'] == 1 and $app->session() >= $app::EDITOR) {
-        echo '<section class=edit>';
+        echo '<main class=edit>';
         $aff->edit($art, $app, $app->getlister(['id', 'title']), $config->fontsize(), $app->getlistermedia($app::MEDIA_DIR, 'image'));
         $aff->aside($app);
-        echo '</section>';
+        echo '</main>';
     } else {
-        echo '<section class="lecture">';
+        echo '<main class="lecture">';
 
 
         $art->autotaglistupdate($app->taglist($app->getlister(['id', 'title', 'description', 'tag']), $art->autotaglist()));
 
 
         $aff->lecture($art, $app);
-        echo '</section>';
+        echo '</main>';
 
     }
 } else {
diff --git a/app/class/w.home.php b/app/class/w.home.php
index 8ba8b44..a23c60f 100644
--- a/app/class/w.home.php
+++ b/app/class/w.home.php
@@ -3,7 +3,7 @@
 
 $aff->header();
 
-echo '<section class="home">';
+echo '<main class="home">';
 
 
 if ($app->session() >= $app::EDITOR) {
@@ -80,6 +80,6 @@ if ($app->session() >= $app::EDITOR) {
 
 
 
-echo '</section>';
+echo '</main>';
 
 ?>
\ No newline at end of file
diff --git a/app/class/w.menu.php b/app/class/w.menu.php
index 8e89ed1..ecce576 100644
--- a/app/class/w.menu.php
+++ b/app/class/w.menu.php
@@ -4,7 +4,7 @@
 if ($app->session() >= $app::EDITOR) {
 
     if ($_GET['aff'] == 'admin' && $app->session() >= $app::ADMIN) {
-        echo '<section>';
+        echo '<main>';
         echo '<h1>Admin</h1>';
 
         $aff->admincss($config, $app);
@@ -18,25 +18,25 @@ if ($app->session() >= $app::EDITOR) {
         $aff->admintable($config, $status, $app->tablelist($config->dbname()));
         $aff->admindisplay($config->color4());
 
-        echo '</section>';
+        echo '</main>';
     } elseif ($_GET['aff'] == 'media') {
         echo '<h1>Media</h1>';
-        echo '<section>';
+        echo '<main>';
         echo '<article>';
 
         $aff->addmedia($app);
         $aff->medialist($app->getlistermedia($app::MEDIA_DIR), $app::MEDIA_DIR);
 
         echo '</article>';
-        echo '</section>';
+        echo '</main>';
 
     } elseif ($_GET['aff'] == 'record') {
         echo '<h1>Record</h1>';
-        echo '<section>';
+        echo '<main>';
 
         $aff->recordlist($app);
 
-        echo '</section>';
+        echo '</main>';
 
     } elseif ($_GET['aff'] == 'info') {
 
diff --git a/app/view/templates/admin.php b/app/view/templates/admin.php
index 8de9bb1..66c7a33 100644
--- a/app/view/templates/admin.php
+++ b/app/view/templates/admin.php
@@ -8,7 +8,7 @@
     <?php $this->insert('backtopbar', ['user' => $user, 'tab' => 'admin']) ?>
 
 
-<section class="admin">
+<main class="admin">
 
     <h1>Administration</h1>
 
@@ -94,7 +94,7 @@
 
     
 
-</section>
+</main>
 </body>
 
 <?php $this->stop('page') ?>
\ No newline at end of file
diff --git a/app/view/templates/edit.php b/app/view/templates/edit.php
index 4b2fa77..32de517 100644
--- a/app/view/templates/edit.php
+++ b/app/view/templates/edit.php
@@ -8,7 +8,7 @@
 <style>.tabs textarea{font-size: <?= Config::fontsize() ?>px}</style>
 
 <body>
-<section class="editor">
+<main class="editor">
 
     <!-- <?php $this->insert('navart', ['user' => $user, 'art' => $art, 'artexist' => $artexist]) ?> -->
 
@@ -26,7 +26,7 @@
 
 </form>
 
-</section>
+</main>
 </body>
 
 <?php $this->stop('page') ?>
\ No newline at end of file
diff --git a/app/view/templates/edithelp.php b/app/view/templates/edithelp.php
index fee94c7..d01f3aa 100644
--- a/app/view/templates/edithelp.php
+++ b/app/view/templates/edithelp.php
@@ -5,7 +5,7 @@
     <pre><span class="i">ALT + X</span> : update</pre>
     <pre><span class="i">ALT + C</span> : display</pre>
     <h3>Markdown</h3>
-    <p>The html section use <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown encoding</a>. Actualy, W is using Michel Fortin's <a href="https://michelf.ca/projects/php-markdown/extra/" target="_blank">Markdown Extra</a>.</p>
+    <p>The html main use <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown encoding</a>. Actualy, W is using Michel Fortin's <a href="https://michelf.ca/projects/php-markdown/extra/" target="_blank">Markdown Extra</a>.</p>
     <h3>Links</h3>
     <pre>[text](=<span class="i">article_id</span>)</pre>
     <p>where article_id is the article's id you want to point to.</p>
diff --git a/app/view/templates/editleftbar.php b/app/view/templates/editleftbar.php
index ff08bfc..fd39ba7 100644
--- a/app/view/templates/editleftbar.php
+++ b/app/view/templates/editleftbar.php
@@ -22,9 +22,38 @@
             <input type="date" name="pdate" value="<?= $art->date('pdate') ?>" id="date">
             <label for="time">Time</label>
             <input type="time" name="ptime" value="<?= $art->date('ptime') ?>" id="time">
+
+            <label for="favicon">Favicon</label>
+            <select name="favicon" id="favicon">
+            <?php
+            if(!empty($art->templatecss()) && $art->template()['cssfavicon']) {
+                ?>
+                <option value="<?= $art->favicon() ?>">--using template favicon--</option>
+                <?php
+            } else {
+                echo '<option value="">--no favicon--</option>';
+            foreach ($faviconlist as $favicon) {
+                ?>
+                <option value="<?= $favicon ?>" <?= $art->favicon() === $favicon ? 'selected' : '' ?>><?= $favicon ?></option>
+                <?php
+                }
+            }
+            ?>
+            </select>
+
+
+
+
         </fieldset>
     </details>
-    <details open>
+
+
+
+
+
+
+
+    <details <?= !empty($art->templatebody()) || !empty($art->templatecss()) || !empty($art->templatejavascript()) ? 'open' : '' ?>>
         <summary>Tempalte</summary>
             <fieldset>
             <label for="templatebody">BODY template</label>
@@ -35,7 +64,7 @@
             ?>
                 <option value="<?= $template ?>" <?= $art->templatebody() === $template ? 'selected' : '' ?>><?= $template ?></option>
                 <?php 
-            }
+            } 
             ?>
             </select>
 
@@ -55,25 +84,32 @@
             <?php
             if(!empty($art->templatecss())) {
                 ?>
+
                 <div class="subtemplate">
-                <input type="checkbox" name="templateoptions['reccursivecss']" id="oreccursivecss" <?= $art->template()['cssreccursive'] === true ? 'checked' : '' ?>>
+                <input type="checkbox" name="templateoptions[]" id="oreccursivecss" value="reccursivecss" <?= in_array('reccursivecss', $art->templateoptions()) ? 'checked' : '' ?>>
                 <label for="oreccursivecss">Reccursive template</label>
                 </div>
                 <div class="subtemplate">
-                <input type="checkbox" name="templateoptions['quickcss']" id="oquickcss" <?= $art->template()['cssquickcss'] === true ? 'checked' : '' ?>>
+                <input type="checkbox" name="templateoptions[]" id="oquickcss" value="quickcss" <?= in_array('quickcss', $art->templateoptions()) ? 'checked' : '' ?>>
                 <label for="oquickcss">Quickcss</label>
                 </div>
                 <div class="subtemplate">
-                <input type="checkbox" name="templateoptions['externalcss']" id="oexternalcss" <?= $art->template()['externalcss'] === true ? 'checked' : '' ?>>
-                <label for="pexternalcss">External CSS</label>
+                <input type="checkbox" name="templateoptions[]" id="oexternalcss" value="externalcss" <?= in_array('externalcss', $art->templateoptions()) ? 'checked' : '' ?>>
+                <label for="oexternalcss">External CSS</label>
                 </div>
                 <div class="subtemplate">
-                <input type="checkbox" name="templateoptions['favicon']" id="ofavicon" <?= $art->template()['cssfavicon'] === true ? 'checked' : '' ?>>
+                <input type="checkbox" name="templateoptions[]" id="ofavicon" value="favicon" <?= in_array('favicon', $art->templateoptions()) ? 'checked' : '' ?>>
                 <label for="ofavicon">Favicon</label>
                 </div>
                 <?php
+            } else {
+                foreach($art->templateoptions() as $option) {
+                    if($option != 'externalsavascript') {
+                        echo '<input type="hidden" name="templateoptions[]" value="'.$option.'">';
+                    }
+                }
             }
-
+            
             ?>
 
 
@@ -88,41 +124,60 @@
             }
             ?>
             </select>
+
+
+            <?php
+            if(!empty($art->templatejavascript())) {
+            ?>
             <div class="subtemplate">
-            <input type="checkbox" name="iexternaljs" id="iexternaljs">
-            <label for="iexternaljs">external js</label>
+            <input type="checkbox" name="templateoptions[]" value="externaljavascript" id="oexternaljs" <?= in_array('externaljavascript', $art->templateoptions()) ? 'checked' : '' ?>>
+            <label for="oexternaljs">external js</label>
             </div>
 
+            <?php } else {
+                if(in_array('externaljavascript', $art->templateoptions())) {
+                    echo '<input type="hidden" name="templateoptions[]" value="externaljavascript">';
+                }
+                
+            } ?>
+
 
             </fieldset>
     </details>
-    <details id="advanced" open>
+    <details id="advanced" <?= !empty($art->externalcss()) || !empty($art->externalscript()) ? 'open' : '' ?>>
         <summary>Advanced</summary>
                 
-        <fieldset>
 
-        <?php
 
+
+
+    <fieldset id="external">
+        <label for="externalcss">External CSS</label>
+        <input type="text" name="externalcss[]" id="externalcss" placeholder="add external adress">
+        <?php
+            foreach ($art->externalcss() as $css) {
+                ?>
+                <div class="checkexternal">
+                <input type="checkbox" name="externalcss[]" id="<?= $css ?>" value="<?= $css ?>" checked>
+                <label for="<?= $css ?>" title="<?= $css ?>"><?= $css ?></label>
+                </div>
+                <?php
+            }
         ?>
 
-        <label for="favicon">Favicon</label>
-        <select name="favicon" id="favicon">
+        <label for="externalscript">External script</label>
+        <input type="text" name="externalscript[]" id="externalscript" placeholder="add external adress">
         <?php
-        if(!empty($art->templatecss()) && $art->template()['cssfavicon']) {
-            ?>
-            <option value="<?= $art->favicon() ?>">--using template favicon--</option>
-            <?php
-        } else {
-            echo '<option value="">--no favicon--</option>';
-        foreach ($faviconlist as $favicon) {
-            ?>
-            <option value="<?= $favicon ?>" <?= $art->favicon() === $favicon ? 'selected' : '' ?>><?= $favicon ?></option>
-            <?php
+            foreach ($art->externalscript() as $script) {
+                ?>
+                <div class="checkexternal">
+                <input type="checkbox" name="externalscript[]" id="<?= $script ?>" value="<?= $script ?>" checked>
+                <label for="<?= $script ?>" title="<?= $script ?>"><?= $script ?></label>
+                </div>
+                <?php
             }
-        }
         ?>
-        </select>
-        </fieldset>
+    </fieldset>
 
     </details>
     <details>
diff --git a/app/view/templates/font.php b/app/view/templates/font.php
index 90614a9..3de0dce 100644
--- a/app/view/templates/font.php
+++ b/app/view/templates/font.php
@@ -8,7 +8,7 @@
     <?php $this->insert('backtopbar', ['user' => $user, 'tab' => 'font']) ?>
 
 
-<section class="font">
+<main class="font">
 
 
 <h1>Fonts</h1>
@@ -55,7 +55,7 @@ foreach ($fontlist as $font ) {
 ?>
 </table>
 
-</section>
+</main>
 </body>
 
 <?php $this->stop('page') ?>
\ No newline at end of file
diff --git a/app/view/templates/home.php b/app/view/templates/home.php
index 9aa3d13..a69882d 100644
--- a/app/view/templates/home.php
+++ b/app/view/templates/home.php
@@ -12,7 +12,7 @@
 
 <?php if($user->iseditor()) { ?>
 
-<section class="home">
+<main class="home">
 
 
 
@@ -102,7 +102,7 @@
 </form>
 </div>
 </div>
-</section>
+</main>
 
 <?php } ?>
 
diff --git a/app/view/templates/info.php b/app/view/templates/info.php
index 4634995..4da3819 100644
--- a/app/view/templates/info.php
+++ b/app/view/templates/info.php
@@ -8,7 +8,7 @@
     <?php $this->insert('backtopbar', ['user' => $user, 'tab' => 'info']) ?>
 
 
-<section class="info">
+<main class="info">
 
 <h1>Info</h1>
 
@@ -138,7 +138,7 @@
 <li>header</li>
 <li>nav</li>
 <li>aside</li>
-<li>section</li>
+<li>main</li>
 <li>footer</li>
 </ul>
 
@@ -267,7 +267,7 @@ You can use any of them, only one or all at the same time, as you prefer.
 <p>As it is too long adding all media of a folder one by one, you can just print the content of an entire folder using this method.</p>
 
 <blockquote>
-%MEDIA:<i>__repository__</i>
+%MEDIA:<i>__directory__</i>
 </blockquote>
 
 <p>Just point to the good directory inside the media folder. This will output html list, creating image elements, audio players, video players, or just basic link, depending on the media type.</p>
@@ -295,7 +295,7 @@ You can use any of them, only one or all at the same time, as you prefer.
 %ASIDE%
 </br>
 </br>
-%SECTION%
+%MAIN%
 </blockquote>
 
 <p>Will output :</p>
@@ -309,12 +309,12 @@ __the content of your aside__
 &lt;/aside&gt;
 </br>
 </br>
-&lt;section class="<i>page_id</i>"&gt;
+&lt;main class="<i>page_id</i>"&gt;
 </br>
-__the content of your section__
+__the content of your main__
 </br>
 
-&lt;/section&gt;
+&lt;/main&gt;
 
 
 </blockquote>
@@ -357,7 +357,7 @@ __content of this page html element__
 
 </article>
 
-</section>
+</main>
 </body>
 
 <?php $this->stop('page') ?>
\ No newline at end of file
diff --git a/app/view/templates/media.php b/app/view/templates/media.php
index 2078d79..706a160 100644
--- a/app/view/templates/media.php
+++ b/app/view/templates/media.php
@@ -8,7 +8,7 @@
     <?php $this->insert('backtopbar', ['user' => $user, 'tab' => 'media']) ?>
 
 
-<section class="media">
+<main class="media">
 
 
 <div id="tree">
@@ -28,7 +28,7 @@ function treecount(array $dir, string $dirname, int $deepness, string $path, str
         $folder = '├─📁' . $dirname;
     }
     echo '<tr>';
-    echo '<td><a href="?path=' . $path . '">' . str_repeat(' ‎ ‎', $deepness) . $folder . '</a></td>';
+    echo '<td><a href="?path=' . $path . '">' . str_repeat('&nbsp;&nbsp;', $deepness) . $folder . '</a></td>';
     echo '<td>' . $dir['dirfilecount'] . '</td>';
     echo '</tr>';
     foreach ($dir as $key => $value) {
@@ -78,7 +78,7 @@ foreach ($medialist as $media) {
     <tr>
     <td><a href="<?= $media->getfullpath() ?>" target="_blank"><?= $media->id() ?></a></td>
     <td><?= $media->extension() ?></td>
-    <td><?= $media->type() == 'image' ? 'image <span class="thumbnail">👁<img src="' . $media->getfullpath() . '"></span>' : $media->type() ?></td>
+    <td><?= $media->type() == 'image' ? '<span class="thumbnail">image 👁<img src="' . $media->getfullpath() . '"></span>' : $media->type() ?></td>
     <td><?= readablesize($media->size()) ?></td>
     <td><?= $media->width() ?></td>
     <td><?= $media->height() ?></td>
@@ -110,7 +110,7 @@ foreach ($medialist as $media) {
 
 </div>
 
-</section>
+</main>
 </body>
 
 <?php $this->stop('page') ?>
\ No newline at end of file
diff --git a/assets/css/edit.css b/assets/css/edit.css
index 79b9dee..e9283b5 100644
--- a/assets/css/edit.css
+++ b/assets/css/edit.css
@@ -150,7 +150,7 @@ body {
 
 
 
-section.editor {
+main.editor {
     position: fixed;
     width: 100%;
     height: 100%;
@@ -258,6 +258,14 @@ form#update {
     cursor: pointer;
 }
 
+#external label {
+    width: 150px;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 @media (max-width: 600px) {
     .bar {
         display: none;
diff --git a/assets/css/home.css b/assets/css/home.css
index 3ee6a17..540651a 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -66,18 +66,18 @@ th {
     color: black;
 }
 
-section {
+main {
     padding-top: 30px;
     margin: 0 0.5%;
 }
 
-section.admin input, select, textarea {
+main.admin input, select, textarea {
     display: block;
     width: 100%;
     max-width: 400px;
 }
 
-section.font input, select, textarea {
+main.font input, select, textarea {
     display: block;
 }
 
@@ -97,12 +97,12 @@ span#search {
 #topbar input[type="text"], #topbar input[type="password"] {width: 100px;}
 
 
-section.font table#fontlist {
+main.font table#fontlist {
     width: 100%;
     max-width: 500px;
 }
 
-section.media table#medialist {
+main.media table#medialist {
     width: 100%;
     max-width: 960px;
 }
@@ -111,31 +111,31 @@ section.media table#medialist {
     text-decoration: underline;
 }
 
-section.media table#faviconlist {
+main.media table#faviconlist {
     width: 100%;
     max-width: 640px;
 }
 
-section.info ul i {
+main.info ul i {
     color: grey;
 }
 
-section.info a {
+main.info a {
     text-decoration: underline white;
 }
 
-section.info ul {
+main.info ul {
     list-style: none;
     padding-inline-start: 10px;
 }
 
-section.info code, section.info blockquote {
+main.info code, main.info blockquote {
     color: white;
     background-color: #191919;
     width: fit-content;
 }
 
-section.info article {
+main.info article {
     max-width: 800px;
     text-align: justify;
     background-color: #e2e1e1;
@@ -143,61 +143,61 @@ section.info article {
     padding: 1%;
 }
 
-section.info blockquote i {
+main.info blockquote i {
     font-style: normal;
     color: #7b97b9;
 }
 
 
-section.info article h2#manual {
+main.info article h2#manual {
     text-align: center;
     font-size: 40px;
 }
 
-section.info article h3 {
+main.info article h3 {
     border-bottom: solid 1px grey;
     margin-top: 100px;
     padding-top: 15px;
     font-size: 35px;
 }
 
-section.info article h4 {
+main.info article h4 {
     background-color: darkgrey;
     padding: 10px;
     font-size: x-large;
     margin-top: 70px;
 }
 
-section.info article h5 {
+main.info article h5 {
     text-transform: uppercase;
     margin-top: 45px;
     font-size: large;
 }
 
-section.info code {
+main.info code {
     padding: 0 4px;
 }
 
-section.info blockquote {
+main.info blockquote {
     padding: 6px 12px;
     text-align: left;
     word-break: break-all;
 }
 
-section.info nav {
+main.info nav {
     position: fixed;
-    right: 3%;
-    top: 20%;
-    margin: 7%;
+    left: 850px;
+    border-left: solid 2px grey;
+    padding: 0 10px;
 }
 
-section.info article code i {
+main.info article code i {
     font-style: normal;
     color: #7b97b9;
 }
 
 
-section.media table#medialist img {
+main.media table#medialist img {
     display: none;
     position: absolute;
     max-width: 400px;
@@ -207,20 +207,20 @@ section.media table#medialist img {
     padding: 1%;
 }
 
-section.media table#medialist .thumbnail:hover img {
+main.media table#medialist .thumbnail:hover img {
     display: block;
 }
 
 
-section.media form {
+main.media form {
     margin: 1%;
 }
 
-section.media div#tree, section.media div#explorer {
+main.media div#tree, main.media div#explorer {
     display: inline-grid;
 }
 
-section.media code {
+main.media code {
     color: #9cbfe8;
     background-color: darkslategrey;
     font-size: small;
@@ -228,12 +228,13 @@ section.media code {
 }
 
 @media (max-width: 600px) {
-    section.home .summary, section.home .linkfrom, section.home .linkto, section.home .delete, section.home .datecreation, section.home .date, section.home .log, section.home .secure, section.home .tag {
+    main.home .summary, main.home .linkfrom, main.home .linkto, main.home .delete, main.home .datecreation, main.home .date, main.home .log, main.home .secure, main.home .tag {
         display: none;
     }
 
-    section.info nav {
+    main.info nav {
         position: relative;
+        left: 0;
     }
 
 }