Files
wixon_blog/static/css/style.css

236 lines
7.6 KiB
CSS

@font-face {
src: url(/static/font/SourceHanSansK-Medium.woff) format('woff');
font-family: 'SourceHanSansK';
font-weight: 600;
}
@font-face {
src: url(/static/font/SourceHanSansK-Regular.woff) format('woff');
font-family: 'SourceHanSansK';
font-weight: 400;
}
@font-face {
src: url(/static/font/SourceHanSansK-ExtraLight.woff) format('woff');
font-family: 'SourceHanSansK';
font-weight: 100;
}
@font-face {
src: url(/static/font/NanumSquareR.woff) format('woff');
font-family: 'NanumSquare';
}
*{margin:0;padding:0;}
ol, ul{padding:0;margin:0;}
li{list-style:none;}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* 기본 */
.wixon__wrap{width:100%;font-family: 'SourceHanSansK', sans-serif;}
.font__namum{font-family:'NanumSquare', sans-serif !important;}
/* header */
header{width:100%;max-width:1920px;margin:0 auto;height:220px;position:relative;}
.header__inner{
width:1620px;
height:219px;
margin:0 auto;
border-bottom:1px solid #e7e6e7;
display:flex;
justify-content:space-between;
position:relative;
}
h1{margin-top:70px;margin-left:200px;}
.nav__div{
margin-right:245px;
margin-top:97px;
font-size:19px;
letter-spacing:8.5px;
font-weight:100;
color:#901438;
cursor:default;
}
.nav__div .uk-icon{cursor:pointer;}
.login__section{position:absolute;width:100px;right:0;top:100px;text-align:right;}
.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__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__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;}
.lists__img img{width:100%;}
.lists__desc{padding-top:25px;}
.lists__category{
width:60px;
font-size:0.7em;
color:#898989;
text-align:center;
border-bottom:1px solid #c9c9c9;
margin:0 auto;
}
.lists__title{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
text-align:center;
word-break:keep-all;
padding:0 30px;
font-size: 1.4em;
line-height: 1.3;
margin:13px 0 20px;
color:#111;
font-family: 'SourceHanSansK', sans-serif !important;
}
.lists__content{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
color:#898989;
font-size:0.85em;
padding:0 20px;
text-align:center;
word-break:keep-all;
line-height:1.3;
}
.lists__date{text-align:center;font-size:0.8em;margin:20px 0 60px;color:#898989;}
.lists__date b{color:#111;font-weight:400;}
.fake__lists{display:none;}
.new__post__div{width:100%;}
.new__post__div h2{font-size:1.45em;letter-spacing:-1px;text-indent:10px;margin-bottom:10px;}
.new__posts{width:100%;}
.new__posts li{border-top:1px solid #dcdcdc;width:100%;}
.new__desc{width:100%;}
.new__category{width:35px;color:#898989;border-bottom:1px solid #c9c9c9;font-size:0.7em;padding-top:12px;}
.new__title{
width:100%;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
word-break:keep-all;
font-size: 0.75em;
color:#666;
margin:20px 0 15px;
font-weight:600;
}
.new__date{font-size:0.7em;margin-bottom:30px;color:#898989;}
.new__date b{color:#111;font-weight:400;}
.post__lists li:hover, .new__posts li:hover{text-shadow:1px 0px 1px RGBA(0,0,0,0.3);}
.post__lists li:hover .lists__img{box-shadow:1px 1px 5px RGBA(144,20,68,0.2);}
/* footer */
footer{width:100%;height:430px;background-color:#100e11;}
.footer__inner{
width:1620px;
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;}
.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;}
.footer__info ul li:last-child{padding-top:15px;}
/* post */
.container__post{margin-bottom:90px;}
.content__info{width:100%;padding-top:60px;}
.content__category{font-size:0.7em;text-indent:15px;color:#898989;margin-bottom:5px;}
.title__div{
width:100%;height:50px;
line-height:50px;
border-top:1px solid #636363;
border-bottom:1px solid #d2d2d2;
display:flex;justify-content:space-between;
}
.content__title{
line-height:50px;
text-indent:13px;
font-size:1.1em;
color:#242424;
font-weight:400;
margin:0;
font-family: 'SourceHanSansK', sans-serif !important;
}
.content__date{margin:0;font-size:0.75em;padding-right:60px;}
.content__date span{margin-right:10px;font-size:1.2em;}
.content__desc{padding:40px 55px;font-size:0.85em;color:#343434;}
.etc__list{width:100%;}
.other__list{width:100%;border-top:1px solid #727272;border-bottom:1px solid #727272;}
.other__list ul{width:100%;}
.other__list li{width:100%;height:50px;display:flex;justify-content:left;margin:0;position:relative;}
.other__list__way{text-indent:13px;line-height:50px;margin:0;font-size:0.9em;color:#636363;}
.other__list__title{
margin:0;
width:630px;
line-height:50px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
padding-left:55px;
font-size:0.75em;
}
.other__list__date{position:absolute;right:25px;top:15px;margin:0;font-size:0.75em;}
.other__list__date span{margin-right:10px;font-size:1.2em;}
.btn__area{text-align:right;padding-bottom:145px;}
.btn__area a{
display:inline-block;
width:130px;height:40px;
line-height:40px;
margin-top:25px;margin-right:12px;
text-align:center;
}
.btn__area .btn__lists{background-color:#000;color:#fff;}
.btn__area .btn__delete{border:1px solid #f0506e;color:#f0506e;}
.btn__area .btn__edit{border:1px solid #4da7ca;color:#4da7ca;}