fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-05-10 20:44:28 +09:00
Code Issues Projects Releases Packages Wiki Activity

refine basic layout.

Browse source
This commit is contained in:
MinSoo Kim 2016-09-21 00:12:58 +09:00
parent b6028de319
commit 94a866aa69
3 changed files with 71 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

16
layouts/simple_world/layout.html
View file

@ -51,8 +51,8 @@
<load target="layout.js" /> <load target="layout.js" />
<div class="skip"><a href="#content">{$lang->skip_to_content}</a></div> <div class="skip"><a href="#content">{$lang->skip_to_content}</a></div>
<div id="layout_canvas"> <header class="layout_frame">
<header class="layout_header"> <div class="layout_header layout_canvas">
<h1> <h1>
<a href="<!--@if($layout_info->logo_url)-->{$layout_info->logo_url}<!--@elseif(Context::getDefaultUrl())-->{Context::getDefaultUrl()}<!--@else-->{getUrl('')}<!--@end-->" id="siteTitle"> <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">Rhymix</block>
@ -79,8 +79,9 @@
<!--// Search --> <!--// Search -->
</div> </div>
</div> </div>
</div>
<!-- Menu --> <!-- Menu -->
<nav class="layout_menu" id="layout_gnb"> <nav class="layout_frame layout_menu" id="layout_gnb">
<ul> <ul>
<li class="layout_dropdown"> <li class="layout_dropdown">
<a href="{getUrl('act', 'dispMemberLoginForm')}" cond="!$is_logged">{sprintf($lang->simple_hello, $lang->simple_guest)}</a> <a href="{getUrl('act', 'dispMemberLoginForm')}" cond="!$is_logged">{sprintf($lang->simple_hello, $lang->simple_guest)}</a>
@ -110,9 +111,9 @@
</nav> </nav>
<!--// Menu --> <!--// Menu -->
</header> </header>
<div class="layout_container"> <div class="layout_frame layout_body">
<!--// VISUAL --> <!--// VISUAL -->
<div class="layout_body"> <div class="layout_body layout_canvas">
<!-- CONTENT --> <!-- CONTENT -->
<div class="layout_content" id="content"> <div class="layout_content" id="content">
{$content} {$content}
@ -120,7 +121,8 @@
<!--// CONTENT --> <!--// CONTENT -->
</div> </div>
</div> </div>
<footer class="layout_footer"> <footer class="layout_frame layout_footer">
<div class="layout_footer layout_canvas">
<!-- Footer Menu --> <!-- Footer Menu -->
<nav class="layout_menu" id="layout_fnb" cond="count($FNB->list) > 0"> <nav class="layout_menu" id="layout_fnb" cond="count($FNB->list) > 0">
<ul> <ul>
@ -139,5 +141,5 @@
<li loop="$lang_supported=>$key,$val" cond="$key!= $lang_type"><button type="button" onclick="doChangeLangType('{$key}');return false;">{$val}</button></li> <li loop="$lang_supported=>$key,$val" cond="$key!= $lang_type"><button type="button" onclick="doChangeLangType('{$key}');return false;">{$val}</button></li>
</ul> </ul>
</div> </div>
</footer>
</div> </div>
</footer>

1
layouts/simple_world/layout.js
View file

@ -34,6 +34,7 @@ $(function() {
else { 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', ''); $('#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'); var targetMenu = $(obj).attr('data-target');
$('html,body').animate({scrollTop:0}, 200);
$('#' + targetMenu).slideDown('300'); $('#' + targetMenu).slideDown('300');
obj.classList.add("is-active"); obj.classList.add("is-active");

65
layouts/simple_world/layout.scss
View file

@ -12,30 +12,10 @@
@return rgb($return, $return, $return); @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 { body {
margin:0; margin:0;
background-color: #ffffff; padding:0;
background-color: darken($grey, 35%);
} }
/* Skin to content */ /* Skin to content */
.skip { .skip {
@ -56,7 +36,7 @@ body {
} }
/* Layout */ /* Layout */
#layout_canvas { .layout_canvas {
position: relative; position: relative;
max-width:960px; max-width:960px;
width:100%; width:100%;
@ -64,9 +44,7 @@ body {
} }
.layout_header { .layout_header {
min-height:90px;
padding:0; padding:0;
margin:0 0 17px;
} }
.layout_header>.hside { .layout_header>.hside {
@ -77,6 +55,7 @@ body {
.layout_body { .layout_body {
position: relative; position: relative;
background-color: #fff;
} }
.layout_header:after, .layout_header:after,
@ -87,7 +66,7 @@ body {
} }
.layout_content { .layout_content {
padding:0 0 40px 0; padding:40px 0;
} }
.layout_content>*:first-child { .layout_content>*:first-child {
@ -100,11 +79,13 @@ body {
} }
/* Header */ /* Header */
header.layout_frame {
background-color: lighten($primary-color, 10%);
}
.layout_header>h1 { .layout_header>h1 {
margin:0 auto; margin:0 auto;
padding:20px 95px 20px 5px; padding:20px 95px 20px 5px;
box-sizing: border-box; box-sizing: border-box;
background-color: lighten($primary-color, 10%);
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
} }
@ -122,8 +103,8 @@ body {
/* .layout_footer */ /* .layout_footer */
.layout_footer { .layout_footer {
padding:10px; box-sizing: border-box;
border-top:1px solid lighten($grey, 10%); padding: 13px 7px;
background-color: darken($grey, 35%); background-color: darken($grey, 35%);
color: lighten($grey, 30%); color: lighten($grey, 30%);
} }
@ -194,12 +175,16 @@ body {
} }
/* GNB */ /* GNB */
.layout_menu {
background-color: lighten($grey, 31%);
}
.layout_menu ul { .layout_menu ul {
list-style-type: none; list-style-type: none;
margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: darken($grey, 30%); max-width:960px;
width:100%;
margin:0 auto;
} }
.layout_menu>ul>li { .layout_menu>ul>li {
@ -213,7 +198,7 @@ body {
.layout_menu li a, .dropbtn { .layout_menu li a, .dropbtn {
display: inline-block; display: inline-block;
color: white; color: black;
text-align: center; text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
@ -447,17 +432,13 @@ body {
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
} }
.layout_header>*,
.layout_container,
.layout_footer>p {
width:100%;
margin:0 auto;
}
#layout_menu_toggle { #layout_menu_toggle {
position: absolute; position: fixed;
top:0; top:0;
right:0; right:0;
z-index:99999999;
opacity: 0.9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
} }
/* GNB */ /* GNB */
@ -475,7 +456,6 @@ body {
padding: 0; padding: 0;
width: 100%; width: 100%;
height: auto; height: auto;
background-color: lighten($grey, 31%);
} }
.layout_menu>ul>li, #layout_gnb>ul>li:first-child { .layout_menu>ul>li, #layout_gnb>ul>li:first-child {
@ -512,6 +492,7 @@ body {
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
box-shadow: none; box-shadow: none;
z-index:1;
} }
.layout_menu .layout_dropdown-content a { .layout_menu .layout_dropdown-content a {
@ -533,7 +514,7 @@ body {
} }
.language { .language {
margin-top: 30px; margin-top: 15px;
} }
.language ul { .language ul {
display: none; display: none;