Settings

https://i.gyazo.com/96d6b50a84f97bc6d8d952c57ef36fe2.png

CSS

-Delete dots at the beggining of lines

code:style.css

.line .dot {

display: none !important;

}

-Brand Icon

code:style.css

.brand-icon {

background-image: url(https://i.gyazo.com/8e055f69a211d96e54a89137eefdad3f.png);

}

-Title

code:style.css

.line-title {

font-size: 2.5em !important;

}

-Page list

code:style.css

.page-list .grid li {

width: 167px;

height: 216px;

}

.grid li.page-list-item a .icon img {

height: auto;

width: 1fr;

object-fit: cover;

margin: 0 auto;

}

/* devide pin and non-pin*/

.page-list-item.pin + .page-list-item:not(.pin) {

clear: both;

}

-Menu and Navbar

code:style.css

.navbar .row {

height: 55px;

}

.navbar-brand{

height: 55px;

}

.navbar-default{

background-color: #9d9b8d

}

/* プロジェクトTOPへのリンクと周辺パーツを強引にnavbarに移動 */

/* ※次のはりつくnavbarと同時に使う必要がある */

@media screen and (min-width: 768px) {

.quick-launch .project-home .title{

color : #fff }

.quick-launch .project-home {

position: fixed; top: 7px; left: calc((100% - 1080px)/2); z-index: 990}

.quick-launch .project-home:hover,.quick-launch .project-home:focus, .quick-launch .project-home:active {

color : #fff }

@media screen and (min-width: 768px) and (max-width: 991px) {

.quick-launch .project-home { left: 85px } }

@media screen and (min-width: 992px) and (max-width: 1260px) {

.quick-launch .project-home { left: 100px } }

@media screen and (min-width: 1261px) {

.quick-launch .project-home { left: calc((100% - 1260px)/2 + 100px) } }

/* はりつくnavbar */

@media screen and (min-height: 600px) and (min-width: 768px) {

.app:not(.presentation) { padding-top: 90px; padding-right: 0 !important }

.app:not(.presentation) .page-menu { position: fixed; top: 90px }

.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }

.dropdown.open .dropdown-menu {

position: absolute; left: auto; top: auto;

max-height: calc(100vh - 100px); overflow-y: auto }

.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }

.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }

-New grammar photo

code:style.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| { display: inline-flex }

.line .deco-\| img.image { object-fit: contain; margin: 0 }

/* 太字記法と組み合わせて列数を変える */

.line class^="level" .deco-\| { flex-wrap: wrap }

.line .level-1 .deco-\| > span { width: calc(100%/1) }

.line .level-2 .deco-\| > span { width: calc(100%/2) }

.line .level-3 .deco-\| > span { width: calc(100%/3) }

.line .level-4 .deco-\| > span { width: calc(100%/4) }

.line .level-5 .deco-\| > span { width: calc(100%/5) }

.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }

.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }

-New grammar

code:style.css

/* 中央寄せ */

.deco-\< { position: absolute; width: 100%; text-align: center }

/* 右寄せ */

.deco-\> { position: absolute; width: 100%; text-align: right }