diff --git a/theme-source/partials/base-body.tsx b/theme-source/partials/base-body.tsx
index fe283105c79a9502a63beb1228bed26c18ae53ed..d5a58c8de7ecb63595500acd0eae3240a5e07127 100644
--- a/theme-source/partials/base-body.tsx
+++ b/theme-source/partials/base-body.tsx
@@ -1,30 +1,38 @@
import React, { PropsWithChildren } from 'react'
+import { css } from '@emotion/react'
import { SymbolSearch, SymbolMenu, SymbolFacebook } from './svgs'
import { Search } from './search'
-import { css } from '@emotion/react'
function hideOnAndUp(px: number) {
return css`
- display: none;
+ display: none !important;
@media (max-width: ${px}px) {
- display: block;
+ display: block !important;
}
`
}
+const smallMedBreakpoint = 720
+
const hideOnSmallAndUp = hideOnAndUp(300)
-const hideOnMedAndUp = hideOnAndUp(600)
+const hideOnMedAndUp = hideOnAndUp(smallMedBreakpoint)
const hideOnUltraSmall = css`
@media (max-width: 330px) {
display: none !important;
}
`
const hideOnSmallAndDown = css`
- @media (max-width: 600px) {
+ @media (max-width: ${smallMedBreakpoint}px) {
display: none !important;
}
`
+const subnav = css`
+ a:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+`
+
export function BaseBody({
config,
children,
@@ -33,24 +41,61 @@ export function BaseBody({
<div id="all">
{/* Top nav */}
<nav
- className="supernav"
role="navigation"
- style={{ zIndex: 5, position: 'absolute' }}
+ css={{
+ zIndex: 5,
+ position: 'absolute',
+ height: 64,
+ backgroundColor: '#03a9f4',
+ [`@media (max-width: ${smallMedBreakpoint}px)`]: { height: 56 },
+ }}
>
- <div className="nav-wrapper container">
+ <div
+ css={css`
+ display: flex;
+ width: 86%;
+ max-width: 1280px;
+ margin: 0 auto;
+ max-height: 100%;
+ `}
+ >
<a
data-activates="nav-mobile"
- css={hideOnMedAndUp}
- className="menu-icon"
- style={{ float: 'left' }}
+ css={[
+ css`
+ width: 56px;
+ height: 56px;
+ display: none;
+ @media (max-width: ${smallMedBreakpoint}px) {
+ display: flex;
+ }
+ cursor: pointer;
+ align-items: center;
+ justify-content: center;
+ :hover {
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+ svg {
+ display: block;
+ }
+ `,
+ ]}
>
- <SymbolMenu color="#fff" size={false} />
+ <SymbolMenu color="#fff" size="30px" />
</a>
- <div style={{ zIndex: 2 }} className="brand-logo">
- <a id="logo-container" href="/tag/vse/1/">
+ <div css={{ flexGrow: 1 }}>
+ <a href="/tag/vse/1/">
<img css={hideOnSmallAndUp} src="/theme/icon56.png" />
<img
- css={[hideOnMedAndUp, hideOnUltraSmall]}
+ css={[
+ hideOnMedAndUp,
+ hideOnUltraSmall,
+ css`
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ `,
+ ]}
src="/theme/logo56.png"
/>
<img
@@ -60,19 +105,30 @@ export function BaseBody({
/>
</a>
</div>
- <div className="toplinks">
- <a css={hideOnSmallAndDown} className="left" id="aktuality">
+ <div
+ css={css`
+ display: flex;
+ align-items: stretch;
+ > a {
+ padding: 0 15px;
+ height: 64px;
+ line-height: 64px;
+ cursor: pointer;
+ :hover {
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+ }
+ `}
+ >
+ <a css={hideOnSmallAndDown} id="aktuality">
Aktuality
</a>
- <a css={hideOnSmallAndDown} className="left" id="clanky">
+ <a css={hideOnSmallAndDown} id="clanky">
Články
</a>
- <a css={hideOnSmallAndDown} className="left" id="o-nas">
+ <a css={hideOnSmallAndDown} id="o-nas">
O nás
</a>
- <a className="search-icon left">
- <SymbolSearch color="#fff" size={false} />
- </a>
</div>
</div>
</nav>
@@ -113,12 +169,48 @@ export function BaseBody({
$("body").removeClass("show-subnav2").removeClass("show-subnav1");
}
});
+ for(var a of document.querySelectorAll("[data-activates]")) {
+ a.addEventListener("click", function(evt) {
+ evt.preventDefault()
+ var target = document.getElementById(a.dataset.activates)
+ var oldTransform = target.style.transform
+ var oldPointerEvents = target.style.pointerEvents
+ target.style.transform = "translateX(0px)"
+ target.style.pointerEvents = 'all'
+ var overlay = document.createElement('div')
+ overlay.style.opacity = 0
+ overlay.style.transition = 'opacity 0.5s'
+ overlay.id = 'sidenav-overlay'
+ document.body.appendChild(overlay)
+ overlay.style.opacity = 1
+ overlay.addEventListener('click', function() {
+ setTimeout(function () {
+ document.body.removeChild(overlay)
+ }, 1000)
+ overlay.style.opacity = 0
+ overlay.style.pointerEvents = 'none'
+ target.style.transform = oldTransform
+ target.style.pointerEvents = oldPointerEvents
+ })
+ })
+ }
});
`,
}}
/>
{/* Side nav */}
- <ul id="nav-mobile" className="side-nav collapsible">
+ <ul
+ id="nav-mobile"
+ className="side-nav collapsible"
+ css={css`
+ transition: transform 0.5s ease;
+ `}
+ style={{
+ transform: 'translateX(-250px)',
+ pointerEvents: 'none',
+ left: 0,
+ }}
+ >
<li className="no-padding">
<a className="collapsible-header waves-effect waves-teal">
Aktuality
@@ -188,7 +280,7 @@ export function BaseBody({
{/* Lower nav */}
<nav
- css={hideOnSmallAndDown}
+ css={[hideOnSmallAndDown, subnav]}
className="subnav subnav1"
role="navigation"
>
@@ -211,7 +303,7 @@ export function BaseBody({
</nav>
{/* Lower nav 2 - Aktuality */}
<nav
- css={hideOnSmallAndDown}
+ css={[hideOnSmallAndDown, subnav]}
className="subnav subnav2"
role="navigation"
>
@@ -234,7 +326,7 @@ export function BaseBody({
</nav>
{/* Lower nav 3 - Články */}
<nav
- css={hideOnSmallAndDown}
+ css={[hideOnSmallAndDown, subnav]}
className="subnav subnav3"
role="navigation"
>
diff --git a/theme-source/partials/html.js b/theme-source/partials/html.js
index 0b453e2d2cdcc9dac2813a6897074afd6be69b16..0a452eef481e023f1586d5fa03edf863c5a1a7c6 100644
--- a/theme-source/partials/html.js
+++ b/theme-source/partials/html.js
@@ -38,12 +38,7 @@ export function Html({
rel="stylesheet"
type="text/css"
/>
- <link
- href="/theme/style.css?v=2"
- type="text/css"
- rel="stylesheet"
- media="screen,projection"
- />
+
<link
href="/theme/highlight.css"
type="text/css"
diff --git a/theme-source/partials/list.tsx b/theme-source/partials/list.tsx
index 4d54ca4bca6f9dd1443e18bb1d7b1aa0731de561..26675edcf9416d41b7d93e85263000ac48dbd82d 100644
--- a/theme-source/partials/list.tsx
+++ b/theme-source/partials/list.tsx
@@ -78,7 +78,18 @@ export function List({ subtags, tag, content, metadata, file, config }) {
<div css={hideOnSmallAndDown}>
{metadata.prevurl && (
- <div style={{ left: 0 }} className="sidelink sidelink-l">
+ <div
+ css={css`
+ left: 0;
+ :hover {
+ background-color: #47c4fd;
+ path {
+ fill: #fff;
+ }
+ }
+ `}
+ className="sidelink sidelink-l"
+ >
<a href={`/${metadata.prevurl}`}>
<div>
<SymbolBackward />
@@ -87,7 +98,18 @@ export function List({ subtags, tag, content, metadata, file, config }) {
</div>
)}
{metadata.nexturl && (
- <div style={{ right: 0 }} className="sidelink sidelink-r">
+ <div
+ css={css`
+ right: 0;
+ :hover {
+ background-color: #47c4fd;
+ path {
+ fill: #fff;
+ }
+ }
+ `}
+ className="sidelink sidelink-r"
+ >
<a href={`/${metadata.nexturl}`}>
<div>
<SymbolForward />
diff --git a/theme-source/render-to-string.tsx b/theme-source/render-to-string.tsx
index fd3070200d8788f50dc0deed72ac61b044b0216a..db44479ad49e468cfcd046ab64726ea6dce82419 100644
--- a/theme-source/render-to-string.tsx
+++ b/theme-source/render-to-string.tsx
@@ -24,5 +24,5 @@ export function renderToString(Component: JSX.Element, htmlProps: any) {
{delimiter}
</Html>,
).split(delimiter)
- return '<!DOCTYPE html>\n' + html[0] + content + html[1]
+ return `<!DOCTYPE html>\n${html[0]}${content}${html[1]}`
}
diff --git a/theme-source/templates/article.tsx b/theme-source/templates/article.tsx
index 0dc951c180c483e9489ca340c5b705655445395f..33465ef7e421c57197641d7d7763a818dde16414 100644
--- a/theme-source/templates/article.tsx
+++ b/theme-source/templates/article.tsx
@@ -43,6 +43,12 @@ export default {
),
head: (
<>
+ <link
+ href="/theme/style.css?v=2"
+ type="text/css"
+ rel="stylesheet"
+ media="screen,projection"
+ />
<script
type="text/x-mathjax-config"
dangerouslySetInnerHTML={{
diff --git a/theme-source/templates/tag.tsx b/theme-source/templates/tag.tsx
index e1b120d9540c69548ce9a7f1cd14a3ca031f6f07..0ae13c464988d34ca152242a53f6968beefebe52 100644
--- a/theme-source/templates/tag.tsx
+++ b/theme-source/templates/tag.tsx
@@ -1,4 +1,5 @@
import React from 'react'
+import { Global, css } from '@emotion/react'
import { BaseBody } from '../partials/base-body'
import { List as ListPartial } from '../partials/list'
import { renderToString } from '../render-to-string'
@@ -8,9 +9,771 @@ export default {
value: props => {
return renderToString(
<BaseBody config={props.config}>
+ <TagGlobalStyles />
<ListPartial {...props} />
</BaseBody>,
{ ...props, head: <meta property="og:type" content="website" /> },
)
},
}
+
+function TagGlobalStyles() {
+ return (
+ <Global
+ styles={css`
+ .blue {
+ background-color: #2196f3 !important;
+ }
+
+ .orange-text.text-lighten-3 {
+ color: #ffcc80 !important;
+ }
+
+ .orange-text {
+ color: #ff9800 !important;
+ }
+
+ /*$small-screen: 650px;
+ $small-screen-up: 651px;*/
+ /*** Colors ***/
+ /*** Badges ***/
+ /*** Buttons ***/
+ /*** Cards ***/
+ /*** Collapsible ***/
+ /*** Chips ***/
+ /*** Date Picker ***/
+ /*** Dropdown ***/
+ /*** Fonts ***/
+ /*** Forms ***/
+ /*** Global ***/
+ /*** Navbar ***/
+ /*** SideNav ***/
+ /*** Photo Slider ***/
+ /*** Spinners | Loaders ***/
+ /*** Tabs ***/
+ /*** Tables ***/
+ /*** Toasts ***/
+ /*** Typography ***/
+ /*** Collections ***/
+ /* Progress Bar */
+ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+ /**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ * user zoom.
+ */
+ html {
+ font-family: sans-serif;
+ /* 1 */
+ -ms-text-size-adjust: 100%;
+ /* 2 */
+ -webkit-text-size-adjust: 100%;
+ /* 2 */
+ }
+
+ /**
+ * Remove default margin.
+ */
+ body {
+ margin: 0;
+ }
+
+ /* HTML5 display definitions
+ ========================================================================== */
+ /**
+ * Correct block display not defined for any HTML5 element in IE 8/9.
+ * Correct block display not defined for details or summary in IE 10/11
+ * and Firefox.
+ * Correct block display not defined for main in IE 11.
+ */
+ article,
+ aside,
+ details,
+ figcaption,
+ figure,
+ footer,
+ header,
+ hgroup,
+ main,
+ menu,
+ nav,
+ section,
+ summary {
+ display: block;
+ }
+
+ /* Links
+ ========================================================================== */
+ /**
+ * Remove the gray background color from active links in IE 10.
+ */
+ a {
+ background-color: transparent;
+ }
+
+ /**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+ a:active,
+ a:hover {
+ outline: 0;
+ }
+
+ /* Embedded content
+ ========================================================================== */
+ /**
+ * Remove border when inside a element in IE 8/9/10.
+ */
+ img {
+ border: 0;
+ }
+
+ /**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+ svg:not(:root) {
+ overflow: hidden;
+ }
+
+ /* Forms
+ ========================================================================== */
+ /**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of select, unless a border property is set.
+ */
+ /**
+ * 1. Correct color not being inherited.
+ * Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+ button,
+ input,
+ optgroup,
+ select,
+ textarea {
+ color: inherit;
+ /* 1 */
+ font: inherit;
+ /* 2 */
+ margin: 0;
+ /* 3 */
+ }
+
+ /* Tables
+ ========================================================================== */
+ /**
+ * Remove most spacing between table cells.
+ */
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+
+ td,
+ th {
+ padding: 0;
+ }
+
+ html {
+ box-sizing: border-box;
+ }
+
+ *,
+ *:before,
+ *:after {
+ box-sizing: inherit;
+ }
+
+ ul {
+ list-style-type: none;
+ }
+
+ a {
+ color: #039be5;
+ text-decoration: none;
+ -webkit-tap-highlight-color: transparent;
+ }
+
+ ul {
+ padding: 0;
+ }
+ ul li {
+ list-style-type: none;
+ }
+
+ .z-depth-1,
+ nav,
+ .card-panel,
+ .card,
+ .toast,
+ .btn,
+ .btn-large,
+ .btn-floating,
+ .dropdown-content,
+ .collapsible,
+ .side-nav {
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
+ 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+ }
+
+ .pagination li {
+ display: inline-block;
+ font-size: 1.2rem;
+ padding: 0 10px;
+ line-height: 30px;
+ border-radius: 2px;
+ text-align: center;
+ }
+ .pagination li a {
+ color: #444;
+ }
+ .pagination li.active a {
+ color: #fff;
+ }
+ .pagination li.active {
+ background-color: #03a9f4;
+ }
+
+ @media only screen and (max-width: 992px) {
+ .pagination {
+ width: 100%;
+ }
+ }
+
+ .breadcrumb {
+ font-size: 18px;
+ color: rgba(255, 255, 255, 0.7);
+ }
+ .breadcrumb:before {
+ content: '\E5CC';
+ color: rgba(255, 255, 255, 0.7);
+ vertical-align: top;
+ display: inline-block;
+ font-family: 'Material Icons';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 25px;
+ margin: 0 10px 0 8px;
+ -webkit-font-smoothing: antialiased;
+ }
+ .breadcrumb:first-child:before {
+ display: none;
+ }
+
+ footer.page-footer {
+ margin-top: 20px;
+ padding-top: 20px;
+ background-color: #03a9f4;
+ }
+
+ table,
+ th,
+ td {
+ border: none;
+ }
+
+ table {
+ width: 100%;
+ display: table;
+ }
+
+ td,
+ th {
+ padding: 15px 5px;
+ display: table-cell;
+ text-align: left;
+ vertical-align: middle;
+ border-radius: 2px;
+ }
+
+ .left {
+ float: left !important;
+ }
+
+ .right {
+ float: right !important;
+ }
+
+ .no-padding {
+ padding: 0 !important;
+ }
+
+ .container {
+ margin: 0 auto;
+ max-width: 1280px;
+ width: 90%;
+ }
+
+ @media only screen and (min-width: 601px) {
+ .container {
+ width: 85%;
+ }
+ }
+
+ @media only screen and (min-width: 993px) {
+ .container {
+ width: 70%;
+ }
+ }
+
+ .container .row {
+ margin-left: -0.75rem;
+ margin-right: -0.75rem;
+ }
+
+ .section {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+
+ .row {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 20px;
+ }
+ .row:after {
+ content: '';
+ display: table;
+ clear: both;
+ }
+ .row .col {
+ float: left;
+ box-sizing: border-box;
+ padding: 0 0.75rem;
+ }
+
+ nav {
+ color: #fff;
+ background-color: #03a9f4;
+ width: 100%;
+ height: 56px;
+ line-height: 56px;
+ }
+ nav a {
+ color: #fff;
+ }
+ nav .nav-wrapper {
+ position: relative;
+ height: 100%;
+ }
+
+ nav .brand-logo {
+ position: absolute;
+ color: #fff;
+ display: inline-block;
+ font-size: 2.1rem;
+ padding: 0;
+ white-space: nowrap;
+ }
+ @media only screen and (max-width: 992px) {
+ nav .brand-logo {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+ nav ul {
+ margin: 0;
+ }
+ nav ul li {
+ transition: background-color 0.3s;
+ float: left;
+ padding: 0;
+ }
+ nav ul a {
+ transition: background-color 0.3s;
+ font-size: 1rem;
+ color: #fff;
+ display: block;
+ padding: 0 15px;
+ cursor: pointer;
+ }
+
+ @media only screen and (min-width: 601px) {
+ nav,
+ nav .nav-wrapper i,
+ nav a.button-collapse,
+ nav a.button-collapse i {
+ height: 64px;
+ line-height: 64px;
+ }
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ html {
+ line-height: 1.5;
+ font-family: 'Roboto', sans-serif;
+ font-weight: normal;
+ color: rgba(0, 0, 0, 0.87);
+ }
+ @media only screen and (min-width: 0) {
+ html {
+ font-size: 14px;
+ }
+ }
+ @media only screen and (min-width: 992px) {
+ html {
+ font-size: 14.5px;
+ }
+ }
+ @media only screen and (min-width: 1200px) {
+ html {
+ font-size: 15px;
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-weight: 400;
+ line-height: 1.1;
+ }
+
+ h5 {
+ font-size: 1.64rem;
+ line-height: 110%;
+ margin: 0.82rem 0 0.656rem 0;
+ }
+
+ /*!
+ * Waves v0.6.0
+ * http://fian.my.id/Waves
+ *
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
+ * Released under the MIT license
+ * https://github.com/fians/Waves/blob/master/LICENSE
+ */
+ .waves-effect {
+ position: relative;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+ vertical-align: middle;
+ z-index: 1;
+ will-change: opacity, transform;
+ transition: all 0.3s ease-out;
+ }
+
+ .collapsible {
+ border-top: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+ border-left: 1px solid #ddd;
+ margin: 0.5rem 0 1rem 0;
+ }
+
+ .collapsible-header {
+ display: block;
+ cursor: pointer;
+ min-height: 3rem;
+ line-height: 3rem;
+ padding: 0 1rem;
+ background-color: #fff;
+ border-bottom: 1px solid #ddd;
+ }
+
+ .collapsible-body {
+ display: none;
+ border-bottom: 1px solid #ddd;
+ box-sizing: border-box;
+ }
+
+ .side-nav .collapsible-header {
+ background-color: transparent;
+ border: none;
+ line-height: inherit;
+ height: inherit;
+ margin: 0 1rem;
+ }
+
+ .side-nav .collapsible-body {
+ border: 0;
+ background-color: #fff;
+ }
+
+ .chip {
+ display: inline-block;
+ height: 32px;
+ font-size: 13px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+ line-height: 32px;
+ padding: 0 12px;
+ border-radius: 16px;
+ background-color: #e4e4e4;
+ }
+
+ /***************************
+ Text Inputs + Textarea
+ ****************************/
+ ::-webkit-input-placeholder {
+ color: #d1d1d1;
+ }
+
+ :-moz-placeholder {
+ /* Firefox 18- */
+ color: #d1d1d1;
+ }
+
+ ::-moz-placeholder {
+ /* Firefox 19+ */
+ color: #d1d1d1;
+ }
+
+ :-ms-input-placeholder {
+ color: #d1d1d1;
+ }
+
+ input:not([type]),
+ input[type='text'],
+ input[type='password'],
+ input[type='email'],
+ input[type='url'],
+ input[type='time'],
+ input[type='date'],
+ input[type='datetime-local'],
+ input[type='tel'],
+ input[type='number'],
+ input[type='search'],
+ textarea.materialize-textarea {
+ background-color: transparent;
+ border: none;
+ border-bottom: 1px solid #9e9e9e;
+ border-radius: 0;
+ outline: none;
+ height: 3rem;
+ width: 100%;
+ font-size: 1rem;
+ margin: 0 0 15px 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: content-box;
+ transition: all 0.3s;
+ }
+
+ .hiddendiv {
+ display: none;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ /* future version of deprecated 'word-wrap' */
+ padding-top: 1.2rem;
+ /* prevents text jump on Enter keypress */
+ }
+
+ .side-nav {
+ position: fixed;
+ width: 240px;
+ left: -105%;
+ top: 0;
+ margin: 0;
+ height: 100%;
+ height: calc(100% + 60px);
+ height: -moz-calc(100%);
+ padding-bottom: 60px;
+ background-color: #fff;
+ z-index: 999;
+ overflow-y: auto;
+ will-change: left;
+ }
+ .side-nav li {
+ float: none;
+ padding: 0 15px;
+ line-height: 64px;
+ }
+ .side-nav li:hover,
+ .side-nav li.active {
+ background-color: #ddd;
+ }
+ .side-nav a {
+ color: #444;
+ display: block;
+ font-size: 1rem;
+ height: 64px;
+ line-height: 64px;
+ padding: 0 15px;
+ }
+
+ .drag-target {
+ height: 100%;
+ width: 10px;
+ position: fixed;
+ top: 0;
+ z-index: 998;
+ }
+
+ #sidenav-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 120vh;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 997;
+ will-change: opacity;
+ }
+
+ /* overall page look */
+ #content,
+ .container.nav-wrapper {
+ width: 86%;
+ }
+
+ html {
+ font-size: 16px;
+ }
+
+ /* footer always at bottom */
+ footer.page-footer {
+ width: 100%;
+ padding-top: 0px;
+ position: absolute;
+ bottom: 0px;
+ height: 85px;
+ line-height: 35px;
+ padding: 5px 0 10px 0;
+ color: white;
+ }
+
+ #all {
+ background-color: #fafafa;
+ position: relative;
+ overflow-y: hidden;
+ min-height: 100vh;
+ }
+
+ #content,
+ #search {
+ padding-bottom: 20px;
+ padding-top: 70px;
+ margin: 0 auto;
+ }
+
+ html,
+ body {
+ min-height: 100vh;
+ }
+
+ /* side links */
+ .sidelink {
+ height: 100%;
+ width: 45px;
+ top: 0px;
+ position: absolute;
+ }
+
+ .sidelink svg {
+ fill: #03a9f4;
+ }
+
+ .sidelink-r svg {
+ position: fixed;
+ top: 50%;
+ right: 10px;
+ }
+ .sidelink-l svg {
+ position: fixed;
+ top: 50%;
+ left: 10px;
+ }
+
+ .sidelink div {
+ width: 100%;
+ height: 100%;
+ }
+
+ nav.subnav {
+ background-color: #47c4fd;
+ margin-top: -16px;
+ transition: 0.3s;
+ height: 40px;
+ position: absolute;
+ }
+
+ .show-subnav1 nav.subnav1,
+ .show-subnav2 nav.subnav2,
+ .show-subnav3 nav.subnav3 {
+ transition: 0.3s;
+ margin-top: 64px;
+ z-index: 4;
+ }
+
+ nav.subnav li {
+ height: 40px;
+ line-height: 40px;
+ }
+
+ .toplinks > a,
+ .menu-icon {
+ display: block;
+ padding: 0 15px;
+ line-height: 64px;
+ cursor: pointer;
+ }
+
+ .toplinks > a:hover,
+ .menu-icon:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+
+ .toplinks {
+ z-index: 3;
+ position: absolute;
+ right: 0;
+ }
+
+ .breadcrumb,
+ .breadcrumb:last-child {
+ color: rgba(0, 0, 0, 0.7);
+ }
+
+ .search-icon svg,
+ .menu-icon svg {
+ height: 64px;
+ width: 30px;
+ }
+
+ .search-icon,
+ .menu-icon {
+ height: 64px;
+ }
+
+ @media only screen and (max-width: 600px) {
+ .search-icon svg,
+ .menu-icon svg {
+ height: 56px;
+ }
+ .toplinks > a,
+ .search-icon,
+ .menu-icon {
+ height: 56px;
+ }
+ }
+
+ /* Bottom nav */
+ .pagination li {
+ padding: 0px;
+ }
+
+ .pagination li a {
+ padding: 0px 10px;
+ }
+
+ /* Side nav */
+ .side-nav a.collapsible-header {
+ margin: 0;
+ }
+ `}
+ />
+ )
+}