[
  {
    "path": "LICENSE",
    "content": "This is free and unencumbered software released into the public domain.\n\nAnyone is free to copy, modify, publish, use, compile, sell, or\ndistribute this software, either in source code form or as a compiled\nbinary, for any purpose, commercial or non-commercial, and by any\nmeans.\n\nIn jurisdictions that recognize copyright laws, the author or authors\nof this software dedicate any and all copyright interest in the\nsoftware to the public domain. We make this dedication for the benefit\nof the public at large and to the detriment of our heirs and\nsuccessors. We intend this dedication to be an overt act of\nrelinquishment in perpetuity of all present and future rights to this\nsoftware under copyright law.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR\nOTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,\nARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n\nFor more information, please refer to <https://unlicense.org>\n"
  },
  {
    "path": "README.md",
    "content": "Demo: https://john-doe.neocities.org/\n\nA website in a single HTML file. It simply uses the `#anchor` suffix and the `:target` CSS selector to show and hide pages/content.\n\nTo create a new page, add a `<section>` with a unique `id`:\n```html\n<section id=\"contact\">\n   Contact me!\n</section>\n```\nThen you could add a link to it inside `<nav>`:\n```html\n<a href=\"#contact\">Contact</a>\n```\n"
  },
  {
    "path": "index.html",
    "content": "<!-- JOHN DOE’S PAGE - https://github.com/cadars/john-doe/ -->\n\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    \n    <title>Site title</title>\n    <meta name=\"description\" content=\"Site description\">\n    \n    <!-- Recommended minimum -->\n    <meta property=\"og:title\" content=\"Site title\">\n    <meta property=\"og:description\" content=\"Site description\">\n    <meta property=\"og:image\" content=\"img/site-image.jpg\">\n    <meta name=\"twitter:card\" content=\"summary_large_image\">\n    \n    <!-- You could also inline the stylesheet -->\n    <link rel=\"stylesheet\" href=\"style.css\">\n    \n  </head>\n  <body>\n    \n    <header>\n      <h1>\n        <a href=\"#home\">Site title</a>\n      </h1>\n      <nav>\n        <a href=\"#about\">About</a>\n        <a href=\"#news\">News</a>\n        <a href=\"#photos\">Photos</a>\n        <a href=\"#portfolio\">Portfolio</a>\n      </nav>\n    </header>\n    \n    <main>\n      \n      <section id=\"home\"> <!-- HOME -->\n        \n        <p>This is the homepage, displayed by default.</p>\n        \n      </section>\n      \n      <section id=\"about\"> <!-- ABOUT -->\n        \n        <p>This is the about page. <a href=\"#another-page\">This is a link to another page</a>.</p>\n        \n        <figure> \n          <a href=\"#img-about\">         \n            <img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/1200x600/ddd/bbb\" width=\"1200\" height=\"600\">\n          </a>\n          <figcaption>Example of an image with a link to a larger version.</figcaption>\n        </figure>\n        \n      </section>\n      \n      <section id=\"news\"> <!-- NEWS -->\n        \n        <article>\n          <h2>Blogging with Joe Bloggs <time datetime=\"2020-10-10\">10.10.2020</time></h2>\n          <p> One <em>could</em> use this setup to write <s>a blog</s> short updates. For images make sure to use the <code>loading=\"lazy\"</code> attribute, so they get loaded only when needed.<label for=\"lazy\">1</label><input type=\"checkbox\" id=\"lazy\"><small>\n            \n            You might be able to use it for <code>iframe</code> embeds too(?), but maybe just write a link to the Youtube video instead.\n            \n           </small></p>\n        </article>\n              \n        <article>\n          <h2><a href=\"https://example.com\">Why Your Cat Bites You</a> <time datetime=\"2004-12-12\">12.12.2004</time></h2>\n          <p>Honestly you don't want to know.</p>\n        </article>\n      \n      </section>\n      \n      <section id=\"photos\"> <!-- PHOTOS -->\n        \n        <p>An example of a photo gallery with a lightbox.</p>\n\n        <!-- You can use this grid of images in any page -->\n        \n        <div class=\"grid\">\n          <a href=\"#img-01\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/300x300/ddd/bbb\"></a>\n          <a href=\"#img-02\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/400x300/ddd/bbb\"></a>\n          <a href=\"#img-03\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/300x400/ddd/bbb\"></a>\n          <a href=\"#img-04\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/300x300/ddd/bbb\"></a>\n          <a href=\"#img-05\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/400x300/ddd/bbb\"></a>\n          <a href=\"#img-06\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/300x400/ddd/bbb\"></a>\n          <a href=\"#img-07\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/300x300/ddd/bbb\"></a>\n          <a href=\"#img-08\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/400x300/ddd/bbb\"></a>\n          <a href=\"#img-09\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/300x400/ddd/bbb\"></a>\n          <a href=\"#img-10\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/300x300/ddd/bbb\"></a>\n          <a href=\"#img-11\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/400x300/ddd/bbb\"></a>\n          <a href=\"#img-12\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/300x400/ddd/bbb\"></a>\n          <a href=\"#img-13\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/300x300/ddd/bbb\"></a>\n          <a href=\"#img-14\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/400x300/ddd/bbb\"></a>\n          <a href=\"#img-15\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/300x400/ddd/bbb\"></a>\n        </div>\n        \n      </section>\n      \n      <section id=\"portfolio\"> <!-- PORTFOLIO -->\n\n        <div class=\"slides\">\n          <figure><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/4000x3000/ddd/bbb\"></figure>\n          <figure><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x4000/ddd/bbb\"></figure>\n          <figure><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/4000x3000/ddd/bbb\"></figure>\n          <figure>\n            <p>You could also have text over here…</p>\n          </figure>\n          <figure>\n            <img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/1000x1000/ddd/bbb\">\n            <figcaption>…or image captions</figcaption>\n          </figure>\n          <figure style=\"background:#fdcb39\">\n            <img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x4000/ddd/bbb\">\n            <figcaption>add a solid background</figcaption>\n          </figure>\n          <figure class=\"cover\">\n            <img loading=\"lazy\" alt=\"\" src=\"https://64.media.tumblr.com/7904066936b9324571738bbbeeb082e9/tumblr_myopxy8uJI1qz4vi0o1_1280.jpg\">\n            <p style=\"color:#fff\">or go full bleed</p>\n          </figure>\n        </div>\n\n      </section>\n        \n      <section id=\"another-page\"> <!-- ANOTHER PAGE -->\n        \n        <p>This page is not referenced in the menu, yet it exists.</p>\n        <p><a href=\"#about\">← back</a></p>\n        \n      </section>\n      \n    </main>\n    \n    <!-- ----------\n    LIGHTBOX IMAGES\n    ----------- -->\n\n    <!-- PHOTOS grid -->\n    \n    <a href=\"#photos\" class=\"lightbox\" id=\"img-01\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x3000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-02\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/4000x3000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-03\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x4000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-04\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x3000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-05\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/4000x3000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-06\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x4000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-07\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x3000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-08\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/4000x3000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-09\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x4000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-10\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x3000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-11\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/4000x3000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-12\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x4000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-13\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x3000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-14\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/4000x3000/ddd/bbb\"></a>\n    <a href=\"#photos\" class=\"lightbox\" id=\"img-15\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/3000x4000/ddd/bbb\"></a>    \n    \n    <!-- Other images -->\n    \n    <a href=\"#about\" class=\"lightbox\" id=\"img-about\"><img loading=\"lazy\" alt=\"\" src=\"//dummyimage.com/2400x1200/ddd/bbb\"></a>\n    \n  </body>\n</html>"
  },
  {
    "path": "style.css",
    "content": "* { margin: 0; padding: 0; box-sizing: border-box;\n  \n  /* Color scheme */\n  \n  --textcolor: #121212;\n  --bgcolor: #fff;\n  --highlight: #2749c9;\n\n}\n\n@media (prefers-color-scheme: dark) {\n  * {\n    --textcolor: #dadada;\n    --bgcolor: #141414;\n    --highlight: #ffc400;\n  }\n}\n\nbody {\n  font-size: 18px;\n  font-family: system-ui, sans-serif;\n  line-height: 1.4;\n  color: var(--textcolor);\n  background: var(--bgcolor);\n  position: relative;\n  max-width: 64em;  /* remove this for a full-width layout */\n  margin: 0 auto;  /* centers the layout */\n}\n\n/* ------- Sections ------- */\n\nsection {\n  padding: calc(6em + 5vw) 5vw 8vw 5vw;\n  /* ! Everything below is needed ! */\n  display: none;\n  position: absolute;\n  top: 0;\n  min-height: 100vh;\n  width: 100%;\n  background: var(--bgcolor);\n}\n\nsection:target { /* Show section */\n  display: block;\n}\n\nsection#home { /* Show #home by default */\n  display: block;\n}\n\n/* ------- Header ------- */\n\nheader {\n  padding: 5vw 5vw 0 5vw;\n  display: flex;\n  flex-wrap: wrap;\n  position: absolute;\n  width: 100%;\n  z-index: 2;\n}\n\nheader h1 {\n  font-size: 1em;\n  flex: 1; /* pushes nav to the right */\n  white-space: nowrap;\n  padding: 0 5vw .5em 0;\n}\n\nnav a:not(:last-of-type) {\n  margin-right: 1.5vw;\n}\n\n/* ------- General ------- */\n\na {\n  text-decoration: none;\n  color: var(--highlight);\n}\n\na:hover {\n  border-bottom: 1px solid;\n}\n\nsection h1 {\n  font-size: 1em;\n  margin: 0 0 1em 0;\n}\n\nh2, h3, h4 {\n  font-size: 1em;\n  font-weight: 600;\n  margin: 1.6em 0 .6em 0;\n}\n\np, ul, ol, article {\n  max-width: 60ch; /* Limit line-length to 60 characters */\n  margin-bottom: .6em;\n}\n\nul {\n  list-style-type: none;\n}\n\nul li::marker {\n  content: \"\\2022   \";\n}\n\nli {\n  margin-bottom: .2em;\n}\n\nul, ol {\n  padding-left: 2ch;\n}\n\nb, strong {\n  font-weight: 600;\n}\n\nsmall {\n  font-size: .85em;\n}\n\nhr {\n  height: 1px;\n  border: 0;\n  background: currentColor;\n  opacity: .1;\n  margin: 1.2em 0;\n}\n\nabbr {\n  text-decoration: none;\n}\n\nabbr[title]:hover {\n  opacity: .7;\n  cursor: help;\n}\n\nblockquote {\n  padding-left: 2ch;\n  opacity: .7;\n  margin-bottom: .6em;\n  position: relative;\n}\n\nblockquote:before {\n  content: \"\";\n  position:absolute;\n  left: 0;\n  top: .3em;\n  bottom: .3em;\n  background: currentColor;\n  width: 1px;\n  opacity: .2;\n}\n\nimg, svg, video, audio {\n  display: block;\n  max-width: 100%;\n  height: auto;\n  fill: currentColor;\n}\n  \ncode, textarea {\n  font-family: ui-monospace, SF Mono, Menlo, Monaco, Andale Mono, monospace;\n  font-size: 1em;\n  opacity: .7;\n}\n\na code {\n  opacity:1;\n}\n\npre, textarea { /* for code samples */\n  font-size: .9em;\n  color: inherit;\n  line-height:inherit;\n  padding:.6em .9em;\n  margin: .8em 0 1em 0;\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: pre;\n  border:0;\n  border-radius: 4px;\n  background:rgba(255,255,100,.075);\n  box-shadow: inset 1px 1px 0 rgba(0,0,0,.2), inset -1px -1px 0 rgba(0,0,0,.04) ;\n}\n\n/* Inline footnotes */\n\nlabel {\n  cursor: pointer;\n  vertical-align: super;\n  line-height: 1;\n  font-size: .75em;\n  padding-left: .1em;\n}\n\nlabel:hover {\n  color: var(--highlight);\n}\n\nlabel:before {content:\"[\";}\nlabel:after {content:\"]\";}\n\nlabel + input,\nlabel + input + small {\n  display: none;\n}\n\ninput:checked + small {\n  display: block;\n  padding: .8em 0 1em 2.5vw;;\n}\n\n/* Figures */\n\nfigure {\n  margin: 2em 0 1.5em 0;\n}\n\nfigure figcaption {\n  margin: 0.8em 0 0 0;\n  font-size: .85em;\n  opacity: .7;\n}\n\n/* Responsive video embeds */\n\nfigure.video {\n  position: relative;\n  padding-bottom: 56.25%; /* 16:9 */\n  height: 0;\n  overflow: hidden;\n}\n\nfigure.video iframe, figure.video object, figure.video embed {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  visibility: hidden; /* so loading=\"lazy\" should work? */\n}\n\nsection:target iframe {\n  visibility: visible;\n}\n\n/* External links */\n\na[href*=\"//\"]:after { \n  font-weight: 300;\n  font-size: .85em;\n  content: \"\\2197\"; /* top right arrow: ↗ */\n  color: var(--textcolor);\n  opacity: .25;\n}\n\na[href*=\"//\"]:hover:after {\n  color: var(--highlight);\n  opacity: 1;\n}\n\n/* File links */\n\na:before { \n  font-size: .7em;\n  margin-right: .4em;\n}\n\n/* Add more filetypes here if you want */\n\na[href$=\".pdf\"]:before { content: \"PDF\"; }\na[href$=\".txt\"]:before { content: \"TXT\"; }\na[href$=\".mp3\"]:before { content: \"MP3\"; }\na[href$=\".zip\"]:before { content: \"ZIP\"; }\na[href$=\".rar\"]:before { content: \"RAR\"; }\na[href$=\".jpeg\"]:before,\na[href$=\".jpg\"]:before,\na[href$=\".gif\"]:before,\na[href$=\".png\"]:before { content: \"IMG\"; }\n\n/* ------- News ------- */\n\narticle + article {\n  margin-top: 4.5em;\n}\n\narticle h2 {\n  font-weight: 700;\n  margin: 0 0 1em 0;\n}\n\narticle time {\n  margin-left: .6em;\n  font-size: .8em;\n  font-weight: 400;\n  opacity: .7;\n}\n\n/* ------- Images Grid ------- */\n\n.grid {\n  display: grid;\n  grid-gap: 5vmin;\n  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 150px = minimum image size */\n  grid-auto-flow: dense;\n  padding: 2em 0;\n}\n\n.grid a {\n  position: relative;\n  border: 0;\n}\n\n.grid a:hover {\n  transform: scale(.975);\n}\n\n/* For a square ratio */\n.grid a:before {\n  content: \"\";\n  display: block;\n  padding-top: 100%;\n}\n\n.grid a img {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* ------- Slideshow ------- */\n\n.slides {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100vh;\n  overflow-y: scroll;\n  scroll-snap-type: y mandatory;\n}\n\n.slides figure {\n  height: 100vh;\n  padding: 0 5vw;\n  margin: 0;\n  display: grid;\n  place-items: center;\n  align-content: center;\n  scroll-snap-align: center;\n}\n\n.slides figure img {\n  max-height: 88vh; /* Adjust if needed */\n}\n\n.slides figure.cover {\n  padding: 0;\n}\n\n.slides figure.cover img {\n  max-height: none;\n  position: absolute;\n  z-index: -1;\n  width: 100vw;\n  height: 100vh;\n  object-fit: cover;\n}\n\n/* ------- Lightbox ------- */\n\n.lightbox {\n  display: none;\n  color: var(--textcolor);\n}\n\n.lightbox:target {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: grid;\n  place-items: center;\n  align-content: center;\n  background: var(--bgcolor);\n  border: 0;\n  z-index: 3;\n}\n\n.lightbox img {\n  max-height: 100vh;\n  z-index: 4;\n}\n\n.lightbox:target:before { /* Loading spinner */\n  content:\"\";\n  height: 2em;\n  width: 2em;\n  animation: spin .8s infinite linear;\n  border: 1px solid;\n  border-right-color: transparent;\n  border-radius: 50%;\n  display: block;\n  position: absolute;\n  transform: translateX(-50%);\n  opacity: .25;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.lightbox:target:after { /* × to close */\n  content: \"\\00D7\";\n  position: fixed;\n  font-size: 2em;\n  font-weight: 200;\n  line-height: 0;\n  top: .75em;\n  right: .5em;\n  z-index: 4;\n}\n\n/* ------- Smaller screens ------- */\n\n@media only screen and (max-width: 680px) {\n  body { font-size: 16px; }\n}\n\n@media only screen and (max-width: 540px) {\n  nav { width: 100%; } /* Fix for older webkit versions */\n}\n\n/* ------- Print ------- */\n\n@media print {\n  \n  nav, .lightbox:target:after { display: none; }\n  \n  article, figure, img {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n  \n  /* Inline footnotes */\n  \n  label + input + small { display: inline; }\n  label + input + small:before { content: \"[\"; }\n  label + input + small:after { content: \"]\"; }\n  \n  /* Slides */\n  \n  .slides, .slides figure {\n    position: relative;\n    height: auto;\n    padding: 0;\n  }\n\n  .slides figure img, .slides figure.cover img {\n    max-height: auto;\n    position: relative;\n    z-index: 1;\n    width: auto;\n    height: 100vh;\n    object-fit: contain;\n  }\n    \n}"
  }
]