Merge pull request #22 from min050410/develop

add: mobile reletive UI/UX

src/md/Flask.mdx

@@ -61,6 +61,7 @@ def detail(post_id): #매개변수에는 <int:post_id>가 들어감
 `Secret_key` 무조건 필요    
 `config.py` 에 정의 해야 한다.  
 ~~+ 폼 모듈 너무 좋아요~~
+
 > #7 
 
 이 문제에 삽질한 횟수  

src/md/React-native.mdx

@@ -164,7 +164,7 @@ const ProfileScreen = ({ navigation, route }) => {
 };
 // ProfileScreen 에서 route.params.~~를 이용해 받을 수 있다.#
 ```
-<a href="https://reactnative.dev/docs/navigation">참고한 웹사이트</a>
+[참고한 웹사이트](https://reactnative.dev/docs/navigation)  
 
 > #8
 

src/pages/components/header.js

@@ -7,14 +7,14 @@ const Header = () => {
         <header>
             <Link to="../">
             <div class="head box">
-                <img src="https://static.wixstatic.com/media/41d000_609d3d052aa2455f99274f3bb75a157e.png/v1/fill/w_92,h_148,al_c,q_85,usm_0.66_1.00_0.01/41d000_609d3d052aa2455f99274f3bb75a157e.webp" alt="balloon"></img>
+                <img class="ballon" src="https://static.wixstatic.com/media/41d000_609d3d052aa2455f99274f3bb75a157e.png/v1/fill/w_92,h_148,al_c,q_85,usm_0.66_1.00_0.01/41d000_609d3d052aa2455f99274f3bb75a157e.webp" alt="balloon"></img>
                 <span>devlog</span>
             </div>
             </Link>
             <div class="head content">
-                <span>블로그</span>
+                <a href="https://github.com/min050410/TIL"><span>블로그</span></a>
                 <span>다크모드</span>
-                <span>소개</span>
+                <a href="https://github.com/min050410"><span>소개</span></a>
             </div>
         </header>
     )

src/pages/postitem.js

@@ -21,9 +21,11 @@ const Postimport = ({ location }) => {
                 <title>{location.state.myProp}</title>
                 <Header/>
                 <div class="middle">
+                    <div class = "left">
                     <MDXProvider components={components} >
                         <Postitem/>
                     </MDXProvider>
+                    </div>
                 </div>
             </main>
         )

src/pages/styles/card.sass

@@ -1,3 +1,4 @@
+@import "variables" 
 .container
     display: flex;
     flex-wrap: wrap;
@@ -26,4 +27,13 @@
     font-size: 0.8em;
     margin-right: 0.5em;
     padding: 0.2em;
-
+
+@include mobile
+    .card
+        margin-top: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    .card img 
+        width: 20vh
+        height: 20vh

src/pages/styles/header.sass

@@ -1,5 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');
-
+@import "variables" 
+
+@font-face 
+    font-family: "NanumSquareR"
+    src: url("../../assets/font/NanumSquareR.ttf") format("truetype")
+
+*
+    color: #000000
 header
     margin: 100 auto
     display: flex
@@ -17,10 +24,16 @@ header
     font-family: 'Open Sans Condensed', sans-serif;
 
 .head.box span
+    // font-family: 'NanumSquareR';
     margin-left: 10px;
     font-size: 50px;
     color: #000000;
 
 .head.content span
+    font-family: 'NanumSquareR';
     margin-left: 10px;
+
+@include mobile
+    .head
+        margin: 10px;
 

src/pages/styles/index.sass

@@ -1,5 +1,4 @@
-@import "theme"
-
+@import "variables"
 
 @font-face 
   font-family: "NanumSquareR"
@@ -62,20 +61,51 @@ pre
 
 ol,
 ul 
-
-  margin: 16px 0px
+  margin: 1em 0px
   li 
     width: calc(100% - 28px)
-    margin: 8px 0px
+    // margin: 1em 0px
     left: 28px
     position: relative
+    line-height: 1.75rem
 
 code
   padding-top: 0.1rem
   padding-bottom: 0.1rem
   font-size: 0.8em
-  background: #fafafa
+  background: #efefef
   border-radius: 5px
 
-
+@include mobile
+  *
+    font-size: 1rem
+  h1 
+    font-size: 1.6rem
+    margin: 2rem 0px 6px 0px
+  h2 
+    font-size: 1.4rem
+    margin: 1.7rem 0px 4px 0px
+  h3 
+    font-size: 1.2rem
+    margin: 1.4rem 0px 2px 0px
+  h4 
+    font-size: 1.0rem
+    margin: 1.1rem 0px
+  h5 
+    font-size: 0.8rem
+    margin: 0.8rem 0px 1px 0px
+  blockquote 
+    border-left: 3.5px solid $gray5
+  ol,
+  ul 
+    padding-left: 0.8em
+    li 
+      left: 0px
+  pre
+    padding: 0px
+    font-size: 1rem 
+  img:not(.ballon)
+    width: 300px;
+
+
 

src/pages/styles/postitem.sass

@@ -1,10 +1,21 @@
+@import "variables"
+
 .middle
-    margin: 50px 20px;
+    margin: 50px 2em;
     border-radius: 40px;
     border: 1px solid #000000;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    .left
+        margin-left: 10em;
+
+@include mobile
+    .middle
+        border: 1px solid #FFFFFF;
+        .left
+            margin-left: 0px;
+
+
 
 
 

src/pages/styles/variables.sass

@@ -0,0 +1,30 @@
+$white: #ffffff;
+$gray0: #f8f8f8;
+$gray1: #efefef;
+$gray2: #d9d9d9;
+$gray3: #ababab;
+$gray4: #848484;
+$gray5: #747474;
+$gray6: #5d5d5d;
+$gray7: #444444;
+
+// Breakpoints
+$breakpoint-mobile: 335px;
+$breakpoint-tablet: 758px;
+$breakpoint-desktop: 1024px;
+
+@mixin mobile 
+  @media (min-width: $breakpoint-mobile) and (max-width: $breakpoint-tablet - 1px) 
+    @content;
+
+
+@mixin tablet 
+  @media (min-width: #{$breakpoint-tablet}) and (max-width: $breakpoint-desktop - 1px) 
+    @content;
+
+
+@mixin desktop 
+  @media (min-width: #{$breakpoint-desktop}) 
+    @content;
+
+