commit: d05a40bad94b63f2e92fb98f7244f0a7037dc53f
parent ba6f16a696c0b241751ed8ffba76cabf440e1b6e
Author: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Sun, 30 Jun 2019 11:57:23 +0900
Improved mobile view
Diffstat:
2 files changed, 8 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
@@ -2,8 +2,8 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=800, initial-scale=1.0">
<meta name="description" content="Grim Grains is an illustrated food blog, it features plant-based (vegan) recipes with a strong attention to colour and form.">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@RekkaBell">
diff --git a/links/main.css b/links/main.css
@@ -17,7 +17,7 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
#view #header #logo a { cursor: pointer; transition: all 250ms; }
#view #header #logo a:hover { opacity: 0.7 }
#view #header #logo a img { max-width: 240px; display: block; margin:0px auto; margin-bottom:30px; }
-#view #header ul { display: block;line-height: 40px; border-bottom: 2px solid black; margin-bottom:30px }
+#view #header ul { display: block;line-height: 40px; border-bottom: 2px solid black; margin-bottom:30px; overflow: hidden;height: 40px; }
#view #header ul li { display: inline-block;border-top-left-radius: 3px;border-top-right-radius: 3px; margin-right:10px; margin-bottom: -2px; line-height: 40px}
#view #header ul li:hover { }
#view #header ul li a { display: inline-block; font-family: 'alte_haas_grotesk_bold'; font-size:14px; line-height: 40px; border-bottom:2px solid transparent }
@@ -70,7 +70,7 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
#view #core #content ul.ingredients li.ingredient { width: 100px;margin-left:-20px;min-height: 210px;display: inline-block;text-align: center;vertical-align: top;border: 2px dashed transparent;border-radius: 10px; }
#view #core #content ul.ingredients li.ingredient:hover t.name { text-decoration: underline; }
#view #core #content ul.ingredients li.ingredient.missing t.name { font-style: italic }
-#view #core #content ul.ingredients li.ingredient img { max-width: 100% }
+#view #core #content ul.ingredients li.ingredient img { max-width: 100%; display: block }
#view #core #content ul.ingredients li.ingredient t.name { display: block; font-family: 'alte_haas_grotesk_bold'; font-size:14px; margin-bottom: 5px;padding:0px 10px }
#view #core #content ul.ingredients li.ingredient t.quantity { display: block; font-size:12px; }
@@ -97,3 +97,8 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
#view #core #related li { width:100%; clear:both; float:none; height:330px; }
#view #core #related li a.photo { height:200px; }
}
+
+@media (max-width: 500px) {
+ #view { padding:30px 15px; }
+ #view #header ul li.right { display: none }
+}
