31:Tab1,{ const Caption = styled.small` font-family: "Rubik"; color: gray; ` const Viewport = styled.div` -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; display: flex; overflow: auto; ` const Body = styled.div` display: flex; min-width: 954px; min-height: 768px; background: ${colors.background}; ` const Layout = styled.div` max-width: 780px; margin: 0 auto; padding: 2em; box-sizing: border-box; background: ${colors.background}; color: ${colors.text}; font-family: "Rubik"; display: flex; flex-direction: column; justify-content: space-between; font-size: 1.0em; line-height: 1.4em; ` const Header = styled.div` font-size: 1.2em; strong { font-weight: 500; } ` const Footer = styled.div` font-size: 0.9em; ` const Main = styled.div`` const PrimaryTeaser = styled.div` font-weight: 500; font-size: 2.2em; line-height: 1.1em; letter-spacing: -0.04em; padding-bottom: 0.6em; ` const SecondaryTeaser = styled.div` font-weight: 400; font-size: 1.5em; line-height: 1.3em; letter-spacing: -0.02em; padding-bottom: 0.6em; ` const Highlight = styled.span` background: ${colors.highlight}; background: linear-gradient(to bottom, transparent 15%, ${colors.highlight} 15%, ${colors.highlight} 90%, transparent 90%); text-decoration: none; padding: 0; box-decoration-break: clone; ` const Divider = styled.hr` width: ${props => `${props.width || 50}px`}; border-color: ${colors.text}; border-bottom: 1px solid ${colors.text}; background-color: ${colors.text}; height: 0; padding: 0; margin: 8px 0; ` const app = htm` <${Caption}>Desktop or Tablet (954 × 768 px) <${Viewport}> <${Body}> <${Layout}> <${Header}>I'm Alfred E. Neumann, <${Highlight}>Software Developer.<${Divider} width="50" /> <${Main}> <${PrimaryTeaser}>Lorem ipsum dolor sit amet, <${Highlight}>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut <${Highlight}>labore et dolore magna aliqua. <${SecondaryTeaser}>Ut enim ad minim veniam, quis nostrud <${Highlight}>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <${Highlight}>reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <${Footer}><${Divider} width="100" />2020 Edition. <${Highlight}>About this Homepage. ` return React.render(app) }32:T9ca,{ const Caption = styled.small` font-family: "Rubik"; color: gray; ` const Viewport = styled.div` -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; display: flex; overflow: auto; ` const Box = styled.div` max-width: 375px; min-height: 812px; padding: 1em; background: ${colors.background}; color: ${colors.text}; font-family: "Rubik"; display: flex; flex-direction: column; justify-content: space-between; font-size: 1.0em; line-height: 1.4em; strong { font-weight: 500; } ` const Header = styled.div` font-size: 1.2em; ` const Footer = styled.div` font-size: 0.9em; ` const Main = styled.div`` const PrimaryTeaser = styled.div` font-weight: 500; font-size: 1.7em; line-height: 1.1em; letter-spacing: -0.04em; padding-bottom: 0.8em; ` const SecondaryTeaser = styled.div` font-weight: 400; font-size: 1.3em; line-height: 1.3em; letter-spacing: -0.02em; padding-bottom: 0.5em; ` const Highlight = styled.span` background: ${colors.highlight}; background: linear-gradient(to bottom, transparent 15%, ${colors.highlight} 15%, ${colors.highlight} 90%, transparent 90%); text-decoration: none; padding: 0; box-decoration-break: clone; ` const Divider = styled.hr` width: ${props => `${props.width || 50}px`}; border-color: ${colors.text}; border-bottom: 1px solid ${colors.text}; background-color: ${colors.text}; height: 0; padding: 0; margin: 8px 0; ` const app = htm` <${Caption}>Mobile (375 × 812 px) <${Viewport}> <${Box}> <${Header}>I'm Alfred E. Neumann,
<${Highlight}>Software Developer.<${Divider} width="50" /> <${Main}> <${PrimaryTeaser}>Lorem ipsum dolor sit amet, <${Highlight}>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut <${Highlight}>labore et dolore magna aliqua. <${SecondaryTeaser}>Ut enim ad minim veniam, quis nostrud <${Highlight}>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <${Highlight}>reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <${Footer}><${Divider} width="100" />2020 Edition. <${Highlight}>About this Homepage. ` return React.render(app) }33:[] 2f:{"title":"2020 Edition. Personal Homepage","cells":[{"id":0,"value":"md`# 2020 Edition. Personal Homepage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"colors = ({\n text: \"#333652\",\n background: \"#e9eaec\",\n highlight: \"#f2e39b\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { React, htm, styled } from \"@hastebrot/react\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"import { typefaceRubik } from \"@hastebrot/typography\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"typefaceRubik","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}