fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-04-02 01:52:10 +09:00
Code Issues Projects Releases Packages Wiki Activity

Separate simple_world layout and skin into its own repository

Browse source 
https://github.com/rhymix/rhymix-simple-world
This commit is contained in:
Kijin Sung 2020-10-01 18:02:04 +09:00
parent 5c007272a2
commit 570944df1a
61 changed files with 0 additions and 4302 deletions
Download patch file Download diff file Expand all files Collapse all files

199
layouts/simple_world/conf/info.xml
View file

@ -1,199 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
<title xml:lang="ko">네모의 꿈</title>
<title xml:lang="en">Rectangular World</title>
<description xml:lang="ko">깔끔한 면과 그림자 레이아웃</description>
<description xml:lang="en">Simple rectangular planes and shadows</description>
<version>1.1.0</version>
<date>2017-03-10</date>
<author email_address="misol.kr@gmail.com" link="https://github.com/misol">
<name xml:lang="ko">misol</name>
<name xml:lang="en">misol</name>
</author>
<menus>
<menu name="GNB" maxdepth="2" default="true">
<title xml:lang="ko">상단 메뉴</title>
<title xml:lang="en">Global Navigation Menu</title>
</menu>
<menu name="FNB" maxdepth="1">
<title xml:lang="ko">하단 메뉴</title>
<title xml:lang="en">Footer Navigation Menu</title>
</menu>
</menus>
<extra_vars>
<var name="menu_position" type="select">
<title xml:lang="ko">모바일 메뉴 버튼 위치</title>
<title xml:lang="en">Mobile hamburger menu button position</title>
<description xml:lang="ko">작은 화면에서 나타나는 메뉴 버튼의 위치를 선택할 수 있습니다.</description>
<description xml:lang="en">The hamburger menu button, displayed on small screens, will be displayed at the selected position.</description>
<options value="top_right">
<title xml:lang="ko">오른쪽 위</title>
<title xml:lang="en">Top right</title>
</options>
<options value="left_right">
<title xml:lang="ko">왼쪽 위</title>
<title xml:lang="en">Top left</title>
</options>
</var>
<var name="left_space" type="select">
<title xml:lang="ko">죄측 공간 만들기</title>
<title xml:lang="en">Make a space on the left</title>
<description xml:lang="ko">본문 좌측에 공간을 만듭니다. 모바일 화면에서는 나타나지 않습니다.</description>
<description xml:lang="en">Make a space on the left of contents area.</description>
<options value="N">
<title xml:lang="ko">만들지 않습니다.</title>
<title xml:lang="en">I don't need it.</title>
</options>
<options value="Y">
<title xml:lang="ko">공간을 만듭니다.</title>
<title xml:lang="en">I need it.</title>
</options>
<options value="YM">
<title xml:lang="ko">공간을 만들고, 서브 메뉴를 나타냅니다.</title>
<title xml:lang="en">I need it, and place there submenus.</title>
</options>
</var>
<var name="LOGO_IMG" type="image">
<title xml:lang="ko">사이트 로고 이미지</title>
<title xml:lang="en">Site logo image</title>
</var>
<var name="LOGO_TEXT" type="text">
<title xml:lang="ko">사이트 로고 문자</title>
<title xml:lang="en">Site logo text</title>
</var>
<var name="logo_url" type="text">
<title xml:lang="ko">사이트 로고 링크 주소</title>
<title xml:lang="en">Site logo link URL</title>
</var>
<var name="before_content" type="textarea">
<title xml:lang="ko">사이트 본문 상단 내용</title>
<title xml:lang="en">Before the content area content</title>
<description xml:lang="ko">사이트 본문 영역 상단에 내용을 입력할 수 있습니다.</description>
</var>
<var name="left_content" type="textarea">
<title xml:lang="ko">사이트 본문 좌측 내용</title>
<title xml:lang="en">The contents of the left of contents area</title>
<description xml:lang="ko">사이트 본문 영역 좌측 영역이 나타나게 선택되었을 경우 추가될 내용을 입력할 수 있습니다. 모바일 화면에서는 나타나지 않습니다. 상단 옵션 중 '죄측 공간 만들기'를 먼저 설정해주십시오.</description>
</var>
<var name="right_content" type="textarea">
<title xml:lang="ko">레이아웃 틀 오른쪽 내용 (width: 160px)</title>
<title xml:lang="en">The right area of the layout frame (width: 160px)</title>
<description xml:lang="ko">레이아웃 상-하단이 만들어내는 직사각형 영역 바깥 오른편에 나타낼 내용을 입력합니다. 공간 폭은 160px 입니다. 작은 화면에서는 나타나지 않습니다.</description>
</var>
<var name="after_content" type="textarea">
<title xml:lang="ko">사이트 본문 하단 내용</title>
<title xml:lang="en">After the content area content</title>
<description xml:lang="ko">사이트 본문 영역 하단에 내용을 입력할 수 있습니다.</description>
</var>
<var name="FOOTER" type="text">
<title xml:lang="ko">사이트 하단 문자</title>
<title xml:lang="en">Site footer text</title>
</var>
<var name="primary_color" type="select">
<title xml:lang="ko">중심 색상</title>
<title xml:lang="en">Primary color</title>
<description xml:lang="ko">분위기를 형성하는데 사용되는 중심 색상입니다.</description>
<description xml:lang="en">Please select the mood color you want.</description>
<options value="red">
<title xml:lang="ko">붉은 색</title>
<title xml:lang="en">Red</title>
</options>
<options value="crimson">
<title xml:lang="ko">크림슨</title>
<title xml:lang="en">Crimson</title>
</options>
<options value="pink">
<title xml:lang="ko">분홍</title>
<title xml:lang="en">Pink</title>
</options>
<options value="purple">
<title xml:lang="ko">보라</title>
<title xml:lang="en">Purple</title>
</options>
<options value="deep-purple">
<title xml:lang="ko">진보라</title>
<title xml:lang="en">Deep Purple</title>
</options>
<options value="indigo">
<title xml:lang="ko">인디고</title>
<title xml:lang="en">Indigo</title>
</options>
<options value="deep-blue">
<title xml:lang="ko">짙은 파랑</title>
<title xml:lang="en">Deep Blue</title>
</options>
<options value="blue">
<title xml:lang="ko">파랑</title>
<title xml:lang="en">Blue</title>
</options>
<options value="light-blue">
<title xml:lang="ko">밝은 파랑</title>
<title xml:lang="en">Light Blue</title>
</options>
<options value="cyan">
<title xml:lang="ko">시안</title>
<title xml:lang="en">Cyan</title>
</options>
<options value="teal">
<title xml:lang="ko">틸</title>
<title xml:lang="en">Teal</title>
</options>
<options value="green">
<title xml:lang="ko">초록</title>
<title xml:lang="en">Green</title>
</options>
<options value="light-green">
<title xml:lang="ko">연한 초록</title>
<title xml:lang="en">Light Green</title>
</options>
<options value="lime">
<title xml:lang="ko">라임</title>
<title xml:lang="en">Lime</title>
</options>
<options value="yellow">
<title xml:lang="ko">노랑</title>
<title xml:lang="en">Yellow</title>
</options>
<options value="amber">
<title xml:lang="ko">앰버</title>
<title xml:lang="en">Amber</title>
</options>
<options value="orange">
<title xml:lang="ko">주황</title>
<title xml:lang="en">Orange</title>
</options>
<options value="deep-orange">
<title xml:lang="ko">진한 주황</title>
<title xml:lang="en">Deep Orange</title>
</options>
<options value="brown">
<title xml:lang="ko">갈색</title>
<title xml:lang="en">Brown</title>
</options>
<options value="grey">
<title xml:lang="ko">회색</title>
<title xml:lang="en">Grey</title>
</options>
<options value="blue-grey">
<title xml:lang="ko">푸른 회색</title>
<title xml:lang="en">Blue Grey</title>
</options>
<options value="customized">
<title xml:lang="ko">커스텀</title>
<title xml:lang="en">Customized</title>
</options>
</var>
<var name="customized_primary_color" type="colorpicker">
<title xml:lang="ko">커스텀 중심 색상</title>
<title xml:lang="en">Customized primary color</title>
<description xml:lang="ko">분위기를 형성하는데 사용되는 중심 색상을 위에서 선택하지 않고 Hex 코드로 직접 입력 합니다. (기본 값: #f44336) 위 항목에서 '커스텀' 항목을 선택해야 적용됩니다.</description>
<description xml:lang="en">Please type the mood color you want, if there is no choice before. Insert your color in hex code. (dafault value: #f44336) To use this option, you have to select 'Customized' for the options before.</description>
</var>
<var name="content_color" type="colorpicker">
<title xml:lang="ko">본문 영역 색상</title>
<title xml:lang="en">Content area color</title>
<description xml:lang="ko">레이아웃 본문 영역 색상을 지정합니다. 기본 색상은 흰색입니다.</description>
<description xml:lang="en">Set content area color. The default color is white.</description>
</var>
</extra_vars>
</layout>

15
layouts/simple_world/lang/lang.xml
View file

@ -1,15 +0,0 @@
<?xml version='1.0' encoding='UTF-8'?>
<lang>
<item name="simple_guest">
<value xml:lang="ko"><![CDATA[방문자]]></value>
<value xml:lang="en"><![CDATA[guest]]></value>
<value xml:lang="jp"><![CDATA[訪問者]]></value>
<value xml:lang="zh-CN"><![CDATA[游客]]></value>
</item>
<item name="simple_hello">
<value xml:lang="ko"><![CDATA[%s님 안녕하세요!]]></value>
<value xml:lang="en"><![CDATA[Hello %s!]]></value>
<value xml:lang="jp"><![CDATA[%s様、こんにちは!]]></value>
<value xml:lang="zh-CN"><![CDATA[%s, 你好!]]></value>
</item>
</lang>

172
layouts/simple_world/layout.html
View file

@ -1,172 +0,0 @@
<!--// responsible layout -->
{Context::addMetaTag("viewport", "width=device-width, user-scalable=yes")}
<load target="./lang" />
{@
if(!$layout_info->primary_color)
$layout_info->primary_color = 'red';
if(!$layout_info->customized_primary_color)
$layout_info->customized_primary_color = '#f44336';
if(!$layout_info->content_color)
$layout_info->content_color = '#ffffff';
$material_colors = array(
'red' => '#f44336',
'crimson' => '#aa0000',
'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',
'customized' => $layout_info->customized_primary_color,
);
$oMemberModel = getModel('member');
$member_config = $oMemberModel->getMemberConfig();
}
<!--// theme-color for mobile chrome browser -->
{Context::addMetaTag("theme-color", $material_colors[$layout_info->primary_color])}
<!--// Load styles -->
{@Context::set('layout_scss_value', array('grey' => $material_colors['grey'], 'primary_color' => $material_colors[$layout_info->primary_color], 'menu_position' => $layout_info->menu_position, 'content_color' => $layout_info->content_color))}
<load target="layout.scss" vars="$layout_scss_value" />
<load target="layout.js" />
<div class="skip"><a href="#content">{lang('skip_to_content')}</a></div>
<header class="layout_frame">
<div class="layout_header layout_canvas">
<h1>
<a href="<!--@if($layout_info->logo_url)-->{$layout_info->logo_url}<!--@elseif(Context::getDefaultUrl())-->{Context::getDefaultUrl()}<!--@else-->{getUrl('')}<!--@end-->" id="siteTitle">
<block cond="!Context::getSiteTitle() && !$layout_info->LOGO_IMG && !$layout_info->LOGO_TEXT">Rhymix</block>
<block cond="Context::getSiteTitle() && !$layout_info->LOGO_IMG && !$layout_info->LOGO_TEXT">{Context::getSiteTitle()}</block>
<img src="{$layout_info->LOGO_IMG}" alt="{$layout_info->LOGO_TEXT}" cond="$layout_info->LOGO_IMG">
<block cond="!$layout_info->LOGO_IMG && $layout_info->LOGO_TEXT">{$layout_info->LOGO_TEXT}</block>
</a>
</h1>
<div id="layout_menu_toggle">
<button class="layout_mobile_menu layout_mobile_menu--htx" data-target="layout_gnb">
<span>{lang('common.menu')}</span>
</button>
</div>
<div class="hside layout_pc">
<div class="side">
<!--// Search -->
<form action="{getUrl()}" method="get" class="layout_search" no-error-return-url="true">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="text" name="is_keyword" value="{$is_keyword}" required placeholder="{lang('common.cmd_search')}" title="{lang('common.cmd_search')}" />
<input type="submit" value="{lang('common.cmd_search')}" />
</form>
<!--// Search -->
</div>
</div>
</div>
<!--// Menu -->
<nav class="layout_frame layout_menu" id="layout_gnb">
<ul>
<li class="layout_dropdown">
<a href="{getUrl('act', 'dispMemberLoginForm')}" cond="!$is_logged">{sprintf(lang('simple_hello'), lang('simple_guest'))}</a>
<ul class="layout_dropdown-content" cond="!$is_logged">
<li><a href="{getUrl('act', 'dispMemberLoginForm')}">{lang('member.cmd_login')}...</a></li>
<li><a href="{getUrl('act', 'dispMemberSignUpForm')}" cond="$member_config->enable_join === 'Y'">{lang('member.cmd_signup')}...</a></li>
</ul>
<a href="{getUrl('act', 'dispMemberInfo', 'member_srl', '')}" cond="$is_logged">{sprintf(lang('simple_hello'), $logged_info->nick_name)}</a>
<ul class="layout_dropdown-content" cond="$is_logged">
<li><a href="{getUrl('act', 'dispMemberInfo', 'member_srl', '')}">{lang('member.cmd_view_member_info')}</a></li>
<li cond="$logged_info->is_admin == 'Y'">
<a href="{getUrl('', 'module','admin')}">{lang('common.cmd_management')}</a>
</li>
<li><a href="{getUrl('act', 'dispMemberLogout')}">{lang('member.cmd_logout')}</a></li>
</ul>
</li>
<li loop="$GNB->list=>$key1,$val1" class="<!--@if($val1['selected'])-->active <!--@endif--><!--@if($val1['list'])-->layout_dropdown<!--@endif-->">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'"><span>{$val1['link']}</span></a>
<ul cond="$val1['list']" class="layout_dropdown-content">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<ul cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']"><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a></li>
</ul>
</li>
</ul>
</li>
<li id="layout_search_link">
<a href="{getUrl('vid', $vid, 'mid', $mid, 'act', 'IS')}"><span>{lang('common.cmd_search')}</span></a>
</li>
</ul>
</nav>
<!--// Menu -->
</header>
<div class="layout_frame layout_body<!--@if(in_array($layout_info->left_space, array('Y', 'YM')))--> layout_left_content<!--@end-->">
<!--// VISUAL -->
<div class="layout_body layout_canvas">
<!--// CONTENT -->
<div class="layout_content layout_left_content" cond="in_array($layout_info->left_space, array('Y', 'YM'))">
<section class="layout_left layout_dropdown" loop="$GNB->list=>$key1,$val1" cond="$layout_info->left_space == 'YM' && $val1['selected']">
<h1><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></h1>
<ul class="layout_dropdown-content" cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2"><a href="{$val2['href']}" class="active"|cond="$val2['selected']" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<ul cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']"><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a></li>
</ul>
</li>
</ul>
</section>
<section class="layout_left" cond="trim($layout_info->left_content)">
{$layout_info->left_content}
</section>
</div>
<div class="layout_content" id="content">
{$layout_info->before_content|noescape}
{$content|noescape}
{$layout_info->after_content|noescape}
</div>
<!--// CONTENT -->
<div class="layout_outright" cond="trim($layout_info->right_content)">
{$layout_info->right_content}
</div>
</div>
</div>
<footer class="layout_frame layout_footer">
<div class="layout_footer layout_canvas">
<!--// Footer Menu -->
<nav class="layout_menu" id="layout_fnb" cond="is_countable($FNB->list) && count($FNB->list)">
<ul>
<li loop="$FNB->list=>$key1,$val1" class="footer_menu">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'"><span>{$val1['link']}</span></a>
</li>
</ul>
</nav>
<!--// Footer Menu -->
<!--// Language -->
<div class="layout_language" cond="is_countable($lang_supported) && count($lang_supported) > 1">
<button type="button" class="toggle">Language: {$lang_supported[$lang_type]}</button>
<ul class="selectLang">
<li loop="$lang_supported=>$key,$val" cond="$key!= $lang_type"><button type="button" onclick="doChangeLangType('{$key}');return false;">{$val}</button></li>
</ul>
</div>
<p cond="!$layout_info->FOOTER">Powered by <a href="https://rhymix.org" target="_blank" rel="noopener">Rhymix</a></p>
<p cond="$layout_info->FOOTER">{$layout_info->FOOTER}</p>
</div>
</footer>

129
layouts/simple_world/layout.js
View file

@ -1,129 +0,0 @@
jQuery(function($)
{
"use strict";
/* adjust the width of the right member menu */
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();
/* mobile hamburger menu toggle */
$(".layout_mobile_menu").each(function()
{
$( this ).click(function( event )
{
event.preventDefault();
layout_toggleMenuOpener( $( this ).get(0) );
});
});
/* detect scrolling up or down to hide or show the hamburger menu */
var previousScroll = 0;
var simpleScrolled = false;
var scrollThreshold = 5;
/* detect window scrolling */
$( window ).scroll(function()
{
simpleScrolled = true;
});
/* refresh window scrolling per 250 ms, and show/hide the menu */
setInterval(function()
{
if (simpleScrolled) {
display_menu();
simpleScrolled = false;
}
}, 250);
/* function to show/hide the menu */
var display_menu = function()
{
var currentScroll = $(window).scrollTop();
if (currentScroll > previousScroll)
{
if($("#layout_menu_toggle").css( 'position' ) === 'fixed')
{
$("#layout_menu_toggle").fadeOut();
}
}
else
{
if($("#layout_menu_toggle").css( 'position' ) === 'fixed')
{
$("#layout_menu_toggle").fadeIn(400, function() {
$("#layout_menu_toggle").css('display', '')
});
;
}
}
previousScroll = currentScroll;
}
/* keyboard accessibility for dropdown menu */
$(".layout_dropdown").each(function()
{
$( this ).focusin( function( event )
{
$('*[data-dropdown="active"]').css('display', '').attr('data-dropdown', '').parents('li.layout_dropdown').removeClass('layout_focus');
$( this ).addClass('layout_focus');
$( this ).find("ul.layout_dropdown-content").css('display', 'block').attr('data-dropdown', 'active');
});
});
$('body').focusin(function( event )
{
if (!$(event.target).parents('.layout_dropdown').is('.layout_dropdown'))
{
$('*[data-dropdown="active"]').css('display', '').attr('data-dropdown', '').parents('li.layout_dropdown').removeClass('layout_focus');
}
});
/* keyboard accessibility for dropdown menu END */
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 {
var targetMenu = $(obj).attr('data-target');
if(targetMenu == 'layout_gnb')
{
$('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', '').css('min-width', '');
$('html,body').animate({scrollTop:0}, 200);
}
$('#' + targetMenu).slideDown('300');
obj.classList.add("is-active");
}
}
// Language Select
$('.layout_language>.toggle').click(function()
{
$('.selectLang').toggle();
});
});

673
layouts/simple_world/layout.scss
View file

@ -1,673 +0,0 @@
@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);
}
@mixin layout_box($shadow){
background: #fff;
box-shadow: 0 $shadow/2 $shadow rgba(0,0,0,0.16), 0 $shadow/2 $shadow rgba(0,0,0,0.23);
}
body {
margin:0;
padding:0;
background-color: darken($grey, 35%);
}
/* Skin to content */
.skip {
background-color: lighten($grey, 35%);
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:1050px;
width:100%;
margin:0 auto;
}
header.layout_frame, footer.layout_frame, .layout_frame.layout_left_content .layout_left_content{
font-family: "맑은 고딕", "Apple SD Gothic Neo","나눔고딕",NanumGothic,'Nanum Gothic',Arial,Helvetica,sans-serif;
font-size: 14px;
}
.layout_header {
padding:0;
}
.layout_header>.hside {
position: absolute;
right:5px;
top: 25px
}
.layout_body.layout_frame {
background-color: $content_color;
overflow: hidden;
}
.layout_body {
position: relative;
}
.layout_outright{
position: absolute;
top: 15px;
right: 0;
box-sizing: border-box;
width: 160px;
@include layout_box(2px);
margin-right:-170px;
}
.layout_left_content.layout_frame>.layout_canvas {
div.layout_content {
float:left;
width: 20%;
box-sizing: border-box;
padding-right:5px;
section.layout_left{
margin: 2px 2px 10px;
@include layout_box(2px);
h1 {
border-bottom: 1px solid #e0e0e0;
font-weight: 400;
margin: 0;
position: relative;
a {
display: block;
margin: 0;
padding: 14px 16px;
font-size: 14px;
color: $primary-color;
text-decoration: none;
}
}
ul{
list-style: none;
&.layout_dropdown-content {
display: block;
position: relative;
z-index: none;
padding: 0;
margin: 0;
a {
display: block;
padding: 14px 16px;
text-decoration: none;
color: #000;
&.active {
background: #e0e0e0;
}
&:hover, &:active, &:focus {
background: #eeeeee;
}
}
ul {
padding-left: 10px;
}
}
}
}
}
#content {
width: 80%;
}
}
.layout_header:after,
.layout_body:after {
content:"";
display: block;
clear: both
}
.layout_content {
overflow: auto;
padding:10px 0px;
img {
max-width:100%;
height: auto
}
}
.layout_content>*:first-child {
margin-top:0
}
/* Header */
header.layout_frame {
position:relative;
background-color: lighten($primary-color, 10%);
z-index: 1;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
.layout_header>h1 {
margin:0 auto;
padding:20px 5px;
box-sizing: border-box;
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
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 {
box-sizing: border-box;
padding: 13px 7px;
background-color: darken($grey, 35%);
color: lighten($grey, 30%);
p {
font-size:12px
}
a {
font-weight: bold;
text-decoration: none;
color: lighten($primary_color, 31%);
&:hover, &:active, &:focus {
text-decoration: underline
}
}
}
/* Search */
.layout_header{
.layout_search {
display: inline-block;
vertical-align: bottom;
margin:0
}
input {
font-size:12px;
-webkit-appearance: none;
border-radius: 0;
}
input[type="text"] {
width: 126px;
line-height: 18px;
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);
&:hover, &:active, &:focus {
background: lighten($primary-color, 50%);
color: layoutGrayContrast(lighten($primary-color, 50%), 0.710);
}
}
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;
&:hover, &:active, &:focus {
background:$primary-color;
color: layoutGrayContrast($primary-color, 0.710);
}
}
}
/* GNB */
.layout_menu {
background-color: lighten($grey, 31%);
ul {
list-style-type: none;
overflow: hidden;
max-width:1050px;
margin:0 auto;
padding: 0;
&.layout_dropdown-content ul{
padding-left:10px;
}
}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
line-height: 1;
}
li.active>a {
background-color: lighten($primary-color, 15%);
color: layoutGrayContrast(lighten($primary-color, 15%), 0.710);
}
}
.layout_menu>ul{
width:100%;
}
.layout_menu>ul>li {
float: left;
}
#layout_gnb>ul>li:first-child {
float: right;
}
header.layout_frame .layout_menu{
li:hover,
li:focus,
li:active,
.layout_focus {
background-color: lighten($grey, 40%);
}
}
.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,
.layout_language li:hover button,
.layout_language li:focus button,
.layout_language li:active button {
background-color: $primary-color;
color: layoutGrayContrast($primary-color, 0.710);
}
.layout_menu {
li.layout_dropdown {
display: block;
}
.layout_dropdown-content {
display: none;
position: absolute;
background-color: lighten($grey, 40%);
z-index: 1000;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.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_dropdown-content a:hover,
.layout_dropdown-content a:active,
.layout_dropdown-content a:focus {
display: block;
background-color: lighten($primary-color, 10%);
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
}
.layout_dropdown:hover .layout_dropdown-content,
.layout_dropdown:active .layout_dropdown-content,
.layout_dropdown:focus .layout_dropdown-content,
.layout_dropdown a:hover ~ .layout_dropdown-content,
.layout_dropdown a:active ~ .layout_dropdown-content,
.layout_dropdown a:focus ~ .layout_dropdown-content,
.layout_dropdown layout_dropdown-content:hover,
.layout_dropdown layout_dropdown-content:active,
.layout_dropdown layout_dropdown-content:focus {
display: block;
}
}
#layout_fnb{
background-color: transparent;
}
.layout_footer {
.layout_menu li a, .dropbtn {
color: lighten($grey, 10%);
font-weight: normal;
text-decoration: none;
padding: 14px 0px;
}
.layout_menu li a>span {
padding: 0px 16px;
border-right: 1px solid lighten($grey, 10%);
}
.layout_menu li:first-child{
margin-left:-16px;
}
.layout_menu li:last-child a>span {
border-right: none;
}
.layout_menu li a:hover,
.layout_menu li a:focus,
.layout_menu li a:active{
background-color: transparent;
color: #fff;
}
}
/* Language */
.layout_language{
display: absolute;
right: 0;
top: 15px;
}
.layout_language button {
outline: none;
}
.layout_language ul::before {
content: "";
display: block;
clear: both;
}
.layout_language ul {
display: none;
float:right;
width:120px;
clear:both;
margin: 0px 0px 10px;
padding: 0;
z-index: 1000;
box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2);
}
.layout_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;
}
.layout_language li{
list-style:none;
background: lighten($grey, 40%);
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;
span {
display: block;
position: absolute;
top: 41px;
left: 17px;
right: 17px;
height: 8px;
background: white;
}
span::before,
span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 8px;
background-color: #fff;
content: "";
}
span::before {
top: -19px;
}
span::after {
bottom: -19px;
}
&:focus {
outline: none;
}
}
.layout_mobile_menu--htx {
background-color: $primary-color;
span {
transition: background 0s 0.3s;
}
span::before,
span::after {
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
span::before {
transition-property: top, transform;
}
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 {
/* Menu position option */
@if $menu_position == 'left_right' {
padding:20px 5px 20px 95px;
} @else {
padding:20px 95px 20px 5px;
}
}
.layout_header>h1>a {
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
}
#layout_menu_toggle {
position: fixed;
top:0;
/* Menu position option */
@if $menu_position == 'left_right' {
left:0;
} @else {
right:0;
}
z-index:1001;
opacity: 0.9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.layout_left_content.layout_frame>.layout_canvas {
div.layout_left_content {
display:none;
}
#content{
width:100%;
}
}
/* GNB */
.layout_menu {
display: none;
font-size:15px;
width:100%;
height: auto;
clear: both;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
}
.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,
.layout_menu li a:focus, .layout_dropdown:focus .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;
z-index:1;
a {
background-color: lighten($grey, 35%);
color: layoutGrayContrast(lighten($grey, 35%), 0.710);
padding: 15px 30px;
text-decoration: none;
display: block;
text-align: left;
}
}
.layout_footer .layout_menu {
display: block;
margin-bottom: 10px;
}
.layout_footer .layout_menu li a>span {
border-right: none;
}
.layout_footer .layout_menu li:first-child{
margin-left:0px;
}
.layout_footer .layout_menu ul {
background-color: transparent;
}
.layout_language {
margin-top: 15px;
ul {
display: none;
float:none;
width:100%;
}
.toggle{
display: block;
float: none;
width:100%;
}
}
/* PC only */
.layout_pc {
display: none;
}
}

BIN
layouts/simple_world/thumbnail.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.5 KiB