CSS changed, names refactored

DennisdeBest · DennisdeBest · commit 583de5e713d2 · 2016-04-05T01:14:04.000+02:00
diff --git a/city.php b/city.php
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>ThumsJS</title>
+    <title>ThumsbJS - city</title>
     <link rel="stylesheet" type="text/css" href="thumbs/css.css">
     <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
     <?php session_start();
     $_SESSION['dir']='index2';
-    $_SESSION['width'] = 10; ?>
+    $_SESSION['width'] = 150; ?>
 </head>
 <body>
 <h1>ThumbsJS</h1>
diff --git a/index.php b/index.php
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>ThumsJS</title>
+    <title>ThumsbJS - nature</title>
     <link rel="stylesheet" type="text/css" href="thumbs/css.css">
     <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
     <?php session_start();
diff --git a/nav.php b/nav.php
@@ -1,4 +1,4 @@
 <ul>
-    <li><a href="index.php">Index</a></li>
-    <li><a href="index2.php">Index 2</a> </li>
+    <li><a href="index.php">Nature</a></li>
+    <li><a href="city.php">City</a> </li>
 </ul>
diff --git a/thumbs/css.css b/thumbs/css.css
@@ -1,36 +1,67 @@
+body{
+    background-color: #606060;
+}
+h1 {
+    color: white;
+}
+
 #thumbnails {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start;
+    -webkit-flex-flow: row wrap;
+    flex-flow: row wrap;
+    /* tweak the where items line up on the row */
+    /* valid values are: flex-start, flex-end, space-between, space-around, stretch */
+    -webkit-align-content: flex-start;
+    align-content: flex-start;
     border: 2px solid black;
     box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 205px;
+    flex : 1;
 }
 
 .thumbnail {
     width: 90px;
     height: 90px;
     box-sizing: border-box;
-    margin: 5px;
-    border: 1px outset black;
+    border: 1px outset darkorange;
     overflow: hidden;
+    align-self: flex-start;
 }
 
 #largeImg {
-    border: 2px solid black;
-    display: inline-block;
-    height: 600px;
-    padding: 50px;
-    box-sizing: border-box;
-    width: 600px;
     margin-left: 15px;
+    flex: 4;
 }
 #largeImg img{
-    height: 500px;
-    width: 500px;
+    border: 2px solid darkorange;
+    height: 600px;
+    width: 600px;
     margin: auto;
 }
 #container {
     display: flex;
     flex-direction: row;
+}
+nav ul {
+    display: flex;
+}
+nav ul li {
+    list-style: none;
+    text-align: center;
+    flex: 1 25%;
+}
+nav ul li a {
+    color: darkorange;
+    font-size: 1.5em;
+    font-style: italic;
+}
+nav ul li a:hover {
+    color: darkorange;
+    font-size: 1.5em;
+    font-style: italic;
+    text-decoration: wavy;
 }
