2b:null 2c:["$","title",null,{"children":"2020 Edition. Personal Homepage | Benjamin | Observable"}] 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:{"id":"f0fbb0c709fc1f90","slug":"2020-edition-personal-homepage","title":"2020 Edition. Personal Homepage","thumbnail":"0bd5c50efc321f2f7ed9598c2ffdb3f5a9c9d14d5d18ed28a6ff70925b8b1192","access_level":"public","create_time":"$D2020-02-21T13:14:03.320Z","update_time":"$D2020-03-27T19:51:59.043Z","view_time":null,"first_public_time":"$D2020-02-22T12:51:22.166Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":"starter_2024"},"version":659,"publish_version":659,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null}],"members":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"2020 Edition. Personal Homepage","cells":[{"id":0,"value":"md`# 2020 Edition. Personal Homepage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":599,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"colors = ({\n text: \"#333652\",\n background: \"#e9eaec\",\n highlight: \"#f2e39b\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import { React, htm, styled } from \"@hastebrot/react\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"import { typefaceRubik } from \"@hastebrot/typography\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"typefaceRubik","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"