From 94a532a6ff42331d4199fb8e22d8264cf6c08d87 Mon Sep 17 00:00:00 2001 From: Simon Conseil Date: Tue, 14 May 2013 00:53:37 +0200 Subject: [PATCH] Galleria theme is now responsive --- .../themes/galleria/static/css/style.min.css | 2 +- sigal/themes/galleria/static/css/style.scss | 34 +++++++++++++------ 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/sigal/themes/galleria/static/css/style.min.css b/sigal/themes/galleria/static/css/style.min.css index c148c7f..81e316c 100644 --- a/sigal/themes/galleria/static/css/style.min.css +++ b/sigal/themes/galleria/static/css/style.min.css @@ -1 +1 @@ -/* normalize.css v2.1.0 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{font:16px/1.5 Molengo, sans-serif;background-color:#242424;color:#aaa;text-shadow:0 1px 3px rgba(0,0,0,0.7)}.container{margin:0 auto;text-align:left;width:960px}a,a:link,a:visited{color:#999;text-decoration:underline}a:hover{color:#dadada}header{padding:1em 0;color:#eee}header h1,header h2{color:#eee}header h1 a,header h1 a:link,header h1 a:visited,header h2 a,header h2 a:link,header h2 a:visited{color:#eee;text-shadow:0 2px 0 #000;text-decoration:none}header h1 a:hover,header h2 a:hover{color:#fff;text-decoration:none}header h1,header h2{margin:10px 0}header h1,header #menu{display:inline-block;width:49.5%}header #menu{text-align:right}header #menu ul{list-style-type:none;margin:0 0 10px;padding:0}header #menu ul li{display:inline-block}header #menu ul li a,header #menu ul li a:link,header #menu ul li a:visited{color:#aaa;border-bottom:1px solid #aaa;padding-bottom:2px;margin-left:5px;text-decoration:none}header #menu ul li a:hover{color:#eee;border-color:#eee;text-decoration:none}#albums ul{list-style-type:none;padding-left:0}#albums ul li{display:inline-block;margin:0 40px 30px 0;text-align:center}#albums ul li:nth-child(3n+3){margin-right:0}#albums ul li a img{opacity:1;-webkit-transition:opacity 0.2s ease-in;-moz-transition-property:opacity;-moz-transition-duration:0.2s;-moz-box-shadow:0 1px 6px rgba(0,0,0,0.6);-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.6);-o-box-shadow:0 1px 6px rgba(0,0,0,0.6);box-shadow:0 1px 6px rgba(0,0,0,0.6)}#albums ul li a:hover img{opacity:.5}.album_title{display:block;color:#eee;font-size:1.3em;font-variant:small-caps;font-weight:bold}#gallery{line-height:0;margin:0 0 40px -10px;width:980px;height:600px}footer{clear:both;display:block;margin:1em 0;text-align:center}footer a:link,footer a:visited{font-weight:bold;text-decoration:none}footer a:hover{border-bottom:1px solid;text-decoration:none} +/* normalize.css v2.1.0 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{font:16px/1.5 Molengo, sans-serif;background-color:#242424;color:#aaa;text-shadow:0 1px 3px rgba(0,0,0,0.7)}.container{margin:0 auto;text-align:left;width:96%}a,a:link,a:visited{color:#999;text-decoration:underline}a:hover{color:#dadada}header{padding:1em 0;color:#eee}header h1,header h2{color:#eee}header h1 a,header h1 a:link,header h1 a:visited,header h2 a,header h2 a:link,header h2 a:visited{color:#eee;text-shadow:0 2px 0 #000;text-decoration:none}header h1 a:hover,header h2 a:hover{color:#fff;text-decoration:none}header h1,header h2{margin:10px 0}header #menu ul{list-style-type:none;margin:0 0 10px;padding:0}header #menu ul li{display:inline-block}header #menu ul li a,header #menu ul li a:link,header #menu ul li a:visited{color:#aaa;border-bottom:1px solid #aaa;padding-bottom:2px;margin-left:5px;text-decoration:none}header #menu ul li a:hover{color:#eee;border-color:#eee;text-decoration:none}#albums ul{list-style-type:none;padding-left:0}#albums ul li{display:inline-block;margin:0 40px 30px 0;text-align:center}#albums ul li:nth-child(3n+3){margin-right:0}#albums ul li a img{opacity:1;-webkit-transition:opacity 0.2s ease-in;-moz-transition-property:opacity;-moz-transition-duration:0.2s;-moz-box-shadow:0 1px 6px rgba(0,0,0,0.6);-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.6);-o-box-shadow:0 1px 6px rgba(0,0,0,0.6);box-shadow:0 1px 6px rgba(0,0,0,0.6)}#albums ul li a:hover img{opacity:.5}.album_title{display:block;color:#eee;font-size:1.3em;font-variant:small-caps;font-weight:bold}#gallery{line-height:0;width:100%;height:600px}footer{clear:both;display:block;margin:1em 0;text-align:center}footer a:link,footer a:visited{font-weight:bold;text-decoration:none}footer a:hover{border-bottom:1px solid;text-decoration:none}@media only screen and (min-width: 980px){.container{width:960px}#gallery{width:980px;margin:0 0 40px -10px}header h1,header #menu{display:inline-block;width:49.5%}header #menu{text-align:right}} diff --git a/sigal/themes/galleria/static/css/style.scss b/sigal/themes/galleria/static/css/style.scss index b5758a1..e6de485 100644 --- a/sigal/themes/galleria/static/css/style.scss +++ b/sigal/themes/galleria/static/css/style.scss @@ -16,7 +16,7 @@ body { .container { margin: 0 auto; text-align: left; - width: 960px; + width: 96%; } a, a:link, a:visited { @@ -51,14 +51,7 @@ header { margin: 10px 0; } - h1, #menu { - display: inline-block; - width: 49.5%; - } - #menu { - text-align: right; - ul { list-style-type: none; margin: 0 0 10px; @@ -127,8 +120,7 @@ header { #gallery { line-height: 0; - margin: 0 0 40px -10px; - width: 980px; + width: 100%; height: 600px; } @@ -149,3 +141,25 @@ footer { text-decoration: none; } } + + +@media only screen and (min-width: 980px) { + .container { + width: 960px; + } + + #gallery { + width: 980px; + margin: 0 0 40px -10px; + } + + header { + h1, #menu { + display: inline-block; + width: 49.5%; + } + #menu { + text-align: right; + } + } +} \ No newline at end of file