22/1/13 css
.notion-h1:first-child {
margin-top: 2em;
}
.notion-board-header {
position: absolute;
top: 0;
}
.notion-board-body {
height: 70vh;
overflow: scroll;
padding-left: 1px;
padding-top: 3px;
}
/やりたいこと
1.スクラップしたもののcontentsを非表示にして,titleSectionとrow-wrapperだけ表示させたい
2.トップページには、linkedDatabase(GalleryView)で複製して、最新8個だけ表示させたい/
/--1--/
.page[class*="pageMap__top_scraps_"] .separatedSection__contentsWrapper > * {
display: none;
}
.page[class*="pageMap__top_scraps_"] .titleSection {
display: block;
}
.page[class*="pageMap__top_scraps_"] .notion-collection-row-wrapper {
display: block;
}
/--2--/
/トップページのBLOGを8個まで表示する/
.page-_top #block-b7bf9df2c6ac42499f7e3a0c53120cd0 .notion-collection-card.notion-collection-card-size-medium:nth-child(n+9){
display: none;
}
/トップページのSCRAPSを8個まで表示する/
.page-_top #block-cc678ec4dba045c1a4d0d6de60416a96 .notion-collection-card.notion-collection-card-size-small:nth-child(n+9){
display: none;
}
#section-block-ddd042d97491498e818a31196fac3bf4,
#section-block-d6abec9a2c5245dd82d03847b77c9540{
margin-top: 50px;
}
.r-kzbkwu {
display: none;
}
}
#block-0ac2708f67a040538f4902176d8349e1 {
display: none;
}
.notion-property-select-item, .notion-property-multi_select-item {
height: 16px;
}
.page-_top .show:not(.sticky, .show2) {
opacity: 0; /* 初期値は透明にしておく /
transition: .5s; / 動くスピードを0.5秒に指定 /
position: relative; / 相対位置の設定 /
top: 50px; / 事前に下に50pxずらしておく /
}
@media (max-width: 640px) {
.page-_top .show:not(.sticky){
opacity: 0; / 初期値は透明にしておく /
transition: .5s; / 動くスピードを0.5秒に指定 /
position: relative; / 相対位置の設定 /
top: 50px;
}
}
.page-_top .show.active {
opacity: 1; / 透明度を元に戻す /
top: 0; / ずらしていた位置を戻すことで上に上がっているようにみえる */
}
.notion-property-select-item, .notion-property-multi_select-item{
border-radius: 0;
}
.notion-item-blue {
background-color: transparent;
border-bottom: 2px solid var(--notion-item-blue);
}
.notion-item-red {
background-color: transparent;
border-bottom: 2px solid var(--notion-item-red);
}
.notion-item-orange {
background-color: transparent;
border-bottom: 2px solid var(--notion-item-orange);
}
.notion-item-pink {
background-color: transparent;
border-bottom: 2px solid var(--notion-item-pink);
}
.notion-item-yellow {
background-color: transparent;
border-bottom: 2px solid var(--notion-item-yellow);
}
.notion-item-default {
background-color: transparent;
border-bottom: 2px solid var(--notion-item-default);
}
.notion-item-gray {
background-color: transparent;
border-bottom: 2px solid var(--notion-item-gray);
}
.notion-item-green {
background-color: transparent;
border-bottom: 2px solid var(--notion-item-green);
}
.notion-item-purple {
background-color: transparent;
border-bottom: 2px solid var(--notion-item-purple);
}
.notion-item-brown {
background-color: transparent;
border-bottom: 2px solid var(--notion-item-brown);
}
.notion-collection-column-title {
line-height: 20px;
font-size: 15px;
}
.notion-bookmark-image img {
object-fit: contain;
}
.notion-table-cell img.notion-page-icon, svg.notion-page-icon {
max-width: 15px;
max-height: 15px;
}
.notion-bookmark-image {
flex: 1 1 120px;
}
/タグカテゴリの感覚（右マージン）/
.notion-collection-card .notion-property-multi_select-item,
.notion-collection-card .notion-property-select {
margin: 0 4px 0 0;
}
/**/
.notion-property-select-item,
.notion-property-multi_select-item {
padding: 0px 2px;
}
.notion-property-multi_select {
margin: 2px 2px 0 0;
}
.notion-collection-card-property {
line-height: 16px;
}
@media (max-width: 640px) {
.notion-collection-column-title {
font-size: 12px;
}
}
.notion-collection-row-property {
margin-bottom: 0px;
}
.page-_top .notion-spacer {
width: 20px;
}
.page-_top .notion-row {
justify-content: center
}
#block-61dacf7c6cd84343a82df303cdf54002.notion-spacer {
display: none;
}
/bookmark boardview/
.page-scraps .notion-board-view-size-large .notion-board-th, .notion-board-view-size-large .notion-board-group{
width: 400px;
}
.notion-collection-card .notion-property-text {
height: calc( 1.6em * 2 );
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: normal;
font-size: 11px;
white-space: break-spaces;
}
/トップページのscrapsのコメント1行にする/
.page-_top .notion-collection-card .notion-property-text {
height: calc( 1.6em * 1 );
-webkit-line-clamp: 1;
}
.notion-collection-card .notion-page-title-text{
font-size: 12px;
height: calc( 1.5em * 2 );
}
.notion-collection-card .notion-page-title {
height: calc( 1.5em * 2 );
}
.page-_top .notion-collection-card .notion-page-title-text{
font-size: 12px;
height: calc( 1.5em * 1 );
}
.page-_top .notion-collection-card .notion-page-title {
height: calc( 1.5em * 1 );
}
@media (max-width: 640px) {
.page-scraps .notion-board-view-size-large .notion-board-th, .notion-board-view-size-large .notion-board-group{
width: 300px;
}
.page-scraps .notion-collection-card .notion-page-title-text{
font-size: 10px;
height: calc( 1.6em * 2 );
}
.page-scraps .notion-collection-card .notion-property-text {
font-size: 9px;
}
}
}
/* Blog*/
/* ギャラリーカード */
svg.notion-page-title-icon.notion-page-icon {
display: none;
}
.notion-page-title-icon.notion-page-icon.notion-page-icon-default {
display: none;
}
.notion-collection-header {
display: none;
}
.notion-collection-card .notion-page-title {
height: calc( 1.5em * 2 );
overflow: hidden;
}
.notion-collection-card .notion-page-title-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-weight: bold;
}
.notion-collection-card .notion-page-title:hover {
border-bottom: none;
}
.notion-collection-card-body {
flex-wrap: wrap;
}
.notion-gallery-grid-size-small {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.notion-collection-card-property:first-child {
width: 100%;
}
.notion-collection-card-property .notion-property-date:before {
content: "📆 ";
white-space: pre-wrap;
}
.notion-collection-card-property .notion-property-select:before {
content: "📦 ";
white-space: pre-wrap;
}
.notion-collection-card-property .notion-property-multi_select:before {
content: "🔖 ";
white-space: pre-wrap;
}
.page-archives .notion-collection-card-property .notion-property-select:before {
content: "📆 ";
white-space: pre-wrap;
}
.notion-collection-row-value {
flex: 2;
font-size: 95%;
}
.notion-collection-column-title {
flex: 1;
}
.notion-collection-row-value {
padding: 0;
}
#block-9d81dc8aeb1844578f6cf0a50194ff89 {
display: none;
}
/ブログ/
#block-7a41cdab11b5471c8ef64383f2bafe58 .notion-collection-card,
#block-b7bf9df2c6ac42499f7e3a0c53120cd0 .notion-collection-card,
.page-archives .notion-collection-card,
.page-blog .notion-collection-card,
#block-35acbbb9bd4d428393592e12184ed35b .notion-collection-card{
flex-direction: row;
display: flex;
}
#block-7a41cdab11b5471c8ef64383f2bafe58 .notion-collection-card-cover,
#block-b7bf9df2c6ac42499f7e3a0c53120cd0 .notion-collection-card-cover,
.page-archives .notion-collection-card-cover,
.page-blog .notion-collection-card-cover,
#block-35acbbb9bd4d428393592e12184ed35b .notion-collection-card .notion-collection-card-cover {
flex: 1;
height: auto;
}
#block-7a41cdab11b5471c8ef64383f2bafe58 .notion-collection-card-body,
#block-b7bf9df2c6ac42499f7e3a0c53120cd0 .notion-collection-card-body,
.page-archives .notion-collection-card-body,
.page-blog .notion-collection-card-body,
#block-35acbbb9bd4d428393592e12184ed35b .notion-collection-card .notion-collection-card-body{
flex: 1;
padding: 2px 5px;
margin: auto 0;
}
.notion-collection-card-property {
padding: 1px;
font-size: 11px;
}
.page-_top .notion-gallery-grid,
.page-archives .notion-gallery-grid,
.page-blog .notion-gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/-----Bookmark-----/
.page-scraps .notion-collection-card .notion-page-title-icon {
display: none;
}
.page-scraps .notion-gallery-grid-size-small {
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 10px;
}
.page-scraps .notion-collection-card-cover {
flex: 1;
display: inline;
background: none;
border-bottom: none;
}
.page-scraps .notion-collection-card-cover-text {
display: none;
}
.page-scraps .notion-board-view-size-large .notion-collection-card .notion-collection-card-cover {
height: auto;
}
.page-scraps .notion-collection-card-body {
flex: 4;
}
.page-scraps .notion-collection-card {
display: flex;
flex-direction: row;
}
.page-scraps .notion-collection-header-title {
display: none;
}
.notion-collection-card {
background: none;
}
.page-scraps .notion-collection-card-body {
padding: 5px 5px;
}
.page-scraps .notion-collection-card-property {
padding: 0;
width: 100%;
white-space: normal;
}
.notion-collection-card-property .notion-property-text:before {
content: "💭 ";
}
.notion-collection-card-property .notion-property-url:before {
content: "🔗 ";
}
.notion-collection-card-property .notion-property-url {
display: flex;
}
.page-scraps .notion-collection-card .notion-property-url {
height: calc( 1.5em );
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
font-size: 10px;
}
.page-scraps .notion-collection-card-property:first-child .notion-property-title {
font-size: 12px;
font-weight: 500;
}
#block-5b8612afc93d4131a0760a647aca8d52 {
display: none;
}
.page-check_scraps .notion-collection-header {
display: block;
}
/--------基本設定--------/
@charset "UTF-8";
.page {
font-size: 15px;
line-height: 1.7em;
font-family: 'Lato', 'Noto Sans JP', sans-serif;
}
.container p a {
color: #035ed1;
}
.container {
max-width: 1000px;
}
.contents {
padding: 0;
padding-top: 15px;
}
/* 記事内画像に影 */
.contents figure {
width: 94%;
margin: 2em auto;
}
figure img {
margin: 0 auto;
width: 100% !important;
height: auto !important;
object-fit: contain;
box-shadow: 0px 0px 10px #999;
}
figure .asset-wrapper img {
max-height: none;
}
figcaption {
margin-top: 1em;
text-align: center;
}
.notion-asset-caption {
font-size: 85%;
}
.notion-table-of-contents-item {
padding: 3px 2px;
font-size: 13px;
}
.pageIcon-cover {
left: 50%;
text-align: center;
font-size: 45px;
line-height: 55px;
margin-left: -35px;
border-radius: 50%;
border: solid #fff 4px;
box-sizing: border-box;
background-color: #ffeb01;
overflow: hidden;
}
.page-products .coverImage {
max-width: 1000px;
}
.page-products .container {
max-width: 1000px;
}
.notion-table-cell, .notion-table-cell .notion-page-title-text {
font-size: 12px;
}
/-----------文字関係---------/
.title {
font-size: 2em;
text-align: center;
line-height: 1.5em;
}
.contents p {
font-size: 80%;
}
.title {
font-family: 'Lato';
border-bottom: 2px solid #14171A;
border-top: 2px solid #14171A;
padding: 0.5em;
font-size: 1.4em;
line-height: 1.5em;
margin-bottom: 1em;
font-weight: bold;
}
.notion-h1.notion-brown, .notion-h2.notion-brown, .notion-h3.notion-brown, .notion-h1.notion-purple, .notion-h2.notion-purple, .notion-h3.notion-purple {
width: auto;
}
.notion-h1.notion-brown,.notion-h1.notion-purple {
display: inline-block;
font-family: 'Lato';
background-color: #1D1D1D;
color: #fff;
padding: 2px 10px;
font-size: 1.4em;
line-height: 1.5em;
margin: 0.5em 0;
margin-right: 10px;
font-weight: bold;
border: none;
}
.notion-h2.notion-brown{
display: inline-block;
font-family: 'Lato';
background-color: #1D1D1D;
color: #fff;
margin-top: 2em;
padding: 2px 10px;
font-size: 1.3em;
line-height: 1.5em;
margin-bottom: 0.5em;
margin-right: 10px;
font-weight: bold;
border:none;
}
.notion-h3.notion-brown, .notion-h3.notion-purple {
display: inline-block;
font-family: 'Lato';
background-color: #1D1D1D;
color: #fff;
padding: 2px 10px;
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 0.5em;
margin-right: 10px;
font-weight: bold;
clear: both;
}
.page-_top .notion-h3.notion-purple{
float: right;
margin-left: 1000px;
white-space: nowrap;
margin-top: 10px;
}
.page-_top .notion-h3 .notion-link,
.page-_top .notion-h1 .notion-link{
opacity: 1;
}
.notion-quote {
font-size: 99%;
}
.contents h1 {
border-bottom: 2px solid #14171A;
border-top: 2px solid #14171A;
padding: 0.5em;
font-size: 1.4em;
line-height: 1.3em;
margin-top: 2em;
margin-bottom: 1em;
font-weight: bold;
}
.contents h2 {
border-left: 8px solid #14171A;
padding: 0.5em;
font-size: 1.3em;
line-height: 1em;
margin-top: 1.5em;
margin-bottom: 1em;
font-weight: bold;
}
.contents h3 {
border-bottom: 2px solid #14171A;
padding: 0.5em;
font-size: 1.2em;
line-height: 1em;
margin-top: 0.5em;
margin-bottom: 1em;
font-weight: bold;
}
/--------ヘッダー関係ー------/
/* headerを常に固定*/
.header {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
border-bottom: 1px solid var(--fg-color-0);
}
/ヘッダーリンク/
.header__btn {
color: #767c82;
font-family: 'Lato';
font-weight: bold;
}
.coverImage {
height: 300px;
}
.page-products .header__contentsWrapper {
max-width: 984px;
}
.header__link {
/* justify-content: center;/
width: 100%;
}
.header__img {
height: 20px;
}
.header__contentsWrapper {
max-width: 1000px;
}
/-------フッター関係----------*/
.footer {
margin-top: 20px;
font-size: 100%;
}
.footer a:hover {
opacity: 0.5;
}
.footer p a[target="_self"] {
margin: 0;
display: block;
}
.footer .pagelink {
display: none;
}
.footer .notion-callout .notion-page-icon {
width: 50px;
height: 50px;
max-width: 50px;
max-height: 50px;
border-radius: 50%;
}
.footer .notion-page-icon {
overflow: visible;
}
#block-a5fcd8e75829412ab23988201efc5230 {
display: flex;
flex-direction: row;
}
#block-c2af2818b0674a2e99d59e5af570c80c {
text-align: right;
font-size: 11px;
}
/footer callout/
#block-a056959feeaf4111ba0e23fcbf2e25a3 {
padding: 10px 16px 10px 16px;
position: relative;
border: none;
border-bottom: 2px solid #000;
}
#block-a056959feeaf4111ba0e23fcbf2e25a3 .notion-page-icon{
}
#block-a056959feeaf4111ba0e23fcbf2e25a3 .notion-callout-text {
margin-left: 10px;
}
#block-a056959feeaf4111ba0e23fcbf2e25a3:after {
position: absolute;
top: 0;
left: 0;
content: '';
width: 0;
border-bottom: 15px solid #fff;
border-left: 15px solid #000;
}
/hrを画面いっぱい/
#block-ecc7899aafe541b9ad82-03699c46954c {
margin: 0 calc(50% - 50vw);
width: 100vw;
/box-shadow: 0px 1px 2px #ccc;/
}
/--------ページリンク関係--------/
.pagelink:hover {
background-color: transparent;
opacity: 0.75;
}
.notion-page-link {
display: flex;
flex-direction: row-reverse;
width: 100%;
border: 1px solid var(--fg-color-1);
border-radius: 3px;
margin-bottom: 20px;
height: auto;
overflow: hidden;
}
.notion-page-title {
font-weight: bold;
font-family: 'Lato';
text-decoration: none;
align-items: flex-start;
}
.notion-page-link-titleArea {
padding: 12px 14px 14px;
margin: auto 0;
flex: 5 1 180px;
}
.notion-page-title-text {
white-space: break-spaces;
text-align: auto 0;
line-height: 1.5em;
}
.notion-page-link:hover {
background-color: transparent;
opacity: 0.75;
}
.notion-page-link svg {
display: none;
}
.notion-page-link-cover,
.notion-list-item-cover {
display: block;
flex: 1 1 120px;
max-height: 120px;
border-radius: 4px;
object-fit: contain;
height: auto;
padding-right: 10px;
}
/* /blog,/keyboard,でのみ、ページリンクで日付を表示する */
.page-blog .notion-page-link-datetime,
.page-limited .notion-page-link-datetime,
.page-scraps .notion-page-link-datetime {
display: block;
margin: 0;
color: #666;
}
.notion-page-link-datetime-created {
display: inline;
margin-right: 1em;
}
.notion-page-link-datetime-created::before {
font-family: "Material Icons";
content: "today";
position: relative;
top: 3px;
margin-right: 4px;
}
.notion-page-link-datetime-edited {
display: none;
}
.notion-page-link-datetime-created-time {
display: none;
}
/-------トップページ関係--------/
/* トップページタイトル非表示*/
.page-_top .titleSection, .page-_top .titleSection__contentsWrapper, .pageIcon-cover, .pageIcon-cover.emoji, .pageIconSpacer {
display: none;
}
.page-_top .shareBtns {
display: none;
}
.page-_top h3 {
text-align: center;
font-size: 1.5em;
margin: 0px;
color: #000;
background-color: #fff;
border-bottom: 2px solid ;
}
/トップページのh3/
#block-13a363719fb64f60ab8a0fef683360bc,
#block-27531451575d489faf530032e0025320{
display: inline;
padding: 5px 8px;
}
#block-0ebca205e1b4482f8e2f7d935d8e302e {
padding-top: 10px;
}
.notion-column {
margin: auto 0;
}
#block-91ff28d585bf4f3d925ac36162503359,
#block-def9bb600d664b08beab738e33cbfb1d{
margin: 0;
}
#block-aed15113ca574906a614408e12949786 {
padding: 0px;
}
#block-aed15113ca574906a614408e12949786.notion-callout.notion-brown_background_co {
margin-top: 10px;
min-height: 90px;
}
#block-261e984a775349a0a2a21f4beda5a80b {
display:flex;
flex-flow: column;
justify-content:space-around;
}
/限定公開のページリンクを表示しない/
.notion-page-link#block-6867a6d85cb344519aa3540bb8570d3a,
.notion-page-link#block-18a9b6bf05fa4e1ba0d8b503690ab411{
display: none;
}
/限定公開配下のページのリンクを無効化/
.page[class*="pageMap__top_limited_"] .breadcrumbs {
pointer-events: none;
}
/TOPICのgallaryのヘッダーを消す/
.page-_top .notion-collection-header {
display: none;
}
.notion-gallery-grid {
border-top: none;
padding-top: none;
}
.page-_top .notion-collection-card .notion-page-title,
.page-_top .notion-collection-card .notion-page-title-text,
#block-771c5428ab4047d2821f0c4e241f727c .notion-collection-card .notion-page-title,
#block-771c5428ab4047d2821f0c4e241f727c .notion-collection-card .notion-page-title-text,
#block-c9a74509b96e4e67b2e347e68f952762 .notion-collection-card .notion-page-title,
#block-c9a74509b96e4e67b2e347e68f952762 .notion-collection-card .notion-page-title-text{
height: calc( 1.5em * 2 );
font-size: 12px;
}
@media screen and (min-width: 480px) {
.page-_top .notion-collection-card .notion-page-title,
.page-_top .notion-collection-card .notion-page-title-text,
#block-771c5428ab4047d2821f0c4e241f727c .notion-collection-card .notion-page-title,
#block-771c5428ab4047d2821f0c4e241f727c .notion-collection-card .notion-page-title-text,
#block-c9a74509b96e4e67b2e347e68f952762 .notion-collection-card .notion-page-title,
#block-c9a74509b96e4e67b2e347e68f952762 .notion-collection-card .notion-page-title-text{
height: calc( 1.5em * 2 );
font-size: 13px;
}
}
#block-4f05e79800944b4594f242bbfdc8297c,
#block-333d22ad90ec48a29c21e6696f36b511{
margin-top: 15px;
}
/TOPIC削除/
#block-35acbbb9bd4d428393592e12184ed35b{
display: none;
}
#block-ecc7899aafe541b9ad8203699c46954c{
margin: 0 calc(50% - 50vw);
margin-top: 60px;
width: 100vw;
}
.notion-asset-wrapper-tweet .contents figure {
margin: 1em auto;
}
/* callout吹き出し*/
.notion-callout.notion-brown_background_co {
position: relative;
margin-left: 120px;
min-height: 100px;
width: calc(100% - 120px);
border: none;
border-radius: 10px;
background-color: #fff;
border: solid 2px #555;
box-sizing: border-box;
width: calc(100% - 120px) !important;
padding: 12px 12px 12px 8px;
}
.notion-callout.notion-brown_background_co .notion-page-icon {
position: absolute;
top: -10px;
left: -120px;
max-width: 100px;
width: 100px;
max-height: 100px;
height: 100px;
}
.notion-callout.notion-brown_background_co:before {
content: "";
position: absolute;
top: 50px;
left: -30px;
margin-top: -14px;
border: 14px solid transparent;
border-right: 14px solid #555;
}
.notion-callout.notion-brown_background_co:after {
content: "";
position: absolute;
top: 50px;
left: -28px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 15px solid #FFF;
}
/----------SNSボタン--------/
/Twitter/
#block-905460625fc345479dfb0ce39bd90655 .notion-link,
#block-d90a7f81f046422f968ada67a80d6edf .notion-link{
font-family: ForkAwesome ,Lato;
position: relative;
border-bottom: solid 2px #1da1f2;
color: #1da1f2;
display: flex;
justify-content: center;
align-items: center;
padding: 16px 5px;
width: auto;
box-sizing: border-box;
font-weight: bold;
opacity: 1;
margin: 0 auto;
}
#block-905460625fc345479dfb0ce39bd90655 .notion-link:hover,
#block-d90a7f81f046422f968ada67a80d6edf .notion-link:hover {
opacity: 0.75;
}
#block-905460625fc345479dfb0ce39bd90655 .notion-link:before,
#block-d90a7f81f046422f968ada67a80d6edf .notion-link:before {
content: "\f099";
font-size: 1.2em;
margin-right: 8px;
}
#block-905460625fc345479dfb0ce39bd90655 .notion-link:after,
#block-d90a7f81f046422f968ada67a80d6edf .notion-link:after {
position: absolute;
top: 0;
left: 0;
content: '';
width: 0;
border-bottom: 15px solid #fff;
border-left: 15px solid #1da1f2;
}
/instagram/
#block-a5099d1b22cf490ca1aae623424b9035 .notion-link,
#block-513c85a5aea44fa8ac4524cd8462a9fa .notion-link {
font-family: ForkAwesome ,Lato;
position: relative;
border-bottom: solid 2px #d6249f;
color: #d6249f;
display: flex;
justify-content: center;
align-items: center;
padding: 16px 5px;
width: auto;
box-sizing: border-box;
font-weight: bold;
opacity: 1;
margin: 0 auto;
}
#block-a5099d1b22cf490ca1aae623424b9035 .notion-link:hover,
#block-513c85a5aea44fa8ac4524cd8462a9fa .notion-link:hover {
opacity: 0.75;
}
#block-a5099d1b22cf490ca1aae623424b9035 .notion-link:before,
#block-513c85a5aea44fa8ac4524cd8462a9fa .notion-link:before {
content: "\f16d";
font-size: 1.2em;
margin-right: 8px;
}
#block-a5099d1b22cf490ca1aae623424b9035 .notion-link:after,
#block-513c85a5aea44fa8ac4524cd8462a9fa .notion-link:after {
position: absolute;
top: 0;
left: 0;
content: '';
width: 0;
border-bottom: 15px solid #fff;
border-left: 15px solid #d6249f;
}
/YouTube/
#block-91ff28d585bf4f3d925ac36162503359 .notion-link,
#block-e31e11f695d4458aad972e25f2735e24 .notion-link{
font-family: ForkAwesome,Lato;
position: relative;
border-bottom: solid 2px #ff0202;
color: #ff0202;
display: flex;
justify-content: center;
align-items: center;
padding: 16px 5px;
width: auto;
box-sizing: border-box;
font-weight: bold;
opacity: 1;
margin: 0 auto;
}
#block-91ff28d585bf4f3d925ac36162503359 .notion-link:hover,
#block-e31e11f695d4458aad972e25f2735e24 .notion-link:hover{
opacity: 0.75;
}
#block-91ff28d585bf4f3d925ac36162503359 .notion-link:before,
#block-e31e11f695d4458aad972e25f2735e24 .notion-link:before{
content: "\f16a";
font-size: 1.2em;
margin-right: 8px;
}
#block-91ff28d585bf4f3d925ac36162503359 .notion-link:after,
#block-e31e11f695d4458aad972e25f2735e24 .notion-link:after {
position: absolute;
top: 0;
left: 0;
content: '';
width: 0;
border-bottom: 15px solid #fff;
border-left: 15px solid #ff0202;
}
/HowtoNotion/
#block-def9bb600d664b08beab738e33cbfb1d .notion-link,
#block-0790a985878e40ad9bb399c426a65a8a .notion-link {
font-family: ForkAwesome,Lato;
position: relative;
border-bottom: solid 2px #000;
color: #000;
display: flex;
justify-content: center;
align-items: center;
padding: 16px 5px;
width: auto;
box-sizing: border-box;
font-weight: bold;
opacity: 1;
margin: 0 auto;
}
#block-def9bb600d664b08beab738e33cbfb1d .notion-link:hover,
#block-0790a985878e40ad9bb399c426a65a8a .notion-link:hover{
opacity: 0.75;
}
#block-def9bb600d664b08beab738e33cbfb1d .notion-link:before,
#block-0790a985878e40ad9bb399c426a65a8a .notion-link:before{
content: "\f14c";
font-size: 1.2em;
margin-right: 8px;
}
#block-def9bb600d664b08beab738e33cbfb1d .notion-link:after,
#block-0790a985878e40ad9bb399c426a65a8a .notion-link:after {
position: absolute;
top: 0;
left: 0;
content: '';
width: 0;
border-bottom: 15px solid #fff;
border-left: 15px solid #000;
}
.page-_top .coverImage,
.page-archives .coverImage,
.page-blog .coverImage,
.page-scraps .coverImage {
box-shadow: none;
}
.page-_top .notion-gallery-grid.notion-gallery-grid-size-large{
grid-template-columns: none;
position: relative;
height: 311px;
width: 500px;
overflow: hidden;
margin : 0 auto;
box-shadow: 0px 0px 10px #999;
border-radius: 5px;
}
.page-_top .notion-collection-card.notion-collection-card-size-large {
position: absolute;
width: 500px;
border-radius: 5px;
}
.page-_top .notion-collection-card.notion-collection-card-size-large .notion-page-title-text{
font-size: 13px;
height: 1.6em;
}
.page-_top .notion-collection-card.notion-collection-card-size-large .notion-collection-card-property {
height: 2.0em;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(1) {
pointer-events:none;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(2) {
left: 500px;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(3) {
left: 1000px;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(4) {
left: 1500px;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(5) {
left: 2000px;
pointer-events:none;
}
@keyframes slide-5 {
0% {margin-left: 0; }
25% { margin-left: -100%; }
50% { margin-left: -200%; }
75% { margin-left: -300%; }
100% { margin-left: -400%; }
}
.page-_top .notion-gallery-grid.notion-gallery-grid-size-large > :first-child {
animation-name: slide-5;
animation-duration: 12s;
animation-delay: 3s;
animation-iteration-count: infinite;
}
.page-_top .notion-gallery-grid.notion-gallery-grid-size-large > :nth-child(2) {
animation-name: slide-5;
animation-duration: 12s;
animation-delay: 3s;
animation-iteration-count: infinite;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(3) {
animation-name: slide-5;
animation-duration: 12s;
animation-delay: 3s;
animation-iteration-count: infinite;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(4) {
animation-name: slide-5;
animation-duration: 12s;
animation-delay: 3s;
animation-iteration-count: infinite;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(5) {
animation-name: slide-5;
animation-duration: 12s;
animation-delay: 3s;
animation-iteration-count: infinite;
}
.page-_top .notion-collection-card.notion-collection-card-size-large .notion-collection-card-cover{
height: 280px;
}
.page-_top .contents {
padding-top: 0px;
}
@media (max-width: 640px) {
.page-_top .notion-gallery-grid.notion-gallery-grid-size-large{
width: 95vw;
height: 240px;
right: 2vw;
box-shadow: none;
border-radius: 0px;
}
.page-_top .notion-collection-card.notion-collection-card-size-large {
width: 95vw;
border-radius: 0px;
box-shadow: none;
border: 1px solid rgba(55, 53, 47, 0.09);
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(2) {
left: 95vw;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(3) {
left: 190vw;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(4) {
left: 285vw;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(5) {
left: 380vw;
}
.page-_top .notion-collection-card.notion-collection-card-size-large .notion-collection-card-cover{
height: 200px;
}
}
/*
.page-_top .coverImage{
display: none;
}
.page-_top .notion-gallery-grid.notion-gallery-grid-size-large{
grid-template-columns: none;
position: relative;
height: 320px;
width: 500px;
margin : 0 auto;
}
.page-_top .notion-collection-card.notion-collection-card-size-large {
position: absolute;
width: 500px;
animation-duration: 13s;
animation-iteration-count:infinite;
position: absolute;left:0px;top:0px;width: 100%;height: 100%;
animation-fill-mode: both;
animation-timing-function: linear;
animation-delay: 1s;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:first-child {
position: relative;width: 100%;height: 100%;
position: absolute;
pointer-events:none;
}
.notion-collection-card-cover {
height: auto;
}
@keyframes slide1 {
0% {opacity: 0;}
10% {opacity: 1;}
40% {}
50% {opacity: 1;}
60% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide2 {
0% {opacity: 0;}
25% {opacity: 0;}
35% {opacity: 1;}
65% {}
75% {opacity: 1;}
85% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide3 {
0% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 1;}
80% {opacity: 1;}
90% {opacity: 0;}
100% {opacity: 0;}
}
.page-_top .notion-gallery-grid.notion-gallery-grid-size-large > :nth-child(2) {
animation-name: slide1;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(3) {
animation-name: slide2;
}
.page-_top .notion-collection-card.notion-collection-card-size-large:nth-child(4) {
animation-name: slide3;
}
.notion-collection-card-cover{
height: 280px;
}
.page-_top .notion-collection-card-body {
background-color: #fff;
}
@media (max-width: 640px) {
.page-_top .notion-gallery-grid.notion-gallery-grid-size-large{
width: 90vw;
height: 230px;
}
.page-_top .notion-collection-card.notion-collection-card-size-large {
width: 90vw;
}
}
/
.shareBtns {
position: fixed;
bottom: 16px;
left: 16px;
z-index: 9;
}
.shareBtns__tw {
border-radius: 50%;
height: 40px;
width: 40px;
padding: 0;
box-sizing: border-box;
justify-content: center;
align-items: center;
}
.shareBtns__tw__icon {
margin: 0;
}
.shareBtns__tw__text {
display: none;
}
/Twitter/
.page-tweets4me .contents figure {
margin: 0em auto;
}
@media screen and (min-width: 480px) {
/ 画面サイズが480pxからはここを読み込む */
.page {
padding-top: 65px;
}
.header__img{
height: 25px;
}
.pagelink__title {
font-size: 1.8em;
}
.page-blog .pagelink__datetime {
font-size: 1em;
}
.notion-page-link-cover,
.notion-list-item-cover {
min-height: 120px;
}
.coverImage {
width:auto;
height:auto;
max-height: 300px;
max-width: 100%;
box-shadow: 0px 0px 40px #999;
}
#block-d90a7f81f046422f968ada67a80d6edf .notion-link,
#block-513c85a5aea44fa8ac4524cd8462a9fa .notion-link,
#block-e31e11f695d4458aad972e25f2735e24 .notion-link,
#block-0790a985878e40ad9bb399c426a65a8a .notion-link {
font-size: 0;
height: 64px;
width: 64px;
}
#block-d90a7f81f046422f968ada67a80d6edf .notion-link:before,
#block-513c85a5aea44fa8ac4524cd8462a9fa .notion-link:before,
#block-e31e11f695d4458aad972e25f2735e24 .notion-link:before,
#block-0790a985878e40ad9bb399c426a65a8a .notion-link:before {
font-size: 1.5rem;
margin: 0;
}
#block-d17c4bb59b334089b4578e6272821761 {
flex-direction: row;
}
#block-d17c4bb59b334089b4578e6272821761 .notion-column {
width: auto !important;
}
#block-d17c4bb59b334089b4578e6272821761 .notion-spacer {
display: none;
}
#block-61dacf7c6cd84343a82df303cdf54002 {
padding: 0px;
}
}
@media (max-width: 640px) {
.notion-bookmark-image {
display: block;
}
.header {
height: 40px;
}
/* ヘッダーボタン */
.header__btn {
font-size: 12px;
}
.coverImage {
height: auto;
width: auto;
max-height: 200px;
max-width: 100%;
}
.page {
padding-top: 40px;
font-size: 12px;
}
.header__menuOpenBtn {
display: none;
}
.header__btns {
display: flex;
}
.header__contentsWrapper {
padding: 4px 12px;
}
.page-_top h3 {
text-align: center;
font-size: 1.3em;
margin: 0px;
font-weight: bold;
}
#block-aed15113ca574906a614408e12949786.notion-callout.notion-blue_background_co {
margin-top: 20px;
margin-bottom: 0px;
}
#block-61dacf7c6cd84343a82df303cdf54002 {
padding: 0px;
}
#block-61dacf7c6cd84343a82df303cdf54002,
#block-b14c62a45f9b4449add4ae62878d6214,
#block-d17c4bb59b334089b4578e6272821761 {
display: flex;
flex-direction: row;
}
#block-d17c4bb59b334089b4578e6272821761 .notion-column {
width: 33% !important;
}
#block-61dacf7c6cd84343a82df303cdf54002 .notion-spacer,
#block-d17c4bb59b334089b4578e6272821761 .notion-spacer {
display: none;
}
#block-d90a7f81f046422f968ada67a80d6edf .notion-link,
#block-513c85a5aea44fa8ac4524cd8462a9fa .notion-link,
#block-e31e11f695d4458aad972e25f2735e24 .notion-link,
#block-0790a985878e40ad9bb399c426a65a8a .notion-link {
font-size: 0;
height: 64px;
width: 64px;
}
#block-d90a7f81f046422f968ada67a80d6edf .notion-link:before,
#block-513c85a5aea44fa8ac4524cd8462a9fa .notion-link:before,
#block-e31e11f695d4458aad972e25f2735e24 .notion-link:before,
#block-0790a985878e40ad9bb399c426a65a8a .notion-link:before{
font-size: 1.5rem;
margin: 0;
}
.notion-callout.notion-brown_background_co {
position: relative;
margin-left: 110px;
min-height: 100px;
width: calc(100% - 110px);
border: none;
border-radius: 10px;
background-color: #fff;
border: solid 2px #555;
box-sizing: border-box;
width: calc(100% - 110px) !important;
}
#block-1ddb7430167c44b7913caf782748a597 {
display: flex;
flex-direction: row;
}
.notion-collection-row-body {
flex-wrap: wrap;
}
.notion-collection-row-property:not(:first-child):before {
font-size: 150%;
}
/ブログ/
#block-7a41cdab11b5471c8ef64383f2bafe58 .notion-collection-card,
#block-b7bf9df2c6ac42499f7e3a0c53120cd0 .notion-collection-card,
.page-archives .notion-collection-card,
.page-blog .notion-collection-card,
#block-35acbbb9bd4d428393592e12184ed35b .notion-collection-card{
flex-direction: row;
display: flex;
}
#block-7a41cdab11b5471c8ef64383f2bafe58 .notion-collection-card-cover,
#block-b7bf9df2c6ac42499f7e3a0c53120cd0 .notion-collection-card-cover,
.page-archives .notion-collection-card-cover,
.page-blog .notion-collection-card-cover,
#block-35acbbb9bd4d428393592e12184ed35b .notion-collection-card .notion-collection-card-cover {
flex: 1;
height: auto;
}
#block-7a41cdab11b5471c8ef64383f2bafe58 .notion-collection-card-body,
#block-b7bf9df2c6ac42499f7e3a0c53120cd0 .notion-collection-card-body,
.page-archives .notion-collection-card-body,
.page-blog .notion-collection-card-body,
#block-35acbbb9bd4d428393592e12184ed35b .notion-collection-card .notion-collection-card-body{
flex: 1;
padding: 2px 5px;
margin: auto 0;
}
.notion-collection-card-property {
padding: 1px;
font-size: 11px;
}
/.page-archives .notion-collection-card .notion-page-title{
height: calc( 1.5em * 3);
}
.page-archives .notion-collection-card .notion-page-title-text {
-webkit-line-clamp: 3;
}/
#block-5c2784f815be4a0a962913f55a39b712 {
flex-direction: row;
display: flex;
}
.footer .notion-spacer {
display: none;
}
.page-_top .notion-gallery-grid,
.page-archives .notion-gallery-grid,
.page-blog .notion-gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.page-scraps .notion-gallery-grid-size-small {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* シェアボタンが最後尾のコンテンツとかぶるのを防ぐ */
.page {
padding-bottom: 40px;
}
.notion-page-link-cover,
.notion-list-item-cover {
height: 100px;
}
.notion-bookmark-title {
font-size: 12px;
}
.notion-bookmark-description,
.notion-bookmark-link div {
font-size: 11px;
}
.notion-page-title-text {
font-size: 12px;
}
}