// normalerweise würdest du in etwa so anfangen:
// import glamorous from 'glamorous'

const mediaQueries = {
	phone: '@media only screen and (max-width: 500px)',
}



const Heading = glamorous.h1({

})



const Link = glamorous.a({

})



const ListItem = glamorous.li({

})



const CodeBlock = glamorous.pre({

})



// du kannst diese hier auch ausprobieren, wenn du möchtest

const Paragraph = glamorous.p({

})

const Code = glamorous.code({

})

const List = glamorous.ul({

})


render(
	<ReactMarkdown
		renderers={{
			Heading,
			Link,
			Paragraph,
			Code,
			CodeBlock: props => (
				<CodeBlock
					key={props.nodeKey}
					language={props.language}
					className={`language-${props.language} ${props.className}`}
				>
					<Code>
						{props.literal}
					</Code>
				</CodeBlock>
			),
			List,
			Item: ListItem,
		}}
	/>
)

Sorry, es sieht danach aus, dass dein Bildschirm ein wenig zu schmal ist, um den Editor zu benutzen. Lies dir ruhig das Tutorial durch und schaue dir die Seite auf einem größeren Bildschirm an, wenn du selbst Sachen ausprobieren möchtest.

Hallo 👋

Wir werden dir glamorous näherbringen, indem du das Tuturial bearbeitest, welches du gerade liest 😱

Um zu beginnen, haben wir links bereits ein paar Komponenten für dich bereitgestellt, also musst du nur deren Stile anpassen, um die Art und Weise, wie dieser Guide aussieht und sich bewegt, zu verändern.

Grundstile

Lass uns damit beginnen, die Überschriften dieser Seite zu verschönern. Mit glamorous nutzen wir normale JavaScript Objekte anstatt der regulären CSS-Syntax, mit der du vielleicht vertraut bist.

Ändere das Heading hierzu:

const Heading = glamorous.h1({
  fontSize: '2.4em',
  marginTop: 10,
  color: '#CC3A4B',
})

Media Queries

Wir wollen die Überschriften schrumpfen lassen, wenn der Darstellungsbereich schmaler wird (wie auf mobilen Endgeräten).

Aktualisiere das Heading zu:

const Heading = glamorous.h1({
  fontSize: '2.4em',
  marginTop: 10,
  color: '#CC3A4B',
  [mediaQueries.phone]: {
    fontSize: '1.8em',
    backgroundColor: '#CC3A4B',
    color: 'white'
  },
})

Ändere jetzt die Browsergröße, um die Änderungen zu sehen.

Pseudo-Klassen

Hier haben wir einen Link. Lass uns seine Pseudo-Klassen wie active, visited und hover anpassen.

Aktualisiere den Link zu:

const Link = glamorous.a({
  ':visited': {
    color: 'darkblue',
  },
  ':hover,:active,:focus': {
    color: 'darkred',
  },
})

Hast du diesen Link schon mal besucht? 😈

Pseudo-Elemente

dies
ist
eine
Liste

Nun verändern wir, wie die Einträge gerendert werden, indem wir die Pseudo-Elemente anpassen.

const ListItem = glamorous.li({
  ':before': {
    content: '"💎"',
  }
})

Anmerkung! In CSS vergisst man häufig, dass die content-Eigenschaft von Anführungszeichen umschlossen wird. Obwohl man dies eigentlich tut, weil man content einen String zuweist, muss dieser die Anführungszeichen enthalten, welche in das CSS eingefügt werden.

Dynamische Stile

Du kannst eine Funktion als Argument an eine glamorousComponentFactory übergeben. (So heißt übrigens glamorous.h1). Diese Funktion wird mit props aufgerufen.

Die CodeBlock-Komponente erhält die language als prop. Hier ist der Codeblock als html:

<html>
<head>
  <title>Hello world!</title>
</head>
<body>
  Hello world!
</body>
</html>

Nun lass uns das Aussehen von html-Codeblöcken verändern:

const CodeBlock = glamorous.pre(props => {
  const isHTML = props.language === 'html'
  if (isHTML) {
    return {
      padding: 20,
      backgroundColor: '#0c1e35',
    }
  }
})

Stile verbinden

glamorous benutzt glamor, um das CSS zu generieren und einzufügen, welches du schreibst. Eine der tollen Eigenschaften von glamor ist die Möglichkeit der Komposition. Also kannst du mit glamorousComponentFactory-Funktionen (wie beispielsweise glamorous.pre) beliebig viele Argumente übergeben und die Stile werden kombiniert. Zusätzlich kannst du für dynamische Stile Arrays übergeben oder zurückgeben, welche ebenfalls zusammengefügt werden (wobei im Falle eines Konflikts der letztere gewinnt). Probieren wir einiges davon mal aus:

Ändere CodeBlock hierzu:

const CodeBlock = glamorous.pre({
  position: 'relative',
  padding: 20,
  ':before': {
    position: 'absolute',
    top: '0',
    opacity: '0.6',
    left: '7px',
    fontSize: '0.8rem',
  },
}, props => {
  const isHTML = props.language === 'html'
  let styles = [
    {
      ':before': {
        content: `"${props.language}"`,
      }
    }
  ]
  if (isHTML) {
    styles.push({
      backgroundColor: '#0c1e35',
    })
  }
  // Hier wird ein Array zurückgegeben.
  return styles
})

Das war's!

Das ist alles, was wir bis jetzt haben, aber wenn du zu diesem Guide beitragen möchtest, wäre das super! Schau dir doch dazu das GitHub Projekt an.