🎨 improve mobile display

HoverBaum · Aug 11, 2016 · b9747f2 · b9747f2
1 parent ee39907
commit b9747f2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/source/_posts/meilidu.md b/source/_posts/meilidu.md
@@ -9,4 +9,4 @@ tags:
 
 Welcome to MeiliDu, *A beautiful read* indeed.
 
-This theme is focused around your readers reading your posts. It is created for text and code heavy posts. Find it on [GitHub](https://github.com/HoverBaum/meilidu-hexo).
+This theme is focused around your readers reading your posts. It is created for text and code heavy posts, brightened by images. Find it on [GitHub](https://github.com/HoverBaum/meilidu-hexo).
diff --git a/themes/meilidu/source/css/article.styl b/themes/meilidu/source/css/article.styl
@@ -7,6 +7,15 @@ article
 	margin-bottom: 2rem
 	position: relative
 
+@media only screen and (max-width: breakMobile)
+	article
+		width: 90%
+		h1
+			overflow: hidden // This is for when someone just puts a long url as the title....
+	p, blockquote, figure
+		a
+			word-break: break-all
+
 article h1
 	font-family: fontsSerif
 
@@ -53,11 +62,10 @@ li
 	margin-top: 0.3em
 
 img
-	max-width: contentWidth
+	max-width: 100%
 	margin: 0 auto
 	display: block
 	border-radius: 0.2rem
-	box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.75)
 
 .highlight
 	margin: 0
@@ -146,7 +154,7 @@ table
 	margin-right: 1em
 
 iframe
-	width: contentWidth
+	width: 100%
 	height: (contentWidth * 9 / 16)
 
 //pullquotes
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,4 +9,4 @@ tags:

		Welcome to MeiliDu, A beautiful read indeed.

		This theme is focused around your readers reading your posts. It is created for text and code heavy posts. Find it on [GitHub](https://github.com/HoverBaum/meilidu-hexo).
		This theme is focused around your readers reading your posts. It is created for text and code heavy posts, brightened by images. Find it on [GitHub](https://github.com/HoverBaum/meilidu-hexo).