yitsushi · August 6, 2014 18:27
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <html lang="hu">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="app.css">
  <title>CSS-ben :target?</title>
 </head>
 <body>
  <nav>
    <a href='#a1'>Hogyan?</a>
    <a href='#a2'>Mikor?</a>
    <a href='#a3'>Merre?</a>
    <a href='#a4'>Mit?</a>
  </nav>

  <section>
    <article id='a1'>
      <header>
        <h2><a href='#a1'>Hogyan?</a></h2>
      </header>
      <p>Bacon ipsum dolor sit amet pastrami meatball drumstick, bacon pork
        sausage kielbasa ground round frankfurter jerky t-bone tongue shankle.
        Frankfurter shoulder chicken, short loin tenderloin strip steak ball
        tip. Pancetta jowl bacon strip steak frankfurter turkey. Strip steak
        meatball pork chop, bacon shankle pastrami tenderloin corned beef jerky
        brisket. Beef ribs hamburger swine short ribs ground round turkey.</p>
    </article>

    <article id='a2'>
      <header>
        <h2><a href='#a2'>Mikor?</a></h2>
      </header>
      <p>Pancetta hamburger shankle corned beef. Short ribs flank shank
        tenderloin ham hock. Doner tail cow chuck pancetta, frankfurter
        tongue shoulder turducken filet mignon meatloaf venison. T-bone
        biltong brisket kielbasa pork belly ham boudin tri-tip drumstick
        turducken jowl pork loin. Shank leberkas biltong, ribeye corned
        beef prosciutto venison. Fatback filet mignon ham hock, kielbasa
        tongue hamburger doner beef ribs pork loin tenderloin shank
        bresaola capicola corned beef. Flank tri-tip meatloaf, andouille
        turkey fatback ball tip short ribs turducken spare ribs beef ribs
        kielbasa bacon hamburger.</p>
    </article>

    <article id='a3'>
      <header>
        <h2><a href='#a3'>Merre?</a></h2>
      </header>
      <p>Turducken shankle meatloaf ham, tail cow fatback chuck sirloin
        capicola flank. Pork belly chicken venison strip steak shankle ham
        hock tongue pastrami chuck. Sausage beef kielbasa ribeye. Sirloin
        brisket beef, hamburger ribeye rump tongue. Pig swine brisket,
        salami meatball beef ribs t-bone biltong.</p>
    </article>

    <article id='a4'>
      <header>
        <h2><a href='#a4'>Mit?</a></h2>
      </header>
      <p>Kielbasa drumstick biltong frankfurter salami chuck jerky swine
        venison meatloaf hamburger tongue prosciutto. Shankle frankfurter
        meatball cow bacon, ham hock short loin prosciutto. Beef ribs ribeye
        bresaola, hamburger shankle leberkas doner frankfurter venison
        kielbasa prosciutto spare ribs. Short loin cow ribeye short ribs pig
        drumstick boudin bacon tail pancetta strip steak. Chuck short loin
        kielbasa tail. Pig pork loin andouille, kielbasa short loin bacon pork
        chop strip steak beef ribs pork belly.</p>
    </article>
  </section>
 </body>
 </html>
diff --git a/main.css b/main.css
 /* ez csak mert jól néz ki */
 * {
  -webkit-transition: -webkit-transform .1s ease-in-out;
  -moz-transition: -moz-transform .1s ease-in-out;
  -o-transition: -o-transform .1s ease-in-out;
  transition: transform .1s ease-in-out;
 }

 /* Nem néz ki szépen, de legalább valahogyan :) */
 html, body {
  font-family: verdana;
  font-size: 11px;
 }

 nav {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: white;
  border-bottom: 1px solid #eee;
  padding: 5px;
 }

 nav a {
  color: #a00;
  padding: 2px 5px;
  font-size: 1.2em;
  background-color: #fee;
  border-radius: 3px;
  margin: 5px;
  text-decoration: none;
 }

 nav a:hover {
  background-color: black;
  color: white;
 }

 section {
  margin-top: 40px;
 }

 section article {
  width: 80%;
  margin: 5px auto;
  color: #aaa;
  opacity: 0.8;
 }
 section article header {
  margin-bottom: 5px;
 }
 section article header, section article header a {
  color: #777;
  background-color: #eee;
  border-radius: 5px;
  text-decoration: none;
 }

 section article header h2 {
  font-size: 1.2em;
  padding: 2px;
 }

 section article header h2:before {
  content: "ݨ ";
  color: #ccc;
  margin-left: 5px;
  margin-right: 3px;
 }

 section article p {
  display: none;
  padding: 5px 10px;
 }

 /* Nah kérem szépen itt a varázslat */
 section article:target {
  color: black;
  margin-top: 20px;
  margin-bottom: 20px;
  -webkit-transform: scale(1.08);
  -moz-transform: scale(1.08);
  -o-transform: scale(1.08);
  transform: scale(1.08);
  opacity: 1;
 }

 section article:target header {
  color: black;
  font-size: 1.3em;
 }

 section article:target header a {
  color: black;
 }

 section article:target header h2:before {
  color: #777;
 }

 section article:target p {
  display: block;
 }

 section article:target + article p {
  display: block;
 }

 section article:target + article {
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -o-transform: scale(1.04);
  transform: scale(1.04);
 }
	<!DOCTYPE HTML>
	<html lang="hu">
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="app.css">
	<title>CSS-ben :target?</title>
	</head>
	<body>
	<nav>
	<a href='#a1'>Hogyan?</a>
	<a href='#a2'>Mikor?</a>
	<a href='#a3'>Merre?</a>
	<a href='#a4'>Mit?</a>
	</nav>

	<section>
	<article id='a1'>
	<header>
	<h2><a href='#a1'>Hogyan?</a></h2>
	</header>
	<p>Bacon ipsum dolor sit amet pastrami meatball drumstick, bacon pork
	sausage kielbasa ground round frankfurter jerky t-bone tongue shankle.
	Frankfurter shoulder chicken, short loin tenderloin strip steak ball
	tip. Pancetta jowl bacon strip steak frankfurter turkey. Strip steak
	meatball pork chop, bacon shankle pastrami tenderloin corned beef jerky
	brisket. Beef ribs hamburger swine short ribs ground round turkey.</p>
	</article>

	<article id='a2'>
	<header>
	<h2><a href='#a2'>Mikor?</a></h2>
	</header>
	<p>Pancetta hamburger shankle corned beef. Short ribs flank shank
	tenderloin ham hock. Doner tail cow chuck pancetta, frankfurter
	tongue shoulder turducken filet mignon meatloaf venison. T-bone
	biltong brisket kielbasa pork belly ham boudin tri-tip drumstick
	turducken jowl pork loin. Shank leberkas biltong, ribeye corned
	beef prosciutto venison. Fatback filet mignon ham hock, kielbasa
	tongue hamburger doner beef ribs pork loin tenderloin shank
	bresaola capicola corned beef. Flank tri-tip meatloaf, andouille
	turkey fatback ball tip short ribs turducken spare ribs beef ribs
	kielbasa bacon hamburger.</p>
	</article>

	<article id='a3'>
	<header>
	<h2><a href='#a3'>Merre?</a></h2>
	</header>
	<p>Turducken shankle meatloaf ham, tail cow fatback chuck sirloin
	capicola flank. Pork belly chicken venison strip steak shankle ham
	hock tongue pastrami chuck. Sausage beef kielbasa ribeye. Sirloin
	brisket beef, hamburger ribeye rump tongue. Pig swine brisket,
	salami meatball beef ribs t-bone biltong.</p>
	</article>

	<article id='a4'>
	<header>
	<h2><a href='#a4'>Mit?</a></h2>
	</header>
	<p>Kielbasa drumstick biltong frankfurter salami chuck jerky swine
	venison meatloaf hamburger tongue prosciutto. Shankle frankfurter
	meatball cow bacon, ham hock short loin prosciutto. Beef ribs ribeye
	bresaola, hamburger shankle leberkas doner frankfurter venison
	kielbasa prosciutto spare ribs. Short loin cow ribeye short ribs pig
	drumstick boudin bacon tail pancetta strip steak. Chuck short loin
	kielbasa tail. Pig pork loin andouille, kielbasa short loin bacon pork
	chop strip steak beef ribs pork belly.</p>
	</article>
	</section>
	</body>
	</html>
	/* ez csak mert jól néz ki */
	* {
	-webkit-transition: -webkit-transform .1s ease-in-out;
	-moz-transition: -moz-transform .1s ease-in-out;
	-o-transition: -o-transform .1s ease-in-out;
	transition: transform .1s ease-in-out;
	}

	/* Nem néz ki szépen, de legalább valahogyan :) */
	html, body {
	font-family: verdana;
	font-size: 11px;
	}

	nav {
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	background-color: white;
	border-bottom: 1px solid #eee;
	padding: 5px;
	}

	nav a {
	color: #a00;
	padding: 2px 5px;
	font-size: 1.2em;
	background-color: #fee;
	border-radius: 3px;
	margin: 5px;
	text-decoration: none;
	}

	nav a:hover {
	background-color: black;
	color: white;
	}

	section {
	margin-top: 40px;
	}

	section article {
	width: 80%;
	margin: 5px auto;
	color: #aaa;
	opacity: 0.8;
	}
	section article header {
	margin-bottom: 5px;
	}
	section article header, section article header a {
	color: #777;
	background-color: #eee;
	border-radius: 5px;
	text-decoration: none;
	}

	section article header h2 {
	font-size: 1.2em;
	padding: 2px;
	}

	section article header h2:before {
	content: "ݨ ";
	color: #ccc;
	margin-left: 5px;
	margin-right: 3px;
	}

	section article p {
	display: none;
	padding: 5px 10px;
	}

	/* Nah kérem szépen itt a varázslat */
	section article:target {
	color: black;
	margin-top: 20px;
	margin-bottom: 20px;
	-webkit-transform: scale(1.08);
	-moz-transform: scale(1.08);
	-o-transform: scale(1.08);
	transform: scale(1.08);
	opacity: 1;
	}

	section article:target header {
	color: black;
	font-size: 1.3em;
	}

	section article:target header a {
	color: black;
	}

	section article:target header h2:before {
	color: #777;
	}

	section article:target p {
	display: block;
	}

	section article:target + article p {
	display: block;
	}

	section article:target + article {
	-webkit-transform: scale(1.04);
	-moz-transform: scale(1.04);
	-o-transform: scale(1.04);
	transform: scale(1.04);
	}