diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue index a6276a2..847f339 100644 --- a/src/components/FluxNote.vue +++ b/src/components/FluxNote.vue @@ -193,26 +193,26 @@ $header-height: 40px; } } - // @media screen and (min-width: 769px) { - // .repo-title-breadcrumb { - // padding: 0.5rem 1rem 0; - // transform-origin: 0 0; - // transform: rotate(90deg); - // font-size: 0.8em; + @media screen and (min-width: 769px) { + .repo-title-breadcrumb { + padding: 0.5rem 1rem 0; + transform-origin: 0 0; + transform: rotate(90deg); + font-size: 0.8em; - // a { - // color: var(--font-color); - // display: block; - // text-align: center; - // } - // } + a { + color: var(--font-color); + display: block; + text-align: center; + } + } - // .note { - // min-width: var(--note-width); - // max-width: var(--note-width); - // height: auto; - // } - // } + .note { + min-width: var(--note-width); + max-width: var(--note-width); + height: auto; + } + } .loading { display: flex; @@ -226,7 +226,7 @@ $header-height: 40px; } } -@media print, screen { +@media print { .readme { position: static; } diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue index 47878f4..781c184 100644 --- a/src/components/StackedNote.vue +++ b/src/components/StackedNote.vue @@ -102,6 +102,7 @@ $border-color: rgba(18, 19, 58, 0.2); .title-stacked-note { background-color: var(--background-color); position: sticky; + top: 0; font-size: 0.8em; @@ -113,6 +114,8 @@ $border-color: rgba(18, 19, 58, 0.2); .share { float: right; + margin: 0.2rem; + img { vertical-align: bottom; } @@ -155,4 +158,14 @@ $border-color: rgba(18, 19, 58, 0.2); white-space: nowrap; } } + +@media print { + .stacked-note { + break-after: always; + + &.overlay { + box-shadow: none; + } + } +} diff --git a/src/styles/app.scss b/src/styles/app.scss index b3c315c..f8f8352 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -35,18 +35,10 @@ body { font-size: 1.2em; } -// @media screen and (min-width: 769px) { -// html, -// body { -// overflow-y: hidden; -// } -// } - -@media print, screen { +@media screen and (min-width: 769px) { html, body { - overflow-y: auto; - height: auto; + overflow-y: hidden; } } @@ -84,3 +76,15 @@ a { .notif-success { background-color: $link; } + +@media print { + html, + body { + overflow-y: auto; + height: auto; + } + + #app { + height: auto; + } +}