레이아웃/디자인 수정

2023-09-20 15:33:54 +09:00
parent 5bf4890efa
commit 4783c44a30
3 changed files with 100 additions and 43 deletions
--- 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%;}
--- 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,19 +49,20 @@
                                <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>
+
+<script>
    $(document).ready(function(){
        // 로그인 메뉴 활성화
        let check_state = 0;
@@ -61,5 +76,20 @@
            }
            $(".login_nav").toggle(300);
        });
-            })
-        </script>
+
+        // 메뉴 토글
+        {#$(".menu__open").click(#}
+        {#    $(".menu__wrap").hide()#}
+        {##}
+        {#    $('.menu__wrap').toggle('slide', {#}
+        {#        direction: 'right'#}
+        {#    }, 400)#}
+        {#);#}
+        {##}
+        {#$('.menu__close').click(#}
+        {#    $('.menu__wrap').toggle('slide', {#}
+        {#        direction: 'right'#}
+        {#    }, 400)#}
+        {#);#}
+    });
+</script>
--- 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>