wheeparam
/
npsonair
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

모바일 레이아웃 변경

master
lee_whee 5 months ago
parent
a4084a34f5
commit
e8bbcf27df
16 changed files with 661 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 294
      dist/assets/css/style.css
  2. 2
      dist/assets/css/style.min.css
  3. 2
      dist/assets/css/style.min.css.map
  4. 21
      dist/clips.html
  5. 21
      dist/index.html
  6. 21
      dist/news.html
  7. 21
      dist/shorts.html
  8. 21
      dist/toons.html
  9. 20
      src/html/include/header.html
  10. 1
      src/html/include/search_box.html
  11. 112
      src/scss/common/_layout.scss
  12. 21
      src/scss/components/_breadcrumbs.scss
  13. 15
      src/scss/components/_contents_box.scss
  14. 10
      src/scss/components/_pagination.scss
  15. 137
      src/scss/pages/_lists.scss
  16. 5
      src/scss/pages/main.scss

294
dist/assets/css/style.css
View File

@ -629,11 +629,42 @@ html {
#nav {
width: 100%;
}
#nav .search-box,
#nav .menu-list,
#nav .family-list {
display: none;
}
#nav .search-box {
display: none;
width: 100%;
border: 0;
padding: 0;
height: auto;
background-color: transparent;
top: 3.6458333333rem;
}
#nav .search-box.open {
display: block;
z-index: 98;
}
#nav .search-box .link {
display: none;
width: 0;
height: 0;
}
#nav .search-box .search-form {
margin-top: 0;
}
#nav .search-box .search-form .input {
border-radius: 0;
border: 0;
border-top: 0.0625rem solid #02256c;
border-bottom: 0.0625rem solid #02256c;
}
#nav .search-box:before {
background-image: none;
width: 0;
height: 0;
}
}
#contents {
@ -667,6 +698,7 @@ html {
align-items: center;
justify-content: center;
margin-top: 0.3125rem;
line-height: 1.5;
}
#footer .footer-info dl {
-webkit-display: flex;
@ -764,55 +796,72 @@ html {
width: 10.5625rem;
height: 8.4375rem;
background-color: #fff;
padding: 4.125rem 0.75rem 1.25rem 0.75rem;
padding: 1.875rem 0.75rem 1.25rem 0.75rem;
border-radius: 0.9375rem;
position: relative;
box-sizing: border-box;
}
.search-box:before {
content: "";
.search-box .link {
background-color: transparent;
background-image: url("../images/common/on-air.png");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-size: cover;
background-size: 8.875rem 2.375rem;
width: 8.875rem;
height: 2.375rem;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 1.6875rem;
display: block;
text-indent: -9999px;
overflow: hidden;
}
.search-box .search-form {
width: 100%;
position: relative;
margin-top: 1.25rem;
overflow: hidden;
line-height: 1;
}
.search-box .search-form .input {
width: 100%;
height: 1.6875rem;
border-radius: 2.4375rem;
border: 0.0625rem solid #26356b;
padding: 0.3125rem 1.125rem 0.3125rem 0.75rem;
padding: 0.3125rem 1.5rem 0.3125rem 0.75rem;
box-sizing: border-box;
font-size: 0.845rem;
line-height: 1;
}
.search-box .search-form .search-btn {
width: 1rem;
height: 1.0625rem;
height: 1.6875rem;
position: absolute;
right: 0.3125rem;
top: 50%;
transform: translate(0, -50%);
top: 0;
border: none;
background-color: #fff;
background-color: transparent;
padding: 0;
line-height: 1;
cursor: pointer;
line-height: 1.6875rem;
-webkit-display: flex;
display: -ms-flex;
display: flex;
align-items: center;
justify-content: center;
}
.search-box .search-form .search-btn:focus {
outline: none;
}
.search-box .search-form .search-btn .icon {
font-size: 1rem;
color: #26356b;
}
@media screen and (max-width: 768px) {
.search-box {
position: absolute;
left: 0;
top: 0;
}
}
/**
* 좌측 메뉴
@ -895,6 +944,43 @@ html {
flex-shrink: 0;
margin-right: 1rem;
}
@media screen and (max-width: 768px) {
.sub-main .left-nav {
margin-right: 0;
width: 0;
flex-shrink: initial;
}
.sub-main .left-nav .search-box {
display: none;
width: 100%;
border: 0;
padding: 0;
height: auto;
background-color: transparent;
top: 3.6458333333rem;
}
.sub-main .left-nav .search-box.open {
display: block;
z-index: 98;
}
.sub-main .left-nav .search-box .link {
display: none;
width: 0;
height: 0;
}
.sub-main .left-nav .search-box .search-form {
margin-top: 0;
}
.sub-main .left-nav .search-box .search-form .input {
border-radius: 0;
border: 0;
border-top: 0.0625rem solid #02256c;
border-bottom: 0.0625rem solid #02256c;
}
.sub-main .left-nav .menu-list {
display: none;
}
}
.sub-main .page-contents {
flex: 1;
min-width: 0;
@ -2696,6 +2782,18 @@ html {
font-weight: 600;
margin: 0 0.1875rem;
}
@media screen and (max-width: 768px) {
.breadcrumb {
padding: 0;
}
.breadcrumb ol li a, .breadcrumb ol li span {
font-size: 0.4583333333rem;
}
.breadcrumb ol li + li a:before, .breadcrumb ol li + li span:before {
font-size: 0.4583333333rem;
margin: 0 0.25rem;
}
}
.contents-box {
background: #fff;
@ -2716,6 +2814,20 @@ html {
font-weight: 600;
line-height: 1em;
}
@media screen and (max-width: 768px) {
.contents-box {
border-radius: 0.625rem;
padding: 0.6666666667rem 0.9375rem;
margin: 0 0 1.25rem 0;
}
.contents-box .contents-header {
border-bottom: 2px solid #02256c;
padding: 0.625rem 0;
}
.contents-box .contents-header .contents-title {
font-size: 0.8125rem;
}
}
.pagination {
display: block;
@ -2727,6 +2839,13 @@ html {
justify-content: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.pagination ol {
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 0.9375rem;
}
}
.pagination ol li a, .pagination ol li span {
display: flex;
width: 1.75rem;
@ -2739,6 +2858,13 @@ html {
transition: color 0.3s ease, background-color 0.3s ease;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.pagination ol li a, .pagination ol li span {
width: 1.25rem;
height: 1.25rem;
font-size: 0.625rem;
}
}
.pagination ol li.active a, .pagination ol li.active span, .pagination ol li:not(.disabled):not(.active):hover a, .pagination ol li:not(.disabled):not(.active):hover span {
background-color: #02256c;
color: #fff;
@ -2787,7 +2913,8 @@ html {
width: 10.5625rem;
}
@media screen and (max-width: 768px) {
#main .main-top .line-01 {
#main .main-top .line-01 #nav .menu-list,
#main .main-top .line-01 #nav .family-list {
display: none;
}
}
@ -3491,6 +3618,17 @@ html {
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.common-list .thumbnail .thumbnail-link {
width: 100%;
height: -moz-fit-content;
height: fit-content;
}
.common-list .thumbnail .thumbnail-link .thumbnail-img {
-o-object-fit: initial;
object-fit: initial;
}
}
.common-list .item-content .item-title {
color: #02256c;
font-size: 1rem;
@ -3508,6 +3646,15 @@ html {
.common-list .item-content .item-title a:hover {
text-decoration: underline;
}
@media screen and (max-width: 768px) {
.common-list .item-content .item-title {
font-size: 0.75rem;
margin-bottom: 0.25rem;
white-space: initial;
word-wrap: break-word;
word-break: keep-all;
}
}
.common-list .item-content .item-summary {
font-size: 0.8125rem;
color: #252525;
@ -3546,6 +3693,12 @@ html {
color: #959595;
font-weight: 500;
}
@media screen and (max-width: 768px) {
.common-list .item-content .item-info dl dd {
font-size: 0.5833333333rem;
line-height: 1;
}
}
.common-list.news .item {
display: flex;
padding: 1.25rem 0;
@ -3567,6 +3720,22 @@ html {
-webkit-line-clamp: 4;
line-height: 1.28em;
}
@media screen and (max-width: 768px) {
.common-list.news .item {
flex-direction: column;
padding: 0.4166666667rem 0;
}
.common-list.news .item .thumbnail {
width: 100%;
margin-right: 0;
}
.common-list.news .item .item-content .item-summary {
font-size: 0.5833333333rem;
height: 5.12em;
-webkit-line-clamp: 4;
line-height: 1.28em;
}
}
.common-list.toons {
display: flex;
flex-wrap: wrap;
@ -3583,6 +3752,22 @@ html {
.common-list.toons .item .item-content .item-title {
font-size: 1.25rem;
}
@media screen and (max-width: 768px) {
.common-list.toons .item {
width: 100%;
padding: 0.3125rem 0.4166666667rem;
border-bottom: 1px solid #c2c2c2;
margin-bottom: 0.625rem;
}
.common-list.toons .item .thumbnail {
width: 100%;
height: auto;
}
.common-list.toons .item .item-content .item-title {
font-size: 0.6875rem;
margin-bottom: 0.25rem;
}
}
.common-list.shorts {
margin: 0 -0.25rem;
display: flex;
@ -3609,6 +3794,27 @@ html {
white-space: normal;
word-break: break-all;
}
@media screen and (max-width: 768px) {
.common-list.shorts {
margin: 0;
}
.common-list.shorts .item {
width: 100%;
padding: 0.4166666667rem 0;
border-bottom: 1px solid #c2c2c2;
margin-bottom: 0.625rem;
}
.common-list.shorts .item .thumbnail {
width: 100%;
height: auto;
}
.common-list.shorts .item .item-content .item-title {
font-size: 0.6875rem;
margin-bottom: 0.25rem;
white-space: initial;
word-break: keep-all;
}
}
.common-list.clips {
display: flex;
flex-wrap: wrap;
@ -3634,6 +3840,32 @@ html {
-webkit-line-clamp: 2;
line-height: 1.28em;
}
@media screen and (max-width: 768px) {
.common-list.clips {
margin: 0 0 0.625rem 0;
}
.common-list.clips .item {
width: 100%;
padding: 0.3125rem 0.4166666667rem;
border-bottom: 1px solid #c2c2c2;
}
.common-list.clips .item .item-title {
margin-bottom: 0.25rem;
}
.common-list.clips .item .item-title a > br {
display: none;
}
.common-list.clips .item .thumbnail {
width: 100%;
height: auto;
}
.common-list.clips .item .item-summary {
font-size: 0.625rem;
}
.common-list.clips .item .item-summary a > br {
display: none;
}
}
.tag-container {
width: 100%;
@ -3681,3 +3913,33 @@ html {
background-color: #02256c;
color: #fff;
}
@media screen and (max-width: 768px) {
.tag-container {
padding: 0.4166666667rem;
margin: 0.25rem 0 0.5208333333rem;
border-radius: 0.3125rem;
flex-direction: column;
}
.tag-container .tag-title {
padding-left: 0;
font-size: 0.8125rem;
}
.tag-container .tag-list {
margin: -0.0625rem;
flex: 1;
min-width: 0;
display: flex;
flex-wrap: wrap;
}
.tag-container .tag-list li {
padding: 0.125rem;
}
.tag-container .tag-list li a {
height: 0.9375rem;
border-radius: 0.4166666667rem;
background-color: #ffffff;
color: #464646;
font-size: 0.5625rem;
padding: 0 0.5625rem;
}
}

2
dist/assets/css/style.min.css
File diff suppressed because it is too large
View File

2
dist/assets/css/style.min.css.map
File diff suppressed because it is too large
View File

21
dist/clips.html
View File

@ -80,7 +80,7 @@
<header class="mobile-header">
<button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
<button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
</header>
<aside id="mobile-left-menu">
@ -94,11 +94,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="">새소식</a></li>
<li><a href="./news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="">국민연금 인스타툰</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -123,8 +123,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="">동영상</a></li>
<li><a href="">Shorts</a></li>
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -160,6 +160,16 @@
}
});
});
document.addEventListener('DOMContentLoaded', function() {
const toggleButton = document.getElementById('toggle-search');
const form = document.querySelector('.search-box');
toggleButton.addEventListener('click', function() {
form.classList.toggle('open');
});
});
</script>
<!--S: 컨텐츠 영역-->
@ -181,6 +191,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

21
dist/index.html
View File

@ -80,7 +80,7 @@
<header class="mobile-header">
<button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
<button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
</header>
<aside id="mobile-left-menu">
@ -94,11 +94,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="">새소식</a></li>
<li><a href="./news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="">국민연금 인스타툰</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -123,8 +123,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="">동영상</a></li>
<li><a href="">Shorts</a></li>
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -160,6 +160,16 @@
}
});
});
document.addEventListener('DOMContentLoaded', function() {
const toggleButton = document.getElementById('toggle-search');
const form = document.querySelector('.search-box');
toggleButton.addEventListener('click', function() {
form.classList.toggle('open');
});
});
</script>
<!--S: 컨텐츠 영역-->
@ -174,6 +184,7 @@
<div class="line-01">
<nav id="nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

21
dist/news.html
View File

@ -80,7 +80,7 @@
<header class="mobile-header">
<button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
<button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
</header>
<aside id="mobile-left-menu">
@ -94,11 +94,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="">새소식</a></li>
<li><a href="./news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="">국민연금 인스타툰</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -123,8 +123,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="">동영상</a></li>
<li><a href="">Shorts</a></li>
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -160,6 +160,16 @@
}
});
});
document.addEventListener('DOMContentLoaded', function() {
const toggleButton = document.getElementById('toggle-search');
const form = document.querySelector('.search-box');
toggleButton.addEventListener('click', function() {
form.classList.toggle('open');
});
});
</script>
<!--S: 컨텐츠 영역-->
@ -181,6 +191,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

21
dist/shorts.html
View File

@ -80,7 +80,7 @@
<header class="mobile-header">
<button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
<button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
</header>
<aside id="mobile-left-menu">
@ -94,11 +94,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="">새소식</a></li>
<li><a href="./news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="">국민연금 인스타툰</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -123,8 +123,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="">동영상</a></li>
<li><a href="">Shorts</a></li>
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -160,6 +160,16 @@
}
});
});
document.addEventListener('DOMContentLoaded', function() {
const toggleButton = document.getElementById('toggle-search');
const form = document.querySelector('.search-box');
toggleButton.addEventListener('click', function() {
form.classList.toggle('open');
});
});
</script>
<!--S: 컨텐츠 영역-->
@ -181,6 +191,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

21
dist/toons.html
View File

@ -80,7 +80,7 @@
<header class="mobile-header">
<button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
<button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
</header>
<aside id="mobile-left-menu">
@ -94,11 +94,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="">새소식</a></li>
<li><a href="./news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="">국민연금 인스타툰</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -123,8 +123,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="">동영상</a></li>
<li><a href="">Shorts</a></li>
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -160,6 +160,16 @@
}
});
});
document.addEventListener('DOMContentLoaded', function() {
const toggleButton = document.getElementById('toggle-search');
const form = document.querySelector('.search-box');
toggleButton.addEventListener('click', function() {
form.classList.toggle('open');
});
});
</script>
<!--S: 컨텐츠 영역-->
@ -181,6 +191,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

20
src/html/include/header.html
View File

@ -68,7 +68,7 @@
<header class="mobile-header">
<button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
<button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
</header>
<aside id="mobile-left-menu">
@ -82,11 +82,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="">새소식</a></li>
<li><a href="./news.html">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="">국민연금 인스타툰</a></li>
<li><a href="./toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -111,8 +111,8 @@
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="">동영상</a></li>
<li><a href="">Shorts</a></li>
<li><a href="./clips.html">동영상</a></li>
<li><a href="./shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -148,6 +148,16 @@
}
});
});
document.addEventListener('DOMContentLoaded', function() {
const toggleButton = document.getElementById('toggle-search');
const form = document.querySelector('.search-box');
toggleButton.addEventListener('click', function() {
form.classList.toggle('open');
});
});
</script>
<!--S: 컨텐츠 영역-->

1
src/html/include/search_box.html
View File

@ -1,4 +1,5 @@
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

112
src/scss/common/_layout.scss
View File

@ -304,14 +304,45 @@ body:has(#mobile-left-menu.opened) {
}
}
}
@include display-xs(){
width:100%;
.search-box,
.menu-list,
.family-list{
display: none;
}
.search-box {
display: none;
width:100%;
border:0;
padding:0;
height:auto;
background-color:transparent;
top:REM(175px / 3);
&.open {
display: block;
z-index: 98;
}
.link {
display: none;
width:0;
height:0;
}
.search-form {
margin-top:0;
.input {
border-radius: 0;
border:0;
border-top:REM(3px / 3) solid #02256c;
border-bottom:REM(3px / 3) solid #02256c;
}
}
&:before{
background-image: none;
width:0;
height:0;
}
}
}
}
@ -342,6 +373,7 @@ body:has(#mobile-left-menu.opened) {
align-items: center;
justify-content: center;
margin-top:REM(5px);
line-height:1.5;
dl {
@include display-flex();
align-items: center;
@ -432,50 +464,63 @@ body:has(#mobile-left-menu.opened) {
width: REM(169px);
height:REM(135px);
background-color:#fff;
padding:REM(66px) REM(12px) REM(20px) REM(12px);
padding:REM(30px) REM(12px) REM(20px) REM(12px);
border-radius: REM(15px);
position:relative;
box-sizing: border-box;
&:before{
content:"";
.link {
@include background-image('../images/common/on-air.png');
background-size: cover;
background-size: REM(142px) REM(38px);
width:REM(142px);
height:REM(38px);
position:absolute;
left:50%;
transform: translate(-50%, 0);
top:REM(27px);
display: block;
text-indent:-9999px;
overflow:hidden;
}
.search-form {
width:100%;
position:relative;
margin-top:REM(20px);
overflow: hidden;
line-height:1;
.input {
width:100%;
height:REM(27px);
border-radius: REM(13px * 3);
border:REM(1px) solid #26356BFF;
padding:REM(5px) REM(18px) REM(5px) REM(12px) ;
padding:REM(5px) REM(24px) REM(5px) REM(12px) ;
box-sizing: border-box;
font-size:REM(13.52px);
line-height:1;
}
.search-btn {
width:REM(16px);
height:REM(17px);
height:REM(27px);
position:absolute;
right:REM(5px);
top:50%;
transform:translate(0, -50%);
top:0;
border:none;
background-color:#fff;
background-color:transparent;
padding:0;
line-height:1;
cursor: pointer;
line-height:REM(27px);
@include display-flex();
align-items: center;
justify-content: center;
&:focus {
outline: none;
}
.icon {
font-size:REM(16px);
color:#26356BFF;
}
}
}
@include display-xs(){
position:absolute;
left:0;
top:0;
}
}
@ -590,6 +635,41 @@ body:has(#mobile-left-menu.opened) {
width:REM(170px);
flex-shrink: 0;
margin-right:REM(16px);
@include display-xs(){
margin-right: 0;
width:0;
flex-shrink: initial;
.search-box {
display: none;
width:100%;
border:0;
padding:0;
height:auto;
background-color:transparent;
top:REM(175px / 3);
&.open {
display: block;
z-index: 98;
}
.link {
display: none;
width:0;
height:0;
}
.search-form {
margin-top:0;
.input {
border-radius: 0;
border:0;
border-top:REM(3px / 3) solid #02256c;
border-bottom:REM(3px / 3) solid #02256c;
}
}
}
.menu-list {
display: none;
}
}
}
.page-contents {

21
src/scss/components/_breadcrumbs.scss
View File

@ -29,4 +29,25 @@
}
}
}
@include display-xs(){
padding : 0;
ol {
li {
a,span {
font-size:REM(22px / 3);
}
& + li {
a, span {
&:before {
font-size:REM(22px / 3);
margin:0 REM(12px / 3);
}
}
}
}
}
}
}

15
src/scss/components/_contents_box.scss
View File

@ -18,4 +18,19 @@
line-height:1em;
}
}
@include display-xs(){
border-radius:REM(30px / 3);
padding:REM(32px / 3) REM(45px / 3);
margin:0 0 REM(60px /3) 0;
.contents-header {
border-bottom:2px solid #02256c;
padding:REM(10px) 0;
.contents-title {
font-size:REM(39px / 3);
}
}
}
}

10
src/scss/components/_pagination.scss
View File

@ -7,6 +7,11 @@
display:flex;
justify-content: center;
align-items: center;
@include display-xs(){
flex-direction: row;
flex-wrap: wrap;
margin-bottom:REM(45px / 3);
}
li {
a, span {
@ -20,6 +25,11 @@
background-color:transparent;
transition: color .3s ease, background-color .3s ease;
cursor:pointer;
@include display-xs(){
width:REM(60px / 3);
height:REM(60px / 3);
font-size:REM(30px / 3);
}
}
&.active,

137
src/scss/pages/_lists.scss
View File

@ -19,6 +19,15 @@
height:100%;
display:block;
object-fit: cover;
}
@include display-xs(){
width: 100%;
height: fit-content;
.thumbnail-img {
object-fit: initial;
}
}
}
}
@ -42,6 +51,14 @@
text-decoration: underline;
}
}
@include display-xs(){
font-size:REM(36px / 3);
margin-bottom:REM(12px / 3);
white-space: initial;
word-wrap: break-word;
word-break: keep-all;
}
}
@ -86,6 +103,10 @@
font-size:REM(14px);
color:#959595;
font-weight:500;
@include display-xs(){
font-size:REM(28px / 3);
line-height:1;
}
}
}
}
@ -117,6 +138,23 @@
line-height:1.28em;
}
}
@include display-xs(){
flex-direction: column;
padding:REM(20px / 3) 0;
.thumbnail {
width: 100%;
margin-right:0;
}
.item-content {
.item-summary {
font-size:REM(28px / 3);
height: 1.28em * 4;
-webkit-line-clamp: 4;
line-height:1.28em;
}
}
}
}
}
@ -139,6 +177,24 @@
font-size:REM(20px);
}
}
@include display-xs(){
width:100%;
padding:REM(15px / 3) REM(20px / 3);
border-bottom: 1px solid #c2c2c2;
margin-bottom:REM(30px / 3);
.thumbnail{
width:100%;
height:auto;
}
.item-content {
.item-title{
font-size:REM(33px / 3);
margin-bottom:REM(12px / 3);
}
}
}
}
}
@ -172,6 +228,28 @@
}
}
}
@include display-xs(){
margin:0;
.item {
width:100%;
padding:REM(20px / 3) 0;
border-bottom: 1px solid #c2c2c2;
margin-bottom:REM(30px / 3);
.thumbnail {
width:100%;
height:auto;
}
.item-content {
.item-title{
font-size:REM(33px / 3);
margin-bottom:REM(12px / 3);
white-space:initial;
word-break: keep-all;
}
}
}
}
}
&.clips {
@ -202,6 +280,34 @@
line-height:1.28em;
}
}
@include display-xs(){
margin:0 0 REM(30px / 3) 0;
.item {
width:100%;
padding:REM(15px / 3) REM(20px / 3);
border-bottom: 1px solid #c2c2c2;
.item-title{
margin-bottom:REM(12px / 3);
a {
> br {
display: none;
}
}
}
.thumbnail{
width:100%;
height:auto;
}
.item-summary {
font-size:REM(30px / 3);
a {
> br {
display: none;
}
}
}
}
}
}
}
@ -257,4 +363,35 @@
}
}
}
@include display-xs(){
padding:REM(20px / 3);
margin:REM(12px / 3) 0 REM(25px / 3);
border-radius:REM(15px / 3);
flex-direction: column;
.tag-title {
padding-left:0;
font-size:REM(39px / 3);
}
.tag-list {
margin:REM(-3px / 3);
flex:1;
min-width:0;
display:flex;
flex-wrap:wrap;
li {
padding:REM(6px / 3);
a {
height:REM(45px / 3);
border-radius:REM(20px / 3);
background-color:#ffffff;
color:#464646;
font-size:REM(27px / 3);
padding:0 REM(27px / 3);
}
}
}
}
}

5
src/scss/pages/main.scss
View File

@ -25,9 +25,14 @@
.line-01 {
width:REM(169px);
@include display-xs(){
#nav {
.menu-list,
.family-list {
display: none;
}
}
}
}
.line-02 {
width:REM(416px);
@include display-flex();

Write Preview
Loading…
Cancel
Save