Commit cc0bb16e authored by Isabella Skořepová's avatar Isabella Skořepová
Browse files

Further reduce amount of required css

parent 43618c2f
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"
>
......
......@@ -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"
......
......@@ -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 />
......
......@@ -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]}`
}
......@@ -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={{
......
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;