add: Member Only Article

diverta · Jan 19, 2024 · 9b8ed84 · 9b8ed84
1 parent 62d9dad
commit 9b8ed84
Show file tree

Hide file tree

Showing 7 changed files with 497 additions and 8 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -887,6 +887,66 @@ table {
       .c-article__detail__contents li {
         padding: var(--spacing-small) 0; }
 
+.c-memberArticle__type {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: end; }
+  .c-memberArticle__type > * {
+    padding-left: 10px; }
+
+.c-memberArticle__date {
+  font-size: .875em; }
+
+.c-memberArticle__detail {
+  margin-top: 35px; }
+
+.c-memberArticle__coupon {
+  position: relative;
+  margin-top: 35px;
+  border: 1px solid var(--color-base); }
+  .c-memberArticle__coupon::after, .c-memberArticle__coupon::before {
+    display: block;
+    position: absolute;
+    background-color: var(--color-white);
+    content: ""; }
+  .c-memberArticle__coupon::after {
+    top: 15px;
+    right: -2px;
+    bottom: 15px;
+    left: -2px; }
+  .c-memberArticle__coupon::before {
+    top: -2px;
+    right: 15px;
+    bottom: -2px;
+    left: 15px; }
+  .c-memberArticle__coupon__info {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    position: relative;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    align-items: start;
+    z-index: 1; }
+  .c-memberArticle__coupon__title {
+    margin-right: 10px;
+    padding: 2px 5px 1px;
+    background: var(--color-primary);
+    color: var(--color-white);
+    font-family: var(--font-en); }
+  .c-memberArticle__coupon__link {
+    -webkit-transition: var(--transition-seconds);
+    transition: var(--transition-seconds); }
+    .c-memberArticle__coupon__link:hover {
+      color: var(--color-primary);
+      opacity: .8; }
+
 .c-badge, .c-card__image__badge {
   padding: calc( var(--spacing) / 4) var(--spacing);
   background-color: var(--color-gray);
@@ -1239,6 +1299,19 @@ table {
     -webkit-transform: rotate(-60deg);
     transform: rotate(-60deg); }
 
+.c-heading__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-bottom: var(--spacing-small);
+  border-bottom: 1px solid var(--color-base); }
+  .c-heading__wrapper .c-heading--lv2 {
+    padding-bottom: 0;
+    border-bottom: none; }
+
 .c-hero {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -2265,6 +2338,10 @@ table {
             font-size: var(--font-size-small); }
       .c-article__detail__block {
         margin-top: calc( var(--spacing-large) * 2); }
+    .c-memberArticle__type {
+      margin-top: 15px; }
+    .c-memberArticle__coupon {
+      padding: calc( var(--spacing) * 1.5); }
     .c-box {
       padding: var(--spacing-large); }
     .c-button, .c-button:disabled, .c-button--primary {
@@ -2490,6 +2567,13 @@ table {
             font-size: var(--font-size-x-small); }
       .c-article__detail__block {
         margin-top: var(--spacing-large); }
+    .c-memberArticle__type {
+      margin-top: 10px; }
+    .c-memberArticle__detail {
+      font-size: .875em; }
+    .c-memberArticle__coupon {
+      padding: var(--spacing);
+      font-size: .875em; }
     .c-box {
       padding: calc( var(--spacing) * 1.5); }
     .c-button, .c-button:disabled, .c-button--primary {

diff --git a/public/mock/member/delete/index.html b/public/mock/member/delete/index.html
@@ -143,6 +143,9 @@ <h1 class="c-page-title__heading">退会</h1>
       <h2 class="c-heading--lv3-b -memberMenu">会員メニュー</h2>
       <nav class="l-side__nav">
         <ul class="l-side__nav__list">
+          <li class="l-side__nav__list__item">
+            <a href="/mock/member/mypage/index.html" class="c-button u-display-flex u-display-flex-justify-content-between u-width-100">マイページトップ</a>
+          </li>
           <li class="l-side__nav__list__item">
             <a href="/mock/member/edit/index.html" class="c-button u-display-flex u-display-flex-justify-content-between u-width-100">会員情報の更新</a>
           </li>

diff --git a/public/mock/member/edit/index.html b/public/mock/member/edit/index.html
@@ -149,6 +149,9 @@ <h1 class="c-page-title__heading">会員情報</h1>
       <h2 class="c-heading--lv3-b -memberMenu">会員メニュー</h2>
       <nav class="l-side__nav">
         <ul class="l-side__nav__list">
+          <li class="l-side__nav__list__item">
+            <a href="/mock/member/mypage/index.html" class="c-button u-display-flex u-display-flex-justify-content-between u-width-100">マイページトップ</a>
+          </li>
           <li class="l-side__nav__list__item">
             <a href="/mock/member/edit/index.html" class="c-button u-display-flex u-display-flex-justify-content-between u-width-100">会員情報の更新</a>
           </li>