diff --git a/assets/images/design_thumb.png b/assets/images/design_thumb.png index 606898d..978f302 100644 Binary files a/assets/images/design_thumb.png and b/assets/images/design_thumb.png differ diff --git a/assets/images/titlecap.svg b/assets/images/titlecap.svg new file mode 100644 index 0000000..d4d8e47 --- /dev/null +++ b/assets/images/titlecap.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + diff --git a/assets/images/故宮剪影-01.svg b/assets/images/故宮剪影-01.svg new file mode 100644 index 0000000..75989b5 --- /dev/null +++ b/assets/images/故宮剪影-01.svg @@ -0,0 +1,70 @@ + + + + + + + + + + diff --git a/assets/images/故宮剪影.svg b/assets/images/故宮剪影.svg new file mode 100644 index 0000000..84f6f0e --- /dev/null +++ b/assets/images/故宮剪影.svg @@ -0,0 +1,70 @@ + + + + + + + + + + diff --git a/assets/images/花紋1.svg b/assets/images/花紋1.svg new file mode 100644 index 0000000..e991586 --- /dev/null +++ b/assets/images/花紋1.svg @@ -0,0 +1,2686 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/花紋2.svg b/assets/images/花紋2.svg new file mode 100644 index 0000000..f6fcbac --- /dev/null +++ b/assets/images/花紋2.svg @@ -0,0 +1,2665 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index f6cddf9..0c84991 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -548,7 +548,10 @@ $('show').parent('li').focus(); } forFreeGo(); - + $(document).on('touchstart','a',function(e){ + e.stopPropagation(); + $(this).trigger('focus'); + }); //背景widget設定 if ( location.href.search('editmode=on') != -1 ) { $('.background').css('z-index','0'); @@ -713,6 +716,7 @@ function transdate(){ // 當文件物件模型(DOM)載入後,執行init函數 $(document).ready(function() { + $('.w-annc.tab_nav').before($('.w-annc.w-annc__list')); $('.group').each(function(){ if ($(this).text().trim()==''){ $(this).css('padding',0); @@ -836,19 +840,19 @@ function transdate(){ $('.layout-content').css('margin-top',$('.kenjohn').height()-$('#orbit-bar').height()); } if (parseInt($('.layout-content').css('margin-top')==0)){ - theTop = $('.layout-content-inner.container').offset().top-$(".kenjohn").position().top+10; + theTop = $('.twosection').offset().top-$(".kenjohn").position().top+5; }else{ - theTop = $('.layout-content-inner.container').offset().top-$(".kenjohn").position().top-$(".kenjohn").height()+10; + theTop = $('.twosection').offset().top-$(".kenjohn").position().top-$(".kenjohn").height()+5; } }else{ - theTop = 10; + theTop = 5; } console.log(theTop); $("html, body").animate({ - scrollTop: theTop }, {duration: 500,easing: "swing",complete: function(){ + scrollTop: theTop }, {duration: 400,easing: "swing",complete: function(){ console.log('finish'); if(!stop){ - move_to_target(true); + move_to_target(true); } }}); } @@ -877,13 +881,13 @@ function transdate(){ //$('.modules-menu-level-1').css('calc_menu_flagleft','-'+$('.outdropdowns .dropdowns').offset().left+'px'); calc_menu_pos(); - + window.has_hover = false; if($(window).outerWidth(true) >= 768){ window.has_hover = true; } }); - + $('#main-nav>li').mouseover(function(){ if (!calc_menu_flag){ calc_menu_pos(); diff --git a/assets/stylesheets/template/RWD.scss b/assets/stylesheets/template/RWD.scss index 0c564e0..4855849 100644 --- a/assets/stylesheets/template/RWD.scss +++ b/assets/stylesheets/template/RWD.scss @@ -16,6 +16,9 @@ .big-title{ font-size: 40px; } + .extra-box{ + padding: 0!important; + } } @media(max-width: 769px){ .ad-banner-widget-6{ diff --git a/assets/stylesheets/template/base/_global.scss b/assets/stylesheets/template/base/_global.scss index 6129e3b..6da9117 100644 --- a/assets/stylesheets/template/base/_global.scss +++ b/assets/stylesheets/template/base/_global.scss @@ -13,16 +13,17 @@ body { margin-top: 2.5em; overflow: hidden scroll; background-color: #F8F8F8; + letter-spacing: 1px; } a:link, a:visited { - color: #288E8E; + color: $theme-color-second; } a:hover, a:focus { - color: #1d6666; + color: #7d0000; text-decoration: revert; } @@ -52,13 +53,17 @@ td { a.btn-primary { color: $theme-white; - border-color: #288E8E; - background-color: #288E8E; + border-color: $theme-color-second; + background-color: $theme-color-second; font-size: 0.8125rem; &:hover { - background-color: darken($theme-color-main, 10%); - border-color: darken($theme-color-main, 10%); + background-color: #7d0000; +border-color: #7d0000; +opacity: .7; +letter-spacing: 3px; +-webkit-transition: all 0.2s ease-in-out; +transition: all 0.2s ease-in-out; } } diff --git a/assets/stylesheets/template/base/_go_back_top.scss b/assets/stylesheets/template/base/_go_back_top.scss index 6dc0f27..0b2e801 100644 --- a/assets/stylesheets/template/base/_go_back_top.scss +++ b/assets/stylesheets/template/base/_go_back_top.scss @@ -3,7 +3,7 @@ @import "variables"; .go-back-top { - background:#288E8E; + background: rgba($theme-color-second, 0.9); text-align: center; padding: 0.625em 0.75em; position: fixed; @@ -16,6 +16,6 @@ border-radius: 0.125em; z-index: 1050; &:hover { - background:#288E8E; + background:$theme-color-second; } } diff --git a/assets/stylesheets/template/base/_unity.scss b/assets/stylesheets/template/base/_unity.scss index 177d175..d98c2b4 100644 --- a/assets/stylesheets/template/base/_unity.scss +++ b/assets/stylesheets/template/base/_unity.scss @@ -7,11 +7,14 @@ margin: 0.5em 0; line-height: 1.5; font-family: $main-font; - font-size: $font-h3; + font-size: $font-h2; color: $theme-color-main; text-align: center; - padding-top: 0.7em; - + padding-top: 1em; + background: url(/assets/titlecap.svg) top no-repeat; + background-position-x: center; + background-position-y: -12px; + background-size: 165px; .layout-footer & { margin-bottom: 0.625em; border-bottom: none; diff --git a/assets/stylesheets/template/base/_variables.scss b/assets/stylesheets/template/base/_variables.scss index bd7ffdf..f6f27e5 100644 --- a/assets/stylesheets/template/base/_variables.scss +++ b/assets/stylesheets/template/base/_variables.scss @@ -16,13 +16,13 @@ $theme-red: #d20001; $theme-blue: #003d7e; $theme-color-main: #333333; -$theme-color-second: #E4002B; +$theme-color-second: #c49951; $theme-color-third: #ed4c43; -$theme-color-green: #288E8E; +$theme-color-green: #c49951; // Font stacks -$main-font: "IndustryW00-Medium","Barlow", "Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif; -$sub-font: "Barlow","Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif; +$main-font: "Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif; +$sub-font: "Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif; @font-face {font-family: "IndustryW00-Medium"; src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot"); src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff") format("woff"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.svg#IndustryW00-Medium") format("svg"); } diff --git a/assets/stylesheets/template/layout/content.scss b/assets/stylesheets/template/layout/content.scss index faff835..1a2aea0 100644 --- a/assets/stylesheets/template/layout/content.scss +++ b/assets/stylesheets/template/layout/content.scss @@ -17,10 +17,7 @@ body{ .downIcon{ position: absolute; left: 50%; - top: 775px; - @media (min-width:1026px) and (max-width:1280px){ - top: 735px; - } + bottom: 15%; //bottom: 10%; z-index: 2; color: #fff; @@ -131,14 +128,39 @@ body{ } } .bannertwo{ - +// .ba-banner-widget-1 .w-ba-banner__slide>a img{ +// @media(max-width: $screen-xs){ +// width: auto; +// max-width: unset; +// transform: translateX(-38%); +// height: 50vw!important; +// } +// } +.w-ba-banner{ + @media(max-width: 768px){ + height:auto!important; + .banner-overlay{ + background: #c49951!important; + } + } +} @media(min-width:1024px){ padding: 0; .w-ba-banner{ display: flex; flex-direction: row-reverse; + height: 35vh!important; .w-ba-banner__wrap{ - flex: 0 0 65%; + flex: 0 0 60%; + height: 35vh!important; + .w-ba-banner__slide{ + height: 35vh!important; + img{ + height: 100%; + width: auto; + max-width: unset; + } + } } .ad-overlay{ position: relative; @@ -250,21 +272,38 @@ body{ width: 100%; display: flex; flex-wrap: wrap; - padding: 2em; @media(max-width: $screen-xs){ flex-wrap: wrap; } } +.colorwrapper{ + width: 100%; + background-color: #f1f2f4; +} .iconbox{ width: 20% !important; flex: 1 1 20%; + &:hover{ + opacity: .7; + cursor: pointer; + transform: scale(1.2); + -webkit-transition: .5s ease-out; + -moz-transition: .5s ease-out; + -ms-transition: .5s ease-out; + -o-transition: .5s ease-out; + transition: .5s ease-out; + } .fas{ font-size: 2.5em; - color: #abb5b4; + color:#d2d2d2; } .fab{ font-size: 2.5em; - color: #abb5b4; + color: #d2d2d2; + } + .far{ + font-size: 2.5em; + color: #d2d2d2; } @media(max-width: $screen-xs){ flex: 50%; @@ -345,7 +384,7 @@ body{ } .bannertwo{ @media(min-width:1024px){ - background-color: #72bcad; + background-color: #c49951; } @media(max-width: $screen-sm){ padding: 0; @@ -353,9 +392,6 @@ body{ } .onesection{ color: #fff; - @media(max-width:$screen-xs){ - padding: 0 15px; - } } .onepicture{ padding: 0; @@ -363,14 +399,11 @@ body{ .onetext{ padding:3em; } -.line{ - @media(min-width:1025px){ - width: 80%!important; - margin: auto!important; - } -} .threesection{ - padding: 2em 0; + +} +.extra-box { + padding: 0!important; } .widget-event_news-0.widget-event_news-0-new{ .w-event_news__list{ @@ -423,7 +456,7 @@ body{ display: none; } .card0{ - border-top: 25px solid #72bcad; + border-top: 25px solid #c49951; } .w-event_news__meta{ top: -25px!important; @@ -438,7 +471,7 @@ body{ .w-event_news__widget-title{ text-align: center; padding-top: 0.7em; - background: url(/assets/titlecap.png) top no-repeat; + background: url(/assets/titlecap.svg) top no-repeat; background-size: 164px 35px; background-position-y: -7px; font-size: 1.2rem; @@ -499,11 +532,76 @@ body{ .w-event_news__img-wrap.bullseye{ overflow: visible!important; } -//內頁 -.inner-page{ - padding: 50px 0; +.twosection{ + padding: 2em 0; + background: url(/assets/故宮剪影.svg) bottom repeat #f6f6f6; + background-size: 30px; + // background: url(/assets/故宮剪影.svg) bottom no-repeat #f6f6f6; + // background-position: right 10em; + // background-size: 200px; + @media(min-width: 769px){ + align-items: center; + } + #search_query{ + -webkit-appearance: none; + border-radius: 20px; + height: 40px; + border: none; + padding: 1em; + color: #333; + @media(max-width: $screen-xs){ + width: 86%; + } + } + .icon{ + background: #c49951; + border-radius: 50%; + height: 40px; + left: 163px; + top: 2px; + transition-delay: .3s; + width: 40px; + border: none; + padding: 10px; + font-size: 10px; + color: #fff; + &:hover{ + background: #9d7528; + } + } } +.timeinfo{ + padding: 2em; + .ho{ + &:hover{ + .fas{ + transform: translateX(5px)!important; + } + } + } +} +.oneshadow{ + background-image: linear-gradient(to right, #1212121f, #dedede00); + -pie-background: linear-gradient(to right, #1212121f, #dedede00); + behavior: url("/assets/ie_support/PIE2/PIE.htc"); + padding-bottom: 1em; + @media(min-width: 768px){ + padding-left: 2em; + padding-right: 0; + } +} +.rightbox{ + @media(min-width: 768px){ + padding-right: 2em; + } +} + .internal-page{ + .ba-banner-widget-1 .ad-overlay, .ba-banner-widget-1 .banner-overlay{ + @media(max-width:768px){ + position:absolute; + } + } background-color: #fff; .kenjohn { flex-wrap:wrap-reverse; @@ -652,3 +750,8 @@ body{ } } } +.middlebox{ + @media(min-width: 769px){ + padding-left: 0; + } +} diff --git a/assets/stylesheets/template/layout/footer.scss b/assets/stylesheets/template/layout/footer.scss index e14992b..44cca4d 100644 --- a/assets/stylesheets/template/layout/footer.scss +++ b/assets/stylesheets/template/layout/footer.scss @@ -2,17 +2,18 @@ @import "../initial"; .kenfooter{ - background-color:#333333; + background-color:#3d3d3d; width: 100%; margin: auto; } .layout-footer-inner{ - background-color:#333333; + background: url(/assets/故宮剪影.svg) bottom no-repeat #3d3d3d; + background-position: right 92px; padding: 2em!important; } .layout-footer { - color:#dfdfdf; + color:#fff; font-size: 0.8125em; letter-spacing: 1px; z-index: 2; @@ -25,11 +26,14 @@ } .footer-counter a { padding-right: 0.5em; } a { - color: #bcbac2; + color: #fff; &:hover, &:focus { color:#fff; + letter-spacing: 3px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } } } @@ -42,31 +46,3 @@ padding-right: 10px; } } -@media(max-width:$screen-xs){ - .footer-content{ - flex-wrap: wrap; - } - .part{ - width: 100%!important; - } -} -.footertext{ - @media(min-width:$screen-xs){ - flex: 0 0 70%; - } -} -.layout-footer-content{ - @media(min-width:$screen-xs){ - display: flex; - } -} -.footerimage{ - @media(min-width:$screen-xs){ - display: flex; - } -} -.footericon{ - @media(min-width:$screen-xs){ - flex:0 0 50%; - } -} diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss index efef6a6..a3d8835 100644 --- a/assets/stylesheets/template/layout/header.scss +++ b/assets/stylesheets/template/layout/header.scss @@ -18,7 +18,7 @@ .header-nav { text-align: center; z-index: 1; - padding: 1em 0.5em!important; + padding: 1em 0.5em 0!important; color: #fff; font-family: $main-font; text-transform:uppercase; @@ -80,30 +80,30 @@ a#content{ .navbar-nav>li{ padding: 0.5em; margin: 0.5em; - border: 1px solid #ddd; - border-left: none; - border-right: none; - .modules-menu-level-1{ - display: none; + border: 2px solid #fff; + color: #fff; + padding: calc(0.7777777778em - 2px) calc(2.5em - 2px); + align-items: center; + border-radius: 4px; + behavior: url("/assets/ie_support/PIE2/PIE.htc"); + &:nth-child(3){ + background: #c49951; + border: 2px solid #c49951; + } + a{ + color: #fff; + text-shadow: 0px 0px 8px #00000070; + font-size: 1.2em; + } &:hover{ - .modules-menu-level-1{ - display: block; - transition-duration: opacity 0.3s cubic-bezier(0.48, 0.01, 0.5, 0.99),visibility 0.1s linear; - background-color: #fffffff2; - position: absolute; - box-shadow: 2px 2px 5px #00000033; - padding: 1em; - li{ - padding: 0.5em; - &:hover{ - span { - color:#0d5151!important; - text-decoration: underline; - } - } - } - + background: #ffffffe6; + border-color: #f2f2f2; + color: #64696b; + a{ + color: #64696b; + text-shadow: none; + text-decoration: none; } } } @@ -113,7 +113,7 @@ a#content{ span{ &:hover{ - color: #288E8E!important; + color: #c49951!important; } } @@ -122,31 +122,31 @@ a#content{ &,& .jp-jplayer{ @media(min-width:1801px){ .ad-overlay{ - bottom: 50%; + bottom: 6%; position: absolute; } } @media screen and (min-width:1451px) and (max-width:1800px){ .ad-overlay{ - bottom: 40%; + bottom: 6%; position: absolute; } } @media screen and (min-width:1281px) and (max-width:1450px){ .ad-overlay{ - bottom: 50%; + bottom: 6%; position: absolute; } } @media screen and (min-width:1026px) and (max-width:1280px){ .ad-overlay{ - bottom: 30%; + bottom: 6%; position: absolute; } } - @media screen and (min-width:991px) and (max-width:1025px){ + @media screen and (min-width:$screen-xs) and (max-width:1025px){ .ad-overlay{ - bottom: 31%; + bottom: 40%; position: absolute; } } @@ -157,11 +157,24 @@ a#content{ } } @media screen and (min-width: 769px){ - height: 100vh; + height: 65vh!important; } - @media screen and (max-width: 768px){ - height: 720px; + @media screen and(min-width:$screen-xs) and (max-width:768px){ + height: 1000px!important; + .w-ad-banner__image{ + height: 1000px!important; + max-width: unset; + width: auto; + } } + @media screen and (max-width: $screen-xs){ + height: 680px!important; + .w-ad-banner__image{ + height: 680px!important; + max-width: unset; + width: auto; + } + } } } .jp-jplayer{ @@ -206,7 +219,28 @@ a#content{ .button-mid{ display: none; } - + input[type=search]{ + -webkit-appearance: none; + border-radius: 20px; + height: 40px; + border: none; + padding: 1em; + color: #333; + } + .icon{ + background: #c49951; + border-radius: 50%; + height: 40px; + left: 163px; + top: 2px; + transition-delay: .3s; + width: 40px; + border: none; + padding: 10px; + &:hover{ + background: #9d7528; + } + } .container { @extend .response-container; } @@ -256,22 +290,23 @@ a#content{ } @media(min-width:1900px){ width: 225px; - margin-top: -12px; + margin-top: 10px; } @media screen and (min-width:1025px) and (max-width:1899px){ width: 181px; - margin-top: -3px; + margin-top: 10px; } @media screen and (min-width:769px) and (max-width:1025px){ - width: 150px; - margin-top: -5px; + width: 250px !important; + margin-top: 23px; } @media screen and (min-width:$screen-xs) and (max-width:769px){ - width: 146px !important; + width: 200px !important; + margin-top: 10px; } @media screen and (max-width:$screen-xs){ - width: 110px !important; - margin-top: 3px; + width: 200px !important; + margin-top: 10px; } } @@ -353,7 +388,10 @@ a#content{ } .navFixed{ position: fixed!important; - top:2.5em; + top:0; + .btn-search{ + color: #333333; + } } .internal-page .kenjohn.navRel,.navRel { position: relative!important; @@ -375,10 +413,11 @@ a#content{ } z-index: 10; left: 0; - background-color: #fff; + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); + background-color: #ffffffe6; margin-top: 0; min-width: 100%; - opacity: 0.98; transition: opacity .5s ease-out; .collapse{ flex: 0 0 62%; @@ -399,8 +438,8 @@ a#content{ .navbar-header{ @media screen and (min-width:769px) { - height: 78px; - margin-bottom: 1em; + height: 80px; + margin-bottom: 0; width: 35%; justify-content: center; } @@ -421,8 +460,10 @@ a#content{ text-shadow: none; } .header-nav{ - background: #e7e8ea; - padding:0.5em !important; + background:#e2e2e2; + padding:0.5em!important; + margin: 0; + width: 100%; } .header-nav a{ text-shadow:none; @@ -437,7 +478,7 @@ a#content{ max-height: 65%; verflow-y: scroll; border-radius: 0.5em; - opacity: 1; + opacity: 1; padding:1em 5% 3em; transition-duration: opacity 0.3s cubic-bezier(0.48, 0.01, 0.5, 0.99),visibility 0.1s linear; &::-webkit-scrollbar { @@ -505,3 +546,38 @@ a#content{ display: inline-block; left: 5px; } +.btn-search{ + &:hover{ + .searchbox{ + display: block; + } + } +} +.btn-search{ + padding-right: 0.5em; + float: right; + padding-top: 5px; + padding-left: 5px; + color: #fff; + + @media(max-width:$screen-xs){ + float:left; + margin-left: 1em; + .searchbox{ + margin-top: 2em; + margin-left: 1em; + } + } +} +.searchbox{ + display: none; + position: absolute; + + ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: #fff; + opacity: 1; /* Firefox */ + } + input[type=search]{ + background: #4e4e4e66; + } +} diff --git a/assets/stylesheets/template/layout/slide.scss b/assets/stylesheets/template/layout/slide.scss index 19851f3..b3f8d89 100644 --- a/assets/stylesheets/template/layout/slide.scss +++ b/assets/stylesheets/template/layout/slide.scss @@ -5,9 +5,22 @@ .layout-slide { position: relative; z-index: 0; + background: #fff; + padding: 0; .w-ad-banner { //max-width: 75em; margin: auto; } } +.layout-slidewrapper{ + width: 100%; + background: #fff; + // padding-bottom: 2em; + .w-annc__widget-title{ + margin: 0; + } +} +.layout-slide-one{ + padding-bottom: 1em; +} diff --git a/assets/stylesheets/template/modules/ad_banner.scss b/assets/stylesheets/template/modules/ad_banner.scss index 325aab9..3ef39ea 100644 --- a/assets/stylesheets/template/modules/ad_banner.scss +++ b/assets/stylesheets/template/modules/ad_banner.scss @@ -8,7 +8,27 @@ // Widget // ## gerenral styles - +.designbox{ + background: url(/assets/花紋1.svg) top no-repeat; + background-position: top left; + width: 80%; + height: 80%; + position: absolute; + z-index: 102; + opacity: .7; + float: left; +}.designboxx{ + background: url(/assets/花紋2.svg) top no-repeat; + background-position: bottom right; + width: 100%; + height: 100%; + position: relative; + z-index: 102; + opacity: .5; +} +.banner-pager .active-slide button{ + background:$theme-color-second!important; +} .w-ba-banner { position: relative; z-index: 0; @@ -48,13 +68,16 @@ font-family: $main-font; width: 100%; bottom: 0; + text-align: center; + background: none!important; // background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40%,#000); h3 { margin: 0; padding: 0 0.5rem; color: #fff; - font-size: 33px; + font-size: 1.5em; font-weight: 400; + text-shadow: 2px 2px 5px #333; } @@ -426,11 +449,15 @@ ul.button-mid{ // Widget 1 .ba-banner-widget-1 { + .banner-overlay{ + padding:2em 1em; + } .w-ba-banner__caption { color: $theme-color-main; z-index: 200; - padding: 4em; + padding-bottom: 9%; + // background-image: linear-gradient(180deg, transparent 0, #0000004d 50%, #000000e0); h2 { font-family: $main-font; @@ -445,11 +472,10 @@ ul.button-mid{ } @media(max-width: $screen-sm) { .ad-overlay { - padding: 0.5em 1em; position: relative; - background:#72bcad; - h3 { font-size: 1em; } - p { font-size: 0.75em; } + background:$theme-color-second; + h3 { font-size: 1.2em; } + p {} } .controlplay { right: 0; @@ -582,4 +608,60 @@ ul.button-mid{ position: absolute; width: 100%; height: 100%; -} \ No newline at end of file +} +// Widget 8 +[data-cycle-carousel-visible="4"] .w-ba-banner__slide { + width: auto; + height: auto +} +.ba-banner-widget-8 { + &:hover{ + img{ + transform: scale(1.2); + -webkit-transition: .3s; + transition: .3s; + overflow: hidden; + } + } + .banner-pager{ + display: none!important; + } + .banner-overlay{ + text-align: center; + background-image: linear-gradient( + 180deg + , transparent 0, #00000045 50%, #00000085); + } + .w-ba-banner__caption { + color: $theme-color-main; + z-index: 200; + padding: 1em; + position: absolute; + + h2 { + font-family: $main-font; + font-size: $w-caption-font-size; + margin: 0.5em 0; + } + + p { + font-family: $main-font; + font-size:1.2rem; + } + } + + @media(max-width: $screen-sm) { + .ad-overlay { + padding: 0.5em 1em; + position: relative; + background:$theme-color-second; + h3 { font-size: 1em; } + p { font-size: 0.75em; } + } + .controlplay { + right: 0; + a { padding: 0 5px;} + a i { font-size: 0.75em; } + } + } +} diff --git a/assets/stylesheets/template/modules/announcement.scss b/assets/stylesheets/template/modules/announcement.scss index 7dac6e3..ccf5348 100644 --- a/assets/stylesheets/template/modules/announcement.scss +++ b/assets/stylesheets/template/modules/announcement.scss @@ -5,7 +5,33 @@ // // Widget // - +.w-annc__item { + margin-bottom: 1.875em; + &:hover{ + img{ + transform: scale(1.5)!important; + -webkit-transition: .5s ease-out; + -moz-transition: .5s ease-out; + -ms-transition: .5s ease-out; + -o-transition: .5s ease-out; + transition: .5s ease-out; + } + .transitionfade{ + height: inherit; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0,0,0,.4); + -webkit-transition: .5s ease-out; + -moz-transition: .5s ease-out; + -ms-transition: .5s ease-out; + -o-transition: .5s ease-out; + transition: .5s ease-out; + } + } +} // Announcement widget .label{ padding: .4em .6em .4em; @@ -18,19 +44,37 @@ width: 100%; } .w-annc__widget-title{ - background: url(/assets/titlecap.png) top no-repeat; - background-size: 164px 35px; - background-position-y: -7px; + background: url(/assets/titlecap.svg)top no-repeat; + background-position-x: center; + background-position-y: -12px; + margin: 0.5em 0; + line-height: 1.5; + font-family: "IndustryW00-Medium", "Barlow", "Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif; + font-size: 1.5rem; + color: #333333; + text-align: center; + padding-top: 1em; + background-size: 165px; +} +.w-annc__title{ + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } .w-annc { .w-annc__widget-title { @extend .unity-title; + } .w-annc__list { margin: 0; padding: 0; list-style: none; + clear: both; } .w-annc__item { @@ -47,7 +91,7 @@ .w-annc__postdate-wrap, .w-annc__category-wrap { display: inline-block; - margin-right: 0.2em; + margin-right:0; font-size: 0.8125em; color: $theme-color-main; font-weight: normal; @@ -55,6 +99,7 @@ i { color:$theme-color-main; + padding-right: 5px; } } @@ -74,7 +119,7 @@ font-size: 1rem; line-height: initial; &:hover { - // color: darken($theme-color-main, 10%); + color: #7d0000; } } } @@ -220,7 +265,6 @@ line-height: 1.3; font-size: 1.2rem; } - .w-annc__widget-title { float: left; } .w-annc__more { margin-top: 1.5em; } .w-annc__list > .w-annc__item:nth-child(3n+1) { clear: both; @@ -241,7 +285,7 @@ } .w-annc__item { - border-bottom: 0.0625em dashed lighten($theme-gray, 65%); + //border-bottom: 0.0625em dashed lighten($theme-gray, 65%); padding-bottom: 1em; margin-bottom: 1em; } @@ -252,7 +296,7 @@ .w-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; - border-bottom: 0.0625em dashed lighten($theme-gray, 65%); + //border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .w-annc__entry-title { @@ -276,7 +320,7 @@ .w-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; - border-bottom: 0.0625em dashed lighten($theme-gray, 65%); + //border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .w-annc__entry-title { @@ -299,9 +343,7 @@ .w-annc__postdate, .w-annc__category { - white-space: nowrap; font-size: 1rem; - float: right; } // Widget-8 @@ -356,7 +398,7 @@ .w-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; - border-bottom: 0.0625em dashed lighten($theme-gray, 65%); + //border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .w-annc__entry-title { @@ -378,7 +420,7 @@ .w-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; - border-bottom: 0.0625em dashed lighten($theme-gray, 65%); + //border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .w-annc__entry-title { @@ -462,7 +504,7 @@ .w-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; - border-bottom: 0.0625em dashed lighten($theme-gray, 65%); + //border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .w-annc__entry-title { @@ -493,7 +535,6 @@ line-height: 1.3; font-size: 1rem; } - .w-annc__widget-title { float: left; } .w-annc__more { margin-top: 1.5em; } .w-annc__list > .w-annc__item:nth-child(3n+1) { clear: both; @@ -534,7 +575,8 @@ .w-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; - border-bottom: 0.0625em dashed lighten($theme-gray, 65%); + clear: both; + //border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .w-annc__entry-title { @@ -549,6 +591,14 @@ display: inline-block; font-size: 0.75rem; } + .search_block{ + p{ + float: left; + padding-right: 1em; + line-height: 2; + padding-left: 0.8em + } + } } //widget 19 .widget-announcement-19 { @@ -624,7 +674,7 @@ } .i-annc__th { - color: $theme-color-main; + color: #fff; background: $theme-color-second; font-size: 0.8125em; border: none; @@ -722,7 +772,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .i-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; - border-bottom: 0.0625em dashed lighten($theme-gray, 65%); + //border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .i-annc__title { font-size: 0.95rem; @@ -757,7 +807,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .i-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; - border-bottom: 0.0625em dashed lighten($theme-gray, 65%); + //border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .i-annc__title { font-size: 0.95rem; @@ -910,7 +960,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .i-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; - border-bottom: 0.0625em dashed lighten($theme-gray, 65%); + //border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .i-annc__title { font-size: 0.95rem; diff --git a/assets/stylesheets/template/modules/event_news.scss b/assets/stylesheets/template/modules/event_news.scss new file mode 100644 index 0000000..578a4db --- /dev/null +++ b/assets/stylesheets/template/modules/event_news.scss @@ -0,0 +1,53 @@ +@charset "utf-8"; + +@import "../initial"; + + + + +.widget-event-news-calendar-2.w-calendar .w-calendar-table td{ + color: #333!important; +} +.widget-event-news-calendar-2.w-calendar .w-calendar-table td.w-calendar-event div{ + color: #333!important; + border: none!important; + border-radius: 0!important; + background: none!important; +} +.widget-event-news-calendar-2.w-calendar .event-inner-title{ + line-height: normal!important; +} +.widget-event-news-calendar-2.w-calendar .event-header{ + font-size: 1em !important; +} +.w-annc .w-annc__subtitle{ + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} +.widget-event-news-calendar-2.w-calendar .event-container-one .event-content{ + font-size: 0.8em!important; +} +.text{ + color: #333!important; +} +.widget-event-news-calendar-2.w-calendar{ + webkit-box-shadow: 0 2px 10px 0 #00000033!important; + box-shadow: 0 2px 10px 0 #00000033!important; +} +.widget-event-news-calendar-2.w-calendar button.switch_button{ + width: 1.8em!important; + height: 1.8em!important; +} +.widget-event-news-calendar-2.w-calendar .event-container-one:hover, .widget-event-news-calendar-2.w-calendar .event-container-one.hover-class{ + font-weight: bold!important; + background: none!important; + box-shadow: none!important; +} +.w-annc__list{ + padding: 0!important; +} diff --git a/assets/stylesheets/template/modules/menu.scss b/assets/stylesheets/template/modules/menu.scss index 477d3dc..4ab828b 100644 --- a/assets/stylesheets/template/modules/menu.scss +++ b/assets/stylesheets/template/modules/menu.scss @@ -29,7 +29,7 @@ padding-top: 32px!important; } @media (min-width: 1025px){ - padding-top: 28px!important; + padding-top: 20px!important; } @media (min-width: 769px) { margin: 0 0 0.8em 0; @@ -89,7 +89,7 @@ position:relative; margin: 0; padding: 0 1em; - border-bottom: 0.0625em solid lighten($theme-gray, 5%); + // border-bottom: 0.0625em solid lighten($theme-gray, 5%); & > a { display: block; @@ -103,7 +103,7 @@ // border-radius: 0.5em; & > a { - color: #288E8E; + color: #a85a56; } @media (min-width: $screen-sm) { @@ -150,8 +150,8 @@ } & > a { - padding: 0.8rem; - font-size: 14px; + padding: 0.8rem 1em; + font-size:1.15rem; color:#fff; font-weight: 900; // text-shadow: 1px 1px 1px #0000008c; @@ -221,10 +221,10 @@ & > li { padding-right: 2em; - flex: 0 0 33.3%; + flex: 0 0 25%; & > a { padding-left: 1em; - border-bottom: 2px solid #288E8E; + border-bottom: 2px solid #a85a56; padding: 5px 0; } @@ -312,7 +312,7 @@ width: 100%; position: absolute; right: 0; - background: #ffffff; + background:#f6f6f6; height: 100%; top: 40px; padding-top: 0; diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss index dd418fa..5d8eb90 100644 --- a/assets/stylesheets/template/template.scss +++ b/assets/stylesheets/template/template.scss @@ -40,7 +40,9 @@ div.extra-box:empty { // outline: 2px solid #43B5FC; outline: transparent; } - +.twocontent{ + margin-top:0!important; +} // container setting .response-container { position: relative; @@ -72,14 +74,17 @@ div.extra-box:empty { @media (min-width: $screen-sm) { width: 100%; + padding:0 2em; } @media (min-width: $screen-md) { - width: 60em; + width: 100%; + padding:0 2em; } @media (min-width: $screen-lg) { - width:70em; + width: 100%; + padding:0 2em; } } .dropdowns{ @@ -139,11 +144,11 @@ ul.tab_nav { border-radius: 30px; behavior: url("/assets/ie_support/PIE2/PIE.htc"); &:hover{ - background:#288E8E; + background:#c49951; color: #fff; } &.active { - background:#288E8E; + background:#c49951; color: #fff; } } diff --git a/assets/stylesheets/template/widget/sitemenu.scss b/assets/stylesheets/template/widget/sitemenu.scss index 85f6424..59e674e 100644 --- a/assets/stylesheets/template/widget/sitemenu.scss +++ b/assets/stylesheets/template/widget/sitemenu.scss @@ -76,7 +76,7 @@ .sitemenu-list { border-radius: 0.25em; box-shadow: 0px 0px 0px 1px #d7d7d7; - margin: 0 -1px!important; + margin:0 0 1em !important; } .sitemenu-item{ @media (min-width: 768px) { diff --git a/home/index.html.erb b/home/index.html.erb index 1e5a49a..7114c3a 100644 --- a/home/index.html.erb +++ b/home/index.html.erb @@ -15,35 +15,43 @@
-
+
-
-
-
-
-
-
+
+
+
+
- -
-
-
-
-
- <%= render_footer %> diff --git a/modules/ad_banner/_ad_banner_widget1.html.erb b/modules/ad_banner/_ad_banner_widget1.html.erb index 8c32071..410f3b7 100644 --- a/modules/ad_banner/_ad_banner_widget1.html.erb +++ b/modules/ad_banner/_ad_banner_widget1.html.erb @@ -29,35 +29,33 @@
- - + +
diff --git a/modules/ad_banner/info.json b/modules/ad_banner/info.json index dda4273..93ec03a 100644 --- a/modules/ad_banner/info.json +++ b/modules/ad_banner/info.json @@ -70,6 +70,14 @@ "en" : "7. Carousel ( image, description, navigation )" }, "thumbnail" : "thumb.png" - } + }, + { + "filename" : "ad_banner_widget8", + "name" : { + "zh_tw" : "8. 橫幅輪播 ( 兩張圖片, 圖片說明文字, 導航圖示 )", + "en" : "8. Carousel ( image, description, navigation )" + }, + "thumbnail" : "thumb.png" + } ] } diff --git a/modules/announcement/_annc_widget10.html.erb b/modules/announcement/_annc_widget10.html.erb index 4f860fb..aca26bd 100644 --- a/modules/announcement/_annc_widget10.html.erb +++ b/modules/announcement/_annc_widget10.html.erb @@ -4,14 +4,14 @@