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