diff --git a/layouts/simple_world/conf/info.xml b/layouts/simple_world/conf/info.xml new file mode 100644 index 000000000..94940f107 --- /dev/null +++ b/layouts/simple_world/conf/info.xml @@ -0,0 +1,133 @@ + + + 네모의 꿈 + Rectangular World + 깔끔한 면과 그림자 레이아웃 + Simple rectangular planes and shadows + 1.0 + 2016-09-04 + + misol + misol + + + + 상단 메뉴 + Global Navigation Menu + + + 하단 메뉴 + Footer Navigation Menu + + + + + 사이트 로고 이미지 + Site logo image + + + 사이트 로고 문자 + Site logo text + + + 사이트 로고 링크 주소 + Site logo link URL + + + 사이트 하단 문자 + Site footer text + + + 중심 색상 + Primary color + 분위기를 형성하는데 사용되는 중심 색상입니다. + Please type the mood color you want. + + + + 붉은 색 + Red + + + 크림슨 + Crimson + + + 분홍 + Pink + + + 보라 + Purple + + + 진보라 + Deep Purple + + + 인디고 + Indigo + + + 짙은 파랑 + Deep Blue + + + 파랑 + Blue + + + 밝은 파랑 + Light Blue + + + 시안 + Cyan + + + 틸 + Teal + + + 초록 + Green + + + 연한 초록 + Light Green + + + 라임 + Lime + + + 노랑 + Yellow + + + 앰버 + Amber + + + 주황 + Orange + + + 진한 주황 + Deep Orange + + + 갈색 + Brown + + + 회색 + Grey + + + 푸른 회색 + Blue Grey + + + + \ No newline at end of file diff --git a/layouts/simple_world/lang/lang.xml b/layouts/simple_world/lang/lang.xml new file mode 100644 index 000000000..0c0dc5d2c --- /dev/null +++ b/layouts/simple_world/lang/lang.xml @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/layouts/simple_world/layout.html b/layouts/simple_world/layout.html new file mode 100644 index 000000000..801578967 --- /dev/null +++ b/layouts/simple_world/layout.html @@ -0,0 +1,143 @@ + +{Context::addMetaTag("viewport", "width=device-width, user-scalable=yes")} + + + +{@ $material_colors = array( + 'red' => '#f44336', + 'crimson' => '#66001f', + 'pink' => '#e91e63', + 'purple' => '#9c27b0', + 'deep-purple' => '#673ab7', + 'indigo' => '#3f51b5', + 'deep-blue' => '#00397f', + 'blue' => '#2196f3', + 'light-blue' => '#03a9f4', + 'cyan' => '#00bcd4', + 'teal' => '#009688', + 'green' => '#4caf50', + 'light-green' => '#8bc34a', + 'lime' => '#cddc39', + 'yellow' => '#ffeb3b', + 'amber' => '#ffc107', + 'orange' => '#ff9800', + 'deep-orange' => '#ff5722', + 'brown' => '#795548', + 'grey' => '#9e9e9e', + 'blue-grey' => '#607d8b', + 'black' => '#000000', + 'white' => '#ffffff' +); + + $oMemberModel = getModel('member'); + $member_config = $oMemberModel->getMemberConfig(); + +} + + +{@ if(!$layout_info->primary_color) $layout_info->primary_color = 'red'} +{@ if(!$layout_info->secondary_color) $layout_info->secondary_color = 'indigo'} + +{@ if($layout_info->primary_color === $layout_info->secondary_color && $layout_info->primary_color === 'indigo') $layout_info->secondary_color = 'red'} +{@ if($layout_info->primary_color === $layout_info->secondary_color && $layout_info->primary_color !== 'indigo') $layout_info->secondary_color = 'indigo'} + + +{Context::addMetaTag("theme-color", $material_colors[$layout_info->primary_color])} + + +{Context::set('layout_scss_value', array('grey' => $material_colors['grey'], 'primary_color' => $material_colors[$layout_info->primary_color], 'secondary_color' => $layout_info->secondary_color, ))} + + + + + +
+
+

+ + Rhymix + {Context::getSiteTitle()} + {$layout_info->LOGO_TEXT} + {$layout_info->LOGO_TEXT} + +

+
+ +
+
+
+ +
+ + + + + +
+ +
+
+ + + +
+
+ +
+ +
+ {$content} +
+ +
+
+ +
\ No newline at end of file diff --git a/layouts/simple_world/layout.js b/layouts/simple_world/layout.js new file mode 100644 index 000000000..b7822271c --- /dev/null +++ b/layouts/simple_world/layout.js @@ -0,0 +1,54 @@ +$(function() { + "use strict"; + + var menu_width = function() { + if($('#layout_gnb>ul>li:first-child').width() > 50) { + $('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', $('#layout_gnb>ul>li:first-child').width()).css('min-width', $('#layout_gnb>ul>li:first-child').width()); + } + } + + $( window ).resize(function() { + if($('#layout_gnb>ul>li:first-child').width() > 50) { + menu_width(); + } + }); + + menu_width(); + + var toggles = document.querySelectorAll(".layout_mobile_menu"); + + for (var i = toggles.length - 1; i >= 0; i--) { + var toggle = toggles[i]; + layout_toggleHandler(toggle); + }; + + function layout_toggleMenuOpener(obj) { + if(obj.classList.contains("is-active") === true){ + var targetMenu = $(obj).attr('data-target'); + $('#' + targetMenu).slideUp('300', function() { + $(this).css('display', '') + }); + + obj.classList.remove("is-active"); + } + else { + $('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', '').css('min-width', ''); + var targetMenu = $(obj).attr('data-target'); + $('#' + targetMenu).slideDown('300'); + + obj.classList.add("is-active"); + } + } + + function layout_toggleHandler(toggle) { + toggle.addEventListener( "click", function(e) { + e.preventDefault(); + layout_toggleMenuOpener(this); + }); + } + + // Language Select + $('.language>.toggle').click(function(){ + $('.selectLang').toggle(); + }); +}); \ No newline at end of file diff --git a/layouts/simple_world/layout.scss b/layouts/simple_world/layout.scss new file mode 100644 index 000000000..499088dee --- /dev/null +++ b/layouts/simple_world/layout.scss @@ -0,0 +1,537 @@ +@charset "UTF-8"; +@function layoutGrayContrast($color, $ratio) { + $grayColor: grayscale($color); + $grayValue: red($grayColor); + + @if $grayValue > ($ratio * 255) { + $return: 0; + } @else { + $return: 255; + } + + @return rgb($return, $return, $return); +} + +@function layoutLightenSelector($background, $ratio, $lighten, $lighter, $lightest) { + $backgroundGrayColor: grayscale($background); + $backgroundGrayValue: red($backgroundGrayColor); + + $lightenGrayColor: grayscale($lighten); + $lightenGrayValue: red($lightenGrayColor); + + $lighterGrayColor: grayscale($lighter); + $lighterGrayValue: red($lighterGrayColor); + + @if (abs($backgroundGrayValue - $lightenGrayValue) > ($ratio * 255)) { + $return: $lighten; + } @else if (abs($backgroundGrayValue - $lighterGrayValue) > ($ratio * 255)) { + $return: $lighter; + } @else { + $return: $lightest; + } + + @return $return; +} + +body { + margin:0; + background-color: #ffffff; +} +/* Skin to content */ +.skip { + position: relative; + margin:0 +} + +.skip>a { + display: block; + text-align: center; + line-height:28px; + height:0px; + overflow: hidden +} + +.skip>a:focus { + height: auto +} + +/* Layout */ +#layout_canvas { + position: relative; + max-width:960px; + width:100%; + margin:0 auto; +} + +.layout_header { + min-height:90px; + padding:0; + margin:0 0 17px; +} + +.layout_header>.hside { + position: absolute; + right:5px; + top: 25px +} + +.layout_body { + position: relative; +} + +.layout_header:after, +.layout_body:after { + content:""; + display: block; + clear: both +} + +.layout_content { + padding:0 0 40px 0; +} + +.layout_content>*:first-child { + margin-top:0 +} + +.layout_content img { + max-width:100%; + height: auto +} + +/* Header */ +.layout_header>h1 { + margin:0 auto; + padding:20px 95px 20px 5px; + box-sizing: border-box; + background-color: lighten($primary-color, 10%); + color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); +} + +.layout_header>h1>a { + font-size:32px; + text-decoration: none; + color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); + padding:0 5px; +} + +#layout_menu_toggle { + width:90px; + display: none; +} + +/*.layout_footer */ +.layout_footer { + padding:30px 10px 70px; + border-top:1px solid lighten($grey, 10%); + background-color: darken($grey, 35%); + color: lighten($grey, 30%); +} + +.layout_footer p { + font-size:12px +} + +.layout_footer a { + font-weight: bold; + text-decoration: none; + color: lighten($primary_color, 31%); +} + +.layout_footer a:hover, +.layout_footer a:focus { + text-decoration: underline +} + +/* Search */ +.layout_header .layout_search { + display: inline-block; + vertical-align: bottom; + margin:0 +} + +.layout_header .layout_search>input { + font-size:12px; + -webkit-appearance: none; + border-radius: 0; +} + +.layout_header .layout_search>input[type="text"] { + width: 126px; + line-height: 18px; + font-size: 14px; + margin: 0; + padding: 8px 8px 6px 8px; + position: relative; + display: inline-block; + outline: none; + border-radius: 0; + border: none; + background: lighten($primary-color, 20%); + color: layoutGrayContrast(lighten($primary-color, 20%), 0.710); +} + +.layout_header .layout_search>input[type="text"]:hover, +.layout_header .layout_search>input[type="text"]:focus { + background: lighten($primary-color, 50%); + color: layoutGrayContrast(lighten($primary-color, 50%), 0.710); +} + +.layout_header .layout_search>input[type="submit"] { + vertical-align: bottom; + background: lighten($primary-color,15%); + color: layoutGrayContrast(lighten($primary-color, 15%), 0.710); + border: none; + height:32px; + padding:0 15px; + margin:0; +} + +.layout_header .layout_search>input[type="submit"]:hover, + .layout_header .layout_search>input[type="submit"]:focus { + background:$primary-color; + color: layoutGrayContrast($primary-color, 0.710); +} + +/* GNB */ +.layout_menu ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: darken($grey, 30%); +} + +.layout_menu>ul>li { + float: left; +} + +#layout_gnb>ul>li:first-child { + float: right; + +} + +.layout_menu li a, .dropbtn { + display: inline-block; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 13px; + line-height: 1; +} + +.layout_menu li.active>a { + background-color: lighten($primary-color, 15%); + color: layoutGrayContrast(lighten($primary-color, 15%), 0.710); +} + +.layout_menu li a:hover, +.layout_menu li a:focus, +.layout_menu li a:active, +.layout_dropdown:hover .dropbtn, +.layout_dropdown:focus .dropbtn, +.layout_dropdown:active .dropbtn, +.language li:hover button, +.language li:focus button, +.language li:active button { + background-color: $primary-color; + color: layoutGrayContrast($primary-color, 0.710); +} + +.layout_menu li.layout_dropdown { + display: block; +} + +.layout_menu .layout_dropdown-content { + display: none; + position: absolute; + background-color: lighten($grey, 40%); + z-index: 9999999; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); +} + +.layout_menu .layout_dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + min-width: 160px; + display: block; + text-align: left; + box-sizing: border-box; +} + +. +.layout_menu .layout_dropdown-content a:hover { + display: block; + background-color: lighten($primary-color, 10%); + color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); +} + +.layout_menu .layout_dropdown:hover .layout_dropdown-content { + display: block; +} +/* Language */ +.language{ + display: inline-block; + width: 100%; + text-align: right; +} +.language button { + outline: none; +} +.language ul::before { + content: ""; + display: block; + clear: both; +} +.language ul { + display: none; + float:right; + width:120px; + clear:both; + margin: 0; + padding: 0; + z-index: 9999999; + box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2); +} +.language .toggle{ + background:none; + display: block; + float: right; + width:120px; + border:0; + color:#fff; + cursor:pointer; + vertical-align:top; + text-align:right; + padding:0; + height:45px; +} + +.language li{ + list-style:none; + background: lighten($grey, 40%); +} +.language li button { + display:block; + color: black; + background: lighten($grey, 40%); + padding: 12px 16px; + text-decoration: none; + width: 100%; + display: block; + text-align: left; + box-sizing: border-box; + border:0; + cursor:pointer; +} + +/* Hamberger menu http://callmenick.com/post/animating-css-only-hamburger-menu-icons Licensed under the MIT license, http://www.opensource.org/licenses/mit-license.php Copyright 2014, Call Me Nick http://callmenick.com */ +.layout_mobile_menu { + display: block; + position: relative; + overflow: hidden; + margin: 0; + padding: 0; + width: 90px; + height: 90px; + font-size: 0; + text-indent: -9999px; + appearance: none; + box-shadow: none; + border-radius: none; + border: none; + cursor: pointer; + transition: background 0.3s; +} + +.layout_mobile_menu:focus { + outline: none; +} + +.layout_mobile_menu span { + display: block; + position: absolute; + top: 41px; + left: 17px; + right: 17px; + height: 8px; + background: white; +} + +.layout_mobile_menu span::before, +.layout_mobile_menu span::after { + position: absolute; + display: block; + left: 0; + width: 100%; + height: 8px; + background-color: #fff; + content: ""; +} + +.layout_mobile_menu span::before { + top: -19px; +} + +.layout_mobile_menu span::after { + bottom: -19px; +} + +.layout_mobile_menu--htx { + background-color: $primary-color; +} + +.layout_mobile_menu--htx span { + transition: background 0s 0.3s; +} + +.layout_mobile_menu--htx span::before, +.layout_mobile_menu--htx span::after { + transition-duration: 0.3s, 0.3s; + transition-delay: 0.3s, 0s; +} + +.layout_mobile_menu--htx span::before { + transition-property: top, transform; +} + +.layout_mobile_menu--htx span::after { + transition-property: bottom, transform; +} + +/* active state, i.e. menu open */ +.layout_mobile_menu--htx.is-active { + background-color: darken( $primary-color, 10% ); +} + +.layout_mobile_menu--htx.is-active span { + background: none; +} + +.layout_mobile_menu--htx.is-active span::before { + top: 0; + transform: rotate(45deg); +} + +.layout_mobile_menu--htx.is-active span::after { + bottom: 0; + transform: rotate(-45deg); +} + +.layout_mobile_menu--htx.is-active span::before, +.layout_mobile_menu--htx.is-active span::after { + transition-delay: 0s, 0.3s; +} +#layout_search_link { + display: none; +} + +@media (max-width: 750px) { + #layout_menu_toggle, #layout_search_link { + display: block; + } + .layout_header h1 { + background-color: lighten($primary-color, 10%); + color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); + } + + .layout_header>h1>a { + color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); + } + + .layout_header>*, + .layout_container, + .layout_footer>p { + width:100%; + margin:0 auto; + } + + #layout_menu_toggle { + position: absolute; + top:0; + right:0; + } + + /* GNB */ + .layout_menu { + display: none; + font-size:15px; + width:100%; + height: auto; + clear: both; + } + + .layout_menu ul { + list-style-type: none; + margin: 0; + padding: 0; + width: 100%; + height: auto; + background-color: lighten($grey, 31%); + } + + .layout_menu>ul>li, #layout_gnb>ul>li:first-child { + float: none; + } + + .layout_menu li a, .dropbtn { + display: block; + color: #000; + text-align: left; + padding: 15px; + text-decoration: none; + } + + .layout_menu li.active>a { + background-color: lighten($primary-color, 15%); + color: layoutGrayContrast(lighten($primary-color, 15%), 0.710); + } + + .layout_menu li a:hover, .layout_dropdown:hover .dropbtn { + background-color: $primary-color; + color: layoutGrayContrast($primary-color, 10%, 0.710); + } + + .layout_menu li.layout_dropdown { + display: block; + } + + .layout_menu .layout_dropdown-content { + display: block; + position: relative; + background-color: lighten($grey, 35%); + color: layoutGrayContrast(lighten($grey, 35%), 0.710); + width: 100%; + min-width: 100%; + box-shadow: none; + } + + .layout_menu .layout_dropdown-content a { + background-color: lighten($grey, 35%); + color: layoutGrayContrast(lighten($grey, 35%), 0.710); + padding: 15px 30px; + text-decoration: none; + display: block; + text-align: left; + } + .language { + margin-top: 30px; + } + .language ul { + display: none; + float:none; + width:100%; + } + .language .toggle{ + display: block; + float: none; + width:100%; + } + /* PC only */ + .layout_pc { + display: none; + } + +} \ No newline at end of file diff --git a/layouts/simple_world/thumbnail.png b/layouts/simple_world/thumbnail.png new file mode 100644 index 000000000..3f5f132a8 Binary files /dev/null and b/layouts/simple_world/thumbnail.png differ