settings
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400&family=Noto+Sans+JP:wght@500&display=swap');
body{
--body-bg: #9a9f8f;
--navbar-bg: rgba(226, 226, 226, 0.3);
--navbar-icon-color: #333;
--navbar-icon-hovered-color: #333;
--navbar-icon-active-color: #333;
--search-form-bg: #efefef;
--search-form-text-color: #222;
--search-form-icon-color: #444;
--search-form-icon-focus-color: #444;
--card-bg: #efefef;
--card-hover-bg: #222;
--card-title-color: #9a9f8f;
--card-title-bg: #efefef;
--card-description-color: #9a9f8f;
--card-description-link-color: #9a9f8f;
--relation-label-bg: #efefef;
--relation-label-text: #222;
--relation-label-links-bg: #444;
--relation-label-links-text: #fff;
--relation-label-empty-bg: #efefef;
--relation-label-empty-text: #666;
--tool-color: #fff;
--tool-light-color: #444;
--tool-badge-bg: #9a9f8f;
--tool-bg: #444;
--tool-text-color: #fff;
--tool-light-color: #ccc;
--new-button-vertical-color: #fff;
--new-button-horizontal-color: #fff;
--new-button-bg: #9a9f8f;
--new-button-hover-bg: #9a9f8f;
--new-button-active-bg: #9a9f8f;
--page-text-color: #222;
--page-link-color: #222;
--page-link-hover-color: #222;
--page-bg: #efefef;
--empty-page-link-color: #666;
--empty-page-link-hover-color: #666;
--logo-url: url(/assets/img/logo_gray.svg);
--line-title-color: #222;
}
body {
-webkit-font-smoothing: antialiased
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.grid li.page-list-item>ahref^="/exofex/settings" {display: none; }
.page-list .grid li.pin:nth-child(2) {display: none; }
.page {
margin: 16px;
padding: 84px 20% 10% 20% ;
box-shadow: none ;
column-count: 1;
border-radius:0;
}
@media (max-width: 767px){
.page {
margin: 4px;
padding: 48px 24px 42px 26px ;
}
}
.container {
width: 64%;
justify-content: center;
}
@media screen and (max-width: 800px) {
.container {
width: 100%;
max-width: 100%;
margin: 4px;
padding: 0 ;
}
.navbar .row .col-menu {
color:
width: auto;
}
}
.row-flex {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
@media(min-width: 768px){
.col-page-side {
width: 10px;
margin: 0;
}
}
@media(max-width: 767px) {
.col-page-side {
width: 1px;
margin: 0;
padding: 0;
}
}
@media(min-width: 768px){
.col-page {
width: 64%;
max-width: 64%;
}
}
@media (max-width: 767px)
.col-page {
width: 100%;
padding: 0 0px;!important
}
.line .telomere .telomere-border,
.line .telomere .telomere-border.unread {
transition: none;
position: relative;
border-color: #9a9f8f;
width: 1px !important;
}
@media screen and (max-width: 800px) {
.line .telomere .telomere-border,
.line .telomere .telomere-border.unread {
border-color: #efefef;
}
}
@media screen and (min-width: 1441px)
.page-list .grid li {
position: relative;
width: 16.6% ;
height: 140px;
}
}
@media screen and (max-width: 1440px) {
.page-list .grid li {
width: calc(25% - 16px);
height: 140px;
}
}
@media screen and (max-width: 800px) {
.page-list .grid li {
width: calc(50% - 16px);
margin: 0 6px 18px 6px;
}
}
.grid li.page-list-item a .header {
border: 0;
padding: 0;
}
.grid li.page-list-item a {
width: 100%;
height: 100%;
padding: 8px;
background: #efefef;
border-radius: 0;
box-shadow: none !important;
position: relative;
overflow: hidden;
border: 0px ;
}
.grid li.page-list-item a:hover {
}
.grid li.page-list-item a,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a {
background-color: #efefef ;
}
.grid li.page-list-item a::before,
.grid li.page-list-item a::after {
display: block ;
content: '' ;
position: absolute ;
}
.grid li.page-list-item a .pin {
width: 100% ;
height: 100% ;
background-image: none ;
}
.grid li.page-list-item a .pin::before,
.grid li.page-list-item a .pin::after {
display: block ;
content: '' ;
position: absolute ;
}
.page-list ul.grid {
margin: 8px;
padding: 0 30px 100px 10px ;
}
@media screen and (max-width: 800px) {
.page-list ul.grid {
padding: 0 3px 40px 3px;
}
}
.grid li.page-list-item a .content {
width: calc(100% - 10px);
height: calc(100% - 10px);
position: absolute;
padding: 8px, 16px, 16px, 16px;
}
@media screen and (max-width: 800px) {
.grid li.page-list-item a .content {
width: calc(100% - 10px);
height: calc(100% - 10px);
top: 4px;
}
}
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
z-index:2;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
max-height: 56px;
max-width: 90%;
vertical-align: middle;
border-radius: 0;
}
/*text*/
.quick-launch .project-home, .quick-launch .project-home .title {
font-family:'Helvetica', 'Arial', 'Verdana', 'Noto sans', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif !important;
font-size: 36px;
font-feature-settings: "palt" ;
position: relative;
}
@media screen and (max-width: 767px) {
.quick-launch .project-home, .quick-launch .project-home .title {
font-size: 18px;
top: 0;
margin-left:2px;
letter-spacing: 0.12em;
}
}
.text {
font-size:16px ;
font-family:'Times New Roman',"游明朝 Light", "游明朝",'YuMincho' , 'Yu Mincho' , "ヒラギノ明朝 ProN W3", "HiraMinProN-W3",'Noto Serif JP', serif !important;
letter-spacing: 0;
line-height: 1.8em ;
font-weight: 400 ;
}
@media screen and (max-width: 767px) {
.text {
font-family:'Times New Roman', 'Noto Serif JP', serif !important;
font-size:13px ;
letter-spacing: 0;
line-height: 1.8em ;
}
}
.line strong {
font-family:'Helvetica', 'Noto Sans JP', sans-serif !important;
font-weight: 400 ;
}
.line a.page-link, .line a.page-link span {
text-decoration: underline ;
}
.line a.link, .line a.link span {
text-decoration: underline ;
}
.line .quote {
font-size:12px ;
color: #444 ;
letter-spacing: 0.18em;
line-height: 22px;
background: none;
}
.app:not(.presentation) .line.line-title .text {
text-align: center;
margin-bottom: 36px;
font-size: calc(1.2vw + 2rem);
font-weight: 400 ;
line-height: calc(1.2vw + 2rem + 2px);
font-feature-settings: "palt";
letter-spacing: 0em;
color: #222; }
@media screen and (max-width: 767px) {
.line.line-title .text {
margin-bottom: 18px;
line-height: 3.6em;
font-size: 2em;
font-feature-settings: "palt";
letter-spacing: 0em;
}
}
.grid li.page-list-item a .title {
position: relative;
line-height: 24px;
margin: 8px, 8px, 0.7em, 8px;
text-align: left;
font-size: 18px ;
font-weight: 400 ;
top: 6px;
font-family:'Times New Roman', 'YuMincho' , 'Yu Mincho' , "ヒラギノ明朝 ProN W3", "HiraMinProN-W3",'Noto Serif JP', serif !important;
font-feature-settings: "palt" ;
letter-spacing: 0em ;
max-height: none;
z-index:2;
}
.grid li.page-list-item a .description {
font-family:'Times New Roman', 'YuMincho' , 'Yu Mincho' , "ヒラギノ明朝 ProN W3", "HiraMinProN-W3",'Noto Serif JP', serif !important;
padding: 0;
width: 100%;
font-size: 13px;
line-height: 1.3em ;
font-feature-settings: "palt" ;
letter-spacing: 0.16em ;
position: relative;
top: 50%;
z-index:2;
}
@media screen and (max-width: 800px) {
.grid li.page-list-item a .title {
font-family:'Times New Roman', 'Noto Serif JP', serif !important;
}
}
@media screen and (max-width: 800px) {
.grid li.page-list-item a .description {
font-family:'Times New Roman', 'Noto Serif JP', serif !important;
font-size: 10.5px;
line-height: 18px;
}
}
.navbar .row .col-menu { width: unset }
.related-page-sort-menu { color: #efefef; }
.related-page-list ul.grid {
list-style: none;
margin: 0 0px 0 32px;
padding: 0;
display: inline-block;
}
@media (max-width: 767px){
.related-page-list ul.grid {
list-style: none;
margin: 0 0px 0 4px;
padding: 0;
display: inline-block;
}
}
@media (max-width: 767px){
.related-page-list .grid li {
width: 100px;
height: 100px;
}
}
.line .indent-mark .dot:before {
display: block;
position: absolute;
right: -5px;
top: -10px;
}
.line .indent-mark .dot {
height: .3em;
width: .3em;
border-radius: 20%;
background-color: #9a9f8f
}
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }