$blue:#3F51B5; $lightblue:#4285f4; $pink:#ff4081; $yellow:#FFF176; @mixin dropShadow($z:3){ box-shadow: $z*1px $z*1px $z*3px $z*0.3px rgba(0, 0, 0, 0.2); } @mixin input($Col:$pink){ outline: none; border: none; border-bottom: #aaa solid 2px; border-radius: 2px; width: 100%; transition:0.5s; &:focus { border-bottom: $Col solid 2px; } } @font-face { font-family:'NanumBarunGothic'; src: url('./images/NanumBarunGothic.eot'); src: url('./images/NanumBarunGothic.eot?#iefix') format('embedded-opentype'), url('./images/NanumBarunGothic.woff') format('woff'); font-weight: 400; font-style: normal; font-stretch: normal; } /*card*/ .card { margin:0 0 8px; background-color: #fff; @include dropShadow(); border-radius: 2px; overflow: hidden; } .card-padding{ padding:16px; } .flatbutton { background: inherit; transition:0.4s; min-width:88px; border:none; border-radius: 2px; padding:0 8px; font-weight: bold; line-height: 36px; transition:0.3s; &:hover{ z-index:10; @include dropShadow(4); } } .iconbutton{ background: #fff; transition:0.4s; border-radius: 50%; border:none; width:40px; height:40px; text-align: center; line-height: 40px; font-size: 16px; &:hover{ z-index: 10; @include dropShadow(4); } } ::selection { color:#fff; background: $pink; } li[onclick^="window.open"],div[onclick^="window.open"] { cursor: pointer; } img[src=""]{display: none;} /*표스크롤*/ .scrollableTable { overflow-x:scroll; &:after{ content:'< - - 스크롤 - - >'; color:#999; font-size:xx-small; padding-left:40vw; text-decoration: none; } } html{ overflow-x:hidden; } .container { margin-right: auto; margin-left: auto; padding-left: 8px; padding-right: 8px; } @media(min-width:768px) { .container { width: 768px; } } @media(min-width:1200px) { .container { width: 820px; } } @media(min-width:1400px) { .container { width: 1020px; } } body { padding-top: 65px; margin: 0; background:#eee; font-family:"NanumBarunGothic", 맑은 고딕, malgun gothic, AppleGothicNeoSD, Apple SD 산돌고딕 Neo, Microsoft NeoGothic, Droid sans, sans-serif; } div,li,p { word-break:break-word; } .loadingSpinner { position: absolute; top: 40vh; left: 50%; margin-left: -15px; } /*헤더*/ header { margin: 0; padding: 0; position: fixed; top: 0; left: 0; width: 100%; height: 56px; background: $blue; transition: 0.3s; z-index: 900; @include dropShadow(4); a, a:hover, a:focus { text-decoration: none; color: #fff; } .drawer-toggle { position: fixed; top: 0; left: 0; width: 56px; height: 56px; line-height: 56px; text-align: center; font-size: 25px; color: #fff; text-shadow: rgba(0,0,0,0.3) 1px 1px 2px,rgba(0,0,0,0.3) 0 0 10px; } h3 { position: absolute; top: 0; left: 80px; margin: 0; line-height: 56px; font-size: 22px; } #search-box { position: absolute; top: 0; left: 100%; width: 100%; height: 56px; background: $blue; .search-icon { position: fixed; right: 0; width: 56px; height: 56px; line-height: 56px; text-align: center; font-size: 25px; transition: 0.3s; } input { background: $blue; width: 50%; height: 52px; margin: 2px 0; padding: 0 10px; border: none; color: #fff; font-size: 20px; &:focus{ outline:none; } } &.opened{ left: 0; .search-icon { position: static; margin: 0 16px; } } } } #search-resultWrap { display:none; height:110px; transition: .3s ease-in; .spinner { position: relative; left: 50%; margin-top: 50px; } #search-result-close { float: right; margin: 16px; z-index: 1; } #search-result{ position:relative; top:-80px; background: #fff; padding:16px; } h3{ position: static; line-height: 1.17em; font-size: 1.17em; margin-left: 1.17em; } &.opened { display:block; } .moreResult { float:right; a{ color:$lightblue; } a:hover, a:focus{ text-decoration: none; } } } #searchList ul { margin-left: 15px; padding:0; li { position: relative; display: block; height: 32px; line-height: 32px; list-style: none; margin: 0; padding: 0 10px; border-left: $lightblue solid 2px; overflow:hidden; span{ margin:0 auto; } } } .searchListWrap{padding:16px;} /*홈카드*/ .home { margin-left:-4px; margin-right:-4px; } .homeBG{ width:100%; height:70vh; position: absolute; top: 0; left: 0; right: 0; padding: 40vh 24px 24px; background:url("./images/homeBG.jpg"); background-size:cover; background-position-y:0; box-shadow: rgba(0,0,0,0.2) 0 -6px 6px inset; .homeDesc{ color:#fff; text-align:center; font-size: 16pt; text-shadow:rgba(0,0,0,0.4) 1px 1px 3px; } } .homeProfile{ position: absolute; top: 70vh; left:50%; width: 102px; height: 102px; border-radius:50%; margin:0 auto; width: 72px; height: 72px; overflow: hidden; margin-top: -48px; margin-left: -36px; @include dropShadow(8); z-index:10; border:rgba(255,255,255,0.5) solid 2px; img{ width: 100%; height: 100%; max-width:100%; max-height:100%; } } @media(min-width:992px){ .homeProfile{width:102px;height:102px;margin-top:-72px;margin-left:-51px;} } .homeCardWrap { padding: 0 4px; } .homeCard{ min-height: 180px; transition:0.3s; img{ max-width:100%; width:180px; height:auto; float:left; } img[src^="http"]~.headAndDesc{ width: 50%;} .headAndDesc{ float:left; h3 { margin:16px; } p { margin: 16px; } } &:hover{ @include dropShadow(8); z-index: 2; } } @media(max-width:768px){ .homeCard{ img { width:100%; } img[src^="http"]~.headAndDesc{ width: 100%;} } } /*본문 영역*/ article{ .titleWrap { margin-bottom: 1em; h2 { font-weight: 600; font-size: 2em; font-stretch: expanded; margin: 0.4em 0 0.7em; } a { text-decoration:none; } .category { font-stretch: expanded; } .date { float: right; font-stretch: expanded; } .category a,.date{ color:#aaa; } } .article{ h1,h2,h3,h4,h5,h6 { border-left:$lightblue solid 5px; border-bottom: $lightblue solid 2px; text-indent: 16px; } img, .imageblock { max-width: 100%; height: auto; } span {max-width: 100%;} sup.footnote {display: inline-block;} } .author { float: right; margin: 15px; } } /*탭*/ .tabs{ .labels { background: $lightblue; @include dropShadow(); label { width: 150px; height: 46px; line-height: 46px; border-bottom: $lightblue solid 2px; color: rgba(255,255,255,0.5); font-weight: bold; text-align: center; cursor: pointer; float: left; overflow: hidden; position: relative; &:hover { color: #fff; } a { color: inherit; } } } input#tab1:checked ~ .labels>label[for="tab1"], input#tab2:checked ~ .labels>label[for="tab2"], input#tab3:checked ~ .labels>label[for="tab3"], input#tab4:checked ~ .labels>label[for="tab4"] { color: #fff; border-bottom: $yellow solid 2px; } input[type="radio"], .tab_content { display: none; } input[name="tabs"]:checked ~ .tab_container>.notAvailable { display: none; } input#tab1:checked ~ .tab_container>#tab1C, input#tab2:checked ~ .tab_container>#tab2C, input#tab3:checked ~ .tab_container>#tab3C, input#tab4:checked ~ .tab_container>#tab4C { display: block; } .tab_container { clear: both; overflow: auto; width: 100%; .notAvailable { border: #f00 solid 1px; background: #fdd; padding: 1em; } } } @media screen and (max-width:480px) { .tabs>.labels>label { width:25%; } } /*방명록&댓글*/ #guestbook .guestbookDesc {color:#999;} #guestbook, #comments-box{ border-bottom:#eee solid 1px; ul{ margin:0; padding:0; } li{ list-style: none; border-bottom:#eee solid 1px; ul{ li{ border:none; padding-left:15px; background: #fafafa; } } [class$="-wrap"]{ padding: 15px; overflow: hidden; .writer-info{ .profile-dummy { width: 40px; height: 40px; float: left; border-radius: 50%; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiBzdHlsZT0iZmlsbDogcmdiKDYzLDgxLDE4MSk7IiByPSI1MCIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNDAiIHN0eWxlPSJmaWxsOiB3aGl0ZTsiIHI9IjIyIiAvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjEyMCIgc3R5bGU9ImZpbGw6d2hpdGU7IiByeD0iNTAiIHJ5PSI1NSIvPjwvc3ZnPg==); } .name{ margin:15px; img{ float: left; width: 40px; max-width: 40px; height: 40px; max-height: 40px; border-radius: 50%; margin-left: -40px; background: #fff; z-index: 100; } } .date{ font-size: x-small; vertical-align: top; color: #aaa; margin-left: 15px; } } p{ margin:0 40px; padding-left: 15px; } [class$="Control"]{ float:right; margin:0; } } } .tistoryProfileLayerTrigger {display:none;} form{ .write{ padding:15px; .writerInfo{ label{ color:$pink; } input[type="text"], input[type="password"] { @include input(); } } textarea { resize:vertical; overflow:auto; @include input($lightblue); } button.submit{ color: $lightblue; background: #fff; float:right; } } } } @media(min-width:992px){ #guestbook, #comments-box{ li{ [class$="-wrap"]{ .writer-info{ .profile-dummy { width: 64px; height: 64px; float: left; } .name{ img{ width: 64px; max-width: 64px; height: 64px; max-height: 64px; margin-left: -64px; } } } p{ margin:0 64px; } } } } } #guestbook form .write textarea {border:#aaa solid 1px;} /*디스커스*/ /*공유*/ [class^="a2a"] { padding:1em 0; } /*트랙백*/ .trackback{ border:#eee solid 1px; padding:8px; h3,h4{ margin: 0.3em; } .antiSpamTrack{ margin:0.7em 0; input{ width: 100%; height: 30px; border: 1px solid #E0E0E0; text-indent: 8px; } .antiSpamTrackbackInfo{ font-size: 12px; color: #999; } } } /*Paging*/ #paging { float:right; padding:16px; a { display: inline-block; text-align: center; color: $lightblue; &:hover,&:focus { text-decoration: none; } } [class^="no-more-"] { display: none; } } /*사이드바*/ aside{ a:hover, a:focus{ text-decoration:none; } padding:0; .card-header { height:56px; line-height:56px; border-bottom: #ccc solid 1px; padding:0 15px; h3 { margin:0; font-size: 1.17em; i{ margin-right: 8px; } } i.ic-more_vert { float: right; display: none; } &.lessed{ i.ic-more_vert { display: block; } } } .card-header.lessed ~ .card-content,.card-header.lessed ~ .card-listed-content li{ height:0!important; padding-top:0!important; padding-bottom:0!important; border:none!important; } .card-content { padding:15px; transition:0.3s; } .card-listed-content { padding:0; transition:0.3s; ul { padding: 0; margin: 0; } li { list-style: none; line-height: 56px; border-top: #eee solid 1px; padding-left: 55px; overflow: hidden; transition:0.3s; &:hover { z-index:10; position:relative; transition:0.4s; @include dropShadow(4); } &.more-post { height: 48px; line-height: 48px; padding-left: 16px; i{ margin-right:10px; } } .info { line-height: 56px; font-size: smaller; color: #999; margin-top: -32px; } } .thumbnail{ margin-left:-47px; margin-right:3px; max-width:40px; max-height:40px; border-radius:50%; } .thumbnail.byRSS[src=""] { display: none; } a { pointer-events: none; } } } @media(min-width:768px){ aside>#sidebar-col1{ float:left; width:50%; padding-right:4px; } aside>#sidebar-col2 { float:left; width:50%; padding-left:4px; } } /*드로워*/ #drawer { width: 280px; height: 100%; position: fixed; top: 0; left: -280px; background: #fff; z-index: 1050; transition: .3s; overflow: hidden; &.opened { left: 0; @include dropShadow(5); } #drawer_profile { background: url('./images/drawerBG.jpg'); background-size: cover; height: 134px; padding: 16px 16px 8px; z-index: 10; img { width: 64px; height: 64px; max-width: 64px; max-height: 64px; background: #fff; border-radius: 50%; } a:hover,a:focus{ text-decoration:none; } #drawer_name { color: #fff; line-height: 27px; font-weight: 900; p{ margin:0; } .blogTitle{ font-weight:bold; font-size:20px; } .blogDesc{ font-size: 12px; margin-top: -5px; } } } #drawer_login { background: #fff; position: absolute; top: 16px; left: 224px; color: #aaa; } .drawer_container { width: 100%; position: absolute; top: 134px; bottom:0; overflow-y: auto; .listWrap { h4,a{ margin:0; line-height: 48px; padding-left: 16px; } ul, li { overflow: hidden; padding: 0; margin: 0; } ul { margin:0 0 8px; i{ margin-right: 16px } li { padding-left: 16px; &:hover { background: #eee; } li:hover { background: #bbb; } } } a { display: block; width: 100%; color: #333; text-decoration: none; } .actoggle{ .open, .close { float:right; } .close { display:none; } &.acopen{ .close{display:block;} .open{display: none;} } &>ul { display: none; padding-left: 23px!important; } } } } #drawer-tmp-category{ display:none; } #drawer_bottom { border-top: #eee solid 1px; padding: 24px 16px; box-sizing: content-box; a { text-decoration: underline; } } } #background_blocker { display: none; background:rgba(0,0,0,0.2); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; &.opened { display: block; } } #drawer.opened + #background_blocker { display: block; } html.opened {overflow: hidden;} @media(min-width:768px){ #drawer{ width:400px; left: -400px; #drawer_login { left:344px; } } } /*푸터영역*/ footer { background: rgba(0, 0, 0, 0.5); margin: 0; padding: 1em; margin-top: 1em; color: #eee; text-align: center; a{ color:#fff; &:hover, &:focus{ color:#333; text-decoration:none; } } } /*toTop*/ #toTop{ position: fixed; right:16px; bottom: 16px; font-weight: bold; background: $pink; color:#fff; @include dropShadow(2); z-index:10; } @media(min-width:992px){ #toTop{ width: 57px; height: 57px; line-height: 57px; font-size: 24px; } } /*ink effect*/ .ripplelink { display: block; position: relative; overflow: hidden; } .ink { display: block; position: absolute; background: rgba(230, 230, 230, 0.5); border-radius: 100%; transform: scale(0); } .animate { animation: ripple 0.65s linear; } @keyframes ripple { 100% { opacity: 0; transform: scale(2.5); }; } /*spinner*/ .spinner { animation: rotator 1.4s linear infinite; } @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } .path { stroke-dasharray: 187; stroke-dashoffset: 0; transform-origin: center; animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite; } @keyframes colors { 0% { stroke: #4285F4; } 25% { stroke: #DE3E35; } 50% { stroke: #F7C223; } 75% { stroke: #1B9A59; } 100% { stroke: #4285F4; } } @keyframes dash { 0% { stroke-dashoffset: 187; } 50% { stroke-dashoffset: 46.75; transform: rotate(135deg); } 100% { stroke-dashoffset: 187; transform: rotate(450deg); } } /*카드 등장 효과*/ .sidebar-temp {opacity:0} .appearing, #sidebar-col1 .card,#sidebar-col2 .card{ animation: appearing 0.65s ease-out; } @keyframes appearing { 0% { opacity:0; transform: rotate(15deg); transform-origin: -20% -20%; } 100% { opacity:1; transform-origin: -20% -20%; } } /*tablet 이상*/ @media(min-width:768px){ } /*desktop 이상*/ @media(min-width:992px){ } /*대화면 전용*/ @media(min-width:1200px){ }