yitsushi · August 29, 2015 13:57
diff --git a/app.css b/app.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);
 }
diff --git a/app_highlight.css b/app_highlight.css
 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);
 }
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>
	/* 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>