Browse Source

Fex visual improvements here and there.

Iñigo Valentin 8 năm trước cách đây
mục cha
commit
3eed7db176
8 tập tin đã thay đổi với 280 bổ sung100 xóa
  1. 12 3
      sql/02_DATA.SQL
  2. 78 68
      www/css/blog.css
  3. 180 21
      www/css/project.css
  4. 3 0
      www/css/ui.css
  5. 2 2
      www/footer.php
  6. 1 2
      www/index.php
  7. 2 2
      www/project/index.php
  8. 2 2
      www/project/project.php

+ 12 - 3
sql/02_DATA.SQL

@@ -182,16 +182,25 @@ INSERT INTO text VALUES ('HEADER_BLOG',     'eu', 'HEADER', 'Blog', null);
 
 -- PAGE footer
 INSERT INTO text VALUES ('FOOTER_FOLLOW', 'es', 'FOOTER', 'Sígueme', null);
-INSERT INTO text VALUES ('FOOTER_COPY',   'es', 'FOOTER', 'Copyright Iñigo Valentin 2014 - 2017', null);
+INSERT INTO text VALUES ('FOOTER_COPY',   'es', 'FOOTER', 'Copyright Iñigo Valentin 2014 - #YEAR#', null);
 INSERT INTO text VALUES ('FOOTER_HELP',   'es', 'FOOTER', 'Ayuda', null);
 INSERT INTO text VALUES ('FOOTER_FOLLOW', 'en', 'FOOTER', 'Follow me', null);
-INSERT INTO text VALUES ('FOOTER_COPY',   'en', 'FOOTER', 'Copyright Iñigo Valentin 2014 - 2017', null);
+INSERT INTO text VALUES ('FOOTER_COPY',   'en', 'FOOTER', 'Copyright Iñigo Valentin 2014 - #YEAR#', null);
 INSERT INTO text VALUES ('FOOTER_HELP',   'en', 'FOOTER', 'Help', null);
 INSERT INTO text VALUES ('FOOTER_FOLLOW', 'eu', 'FOOTER', 'Jarraitu', null);
-INSERT INTO text VALUES ('FOOTER_COPY',   'eu', 'FOOTER', 'Copyright Iñigo Valentin 2014 - 2017', null);
+INSERT INTO text VALUES ('FOOTER_COPY',   'eu', 'FOOTER', 'Copyright Iñigo Valentin 2014 - #YEAR#', null);
 INSERT INTO text VALUES ('FOOTER_HELP',   'eu', 'FOOTER', 'Laguntza', null);
 
 
+-- PAGE index
+INSERT INTO text VALUES ('INDEX_LATEST_PROJECTS', 'es', 'INDEX', 'Últimos proyectos', null);
+INSERT INTO text VALUES ('INDEX_LATEST_PROJECTS', 'en', 'INDEX', 'Latest projects', null);
+INSERT INTO text VALUES ('INDEX_LATEST_PROJECTS', 'eu', 'INDEX', 'Asken projektuak', null);
+INSERT INTO text VALUES ('INDEX_LATEST_POSTS', 'es', 'INDEX', 'Últimos posts', null);
+INSERT INTO text VALUES ('INDEX_LATEST_POSTS', 'en', 'INDEX', 'Latest posts', null);
+INSERT INTO text VALUES ('INDEX_LATEST_POSTS', 'eu', 'INDEX', 'Asken postak', null);
+
+
 -- PAGE project
 INSERT INTO text VALUES ('PROJECT_TITLE',           'es', 'PROJECT', 'Proyectos', null);
 INSERT INTO text VALUES ('PROJECT_TITLE',           'en', 'PROJECT', 'Projects', null);

+ 78 - 68
www/css/blog.css

@@ -1,5 +1,6 @@
-/* Blog main page */
-
+/****************************************
+ * Pages layout.                        *
+ ****************************************/
 div#content{
     display: table;
 }
@@ -11,84 +12,24 @@ div#content div#content_row{
 div#content div#content_row div.content_cell{
     padding: 1em;
     display: table-cell;
+    vertical-align: top;
 }
 
 div#content div#content_row div#content_cell_main{
     width: 75%;
 }
 
-div#post_list img.post_list_image{
-    float: left;
-    background-color: #ffffff;
-    border: 0.1em solid #003300;
-    border-radius: 0.3em;
-    margin: 0 0.7em 0.7em 0.7em;
-    max-width: 5em;
-    max-height: 3em;
-}
-
-div#post_list table.post_list_footer{
-    font-size: 80%;
-    width: 100%;
-}
-
-div#post_list table.post_list_footer td.comment_counter{
-    font-style: italic;
-    text-align: right;
-}
-
-div#post_list span.tags{
-    font-size: 80%;
-    font-style: italic;
-}
-
-
-/* Post view page. */
-div#content_cell_post{
-    /* Post and comments container. */
-    width: 75%;
-}
-
-div#post img#post_main_image{
-    /* Post main image. */
-    display: block;
-    max-height: 11em;
-    margin: 0.5em auto 1em auto;
-    border: 0.1em solid #003400;
-    border-radius: 0.5em;
-    background-color: #ffffff;
-}
-
-div#post div#image_reel{
-    /* Post secondary images container. */
-    overflow-x: scroll;
-    border: 0.1em solid #003400;
-    border-radius: 0.3em;
-    height: 7em;
-    background-color: #334433;
-    padding: 0.5em;
-}
-
-div#post div#image_reel img{
-    /* Secondary images of the post. */
-    vertical-align: middle;
-    max-height: 5em;
-    max-width: 7em;
-    border: 0.2em solid #003400;
-    border-radius: 0.1em;
-    margin: 0.5em;
-    background-color: #ffffff;
-}
-
-div#content_cell_info{
-    /* post info container. */
+div#content div#content_row div#content_cell_info{
+    /* Post info container. */
     width: 25%;
     min-width: 8em;
     max-width: 20em;
 }
 
 
-/* Right panel */
+/****************************************
+ * Right panel.                         *
+ ****************************************/
 div#info hr{
     margin: 0 5% 0 5%;
     opacity: 0.3;
@@ -235,3 +176,72 @@ div#info_all img.post_list_image{
     border-radius: 0.2em;
     box-shadow: 0 0 0.5em #111111;
 }
+
+
+/****************************************
+ * Blog main page.                      *
+ ****************************************/
+div#post_list img.post_list_image{
+    float: left;
+    background-color: #ffffff;
+    border: 0.1em solid #003300;
+    border-radius: 0.3em;
+    margin: 0 0.7em 0.7em 0.7em;
+    max-width: 5em;
+    max-height: 3em;
+}
+
+div#post_list table.post_list_footer{
+    font-size: 80%;
+    width: 100%;
+}
+
+div#post_list table.post_list_footer td.comment_counter{
+    font-style: italic;
+    text-align: right;
+}
+
+div#post_list span.tags{
+    font-size: 80%;
+    font-style: italic;
+}
+
+
+/****************************************
+ * Post view page.                      *
+ ****************************************/
+div#content_cell_post{
+    /* Post and comments container. */
+    width: 75%;
+}
+
+div#post img#post_main_image{
+    /* Post main image. */
+    display: block;
+    max-height: 11em;
+    margin: 0.5em auto 1em auto;
+    border: 0.1em solid #003400;
+    border-radius: 0.5em;
+    background-color: #ffffff;
+}
+
+div#post div#image_reel{
+    /* Post secondary images container. */
+    overflow-x: scroll;
+    border: 0.1em solid #003400;
+    border-radius: 0.3em;
+    height: 7em;
+    background-color: #334433;
+    padding: 0.5em;
+}
+
+div#post div#image_reel img{
+    /* Secondary images of the post. */
+    vertical-align: middle;
+    max-height: 5em;
+    max-width: 7em;
+    border: 0.2em solid #003400;
+    border-radius: 0.1em;
+    margin: 0.5em;
+    background-color: #ffffff;
+}

+ 180 - 21
www/css/project.css

@@ -1,3 +1,183 @@
+/****************************************
+ * Pages layout.                        *
+ ****************************************/
+div#content{
+    display: table;
+}
+
+div#content div#content_row{
+    display: table-row;
+}
+
+div#content div#content_row div.content_cell{
+    display: table-cell;
+    padding: 1em;
+    vertical-align: top;
+}
+
+div#content_cell_main{
+    width: 75%;
+}
+
+div#content div#content_row div#content_cell_info{
+    /* Project info container. */
+    width: 25%;
+    min-width: 8em;
+    max-width: 20em;
+}
+
+
+/****************************************
+ * Right panel.                         *
+ ****************************************/
+div#info hr{
+    margin: 0 5% 0 5%;
+    opacity: 0.3;
+}
+
+div#info h4{
+    margin-top: 0.2em;
+    margin-bottom: 0.2em;
+}
+
+div#info div.entry{
+    margin: 0.2em;
+}
+
+div#info div#info_date{
+    /* Date of the post. */
+    text-align: center;
+    font-style: italic;
+    font-size: 70%;
+    opacity: 80%;
+}
+
+div#info div#info_share{
+    /* Share icons. */
+}
+
+div#info div#info_share div#social{
+    text-align: center;
+}
+
+div#info div#info_tags{
+    /* Post tages. */
+    font-size: 80%;
+    opacity: 90%;
+}
+
+div#info div#info_prev_next{
+    /* Previous / next post. */
+}
+
+div#info div#info_prev_next table#prev_next{
+    /* Previous/next posts links. */
+    border-collapse: collapse;
+    margin: 0 auto 0 auto;
+}
+
+div#info div#info_prev_next table#prev_next td{
+    width: 50%;
+    padding: 0.5em;
+}
+
+div#info div#info_prev_next table#prev_next td#prev{
+    border-right: 0.03em solid #00440088;
+    margin-right: 0.5em;
+    text-align: right;
+}
+
+div#info div#info_prev_next table#prev_next td#next{
+    border-left: 0.03em solid #00440088;
+    margin-left: 0.5em;
+    text-align: left;
+}
+
+div#info div#info_prev_next table#prev_next td span.info{
+    font-size: 80%;
+}
+
+div#info div#info_prev_next table#prev_next td span.title{
+    font-weight: bold;
+}
+
+div#info div#info_related{
+    /* Related posts. */
+}
+
+div#info div#info_related ul{
+    margin: 0 0 0 0.6em;
+    padding-left: 0.7em;
+}
+
+div#info div#info_related ul li{
+    margin: 0;
+}
+
+div#info div#info_search{
+    /* Post search form. */
+}
+
+div#info div#info_search input#search_panel_input{
+    display: inline-block;
+    width: 60%;
+}
+
+div#info div#info_search input#search_panel_submit{
+    display: inline-block;
+    width: 30%;
+}
+
+div#info div#info_tag_cloud{
+    /* Tag cloud. */
+}
+
+div#info div#info_tag_cloud div#cloud{
+    text-align: center;
+}
+
+div#info div#info_all{
+    /* Post archive. */
+    margin-right: 0;
+    padding-right: 0;
+}
+
+div#info_all div.list_year{
+    /* Year list in the archive.*/
+    margin-left: 1em;
+    max-height: 0em;
+    overflow-y: hidden;
+    transition: max-height 0.6s ease-in-out;
+}
+
+div#info_all ul.post_list{
+    margin-top: 0em;
+    margin-bottom: 0em;
+    max-height: 0em;
+    overflow-y: hidden;
+    transition: max-height 0.6s ease-in-out;
+}
+
+div#info_all ul.post_list li{
+    padding: 0.2em 0 0 0;
+}
+
+div#info_all div.post_list_image_container{
+    text-align: center;
+}
+
+div#info_all img.post_list_image{
+    float: center;
+    max-width: 15em;
+    max-width: 90%;
+    max-height: 9em;
+    margin: 0.5em 1em 0 0.5em;
+    border: 0.15em solid #333333;
+    border-radius: 0.2em;
+    box-shadow: 0 0 0.5em #111111;
+}
+
+
 /* Common elements */
 span.version_type{
     padding: 0.05em;
@@ -19,27 +199,6 @@ div#right_column div#advanced_search{
 
 /* Project view page */
 
-div#content{
-    display: table;
-}
-
-div#content-row{
-    display: table-row;
-}
-
-div.content_cell{
-    display: table-cell;
-    padding: 1em;
-    vertical-align: top;
-}
-
-div#content_cell_main{
-    width: 80%;
-}
-
-div#content_cell_right{
-    width: 20%;
-}
 
 div#main_column div#image_reel{
     text-align: center;

+ 3 - 0
www/css/ui.css

@@ -222,6 +222,9 @@ div#footer td#footer_right{
 div#footer img.footer_social_icon{
     width: 1.875em;
     vertical-align: middle;
+    background-color: #ffffff;
+    border: 0.1em solid #ffffff;
+    border-radius: 0.3em;
 }
 
 div#footer a.lang img{

+ 2 - 2
www/footer.php

@@ -3,7 +3,7 @@
     <table id='footer_table'>
         <tr>
             <td id='footer_left'>
-                <span id='footer_follow' class='desktop'><?=text($con, "FOOTER_FOLLOW", $lang);?></span>
+                <span id='footer_follow' class='desktop'><?=text($con, "FOOTER_FOLLOW", $lang);?><br/></span>
 <?php
                 $q_social = mysqli_query($con, "SELECT title, icon, url FROM social WHERE visible = 1 ORDER BY idx;");
                 while ($r_social = mysqli_fetch_array($q_social)){
@@ -15,7 +15,7 @@
                 }
 ?>
             </td>
-            <td id='footer_center'><?=text($con, "FOOTER_COPY", $lang);?></td>
+            <td id='footer_center'><?=str_replace("#YEAR#", date("Y"), text($con, "FOOTER_COPY", $lang));?></td>
             <td id='footer_right'>
                 <a href='<?=$lserver?>/help/'><?=text($con, "FOOTER_HELP", $lang);?></a>
                 <br/><br/>

+ 1 - 2
www/index.php

@@ -112,7 +112,7 @@
                     <div class='section' id='blog_section'>
                         <h3 class='section_title'><?=text($con, 'INDEX_LATEST_POSTS', $lang)?></h3>
 <?php
-                        $q_blog = mysqli_query($con, "SELECT id, permalink, title, text, DATE_FORMAT(dtime, '%Y-%m-%dT%T') AS isodate, dtime, comments FROM post WHERE visible = 1 ORDER BY dtime DESC;");
+                        $q_blog = mysqli_query($con, "SELECT id, permalink, title, text, DATE_FORMAT(dtime, '%Y-%m-%dT%T') AS isodate, dtime, comments FROM post WHERE visible = 1 ORDER BY dtime DESC LIMIT 2;");
                         while($r_blog = mysqli_fetch_array($q_blog)){
 ?>
                             <div itemscope itemtype='http://schema.org/BlogPosting' class='entry entry_list blog_entry'>
@@ -177,7 +177,6 @@
                                     </tr>
                                 </table> <!-- .post_list_footer -->
                             </div> <!-- .blog_entry -->
-                            </br>
 <?php
                         }
 ?>

+ 2 - 2
www/project/index.php

@@ -98,7 +98,7 @@
 ?>
                     </div> <!-- #main_column -->
                 </div> <!-- #content_cell_main -->
-                <div class='content_cell'  id='content_cell_right'>
+                <div class='content_cell'  id='content_cell_info'>
                     <div class='section' id='right_column'>
                         <h3 class='section_title'><?=text($con, "PROJECT_SEARCH", $lang)?></h3>
                         <div class='entry'>
@@ -140,7 +140,7 @@
 
                         </div> <!-- .entry -->
                     </div> <!-- #right_column -->
-                </div> <!-- #content_cell_right -->
+                </div> <!-- #content_cell_info -->
             </div> <!-- #content_row -->
         </div> <!-- #content -->
 <?php

+ 2 - 2
www/project/project.php

@@ -151,7 +151,7 @@
                         </div> <!-- .entry -->
                     </div> <!-- #main_column -->
                 </div> <!-- #content_cell_main -->
-                <div class='content_cell'  id='content_cell_right'>
+                <div class='content_cell'  id='content_cell_info'>
                     <div class='section' id='right_column'>
                         <h3 class='section_title'><?=text($con, "PROJECT_DETAILS", $lang);?></h3>
                         <div class='entry'>
@@ -195,7 +195,7 @@
                             </span>
                         </div>
                     </div> <!-- #right_column -->
-                </div> <!-- #content_cell_right -->
+                </div> <!-- #content_cell_info -->
             </div> <!-- #content_row -->
             <div id='cover'>
             </div> <!-- #cover -->