From 4783c44a306803e5eeb2793a5aff3e1c463cfa9d Mon Sep 17 00:00:00 2001
From: MOON JUNG WON <wjddnjsdl136@gmail.com>
Date: Wed, 20 Sep 2023 15:33:54 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83/=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/style.css | 63 +++++++++++++++++++++++++-----------
 templates/base.html  | 76 ++++++++++++++++++++++++++++++--------------
 templates/login.html |  4 +--
 3 files changed, 100 insertions(+), 43 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 38f09a4..790d1d2 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -58,38 +58,64 @@
     /* header */
     header{width:100%;max-width:1920px;margin:0 auto;height:220px;position:relative;}
     .header__inner{
-        width:1620px;
+        width:1200px;
         height:219px;
         margin:0 auto;
-        border-bottom:1px solid #e7e6e7;
         display:flex;
         justify-content:space-between;
         position:relative;
+        border-bottom:1px solid #e7e6e7;
     }
-    h1{margin-top:70px;margin-left:200px;}
+    h1{margin-top:70px;}
     .nav__div{
-        margin-right:245px;
-        margin-top:97px;
-        font-size:19px;
+        position:fixed;
+        right:0;
+        background:#fff;
+        width:28px;
+        height:100%;
+        padding:20px 20px 0 20px;
+        border-left:1px solid #901438;
+        font-size:16px;
         letter-spacing:8.5px;
-        font-weight:100;
+        font-weight:300;
         color:#901438;
         cursor:default;
     }
+    .nav__div .nav__title{padding-top:30px;writing-mode:vertical-lr;}
     .nav__div .uk-icon{cursor:pointer;}
-    .login__section{position:absolute;width:100px;right:0;top:100px;text-align:right;}
+
+    /* toggle menu */
+    .menu__wrap{
+        position:fixed;
+        right:0;
+        background:#e7e6e7;
+        width:340px;
+        height:100%;
+        padding:3%;
+        z-index:1;
+        display:none;
+    }
+    .menu__box{background:#fff;height:88%;border-radius:20px;}
+    .menu__close{position:absolute;top:10px;right:10px;cursor:pointer;}
+    .menu__box ul{padding:8% 20%;}
+    .menu__box ul li{font-size:20px;text-align:center;padding:30px 0;border-bottom:1px solid #e7e6e7;}
+    .menu__box ul li:last-child{border-bottom:none;}
+
+    /* LOGIN */
+    .login__section{position:absolute;width:100px;left:0;top:10px;text-align:left;}
+    .login__section li{font-size:14px;}
     .login_nav{display:none;}
 
     /* main index */
     .container{width:100%;max-width:1920px;margin:85px auto;}
-    .content{width:1200px;padding:0 210px;margin:0 auto;border-bottom:1px solid #e7e6e7;}
+    .content{width:72.12%;margin:0 auto;border-bottom:1px solid #e7e6e7;}
     .content__inner{width:100%;}
     .content__inner::after{content:"";display:block;clear:both;}
     .post__lists0, .post__lists1, .new__div{float:left;}
-    .post__lists0, .post__lists1{width:400px;}
-    .post__lists0{padding-right:30px;}
-    .post__lists1{padding-right:50px;}
-    .new__div{width:320px;}
+    .post__lists0, .post__lists1{width:34%;}
+    .post__lists0{padding-right:3%;}
+    .post__lists1{padding-right:3%;}
+    .new__div{width:26%;}
     .post__lists li{width:100%;height:auto;}
     .post__lists li a{display:block;width:100%;height:100%;}
     .lists__img{width:100%;height:auto;max-height:580px;overflow:hidden;}
@@ -162,18 +188,18 @@
     /* footer */
     footer{width:100%;height:430px;background-color:#100e11;}
     .footer__inner{
-        width:1620px;
+        width:100%;
+        max-width:1200px;
         margin:0 auto;
         display:flex;
         justify-content:space-between;
         font-weight:600;
         color:#777;
-        padding-left:30px;
     }
     .footer__tel{font-size:0.65em;letter-spacing:-0.25px;margin:0;padding-top:175px;}
     footer address{display:block;font-size:0.65em;letter-spacing:-0.25px;margin:3px 0 0;}
     .copywriter{font-size:0.65em;letter-spacing:-0.25px;text-transform:uppercase;margin:20px 0 15px;}
-    .footer__logo{padding-top:155px;padding-right:80px;}
+    .footer__logo{padding-top:155px;}
     .slogan{font-size:0.65em;letter-spacing:1px;text-transform:uppercase;margin:15px 0 0;}
     .footer__info ul{display:flex;}
     .footer__info ul li:first-child{padding-top:25px;margin-right:75px;}
@@ -231,5 +257,6 @@
     .btn__area .btn__delete{border:1px solid #f0506e;color:#f0506e;}
     .btn__area .btn__edit{border:1px solid #4da7ca;color:#4da7ca;}
 
-
-
+    /* login */
+    .uk-form-stacked{width:30%;margin:0 auto;}
+    .login__btn{width:100%;}
diff --git a/templates/base.html b/templates/base.html
index 43dd9ec..d69204c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Blog</title>
+    <title>WIXON Blog</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/css/uikit.min.css"/>
     <link rel="stylesheet" href="/static/css/style.css"/>
     <!-- include libraries(jQuery, bootstrap) -->
@@ -19,14 +19,28 @@
     {% block staticfiles %}{% endblock %}
 </head>
 <body>
+    <div class="nav__div">
+        <span class="uk-icon menu__open" uk-icon="icon: menu"></span>
+        <span class="nav__title">WXNNER BLOG</span>
+    </div>
+
+    <div class="menu__wrap">
+        <div class="menu__close"><button class="uk-icon" uk-icon="icon: close"></button></div>
+        <div class="menu__box">
+            <ul>
+                <li><a href="#a">WXN NEWS</a></li>
+                <li><a href="#a">IT 요즘</a></li>
+                <li><a href="#a">최신테크뉴스</a></li>
+                <li><a href="#a">ETC</a></li>
+            </ul>
+        </div>
+    </div>
+
     <div class="wixon__wrap">
         <header>
             <div class="header__inner">
                 <h1><a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a></h1>
-                <div class="nav__div">
-                    <span class="nav__title">WXNNER BLOG</span>
-                    <span class="uk-icon" uk-icon="icon: menu"></span>
-                </div>
+
                 <ul class="login__section">
                     {% if g.is_login %}
                         <li>
@@ -35,31 +49,47 @@
                                 <ul>
                                     <li class="uk-active"><a href="/write">포스트 작성</a></li>
                                     <li class="uk-active"><a target="_blank" href="http://www.wixon.co.kr/backS1te">관리자 페이지</a></li>
-                                    <li class="uk-active"><a href="/logout">로그아웃</a></li>
+                                    <li class="uk-active"><a href="/logout">LOGOUT</a></li>
                                 </ul>
                             </div>
                         </li>
                     {% else %}
-                        <li><a href="/login">로그인</a></li>
+                        <li><a href="/login">LOGIN</a></li>
                     {% endif %}
                 </ul>
             </div>
         </header>
 
     {% block content %}{% endblock %}
-        <script>
-            $(document).ready(function(){
-                // 로그인 메뉴 활성화
-                let check_state = 0;
-                $(".login__section .user__nav__open").click(function(){
-                    if(check_state != 0){
-                        $(this).find("span").attr("uk-icon","icon: triangle-down");
-                        check_state = 0;
-                    }else{
-                         $(this).find("span").attr("uk-icon","icon: triangle-up");
-                         check_state = 1;
-                    }
-                    $(".login_nav").toggle(300);
-                });
-            })
-        </script>
\ No newline at end of file
+
+<script>
+    $(document).ready(function(){
+        // 로그인 메뉴 활성화
+        let check_state = 0;
+        $(".login__section .user__nav__open").click(function(){
+            if(check_state != 0){
+                $(this).find("span").attr("uk-icon","icon: triangle-down");
+                check_state = 0;
+            }else{
+                 $(this).find("span").attr("uk-icon","icon: triangle-up");
+                 check_state = 1;
+            }
+            $(".login_nav").toggle(300);
+        });
+
+        // 메뉴 토글
+        {#$(".menu__open").click(#}
+        {#    $(".menu__wrap").hide()#}
+        {##}
+        {#    $('.menu__wrap').toggle('slide', {#}
+        {#        direction: 'right'#}
+        {#    }, 400)#}
+        {#);#}
+        {##}
+        {#$('.menu__close').click(#}
+        {#    $('.menu__wrap').toggle('slide', {#}
+        {#        direction: 'right'#}
+        {#    }, 400)#}
+        {#);#}
+    });
+</script>
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
index 7fe4b45..e80a77c 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 <div class="uk-container uk-margin-top">
-    <h1 class="uk-text-center"><span>윅슨 블로그 로그인</span></h1>
+    <h1 class="uk-text-center"><span>LOGIN</span></h1>
     {% with messages = get_flashed_messages() %}
         {% if messages %}
             <div class="uk-alert-danger" uk-alert>
@@ -25,7 +25,7 @@
             </div>
         </div>
         <div class="uk-margin">
-            <button class="uk-button uk-button-default">Log In</button>
+            <button class="uk-button uk-button-default login__btn">Log In</button>
         </div>
     </form>
 </div>