Skip to content

Commit ac93644

Browse files
tomickigrzegorztomickigrzegorz
authored
Merge pull request #22 from tomik23:overflow
Overflow
2 parents 6f855ae + 18b3aab commit ac93644

File tree

11 files changed

+1504
-1934
lines changed

11 files changed

+1504
-1934
lines changed

‎CHANGELOG.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
1+
## v1.0.10 (2021-03-30)
2+
3+
### Added
4+
- Create a separate photo with styles for each click, fixed problem when photo is in overflow element
5+
6+
### Changed
7+
- Removal of style from main photo
8+
- Replaced node-sass to sass
9+
- The browserslist extension
10+
111
## v1.0.9 (2020-11-20)
212
### Added
313
- UMD file
414
- Renaming a variable
515
- Banner from rollup.js
16+
617
### Changed
718
- Removed banner plugin
819

‎docs/github-corner.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,19 @@ const githubConrner = `
1414

1515
document.addEventListener('DOMContentLoaded', (event) => {
1616
document.body.insertAdjacentHTML('beforeend', githubConrner);
17+
});
18+
19+
const texts = document.querySelectorAll('.text');
20+
21+
[...texts].map(text => {
22+
let newText = '';
23+
const word = text.textContent.split(' ');
24+
word.forEach(element => {
25+
const el = element.trim();
26+
if (el.length > 0) {
27+
newText += `<span class="single-word">${el}</span>`;
28+
}
29+
});
30+
text.innerHTML = '';
31+
text.innerHTML = newText;
1732
});

‎docs/index.html‎

Lines changed: 76 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,72 +5,97 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8-
<script src="./github-corner.js"></script>
8+
<script defer="defer" src="./github-corner.js"></script>
99
<link rel="stylesheet" href="./style.css">
1010
<title>Zooom</title>
1111
</head>
1212

1313
<body>
1414
<div class="container">
15-
<figure>
16-
<img class="responsive img-zoom" loading="lazy" width="1200" height="800" src="./images/IMG_01.jpg">
17-
<figcaption class="description">The Papal Basilica of Saint Peter in the Vatican (Italian: Basilica Papale di
18-
San Pietro in Vaticano)... <a href="https://en.wikipedia.org/wiki/St._Peter%27s_Basilica" target="_blank">[
19-
Wikipedia]</a>
20-
</figcaption>
21-
</figure>
22-
<figure>
23-
<img class="responsive img-zoom" loading="lazy" width="1200" height="800" src="./images/IMG_02.jpg">
24-
<figcaption class="description">The Great Wall of China (Chinese: 萬里長城; pinyin: Wànlǐ Chángchéng) is the
25-
collective... <a href="https://en.wikipedia.org/wiki/Great_Wall_of_China" target="_blank">[Wikipedia]</a>
26-
</figcaption>
27-
</figure>
28-
<div class="row">
29-
<figure>
30-
<img class="responsive img-zoom" loading="lazy" width="1200" height="800" src="./images/IMG_03.jpg">
15+
<section>
16+
<figure class="overflow">
17+
<h1>OVERFLOW IMAGE</h1>
18+
<img class="responsive img-zoom" loading="lazy" width="1200" height="800" src="./images/IMG_01.jpg"
19+
alt="The Papal Basilica of Saint Peter in the Vatican (Italian: Basilica Papale di San Pietro in Vaticano)...">
20+
<figcaption class="description">The Papal Basilica of Saint Peter in the Vatican (Italian: Basilica Papale di
21+
San Pietro in Vaticano)... <a href="https://en.wikipedia.org/wiki/St._Peter%27s_Basilica" target="_blank">[
22+
Wikipedia]</a>
23+
</figcaption>
3124
</figure>
25+
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus veritatis, quam maiores
26+
cupiditate quod impedit atque, ad molestiae magni accusamus tempore praesentium blanditiis labore doloremque
27+
adipisci? Odio eaque assumenda libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias sunt
28+
laboriosam exercitationem illum recusandae, modi porro vitae ipsa ex aperiam nulla voluptate, labore laborum
29+
facilis dolorem debitis cupiditate natus ab.</div>
30+
</section>
31+
<section>
3232
<figure>
33-
<img class="responsive img-zoom" loading="lazy" width="1200" height="800" src="./images/IMG_04.jpg">
33+
<img class="responsive img-zoom" loading="lazy" width="1200" height="800" src="./images/IMG_02.jpg">
34+
<figcaption class="description">The Great Wall of China (Chinese: 萬里長城; pinyin: Wànlǐ Chángchéng) is the
35+
collective... <a href="https://en.wikipedia.org/wiki/Great_Wall_of_China" target="_blank">[Wikipedia]</a>
36+
</figcaption>
3437
</figure>
35-
</div>
36-
<picture>
37-
<source class="responsive" loading="lazy" width="1200" srcset="./images/IMG_5287.webp"
38-
media="(min-width: 993px)" type="image/webp">
39-
<source class="responsive" loading="lazy" width="1200" srcset="./images/IMG_5287.jpg"
40-
media="(min-width: 993px)">
41-
<source class="responsive" loading="lazy" width="992" srcset="./images/IMG_5302.webp" media="(min-width: 768px)"
42-
type="image/webp">
43-
<source class="responsive" loading="lazy" width="992" srcset="./images/IMG_5302.jpg" media="(min-width: 768px)">
44-
<source class="responsive" loading="lazy" width="768" srcset="./images/IMG_8533.webp" media="(max-width: 767px)"
45-
type="image/webp">
46-
<source class="responsive" loading="lazy" width="768" srcset="./images/IMG_8533.jpg" media="(max-width: 767px)">
47-
<img class="responsive img-zoom" loading="lazy" width="1200" height="800" src="./images/IMG_5287.jpg">
48-
</picture>
49-
<div class="row">
50-
<figure>
38+
</section>
39+
<section>
40+
<div class="text">
41+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing
42+
elit. Earum fugiat qui veniam voluptatibus, est autem ipsum voluptatum reiciendis consequuntur facere ea
43+
itaque laborum quis facilis, iure quisquam tenetur, rem assumenda!
44+
</div>
45+
<figure class="left">
46+
<img class="responsive img-zoom" loading="lazy" width="1200" height="800" src="./images/IMG_03.jpg">
47+
</figure>
48+
<div class="text">
49+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing
50+
elit. Earum fugiat qui veniam voluptatibus, est autem ipsum voluptatum reiciendis consequuntur facere ea
51+
itaque laborum quis facilis, iure quisquam tenetur, rem assumenda! Lorem ipsum, dolor sit amet consectetur
52+
adipisicing elit. Unde rem illum nam nihil non fuga eum fugiat veritatis. Iste, doloribus quaerat. Maxime enim
53+
quae modi porro facilis. Laudantium, consequatur nihil?
54+
</div>
55+
</section>
56+
<section>
57+
<picture>
58+
<source class="responsive" loading="lazy" width="1200" srcset="./images/IMG_5287.webp"
59+
media="(min-width: 993px)" type="image/webp">
60+
<source class="responsive" loading="lazy" width="1200" srcset="./images/IMG_5287.jpg"
61+
media="(min-width: 993px)">
62+
<source class="responsive" loading="lazy" width="992" srcset="./images/IMG_5302.webp"
63+
media="(min-width: 768px)" type="image/webp">
64+
<source class="responsive" loading="lazy" width="992" srcset="./images/IMG_5302.jpg"
65+
media="(min-width: 768px)">
66+
<source class="responsive" loading="lazy" width="768" srcset="./images/IMG_8533.webp"
67+
media="(max-width: 767px)" type="image/webp">
68+
<source class="responsive" loading="lazy" width="768" srcset="./images/IMG_8533.jpg"
69+
media="(max-width: 767px)">
70+
<img class="responsive img-zoom" loading="lazy" width="1200" height="800"
71+
srcset="./images/IMG_5287.jpg 993w, ./images/IMG_5302.jpg 768w, ./images/IMG_5302.jpg 768w, ./images/IMG_8533.jpg 767w"
72+
sizes="(min-width: 993px) 993px, (min-width: 768px) 768px, (max-width: 767px) 767px"
73+
src="./images/IMG_5287.jpg">
74+
</picture>
75+
</section>
76+
<section>
77+
<figure class="right">
5178
<img class="responsive img-zoom" loading="lazy" height="500" src="./images/IMG_06.jpg">
5279
<figcaption class="description">Morocco (/məˈrɒkoʊ/ (About this soundlisten); Arabic: المغرب... <a
5380
href="https://en.wikipedia.org/wiki/Morocco" target="_blank">[Wikipedia]</a></figcaption>
5481
</figure>
82+
<div class="text">
83+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing
84+
elit. Earum fugiat qui veniam voluptatibus, est autem ipsum voluptatum reiciendis consequuntur facere ea
85+
itaque laborum quis facilis, iure quisquam tenetur, rem assumenda! Lorem ipsum, dolor sit amet consectetur
86+
adipisicing elit. Unde rem illum nam nihil non fuga eum fugiat veritatis. Iste, doloribus quaerat. Maxime enim
87+
quae modi porro facilis. Laudantium, consequatur nihil? Lorem ipsum dolor sit amet, consectetur adipisicing
88+
elit. Aliquid, laborum!
89+
</div>
90+
</section>
91+
<section>
5592
<figure>
56-
<img class="responsive img-zoom" loading="lazy" height="500" src="./images/IMG_07.jpg">
57-
<figcaption class="description">Morocco's predominant religion is Islam, and its official languages are Arabic
58-
and Berber... <a href="https://en.wikipedia.org/wiki/Morocco" target="_blank">[Wikipedia]</a></figcaption>
93+
<img class="responsive img-zoom" loading="lazy" width="1200" height="800" src="./images/IMG_09.jpg">
94+
<figcaption class="description">Charlottenburg Palace (German: Schloss Charlottenburg) is a Baroque palace in
95+
Berlin... <a href="https://en.wikipedia.org/wiki/Charlottenburg_Palace" target="_blank">[Wikipedia]</a>
96+
</figcaption>
5997
</figure>
60-
</div>
61-
<figure>
62-
<img class="responsive img-zoom" loading="lazy" width="1200" height="800" src="./images/IMG_08.jpg">
63-
<figcaption class="description">The Moszna Castle (Polish: Pałac w Mosznej, German: Schloss Moschen) is a
64-
historic castle and
65-
residence located in a small village of Moszna... <a href="https://en.wikipedia.org/wiki/Moszna_Castle"
66-
target="_blank">[Wikipedia]</a></figcaption>
67-
</figure>
68-
<figure>
69-
<img class="responsive img-zoom" loading="lazy" width="1200" height="800" src="./images/IMG_09.jpg">
70-
<figcaption class="description">Charlottenburg Palace (German: Schloss Charlottenburg) is a Baroque palace in
71-
Berlin... <a href="https://en.wikipedia.org/wiki/Charlottenburg_Palace" target="_blank">[Wikipedia]</a>
72-
</figcaption>
73-
</figure>
98+
</section>
7499
</div>
75100

76101
<script>

‎docs/style.css‎

Lines changed: 172 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)