wixon/wixon_blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

레이아웃/디자인 수정

Browse Source
This commit is contained in:
MOON JUNG WON
2023-09-20 15:33:54 +09:00
parent 5bf4890efa
commit 4783c44a30
3 changed files with 100 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
static/css/style.css
View File

@@ -58,38 +58,64 @@
/* header */ /* header */
header{width:100%;max-width:1920px;margin:0 auto;height:220px;position:relative;} header{width:100%;max-width:1920px;margin:0 auto;height:220px;position:relative;}
.header__inner{ .header__inner{
width:1620px; width:1200px;
height:219px; height:219px;
margin:0 auto; margin:0 auto;
border-bottom:1px solid #e7e6e7;
display:flex; display:flex;
justify-content:space-between; justify-content:space-between;
position:relative; position:relative;
border-bottom:1px solid #e7e6e7;
} }
h1{margin-top:70px;margin-left:200px;} h1{margin-top:70px;}
.nav__div{ .nav__div{
margin-right:245px; position:fixed;
margin-top:97px; right:0;
font-size:19px; background:#fff;
width:28px;
height:100%;
padding:20px 20px 0 20px;
border-left:1px solid #901438;
font-size:16px;
letter-spacing:8.5px; letter-spacing:8.5px;
font-weight:100; font-weight:300;
color:#901438; color:#901438;
cursor:default; cursor:default;
} }
.nav__div .nav__title{padding-top:30px;writing-mode:vertical-lr;}
.nav__div .uk-icon{cursor:pointer;} .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;} .login_nav{display:none;}
/* main index */ /* main index */
.container{width:100%;max-width:1920px;margin:85px auto;} .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{width:100%;}
.content__inner::after{content:"";display:block;clear:both;} .content__inner::after{content:"";display:block;clear:both;}
.post__lists0, .post__lists1, .new__div{float:left;} .post__lists0, .post__lists1, .new__div{float:left;}
.post__lists0, .post__lists1{width:400px;} .post__lists0, .post__lists1{width:34%;}
.post__lists0{padding-right:30px;} .post__lists0{padding-right:3%;}
.post__lists1{padding-right:50px;} .post__lists1{padding-right:3%;}
.new__div{width:320px;} .new__div{width:26%;}
.post__lists li{width:100%;height:auto;} .post__lists li{width:100%;height:auto;}
.post__lists li a{display:block;width:100%;height:100%;} .post__lists li a{display:block;width:100%;height:100%;}
.lists__img{width:100%;height:auto;max-height:580px;overflow:hidden;} .lists__img{width:100%;height:auto;max-height:580px;overflow:hidden;}
@@ -162,18 +188,18 @@
/* footer */ /* footer */
footer{width:100%;height:430px;background-color:#100e11;} footer{width:100%;height:430px;background-color:#100e11;}
.footer__inner{ .footer__inner{
width:1620px; width:100%;
max-width:1200px;
margin:0 auto; margin:0 auto;
display:flex; display:flex;
justify-content:space-between; justify-content:space-between;
font-weight:600; font-weight:600;
color:#777; color:#777;
padding-left:30px;
} }
.footer__tel{font-size:0.65em;letter-spacing:-0.25px;margin:0;padding-top:175px;} .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;} 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;} .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;} .slogan{font-size:0.65em;letter-spacing:1px;text-transform:uppercase;margin:15px 0 0;}
.footer__info ul{display:flex;} .footer__info ul{display:flex;}
.footer__info ul li:first-child{padding-top:25px;margin-right:75px;} .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__delete{border:1px solid #f0506e;color:#f0506e;}
.btn__area .btn__edit{border:1px solid #4da7ca;color:#4da7ca;} .btn__area .btn__edit{border:1px solid #4da7ca;color:#4da7ca;}
/* login */
.uk-form-stacked{width:30%;margin:0 auto;}
.login__btn{width:100%;}

50
templates/base.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <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="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/css/uikit.min.css"/>
<link rel="stylesheet" href="/static/css/style.css"/> <link rel="stylesheet" href="/static/css/style.css"/>
<!-- include libraries(jQuery, bootstrap) --> <!-- include libraries(jQuery, bootstrap) -->
@@ -19,14 +19,28 @@
{% block staticfiles %}{% endblock %} {% block staticfiles %}{% endblock %}
</head> </head>
<body> <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"> <div class="wixon__wrap">
<header> <header>
<div class="header__inner"> <div class="header__inner">
<h1><a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a></h1> <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"> <ul class="login__section">
{% if g.is_login %} {% if g.is_login %}
<li> <li>
@@ -35,19 +49,20 @@
<ul> <ul>
<li class="uk-active"><a href="/write">포스트 작성</a></li> <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 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> </ul>
</div> </div>
</li> </li>
{% else %} {% else %}
<li><a href="/login">로그인</a></li> <li><a href="/login">LOGIN</a></li>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
</header> </header>
{% block content %}{% endblock %} {% block content %}{% endblock %}
<script>
<script>
$(document).ready(function(){ $(document).ready(function(){
// 로그인 메뉴 활성화 // 로그인 메뉴 활성화
let check_state = 0; let check_state = 0;
@@ -61,5 +76,20 @@
} }
$(".login_nav").toggle(300); $(".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>

4
templates/login.html
View File

@@ -2,7 +2,7 @@
{% block content %} {% block content %}
<div class="uk-container uk-margin-top"> <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() %} {% with messages = get_flashed_messages() %}
{% if messages %} {% if messages %}
<div class="uk-alert-danger" uk-alert> <div class="uk-alert-danger" uk-alert>
@@ -25,7 +25,7 @@
</div> </div>
</div> </div>
<div class="uk-margin"> <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> </div>
</form> </form>
</div> </div>