Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove positioning absolute from sections #9

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Remove positioning absolute from sections #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 40 additions & 40 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@
<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>
Expand All @@ -32,52 +32,46 @@ <h1>
<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">

<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>
Expand All @@ -95,9 +89,9 @@ <h2><a href="https://example.com">Why Your Cat Bites You</a> <time datetime="200
<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">
Expand All @@ -122,22 +116,28 @@ <h2><a href="https://example.com">Why Your Cat Bites You</a> <time datetime="200
</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>


<section id="home"> <!-- HOME -->

<p>This is the homepage, displayed by default.</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>
Expand All @@ -152,11 +152,11 @@ <h2><a href="https://example.com">Why Your Cat Bites You</a> <time datetime="200
<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>
<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>
</html>
34 changes: 18 additions & 16 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
* { margin: 0; padding: 0; box-sizing: border-box;

/* Color scheme */

--textcolor: #121212;
--bgcolor: #fff;
--highlight: #2749c9;
Expand Down Expand Up @@ -33,10 +33,7 @@ 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);
}

Expand All @@ -48,6 +45,11 @@ section#home { /* Show #home by default */
display: block;
}

/* When a section is shown, hide default home section */
section:target ~ section#home {
display: none;
}

/* ------- Header ------- */

header {
Expand Down Expand Up @@ -162,7 +164,7 @@ img, svg, video, audio {
height: auto;
fill: currentColor;
}

code, textarea {
font-family: ui-monospace, SF Mono, Menlo, Monaco, Andale Mono, monospace;
font-size: 1em;
Expand Down Expand Up @@ -253,7 +255,7 @@ section:target iframe {

/* External links */

a[href*="//"]:after {
a[href*="//"]:after {
font-weight: 300;
font-size: .85em;
content: "\2197"; /* top right arrow: ↗ */
Expand All @@ -268,7 +270,7 @@ a[href*="//"]:hover:after {

/* File links */

a:before {
a:before {
font-size: .7em;
margin-right: .4em;
}
Expand Down Expand Up @@ -445,22 +447,22 @@ article time {
/* ------- 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;
Expand All @@ -475,5 +477,5 @@ article time {
height: 100vh;
object-fit: contain;
}
}

}