tweak layout on smaller devices

maybe it's over-flex-ing, but i started to like that thing :p

2 files changed, 30 insertions, 4 deletions

diff --git a/README.md b/README.md
index f18010a..83ab0b9 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,15 @@
 
 repo of [aaoth.xyz](https://aaoth.xyz) website.
 
-i have a lot of different creative projects so that i can't handle it in my head. so i wish i'll be able to create some lightweight and simple website to show as much of them as possible.
+i have a lot of different creative projects so that i can't handle it in my
+head. so i wish i'll be able to create some lightweight and simple website to
+show as much of them as possible.
 
 ## implementation
 
-i've decided to use [jekyll](https://jekyllrb.com) for this purpose, because ~~it's fun~~ it's pretty customizable and easy.
+i've decided to use [jekyll](https://jekyllrb.com) for this purpose, because
+~~it's fun~~ it's pretty customizable and easy.
 
-for my ease of use i added [this git hook](https://jekyllrb.com/docs/deployment/automated/) to my server-side git repository.
+for my ease of use i added
+[this git hook](https://jekyllrb.com/docs/deployment/automated/)
+to my server-side git repository.
diff --git a/_sass/main.scss b/_sass/main.scss
index f6fca46..2da1bac 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -22,7 +22,7 @@ html {
 
 body {
 	max-width: 835px;
-	min-width: 364px;
+	min-width: 462px;
 	margin: 20px auto 0 auto;
 	padding: 8px;
 	color: $color-dark-bg;
@@ -178,6 +178,9 @@ footer {
 }
 
 @media only screen and (max-width: 760px) {
+    body p {
+        padding-top: 1em;
+    }
 	nav {
 		margin-bottom: 5vh;
 		ul {
@@ -193,9 +196,27 @@ footer {
 		}
 	}
     .about {
+        flex-direction: column-reverse;
+        .about-sidebar {
+            display: flex;
+        }
         .about-info {
             padding: 0 2%;
         }
+        .about-links {
+            margin-top: 0;
+            p:first-child {
+                margin: 0;
+            }
+            ul {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: flex-start;
+                li {
+                    margin-right: auto;
+                }
+            }
+        }
     }
 }