Add files via upload

galleria/README.md

@@ -0,0 +1,20 @@
+# CSS Exercise - Image List
+
+1. Clone this repo to a folder of your choise `git clone https://github.com/ilkkamtk/imageList.git` or download as ZIP
+2. Edit css/main.css
+  * The thumbnails (li elements) should form a grid
+  * The title of the image (h3 element) should be on top of the thumbnails
+  * On desktop main and aside elements should be side by side
+
+>Example layout:
+![Example layout](img/example.png)
+
+
+  * Extra: On mobile main and aside elements should be one below the other
+
+Some help:
+  * http://www.w3schools.com/cssref/pr_list-style-type.asp
+  * https://www.w3schools.com/css/css_positioning.asp
+  * http://users.metropolia.fi/~ullamu/webdev/flexbox
+  * https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+  * http://www.w3schools.com/css/css3_mediaqueries.asp

galleria/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Please read: http://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="tile.png"/>
+            <square150x150logo src="tile.png"/>
+            <wide310x150logo src="tile-wide.png"/>
+            <square310x310logo src="tile.png"/>
+        </tile>
+    </msapplication>
+</browserconfig>

galleria/css/main.css

@@ -0,0 +1,247 @@
+html {
+    color: #222;
+    font-size: 1em;
+    line-height: 1.4;
+}
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
+
+}
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+    vertical-align: middle;
+}
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+.browserupgrade {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+}
+
+body {display: flex; flex-wrap: wrap; }
+
+ul { display: flex; flex-wrap: wrap; justify-content: space-evenly; list-style: none;}
+
+figure {
+    margin: 10px;
+  position: relative
+}
+
+figcaption {
+    position: absolute;
+    top: 0;
+    background-color: rgba(255, 255, 255, 0.7,);
+    color: #f1ecec;
+    padding: 10px;
+}
+
+/* ==========================================================================
+   custom styles
+   ========================================================================== */
+
+.primary-color {
+    background-color: #717171;
+}
+
+.secondary-color {
+    background-color: #4f6528;
+}
+
+.default {
+    background-color: #2a2e89;
+	color: #fff;
+
+}
+
+.alert {
+    background-color: #c60f13;
+}
+
+aside {width: 25%;}
+
+header {
+    background-image: url("../img/lines.jpg");
+    width: 100%;
+}
+
+header h1 {
+	margin: 0;
+    font-size: 2em;
+    position: absolute;
+    top: 0;
+    line-height: 100px;
+    padding: 0 4em;
+    color: #e9e9e9;
+}
+
+header h3 {
+    position: relative;
+    top: 0px;
+    width: 100%;
+}
+main {width: 75%;}
+
+
+/* ==========================================================================
+   Media Queries
+   ========================================================================== */
+
+@media only screen and (max-width: 600px) {
+    main, aside {width: 100%;}
+}
+    body {
+        max-width: 60em;
+        margin: auto;
+    }
+@media print,
+       (-o-min-device-pixel-ratio: 5/4),
+       (-webkit-min-device-pixel-ratio: 1.25),
+       (min-resolution: 120dpi) {
+
+}
+
+/* ==========================================================================
+   Helper classes
+   ========================================================================== */
+
+.hidden {
+    display: none !important;
+    visibility: hidden;
+}
+
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+.clearfix:before,
+.clearfix:after {
+    content: " ";
+    display: table;
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+.clearfix {
+    *zoom: 1;
+}
+
+/* ==========================================================================
+   Print styles
+   ========================================================================== */
+
+@media print {
+    *,
+    *:before,
+    *:after {
+        background: transparent !important;
+        color: #000 !important;
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href]:after {
+        content: " (" attr(href) ")";
+    }
+
+    abbr[title]:after {
+        content: " (" attr(title) ")";
+    }
+
+    a[href^="#"]:after,
+    a[href^="javascript:"]:after {
+        content: "";
+    }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    thead {
+        display: table-header-group;
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    p,
+    h2,
+    h3 {
+
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+
+    }
+}