MVC on public site

site-public/application/Controller.php

@@ -109,16 +109,17 @@
                     require_once($path["page"] . "Festivals_Page.php");
                     $page = new Festivals_Page($db, $lang);
                 }
+                if (strtolower($route[0]) == $url["photo"] && sizeof($route) > 1){
+                    require_once($path["page"] . "Photo_Page.php");
+                    $page = new Photo_Page($db, $lang, $route[1]);
+                }
             }
 
             // Load the view, or set an error code.
             if (!isset($page)){
                 http_response_code(404);
-                // TODO: Set up error page
-                require_once($path["page"] . "Home_Page.php");
-                $page = new Home_Page($db, $lang);
-                //require_once($path["page"] . "Error_Page.php");
-                //$page = new Error_Page($db, $lang);
+                require_once($path["page"] . "Error_Page.php");
+                $page = new Error_Page($db, $lang, 404);
             }
             require_once($page->template);
         }

site-public/application/config/config.php

@@ -20,6 +20,7 @@
             "blog" => "blog",
             "us" => "nosotros",
             "gallery" => "galeria",
+            "photo" => "foto",
             "festivals" => "fiestas"
         ],
         "en" => [
@@ -28,6 +29,7 @@
             "blog" => "blog",
             "us" => "us",
             "gallery" => "gallery",
+            "photo" => "photo",
             "festivals" => "festivals"
         ],
         "eu" => [
@@ -36,6 +38,7 @@
             "blog" => "blog",
             "us" => "gu",
             "gallery" => "argaskinak",
+            "photo" => "argaskia",
             "festivals" => "jaiak"
         ]
     ];

site-public/application/entity/Album.php

@@ -50,7 +50,6 @@
             $s =
               "SELECT " .
               "  id, " .
-              "  file, " .
               "  permalink, " .
               "  title_" . $this->lang . " AS title, " .
               "  description_" . $this->lang . " AS description " .
@@ -71,13 +70,13 @@
                 }
             }
             $s_photo =
-              "SELECT id " .
+              "SELECT photo " .
               "FROM photo_album " .
               "WHERE " .
               "  album = " . $this->id . ";";
             $q_photo = mysqli_query($this->db, $s_photo);
             while($r_photo = mysqli_fetch_array($q_photo)){
-                array_push($this->photo, new Photo($this->db, $this->lang, $r_photo["id"]));
+                array_push($this->photo, new Photo($this->db, $this->lang, $r_photo["photo"]));
             }
         }
     }

site-public/application/page/Album_Page.php

@@ -27,7 +27,7 @@
             global $data;
             parent::__construct($db, $lang);
             $this->template = $path["template"] . "album.php";
-            $this->album, new Album($this->db, $this->lang, $id));
+            $this->album = new Album($this->db, $this->lang, $id);
             $this->title = $this->album->title . " - " . $data["name"];
             $this->description = $this->album->title . " - " . $data["name"];
             $this->canonical = $base_url . "/galeria/" . $this->album->permalink;

site-public/application/page/Gallery_Page.php

@@ -26,7 +26,7 @@
             global $base_url;
             global $data;
             parent::__construct($db, $lang);
-            $this->template = $path["template"] . "album.php";
+            $this->template = $path["template"] . "gallery.php";
             $s =
               "SELECT id " .
               "FROM album " .
@@ -36,7 +36,7 @@
                 array_push($this->album, new Album($this->db, $this->lang, $r["id"]));
             }
             $this->title = $this->string["section_gallery"] . " - " . $data["name"];
-            $this->description = $this->string["section_galery"] . " - " . $data["name"];
+            $this->description = $this->string["section_gallery"] . " - " . $data["name"];
             $this->canonical = $base_url . "/galeria/";
         }
     }

site-public/application/page/Help_Page.php

@@ -22,10 +22,10 @@
             global $static;
             global $data;
             parent:: __construct($db, $lang);
-            $this->view = $path["view"] . "help.php";
+            $this->template = $path["template"] . "help.php";
             $this->title = $this->string["section_help"] . " - " . $data["name"];
             $this->description = $this->string["section_help"] . " - " . $data["name"];
-            $this->canonical = $base_url . "/" . $url->help . "/"";
+            $this->canonical = $base_url . "/" . $url->help . "/";
         }
     }
 ?>

site-public/application/page/Photo_Page.php

@@ -27,7 +27,7 @@
             global $data;
             parent::__construct($db, $lang);
             $this->template = $path["template"] . "photo.php";
-            $this->photo = new Photo($this->db, $this->lang, $r["id"]));
+            $this->photo = new Photo($this->db, $this->lang, $id);
         }
     }
 ?>

site-public/application/page/Us_Page.php

@@ -19,10 +19,8 @@
         public function __construct($db, $lang){
             global $path;
             global $base_url;
-            global $static;
-            global $data;
             parent:: __construct($db, $lang);
-            $this->view = $path["view"] . "us.php";
+            $this->template = $path["template"] . "us.php";
             $this->title = $this->string["section_us"] . " - " . $data["name"];
             $this->description = $this->string["section_us"] . " - " . $data["name"];
             $this->canonical = $base_url . "/" . $url->us . "/"";

site-public/application/template/album.php

@@ -10,8 +10,8 @@
         <link rel='stylesheet' type='text/css' href='<?=$static["css"]?>ui.css'/>
         <link rel='stylesheet' type='text/css' href='<?=$static["css"]?>gallery.css'/>
         <!-- Script files -->
-        <script type='text/javascript' src='<?=$static["js"]?>ui.js'></script>
-        <script type='text/javascript' src='<?=$static["js"]?>gallery.js'></script>
+        <script type='text/javascript' src='<?=$static["script"]?>ui.js'></script>
+        <script type='text/javascript' src='<?=$static["script"]?>gallery.js'></script>
         <!-- Meta tags -->
         <link rel='canonical' href='<?=$page->canonical?>'/>
         <link rel='author' href='<?=$page->author?>'/>
@@ -40,22 +40,33 @@
                 <h3>
                     <?=$page->album->title?>
                 </h3>
-                <article>
 <?php
-                    foreach($page->album->photo as $photo) {
+                foreach($page->album->photo as $photo) {
 ?>
-                        <img class='pointer' onClick="showPhotoByPath('<?=$photo->file?>');" src='<?=$static["content"]?>gallery/<?=$photo->image?>' srcset='<?=srcset("gallery/" . $photo->image)?>'/>
+                    <article>
 <?php
-                        if (is_set($photo->title)){
+                        if (isset($photo->title)){
 ?>
-                            <h5>
+                            <h4>
                                 <?=$photo->title?>
-                            </h5>
+                            </h4>
 <?php
                         }
-                    }
 ?>
-                </article>
+                        <img class='pointer' onClick="showPhoto('<?=$url["photo"]?>', '<?=$photo->id?>');" src='<?=$static["content"]?>gallery/<?=$photo->file?>' srcset='<?=srcset("gallery/" . $photo->file)?>'/>
+<?php
+                        if (isset($photo->username)){
+?>
+                            <div class='user'>
+                                <?=$photo->username?>
+                            </div>
+<?php
+                        }
+?>
+                    </article>
+<?php
+                }
+?>
             </section>
         </main>
         <div id='screen_cover' onClick='closeViewer();'>

site-public/application/template/blog.php

@@ -36,10 +36,6 @@
         include $path["include"] . "header.php";
 ?>
         <main>
-<?php
-            // TODO: Worth it?
-            //include $path["inc"] . "blog-left.php";
-?>
             <section id='post_list'>
                 <h3>
                     <?=$page->title?>
@@ -61,13 +57,13 @@
                         } // if (strlen($post->image) > 0)
 ?>
                         <p>
-                            <?=cut_text($post->text, 100, $page->string["keep_reading"], $base_url . "/blog/" . $post->permalink)?>
+                            <?=cut_text($post->text, 350, $page->string["keep_reading"], $base_url . "/blog/" . $post->permalink)?>
                         </p>
                         <div class='post_details'>
                             <div class='post_details_date'>
                                 <?=format_date($post->dtime, $page->lang, false)?>
                             </div>
-                            <div class='post_details_tags'>
+                            <!--<div class='post_details_tags'>
 <?php
                                 $tags = "";
                                 foreach($post->tag as $tag) {
@@ -76,7 +72,7 @@
                                 substr($tags, 0, strlen($tags) - 2);
 ?>
                                 <?=$tags?>
-                            </div>
+                            </div>-->
                             <div class='post_details_comments'>
 <?php
                                 $comment = "";
@@ -98,10 +94,6 @@
                 } // foreach($array as $item)
 ?>
             </section>
-<?php
-            // TODO: Worth it?
-            //include $path["inc"] . "blog-right.php";
-?>
         </main>
 <?php
         include $path["include"] . "footer.php";

site-public/application/template/gallery.php

@@ -10,8 +10,8 @@
         <link rel='stylesheet' type='text/css' href='<?=$static["css"]?>ui.css'/>
         <link rel='stylesheet' type='text/css' href='<?=$static["css"]?>gallery.css'/>
         <!-- Script files -->
-        <script type='text/javascript' src='<?=$static["js"]?>ui.js'></script>
-        <script type='text/javascript' src='<?=$static["js"]?>gallery.js'></script>
+        <script type='text/javascript' src='<?=$static["script"]?>ui.js'></script>
+        <script type='text/javascript' src='<?=$static["script"]?>gallery.js'></script>
         <!-- Meta tags -->
         <link rel='canonical' href='<?=$page->canonical?>'/>
         <link rel='author' href='<?=$page->author?>'/>
@@ -45,14 +45,16 @@
 ?>
                     <article>
                         <h4>
-                            <a href='<?=$base_url?>/galeria/<?=$album->permalink?>'><?=album->title?></a>
+                            <a href='<?=$base_url?>/galeria/<?=$album->permalink?>'>
+                                <?=$album->title?>
+                            </a>
                         </h4>
 <?php
                         for($i = 0; $i < 4; $i ++) {
-                            $r = mt_rand (0, strlen($album->photo) - 1);
+                            $r = mt_rand (0, sizeof($album->photo) - 1);
 ?>
-                            <a href='<?=$base_url?>/galeria/<?=$album->permalink?>'>
-                                <img alt=' <?=$album->photo[$r]->title?>' title=' <?=$album->photo[$r]->title?>' src='<?=$static["content"]?>gallery/<?=$album->photo[$r]->image?>' srcset='<?=srcset("gallery/" . $album->photo[$r]->image)?>'/>
+                            <a class='frame' href='<?=$base_url?>/galeria/<?=$album->permalink?>'>
+                                <img alt=' <?=$album->photo[$r]->title?>' title=' <?=$album->photo[$r]->title?>' src='<?=$static["content"]?>gallery/<?=$album->photo[$r]->file?>' srcset='<?=srcset("gallery/" . $album->photo[$r]->file)?>'/>
                             </a>
 <?php
                         }

site-public/application/template/help.php

@@ -10,7 +10,7 @@
         <link rel='stylesheet' type='text/css' href='<?=$static["css"]?>ui.css'/>
         <link rel='stylesheet' type='text/css' href='<?=$static["css"]?>help.css'/>
         <!-- Script files -->
-        <script type='text/javascript' src='<?=$static["js"]?>ui.js'></script>
+        <script type='text/javascript' src='<?=$static["script"]?>ui.js'></script>
         <!-- Meta tags -->
         <link rel='canonical' href='<?=$page->canonical?>'/>
         <link rel='author' href='<?=$page->author?>'/>

site-public/application/template/home.php

@@ -67,7 +67,7 @@
                                 <?=cut_text($activity->text, 100, $page->string["keep_reading"], $base_url . "/actividades/" . $activity->permalink)?>
                             </p>
                             <div class='details'>
-                                <div class='details_tags'>
+                                <div class='details_tags hidden'>
 <?php
                                     $tags = "";
                                     foreach($activity->tag as $tag) {
@@ -128,7 +128,7 @@
                             <?=cut_text($activity->text, 100, $page->string["keep_reading"], $base_url . "/actividades/" . $activity->permalink)?>
                         </p>
                         <div class='details'>
-                            <div class='details_tags'>
+                            <div class='details_tags hidden'>
 <?php
                                 $tags = "";
                                 foreach($activity->tag as $tag) {
@@ -186,7 +186,7 @@
                             <div class='details_date'>
                                 <?=format_date($post->dtime, $page->lang, false)?>
                             </div>
-                            <div class='details_tags'>
+                            <div class='details_tags hidden'>
 <?php
                                 $tags = "";
                                 foreach($post->tag as $tag) {

site-public/application/template/include/footer.php

@@ -5,16 +5,16 @@
         </span>
         <br/>
         <a title='Facebook' target='_blank' href='<?=$data["social"]["facebook"]?>'>
-            <img src='<?=$static["layout"]?>/social/facebook.gif' alt='Facebook'/>
+            <img src='<?=$static["layout"]?>social/facebook.gif' alt='Facebook'/>
         </a>
         <a title='Twitter' target='_blank' href='<?=$data["social"]["twitter"]?>'>
-            <img src='<?=$static["layout"]?>/social/twitter.gif' alt='Twitter'/>
+            <img src='<?=$static["layout"]?>social/twitter.gif' alt='Twitter'/>
         </a>
         <a title='Youtube' target='_blank' href='<?=$data["social"]["youtube"]?>'>
-            <img src='<?=$static["layout"]?>/social/youtube.gif' alt='Youtube'/>
+            <img src='<?=$static["layout"]?>social/youtube.gif' alt='Youtube'/>
         </a>
         <a title='Instagram' target='_blank' href='<?=$data["social"]["instagram"]?>'>
-            <img src='<?=$static["layout"]?>/social/instagram.gif' alt='Instagram'/>
+            <img src='<?=$static["layout"]?>social/instagram.gif' alt='Instagram'/>
         </a>
         <br/>
         <span id='footer_info' class='desktop'>
@@ -32,7 +32,7 @@
         foreach ($page->sponsor as $sponsor){
 ?>
             <a target='_blank' href='<?=$sponsor->link?>'>
-                <img src='<?=$static["content"]?>/sponsor/<?=$sponsor->image?>' srcset='<?=srcset("sponsor/" . $sponsor->image)?>'/>
+                <img src='<?=$static["content"]?>sponsor/<?=$sponsor->image?>' srcset='<?=srcset("sponsor/" . $sponsor->image)?>'/>
             </a>
 <?php
         }
@@ -48,16 +48,16 @@
         </a>
         <br/>
         <br class='mobile'/>
-        <img class='lang' alt='Espanol' src='/img/lang/es.gif' onClick='changeLanguage("es", "<?=$base_url?>");'/>
-        <img class='lang' alt='English' src='/img/lang/en.gif' onClick='changeLanguage("en", "<?=$base_url?>");'/>
-        <img class='lang' alt='Euskara' src='/img/lang/eu.gif' onClick='changeLanguage("eu", "<?=$base_url?>");'/>
+        <img class='lang' alt='Espanol' src='<?=$static["layout"]?>lang/es.gif' onClick='changeLanguage("es", "<?=$base_url?>");'/>
+        <img class='lang' alt='English' src='<?=$static["layout"]?>/en.gif' onClick='changeLanguage("en", "<?=$base_url?>");'/>
+        <img class='lang' alt='Euskara' src='<?=$static["layout"]?>lang/eu.gif' onClick='changeLanguage("eu", "<?=$base_url?>");'/>
         <br class='desktop'/>
         <a title='Google Play' href='<?=$data["app"]["android"]?>'>
-            <img class='app' alt='<?=$page->string["app_android"]?>' src='/img/app/android.gif' />
+            <img class='app' alt='<?=$page->string["app_android"]?>' src='<?=$static["layout"]?>app/android.gif' />
         </a>
         <br class='desktop'/>
         <a title='App Store' href='<?=$data["app"]["ios"]?>'>
-            <img class='app' alt='<?=$page->string["app_ios"]?>' src='/img/app/ios.gif' />
+            <img class='app' alt='<?=$page->string["app_ios"]?>' src='<?=$static["layout"]?>app/ios.gif' />
         </a>
     </div>
 </footer>

site-public/application/template/include/header.php

@@ -1,22 +1,17 @@
 <?php global $static?>
 <header>
-    <img src='<?=$static["layout"]?>/logo/logo.png'/>
+    <img src='<?=$static["layout"]?>logo/logo.png'/>
     <a href='<?=$base_url?>/'>
         <?=$page->string["section_home"]?>
-    </a>
-    <a href='<?=$base_url?>/fiestas/'>
+    </a><a href='<?=$base_url?>/fiestas/'>
         <?=$page->string["section_festivals"]?>
-    </a>
-    <a href='<?=$base_url?>/actividades/'>
+    </a><a href='<?=$base_url?>/actividades/'>
         <?=$page->string["section_activities"]?>
-    </a>
-    <a href='<?=$base_url?>/blog/'>
+    </a><a href='<?=$base_url?>/blog/'>
         <?=$page->string["section_blog"]?>
-    </a>
-    <a href='<?=$base_url?>/nosotros/'>
+    </a><a href='<?=$base_url?>/nosotros/'>
         <?=$page->string["section_us"]?>
-    </a>
-    <a href='<?=$base_url?>/galeria/'>
+    </a><a href='<?=$base_url?>/galeria/'>
         <?=$page->string["section_gallery"]?>
     </a>
 </header>

site-public/application/template/photo.php

@@ -1,6 +1,6 @@
 <h3>
 <?php
-    if (is_set($page->photo->title)){
+    if (isset($page->photo->title)){
 ?>
         <?=$page->photo->title?>
 <?php
@@ -15,19 +15,19 @@
         <img id='viewer_arrow_left' class='viewer_arrow pointer' alt=' ' src='<?=$static["layout"]?>/control/slid-left.png' onClick='scrollPhoto(-1);'/>
     </div>
     <div id='photo_view'>
-        <img alt=' <?=$page->photo->title?>' title=' <?=$page->photo->title?>' src='<?=$static["content"]?>gallery/<?=$page->photo->image?>' srcset='<?=srcset("gallery/" . $page->photo->image)?>'/>
+        <img alt=' <?=$page->photo->title?>' title=' <?=$page->photo->title?>' src='<?=$static["content"]?>gallery/<?=$page->photo->file?>' srcset='<?=srcset("gallery/" . $page->photo->file)?>'/>
 <?php
-        if (is_set($page->photo->description)){
+        if (isset($page->photo->description)){
 ?>
             <p>
                 <?=$page->photo->description?>
             </p>
 <?php
         }
-        if (is_set($page->photo->username)){
+        if (isset($page->photo->username)){
 ?>
             <span id='photo_user' class='italic'>
-                <?=$page->string["photo_user"]?><?=$page->photo->username?>
+                <?=$page->string["photo_user"]?> <?=$page->photo->username?>
             </span>
 <?php
         }

site-public/application/template/post.php

@@ -36,10 +36,6 @@
         include $path["include"] . "header.php";
 ?>
         <main>
-<?php
-            // TODO: Worth it?
-            //include $path["inc"] . "blog-left.php";
-?>
             <section id='post'>
                 <h3>
                     <?=$page->post->title?>
@@ -59,7 +55,7 @@
                         <div class='post_details_date'>
                             <?=format_date($page->post->dtime, $page->lang, false)?>
                         </div>
-                        <div class='post_details_tags'>
+                        <!--<div class='post_details_tags'>
 <?php
                             $tags = "";
                             foreach($page->post->tag as $tag) {
@@ -68,7 +64,7 @@
                             substr($tags, 0, strlen($tags) - 2);
 ?>
                             <?=$tags?>
-                        </div>
+                        </div>-->
                     </div>
                     <div id='comments'>
 <?php
@@ -109,17 +105,13 @@
                             <input type='hidden' name='id' value='<?=$page->post->id?>'/>
                             <br/>
                             <div id='identification_form'>
-                                <input id='new_comment_user' name='user' maxlength='50' type='text' placeholder='<?$page->string["comment_form_name"]?>' onChange='dissmiss_comment_error();' onKeyDown='dissmiss_comment_error();'/>
+                                <input id='new_comment_user' name='user' maxlength='50' type='text' placeholder='<?=$page->string["comment_form_name"]?>' onChange='dissmiss_comment_error();' onKeyDown='dissmiss_comment_error();'/>
                             <input type='submit' value='<?=$page->string["comment_form_send"]?>'/>
                             </div>
                         </form>
                     </div>
                 </article>
             </section>
-<?php
-            // TODO: Worth it?
-            //include $path["inc"] . "blog-right.php";
-?>
         </main>
 <?php
         include $path["include"] . "footer.php";

site-public/application/template/string/lang_en.php

@@ -1,5 +1,21 @@
 <?php
     $string = array();
+    
+    $string["$error_name"] = "Error";
+    $string["$error_error"] = "ERROR";
+    $string["$error_code"] = "CODE";
+    $string["$error_400_name"] = "Bad request";
+    $string["$error_400_description"] = "This server doesn't understand your request.";
+    $string["$error_401_name"] = "Unauthorized";
+    $string["$error_401_description"] = "You are trying to see something you are not supposed to.";
+    $string["$error_403_name"] = "Forbidden";
+    $string["$error_403_description"] = "You are trying to see something you are not supposed to.";
+    $string["$error_404_name"] = "Not found";
+    $string["$error_404_description"] = "Sorry. The page you are looking for doesn&#39;t exist in this universe. Try in an alternate one.";
+    $string["$error_500_name"] = "Server error";
+    $string["$error_500_description"] = "This one is on us: We&#39;ve messed something up. Sorry! We are probably trying to fix it right now.";
+    $string["$error_unexpected_name"] = "Unexpected error";
+    $string["$error_unexpected_description"] = "Something went wrong...";
 
     //Common words
     $string["yes"] = "Yes";

site-public/application/template/us.php

@@ -40,7 +40,7 @@
                     <?=$page->string["us_association"]?>
                 </h3>
                 <article>
-                    <img src="<?=$static["layout"]?>/us/logo.png" alt=" "/>
+                    <img src="<?=$static["layout"]?>us/logo.png" alt=" "/>
                     <?=$page->string["us_association_content"]?>
                 </div>
             </section>
@@ -49,7 +49,7 @@
                     <?=$page->string["us_cuadrilla"]?>
                 </h3>
                 <article>
-                    <img src="<?=$static["layout"]?>/us/margolo.png" alt=" "/>
+                    <img src="<?=$static["layout"]?>us/margolo.png" alt=" "/>
                     <?=$page->string["us_cuadrilla_content"]?>
                 </div>
             </section>
@@ -58,7 +58,7 @@
                     <?=$page->string["us_activities"]?>
                 </h3>
                 <article>
-                    <img src="<?=$static["layout"]?>/us/activities.png" alt=" "/>
+                    <img src="<?=$static["layout"]?>us/activities.png" alt=" "/>
                     <?=$page->string["us_activities_content"]?>
                 </div>
             </section>

site-public/application/util/text.php

@@ -211,7 +211,7 @@
             $cut = $text;
         }
         if (strlen($text) != strlen($cut) && strlen($link) > 0 && strlen($link_text) > 0){
-            $cut = $cut . "... <a href='$link'>$link_text</a>";
+            $cut = $cut . " <a href='$link'>$link_text</a>";
         }
         return $cut;
     }

site-public/public/css/blog.css

@@ -1,28 +1,51 @@
 /* Blog main page. */
 section#post_list article img{
-    max-width: 7em;
-    max-height: 5em;
-    margin-right: 1em;
     display: inline-block;
-    vertical-align: top;
+    vertical-align:top;
+    max-width: 10em;
+    max-height: 8em;
+    border: 0.1em solid #000000;
+    border-radius: 0.2em;
+    margin: 0.8em;
+    float: left;
 }
 section#post_list article p{
-    display: inline-block;
+    display: block;
     vertical-align: top;
+    mergin-top: 0.5em;
+}
+section#post_list article div.post_details{
+    border-top: 0.2em solid #cccccc;
+    font-size: 90%;
+    color: #444455;
+    margin: 1em 0.5em;
 }
 section#post_list article div.post_details > div{
     display: inline-block;
+    margin: 0;
+    padding: 0.5em 1em;
     vertical-align: top;
     font-size: 90%;
-}
-section#post_list article div.post_details div.post_details_date{
-    width: 40%;
-}
-section#post_list article div.post_details div.post_details_tags{
+    font-style: italic;
     width: 40%;
 }
 section#post_list article div.post_details div.post_details_comments{
-    width: 20%;
+    text-align: right;
 }
 
 /* Single post page. */
+section#post article img#main_image{
+    display: block;
+    max-width: 60em;
+    max-height: 20em;
+    border: 0.3em solid #000000;
+    border-radius: 0.3em;
+    margin: 1em auto 1em auto;
+}
+section#post article div.post_details{
+    border-top: 0.2em solid #cccccc;
+    font-size: 90%;
+    color: #444455;
+    margin: 1em 0.5em;
+    text-align: right;
+}

site-public/public/css/gallery.css

@@ -12,15 +12,23 @@ section#album_list article{
     vertical-align: top;
     text-align: center;
     margin: 1em;
-    width: 20em;
+    width: 25em;
 }
 
-section#album_list article img{
+section#album_list article a.frame{
     display: inline-block;
-    width: 4em;
-    margin: 1em;
-    border: 0.2em solid black;
+    width: 10em;
+    max-height: 10em;
+    margin: 0.2em;
+    border: 0.1em solid #000033;
+    background-color: #000033;
+    border-radius: 0.2em;
+    vertical-align: middle;
+}
 
+section#album_list article a.frame img{
+    max-width: 9.5em;
+    max-height: 9.5em;
 }
 
 /* Album page. */
@@ -30,10 +38,27 @@ section#album{
 section#album h3{
     text-align: left;
 }
-section#album img{
-    max-height: 7em;
-    max-width: 7em;
-    margin: 1em;
+section#album article{
+    display: inline-block;
+    vertical-align: top;
+    height: 12em;
+    width: 12em;
+}
+section#album article h4{
+    margin-bottom: 0.2em;
+}
+section#album article img{
+    max-height: 9em;
+    max-width: 11.5em;
+    border: 0.1em solid #000033;
+    border-radius: 0.2em;
+}
+section#album article div.user{
+    font-size: 80%;
+    text-align: right;
+    margin: 0 0.5em 0.5em 0.5em;
+    color: #444466;
+    font-style: italic;
 }
 
 /* Photo viewer. */
@@ -60,6 +85,7 @@ section#photo_viewer{
     transition: all .6s ease-in-out;
     z-index: 1001;
     min-height: 10em;
+    overflow-y: auto;
 }
 @media screen and max-width: 800px{
     div#photo_viewer{
@@ -89,10 +115,13 @@ section#photo_viewer article div.arrow{
 }
 section#photo_viewer article div#photo_view{
     width: 65%;
+    height: 90%;
     padding: 0.1em;
 }
 section#photo_viewer article div#photo_view img{
-    display: block;
+    display: inline-block;
+    height: 90%;
+    width: inherit;
     background: #000000;
     border: 0.1em solid #000000;
     border-radius: 0.5em;

site-public/public/css/home.css

@@ -0,0 +1,65 @@
+section#past{
+	display: inline-block;
+	vertical-align:top;
+	width: 45%;
+}
+section#past article>h5{
+	font-style: italic;
+	color: #444455;
+	margin-top: 0.2em;
+}
+section#past article>a>img{
+	display: inline-block;
+	vertical-align:top;
+	max-width: 8em;
+	border: 0.1em solid #000000;
+	border-radius: 0.2em;
+	margin: 0.5em;
+	float: left;
+}
+section#past p{
+	display: inline;
+	vertical-align:top;
+}
+section#past div.details{
+	margin: 1em 0.5em;
+	border-top: 0.2em solid #cccccc;
+	font-size: 90%;
+	text-align: right;
+	color: #444455;
+}
+section#blog{
+	display: inline-block;
+	vertical-align:top;
+	width: 45%;
+}
+section#blog article>a>img{
+	display: inline-block;
+	vertical-align:top;
+	max-width: 8em;
+	border: 0.1em solid #000000;
+	border-radius: 0.2em;
+	margin: 0.5em;
+	float: left;
+}
+section#blog p{
+	display: inline;
+	vertical-align:top;
+}
+section#blog div.details{
+	border-top: 0.2em solid #cccccc;
+	font-size: 90%;
+	color: #444455;
+	margin: 1em 0.5em;
+}
+section#blog div.details div.details_date{
+	display: inline-block;
+	width: 60%;
+	margin: 0;
+}
+section#blog div.details div.details_comments{
+	display: inline-block;
+	text-align: right;
+	width: 38%;
+	margin: 0;
+}

site-public/public/css/index.css

@@ -1,310 +0,0 @@
-div#festivals div#festivals_summary img{
-    display: inline-block;
-    max-width: 40%;
-    max-height: 15em;
-    vertical-align: top;
-    border: 0.1em solid black;
-    margin: 0.5em;
-}
-
-div#festivals span#festivals_summary_text{
-    display:    inline-block;
-    width: 60%;
-}
-
-div#festivals div#festivals_schedule_table{
-    display:    table;
-    width:        100%;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row{
-    display:    table-row;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row div.festivals_schedule_cell{
-    display:    table-cell;
-    width:        50%;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row div.festivals_schedule_cell div#festivals_gm{
-    margin: 0.4em 0.2em 0.4em 0.4em;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row div.festivals_schedule_cell div#festivals_city{
-    margin: 0.4em 0.4em 0.4em 0.2em;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row div.festivals_schedule_cell div.festival_event{
-    margin:            1em;
-    padding:        0.3em 0.3em 0.3em 0.5em;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row div.festivals_schedule_cell div.festival_event h4{
-    margin:            1em 0.2em 0.2em 0em;
-    font-weight:    bold;
-    color:            #444444;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row div.festivals_schedule_cell div.festival_event div.schedule_content{
-    border-left:    0.1em dotted black;
-    margin-left:    0.5em;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row div.festivals_schedule_cell div.festival_event span.title{
-    font-weight:    bold;
-    font-size:        120%;
-    color:            #275573;
-    margin:            1em 0.5em 0.7em 0.2em;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row div.festivals_schedule_cell div.festival_event p.description{
-    margin:    0.2em 1em 1em 1em;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row div.festivals_schedule_cell div.festival_event table.location{
-    margin:        0.3em 1em 0.3em 1.6em;
-    font-size:    90%;
-    color:        #222222;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row div.festivals_schedule_cell div.festival_event table.location img{
-    max-width:    1.3em;
-    max-hieght:    1.5em;
-}
-
-div#festivals div#festivals_schedule_table div#festivals_schedule_row div.festivals_schedule_cell div.festival_event table.location span.address{
-    font-size:    80%;
-    font-style:    italic;
-    color:        #444444;
-}
-
-
-table.festival_section_table tr td div.festival_schedule span.title{
-    font-weight:    bold;
-/*     font-size:        105%; */
-    margin-left:    1em;
-}
-
-table.festival_section_table tr td div.festival_schedule span.description{
-    font-style:        italic;
-    margin-left:    2em;
-    font-size:        90%;
-}
-
-table.festival_section_table tr td div.festival_schedule table.location{
-    border-collapse:    collapse;
-    margin:                0.5em 2em 0.5em 3em;
-    font-size:            80%;
-}
-
-table.festival_section_table tr td div.festival_schedule table.location td{
-    min-width:            initial;
-    height:                initial;
-    vertical-align:        middle;
-    padding-bottom:     0;
-}
-
-/* Upcoming activity section */
-
-div.section{
-    margin-bottom:    2em;
-}
-
-div#upcoming_activity{
-    display:    table;
-}
-
-div.table div.tr{
-    display:    table-row;
-}
-
-div.table div.tr div.td{
-    display:    table-cell;
-    vertical-align:    top;
-}
-
-/* Contains the image of the upcoming activity */
-div#upcoming_image{
-    display:        inline-block;
-    vertical-align:    top;
-}
-
-div#upcoming_image img{
-    max-height:        10em;
-    max-width:        10em;
-    margin:            1em;
-    border:            0.15em solid #333333;
-    border-radius:    0.2em;
-    box-shadow:        0 0 0.5em #111111;
-}
-
-/* Contains the text of the upcoming activity */
-div#upcoming_text{
-    display:        inline-block;
-    vertical-align:    middle;
-}
-
-/* Contains the details of the upcoming activity */
-div#upcoming_details{
-    display: inline-block;
-    vertical-align: middle;
-    text-align: center;
-    padding-bottom: 2em;
-    min-width: 24em;
-}
-
-
-div#upcoming_details table{
-    border-collapse:    collapse;
-    text-align:            left;
-    font-style:            italic;
-    font-size:            80%;
-    margin:                2em 2em 2em 4em;
-}
-
-div#upcoming_details table tr{
-    border-bottom:        0.2em solid #7777aa;
-    border-top:            0.2em solid #7777aa;
-    border-collapse:    collapse;
-}
-
-div#upcoming_details table td{
-    padding:    0.3em;
-}
-
-/* Us section */
-div#us p{
-    display:    inline-block;
-    vertical-align:    top;
-}
-
-div#us div{
-    top:        4em;
-    right:        3em;
-    text-align:    center;
-}
-
-div#us div img{
-    position: absolute;
-    opacity:    0.4;
-    max-height:    100px;
-    max-width:    100px;
-}
-
-/* Table to present posts and photos on the same row */
-div#content_table{
-    display:    table;
-}
-
-div#content_table div.content_row{
-    display:    table-row;
-}
-
-div#content_table div.content_row div.content_cell{
-    width:        50%;
-    display:    table-cell;
-}
-
-div#content_table div.content_row div#cell_posts div.section{
-    margin-right:    1em;
-}
-
-div#content_table div.content_row div#cell_photos div.section{
-    margin-left:    1em;
-}
-
-div#content_table div.content_row div.content_cell div.section div.entry{
-    padding:        1em;
-}
-
-
-/* Section of the latest posts */
-div.post img{
-    max-width:        7em;
-    max-height:        9em;
-    float:            left;
-    margin:            0.5em 1em 0.5em 0.5em;
-    border:            0.1em solid #112244;
-/*     border:            0.15em solid #333333; */
-/*     border-radius:    0.2em; */
-/*     box-shadow:        0 0 0.5em #111111; */
-}
-
-table.post_table p{ /*TODO fix*/
-/*NOW     margin-left:    0.5em; */
-}
-
-/* contains the date for each recent post */
-div#content_table div.content_row div.content_cell div.section div.entry span{
-    margin-right:    1em;
-    display:        block;
-    text-align:        right;
-/*     float:            right; */
-    font-style:        italic;
-    font-size:        80%;
-}
-
-/* Links to each section */
-a.go_to_section{
-    float:    right;
-}
-
-/* Photos table */
-table#table_photos{
-    table-layout:    fixed;
-    position:        relative;
-    width:            100%;
-}
-
-table#table_photos td{
-    padding:    0.2em;
-    text-align:    center;
-}
-
-table#table_photos img{
-    max-width:        90%;
-    max-height:        10em;
-    border:            0.1em solid #112244;
-
-/*     border:            0.1em solid #333333; */
-/*     box-shadow:        0 0 0.8em #000000; */
-/*     border-radius:    0.2em */
-}
-
-div#latest_activities{
-    display:    block;
-    margin-top:    2em;
-}
-
-div.activity_image{
-    display:    inline-block;
-    vertical-align:    top;
-    max-width:    40%;
-    max-height:    15em;
-    text-align:    center;
-}
-
-table.latest_activity td {
-    vertical-align:    top;
-}
-
-table.latest_activity td.latest_activity_image{
-    max-width:    30%;
-}
-
-div#latest_activities img{
-/*     max-width:        40%; */
-    max-height:        10em;
-    margin:            0.5em 1em 0.5em 0.5em;
-    border:            0.1em solid #112244;
-
-/*     border:            0.15em solid #333333; */
-/*     border-radius:    0.2em; */
-/*     box-shadow:        0 0 0.5em #111111; */
-}
-
-div.activity_text{
-    display:        inline-block;
-    vertical-align:    top;
-    padding:        1em;
-}

site-public/public/css/ui.css

@@ -4,14 +4,25 @@
     src: url('/font/FreeSans.ttf')
 }
 
+/* Hiddden eleemnts. */
+.hidden{
+    display: none;
+}
+
 /* Mobile or desktop specifics. */
 .mobile{
     display: none;
 }
-@media screen and max-width: 800px{
+.desktop{
+    display: initial;
+}
+@media screen and (max-width: 600px){
     .desktop{
         display: none;
     }
+    .mobile{
+    	display: initial;
+	}
 }
 
 /* Common elements across the page. */
@@ -92,13 +103,14 @@ header{
     background-color: #0078ff;
     border-bottom: 0.1em solid #1a4d6a;
     box-shadow: 0 0 3em #dde;
-    text-align: center;
+    text-align: center; /* Compensate for space between iline-block elements. */
 }
 header img{
     display: inline-block;
     width: 10%;
-    max-width: 5em;
-    margin: 1em;
+    max-width: 4.5em;
+    max-height: 4.5em;
+    margin: 0.5em -1.5em -0.5em 0.5em;
     vertical-align: middle;
     filter: drop-shadow(0 0 0.4em #dde);
     border-radius: 100%;
@@ -110,23 +122,38 @@ header a{
     width: calc(((100% - 6em) / 6) - 2em);
     margin: 0;
     padding: 0.5em 0.1em;
-    font-size: 110%;
+    font-size: 120%;
+    font-weight: bold;
     color: #ffffff;
     text-align: center;
-    padding: 0.5em 0;
-    border-top: 0.1em solid #1a4d6a;
-    border-bottom: 0.1em solid #1a4d6a;
+    padding: 0.4em 0;
+    border-top: 0.2em solid #3d6780;
+    border-bottom: 0.2em solid #3d6780;
     transition: all .3s ease-in-out;
     overflow-x: hidden;
     white-space: nowrap;
+    text-transform: capitalize;
+    background-color: #8cceff;
+    text-shadow: -0.04em 0 #1a4d6a, 0 0.04em #1a4d6a, 0.04em 0 #1a4d6a, 0 -0.04em #1a4d6a;
+}
+header a:last-child{
+    border-top-right-radius: 0.5em;
+    border-bottom-right-radius: 0.5em;
+    border-right: 0.2em solid #1a4d6a;
+    padding-right: 0.4em
 }
 header a:hover{
-    border-top: 0.3em solid #1a4d6a;
-    border-bottom: 0.3em solid #1a4d6a;
-    padding: 0.3em 0.1em;
-    color: #0078ff;
+    border-top: 0.3em solid #8cceff;
+    border-bottom: 0.3em solid #8cceff;
+    padding: 0.3em 0;
+    color: #8cceff;
     background-color: #ffffff;
     text-shadow: 0 0 0em #ffffff;
+    text-decoration: none;
+}
+header a:last-child:hover{
+    border-right: 0.3em solid #8cceff;
+    padding-right: 0.3em;
 }
 
 /* Footer. */
@@ -165,7 +192,7 @@ footer > div#footer_social img:hover{
     filter: drop-shadow(0 0 0.6em #111);
 }
 footer > div#footer_sponsors{
-    width: 55%;
+    width: 40%;
 }
 footer > div#footer_sponsors img{
     display: inline-block;
@@ -220,26 +247,25 @@ section{
     border-radius: 1em;
     padding: 0 0 0.5em 0;
     background-color: #98c8ff;
-    -webkit-filter: drop-shadow(0 0 0.4em #000011);
     filter: drop-shadow(0 0 0.4em #000011);
-    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
-    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
+    margin: 1em;
 }
 section h3{
-    font-size: 120%;
+    font-size: 140%;
     font-style: bold;
     color: #ffffff;
     background-color: #0078ff;
     padding: 0.5em 2em 0.1em 1.5em;
     border-top-left-radius: 0.7em;
     border-top-right-radius: 0.7em;
-    border: 0.1em solid #000011;
+    border-top: 1px solid #000011;
+    border-bottom: 1px solid #000011;
     margin: 0;
 }
 article{
     background-color: #ffffff;
-    padding: 0.2em;
-    margin: 0.4em;
+    padding: 15px;
+    margin: 1.5em;
     border: 0.1em solid #6D6990;
     border-radius: 0.3em;
     box-shadow: inset 0 0 0.2em #dde;
@@ -248,8 +274,11 @@ article{
 article h4{
     color: #275573;
     font-weight: bold;
-    font-size: 1.3em;
-    margin: 1em 1em 0.3em 0em;
+    font-size: 120%;
+    padding: 0.2em 1em;
+    margin: -15px -15px 1em -15px;
+    border-bottom: 0.1em solid #27557333;
+    background: linear-gradient(to top, #27557333 10%, #ffffff 30%, #ffffff 70%, #27557333 90%);
 }
 article h4 a{
     color: #275573;

site-public/public/script/gallery.js

@@ -9,15 +9,13 @@ function populatePhotos(){
         photo.push(path);
     }
     maxId = photos.length;
-    console.log("photo 0: " + photo[0]);
 }
 
 
-function showPhotoByPath(path){
-    //TODO Change content to a spinning wheel or something before real content is loaded
+function showPhoto(path, id){
     // Load content
     var x = new XMLHttpRequest();
-    x.open("GET", "/galeria/foto.php?path=" + path, true);
+    x.open("GET", "/" + path + "/" + id, true);
     x.send();
     x.onreadystatechange = function(){
     if(x.readyState == 4){
@@ -36,7 +34,7 @@ function showPhotoByPath(path){
 
     //Searh for path in photo array and set cid
     for (var i = 0; i < photo.length; i ++){
-        if (photo[i] == path){
+        if (photo[i] == id){
             cid = i;
         }
     }