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

Merge pull request #572 from misol/master

Browse source 
네모의 꿈 레이아웃 프로젝트
This commit is contained in:
Min-Soo Kim 2016-09-05 20:08:35 +09:00 • committed by GitHub
commit 8a1cdfcae3
6 changed files with 882 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

133
layouts/simple_world/conf/info.xml Normal file
View file

@ -0,0 +1,133 @@
<?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.0</version>
<date>2016-09-04</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="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="image">
<title xml:lang="ko">사이트 로고 링크 주소</title>
<title xml:lang="en">Site logo link URL</title>
</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 type 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>
</var>
</extra_vars>
</layout>

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

@ -0,0 +1,15 @@
<?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>

143
layouts/simple_world/layout.html Normal file
View file

@ -0,0 +1,143 @@
<!--// responsible layout -->
{Context::addMetaTag("viewport", "width=device-width, user-scalable=yes")}
<load target="./lang" />
{@ $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'}
<!--// 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], 'secondary_color' => $layout_info->secondary_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>
<div id="layout_canvas">
<header class="layout_header">
<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->menu}</span>
</button>
</div>
<div class="hside layout_pc">
<div class="side">
<!-- Search -->
<form action="{getUrl()}" method="get" class="layout_search">
<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->cmd_search}" title="{$lang->cmd_search}" />
<input type="submit" value="{$lang->cmd_search}" />
</form>
<!--// Search -->
</div>
</div>
<!-- Menu -->
<nav class="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->cmd_login}...</a></li>
<li><a href="{getUrl('act', 'dispMemberSignUpForm')}" cond="$member_config->enable_join === 'Y'">{$lang->cmd_signup}...</a></li>
</ul>
<a href="{getUrl('act', 'dispMemberInfo')}" 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')}">{$lang->cmd_view_member_info}</a></li>
<li cond="$logged_info->is_admin == 'Y'">
<a href="{getUrl('', 'module','admin')}">{$lang->cmd_management}</a>
</li>
<li><a href="{getUrl('act', 'dispMemberLogout')}">{$lang->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></li>
</ul>
</li>
<li id="layout_search_link">
<a href="{getUrl('vid', $vid, 'mid', $mid, 'act', 'IS')}"><span>{$lang->cmd_search}</span></a>
</li>
</ul>
</nav>
<!--// Menu -->
</header>
<div class="layout_container">
<!--// VISUAL -->
<div class="layout_body">
<!-- CONTENT -->
<div class="layout_content" id="content">
{$content}
</div>
<!--// CONTENT -->
</div>
</div>
<footer class="layout_footer">
<!-- Footer Menu -->
<nav class="layout_menu" id="layout_fnb" cond="count($FNB->list) > 0">
<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 -->
<p cond="!$layout_info->FOOTER">Powered by <a href="https://www.rhymix.org/">Rhymix</a>.</p>
<p cond="$layout_info->FOOTER">{$layout_info->FOOTER}</p>
<!-- Language -->
<div class="language" cond="count($lang_supported) > 0">
<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>
</footer>
</div>

54
layouts/simple_world/layout.js Normal file
View file

@ -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();
});
});

537
layouts/simple_world/layout.scss Normal file
View file

@ -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;
}
}

BIN
layouts/simple_world/thumbnail.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.5 KiB