fix blurry images on mobile

3 files changed, 12 insertions, 9 deletions

diff --git a/layouts/index.html b/layouts/index.html
index 00efd69..691f9aa 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -9,7 +9,8 @@
 					data-mediums="{{ .mediums }}"
 					data-dimensions="{{ .dimensions }}"
 					data-description="{{ .description }}">
-					<img src="{{ .thumb }}" alt="{{ .alt }}"/>
+					<img class="d-none d-sm-block" src="{{ .thumb }}" alt="{{ .alt }}">
+					<img class="d-block d-sm-none" src="{{ .image }}" alt="{{ .alt }}">
 				</a>
 			</li>
 		{{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 427602f..6617cb5 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -2,19 +2,19 @@
 	<meta charset="UTF-8" />
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>{{ .Site.Title | default "Demo Hugo Site"}}</title>
+	<title>{{ .Site.Params.name | default "Demo Hugo Site"}}</title>
 	<meta name="description" content="{{ with .Site.Params.description }}{{ . }}{{ end }}" />
 	<meta name="keywords" content="{{ with .Site.Params.keywords }}{{ . }}{{ end }}" />
 	<meta name="author" content="{{ with .Site.Params.author }}{{ . }}{{ end }}" />
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
-    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/main.css?v=1.2.9" />
-    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/component.css" />
+    <link rel="stylesheet" type="text/css" href="/css/main.css?v=1.2.9" />
+    <link rel="stylesheet" type="text/css" href="/css/component.css?v=0.0.6" />
 
 	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
-    <script src="{{ .Site.BaseURL }}js/modernizr.custom.js"></script>
+    <script src="/js/modernizr.custom.js"></script>
 </head>
\ No newline at end of file
diff --git a/static/css/component.css b/static/css/component.css
index 8f21f49..6fe7ae3 100644
--- a/static/css/component.css
+++ b/static/css/component.css
@@ -10,7 +10,8 @@
 	display: inline-block;
 	margin: 10px 5px 0 5px;
 	vertical-align: top;
-	height: 250px;
+	/*height: 250px;*/
+	height: auto;
 }
 
 .og-grid li > a,
@@ -19,6 +20,8 @@
 	outline: none;
 	display: block;
 	position: relative;
+	max-width: 100%;
+	height: auto;
 }
 
 .og-grid li.og-expanded > a::after {
@@ -49,7 +52,8 @@
 
 .og-expander-inner {
 	padding: 50px 30px;
-	height: 100%;
+	/*height: 100%;*/
+	height: auto;
 }
 
 .og-close {
@@ -188,8 +192,6 @@
 }
 
 @media screen and (max-width: 650px) {
-
 	.og-fullimg { display: none; }
 	.og-details { float: none; width: 100%; }
-	
 }
\ No newline at end of file