Add two-columns sections with read-more button, new color variables, and JS script
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
2acd9de331
commit
b0ec2a7727
9 changed files with 214 additions and 3 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.claude/
|
||||
|
|
@ -1,4 +1,8 @@
|
|||
:root {
|
||||
--space-body: 2rem;
|
||||
--color-yellow: rgba(250, 255, 101, 1);
|
||||
--color-green: #33ffb0;
|
||||
--color-blue: #1a4ad6;
|
||||
--color-purple: #7029ff;
|
||||
--color-pink: rgba(255, 194, 249, 1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,12 @@ main > section.two-columns {
|
|||
|
||||
.column {
|
||||
max-height: 90vh;
|
||||
|
||||
figure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.text-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -23,12 +25,61 @@ main > section.two-columns {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
p {
|
||||
|
||||
h4 {
|
||||
width: 100%;
|
||||
font-stretch: 110%;
|
||||
font-weight: 470;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
> *:not(h4, button.read-more) {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-left: 20%;
|
||||
}
|
||||
|
||||
button.read-more {
|
||||
box-sizing: border-box;
|
||||
align-self: flex-start;
|
||||
margin-left: 20%;
|
||||
margin-top: 2rem;
|
||||
padding: 0.75rem 7.5vw;
|
||||
border: 1px solid #000;
|
||||
border-radius: 3rem;
|
||||
|
||||
font-stretch: 110%;
|
||||
font-weight: 470;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
button.read-more:hover {
|
||||
background-color: var(--color-purple);
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
p {
|
||||
border-left: 1px solid #000;
|
||||
padding-left: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.left-column {
|
||||
margin-left: var(--space-body);
|
||||
}
|
||||
&.right-column {
|
||||
margin-right: var(--space-body);
|
||||
}
|
||||
}
|
||||
|
||||
&.extra:not(.two-columns.open .extra) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,10 @@ img {
|
|||
:root {
|
||||
--space-body: 2rem;
|
||||
--color-yellow: rgba(250, 255, 101, 1);
|
||||
--color-green: #33ffb0;
|
||||
--color-blue: #1a4ad6;
|
||||
--color-purple: #7029ff;
|
||||
--color-pink: rgba(255, 194, 249, 1);
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -207,11 +211,49 @@ main > section.two-columns .column.text-column .text {
|
|||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
main > section.two-columns .column.text-column .text p {
|
||||
main > section.two-columns .column.text-column .text h4 {
|
||||
width: 100%;
|
||||
font-stretch: 110%;
|
||||
font-weight: 470;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
main > section.two-columns .column.text-column .text p:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
main > section.two-columns .column.text-column .text > *:not(h4, button.read-more) {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-left: 20%;
|
||||
}
|
||||
main > section.two-columns .column.text-column .text button.read-more {
|
||||
box-sizing: border-box;
|
||||
align-self: flex-start;
|
||||
margin-left: 20%;
|
||||
margin-top: 2rem;
|
||||
padding: 0.75rem 7.5vw;
|
||||
border: 1px solid #000;
|
||||
border-radius: 3rem;
|
||||
font-stretch: 110%;
|
||||
font-weight: 470;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
main > section.two-columns .column.text-column .text button.read-more:hover {
|
||||
background-color: var(--color-purple);
|
||||
color: var(--color-pink);
|
||||
}
|
||||
main > section.two-columns .column.text-column .text blockquote p {
|
||||
border-left: 1px solid #000;
|
||||
padding-left: 0.8rem;
|
||||
}
|
||||
main > section.two-columns .column.text-column.left-column {
|
||||
margin-left: var(--space-body);
|
||||
}
|
||||
main > section.two-columns .column.text-column.right-column {
|
||||
margin-right: var(--space-body);
|
||||
}
|
||||
main > section.two-columns .column.extra:not(.two-columns.open .extra) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section.video {
|
||||
padding: 20vh var(--space-body);
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_global.scss","src/_header.scss","src/sections/_hero.scss","src/sections/_featured-text.scss","src/sections/_two-columns.scss","src/sections/_video.scss","src/sections/_timeline.scss"],"names":[],"mappings":"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","file":"style.css"}
|
||||
{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_global.scss","src/_header.scss","src/sections/_hero.scss","src/sections/_featured-text.scss","src/sections/_two-columns.scss","src/sections/_video.scss","src/sections/_timeline.scss"],"names":[],"mappings":"AAAA;EACE,6BAAA;EACA,gFAAA;EACA,oBAAA;EACA,sBAAA;EACA,kBAAA;ACCF;ADEA;EACE,8BAAA;EACA,+DAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACAF;ACbA;EACE,YAAA;EACA,6BAAA;EACA,UAAA;ADeF;;ACZA;;;;;;;;;;;;;;EAcE,SAAA;EACA,UAAA;ADeF;;ACZA;EACE,qBAAA;ADeF;;ACZA;EACE,WAAA;EACA,YAAA;EACA,sBAAA;KAAA,mBAAA;ADeF;;AE9CA;EACE,kBAAA;EACA,sCAAA;EACA,sBAAA;EACA,qBAAA;EACA,uBAAA;EACA,oCAAA;AFiDF;;AGvDA;EACE,eAAA;AH0DF;;AGvDA;EACE,yCAAA;AH0DF;;AGvDA;EACE,cAAA;AH0DF;;AGvDA;;EAEE,WAAA;EACA,YAAA;AH0DF;;AGvDA;EACE,kBAAA;EACA,gBAAA;EACA,iBAAA;AH0DF;;AGvDA;EACE,kBAAA;EACA,gBAAA;AH0DF;;AIpFA;EACE,kBAAA;EACA,UAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,4BAAA;EACA,eAAA;EACA,MAAA;EACA,OAAA;EACA,sBAAA;EACA,WAAA;AJuFF;AIpFI;EACE,qBAAA;AJsFN;AIlFE;EACE,cAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;AJoFJ;AIlFI;;;EAGE,cAAA;EACA,WAAA;EACA,WAAA;EACA,sBAAA;AJoFN;AIhFM;EAEE,OAAA;EACA,kBAAA;EACA,WAAA;AJiFR;AI9EM;EACE,WAAA;AJgFR;AI9EM;EACE,WAAA;AJgFR;;AKjIA;EACE,aAAA;EACA,gDAAA;EACA,4BAAA;EACA,sBAAA;EAEA,aAAA;EACA,qBAAA;ALmIF;AKjIE;EACE,cAAA;EACA,4BAAA;ALmIJ;AKlII;EACE,oBAAA;EACA,kBAAA;ALoIN;AKlII;EACE,kBAAA;EACA,iBAAA;EACA,gBAAA;ALoIN;;AMvJA;EACE,YAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;AN0JF;AMxJE;EACE,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,qBAAA;AN0JJ;AMvJE;EACE,wDAAA;EACA,oBAAA;EACA,kBAAA;EACA,uBAAA;ANyJJ;AMtJE;EACE,6BAAA;EACA,mBAAA;ANwJJ;AMrJE;EACE,yCAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;ANuJJ;;AOtLA;EACE,kBAAA;EACA,aAAA;EACA,qCAAA;EACA,qBAAA;OAAA,gBAAA;EACA,cAAA;APyLF;AOvLE;EACE,gBAAA;APyLJ;AOvLI;EACE,WAAA;EACA,YAAA;APyLN;AOtLI;EACE,aAAA;EACA,sBAAA;EACA,8BAAA;EACA,YAAA;EACA,gCAAA;APwLN;AOtLM;EACE,WAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;APwLR;AOtLQ;EACE,WAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;APwLV;AOrLQ;EACE,mBAAA;APuLV;AOpLQ;EACE,sBAAA;EACA,WAAA;EACA,iBAAA;APsLV;AOnLQ;EACE,sBAAA;EACA,sBAAA;EACA,gBAAA;EACA,gBAAA;EACA,sBAAA;EACA,sBAAA;EACA,mBAAA;EAEA,kBAAA;EACA,gBAAA;EACA,gCAAA;APoLV;AOjLQ;EACE,qCAAA;EACA,wBAAA;APmLV;AO/KU;EACE,2BAAA;EACA,oBAAA;APiLZ;AO5KM;EACE,8BAAA;AP8KR;AO5KM;EACE,+BAAA;AP8KR;AO1KI;EACE,aAAA;AP4KN;;AQ7PA;EACE,+BAAA;EACA,aAAA;EACA,8BAAA;EACA,qBAAA;OAAA,gBAAA;ARgQF;AQ9PE;EACE,aAAA;EACA,sBAAA;EACA,8BAAA;ARgQJ;;ASzQA;EACE,8DAAA;EACA,sDAAA;EACA,kBAAA;AT4QF;AS1QE;EACE,aAAA;AT4QJ;AS1QI;EACE,aAAA;EACA,8BAAA;EACA,kBAAA;EACA,gBAAA;AT4QN;AS1QM;EACE,WAAA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,qCAAA;EACA,kBAAA;EACA,eAAA;EACA,aAAA;AT4QR;ASzQM;EACE,yCAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EAEA,iBAAA;EACA,0BAAA;AT0QR;ASvQM;EACE,aAAA;EACA,8BAAA;EACA,SAAA;EACA,2BAAA;EACA,oBAAA;EACA,sBAAA;ATyQR;ASvQQ;EACE,YAAA;ATyQV;ASxQU;EACE,yBAAA;EACA,gBAAA;EACA,iBAAA;EACA,iBAAA;AT0QZ;ASnQE;EACE,aAAA;EACA,8BAAA;EACA,SAAA;EACA,YAAA;EACA,gBAAA;EACA,uBAAA;EAAA,kBAAA;ATqQJ;ASlQM;EACE,yBAAA;AToQR","file":"style.css"}
|
||||
BIN
assets/images/image-3.jpg
Normal file
BIN
assets/images/image-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 MiB |
BIN
assets/images/image-4.jpg
Normal file
BIN
assets/images/image-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
9
assets/js/script.js
Normal file
9
assets/js/script.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const readMoreBtns = document.querySelectorAll('button.read-more');
|
||||
|
||||
readMoreBtns.forEach((readMoreBtn) => {
|
||||
readMoreBtn.addEventListener('click', () => {
|
||||
readMoreBtn.closest('.two-columns').classList.toggle('open');
|
||||
});
|
||||
});
|
||||
});
|
||||
104
index.html
104
index.html
|
|
@ -6,6 +6,7 @@
|
|||
<title>ICOM</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css" />
|
||||
<script src="assets/js/timeline.js" defer></script>
|
||||
<script src="assets/js/script.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -253,6 +254,109 @@
|
|||
<button><img src="assets/images/slider-button.svg" alt="" /></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="two-columns">
|
||||
<div class="column left-column text-column">
|
||||
<h3>Expansion of ICOM beyond Western Europe and North America</h3>
|
||||
<div class="text">
|
||||
<h4>In search of a global opening</h4>
|
||||
<p>
|
||||
Officially created in November 1946 in Paris, France, at the
|
||||
initiative of Chauncey J. Hamlin (USA), the International Council
|
||||
of Museums (ICOM) was initially anchored between Europe and North
|
||||
America. The early geography mirrors post-war political stability,
|
||||
strong museum infrastructures, and existing international
|
||||
networks. At this stage, ICOM national committees functioned
|
||||
mainly in industrialised democracies, with limited global reach.
|
||||
</p>
|
||||
<p>
|
||||
Among the fourteen nations represented at the Constitutive
|
||||
Assembly, only one country was not part of the Western World:
|
||||
Brazil. However, expanding beyond Europe and North America was
|
||||
always at the heart of ICOM's ambition, with the goal of welcoming
|
||||
delegates from every region of the world. As early as 1947,
|
||||
Chauncey J. Hamlin declared that
|
||||
</p>
|
||||
<button class="read-more">Read more</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column right-column picture-column">
|
||||
<figure>
|
||||
<img src="assets/images/image-3.jpg" alt="" />
|
||||
<figcaption>Légende</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="column right-column picture-column extra">
|
||||
<figure>
|
||||
<img src="assets/images/image-3.jpg" alt="" />
|
||||
<figcaption>Légende</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="column left-column text-column extra">
|
||||
<h3>Expansion of ICOM beyond Western Europe and North America</h3>
|
||||
<div class="text">
|
||||
<h4>In search of a global opening</h4>
|
||||
<p>
|
||||
Officially created in November 1946 in Paris, France, at the
|
||||
initiative of Chauncey J. Hamlin (USA), the International Council
|
||||
of Museums (ICOM) was initially anchored between Europe and North
|
||||
America. The early geography mirrors post-war political stability,
|
||||
strong museum infrastructures, and existing international
|
||||
networks. At this stage, ICOM national committees functioned
|
||||
mainly in industrialised democracies, with limited global reach.
|
||||
</p>
|
||||
<p>
|
||||
Among the fourteen nations represented at the Constitutive
|
||||
Assembly, only one country was not part of the Western World:
|
||||
Brazil. However, expanding beyond Europe and North America was
|
||||
always at the heart of ICOM's ambition, with the goal of welcoming
|
||||
delegates from every region of the world. As early as 1947,
|
||||
Chauncey J. Hamlin declared that
|
||||
</p>
|
||||
<button class="read-more">Read more</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="two-columns">
|
||||
<div class="column left-column picture-column">
|
||||
<figure>
|
||||
<img src="assets/images/image-4.jpg" alt="" />
|
||||
<figcaption>Légende</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Ici blockquote à l'intérieur du texte.
|
||||
-->
|
||||
<div class="column right-column text-column">
|
||||
<h3>
|
||||
Emergence of new professional fields, reflecting the main interests
|
||||
of ICOM members
|
||||
</h3>
|
||||
<div class="text">
|
||||
<h4>
|
||||
Among the first topics discussed within ICOM: conservation and
|
||||
documentation.
|
||||
</h4>
|
||||
<p>
|
||||
While ICOM has grown geographically, as illustrated above, the
|
||||
scope and depth of the issues it addresses have expanded as well.
|
||||
In its early days, ICOM's main topic among members was the
|
||||
conservation of artworks
|
||||
</p>
|
||||
<blockquote>
|
||||
<p>
|
||||
"Throughout my years at ICOM, the conservation of collections
|
||||
and, more generally, of cultural property was undoubtedly the
|
||||
primary activity of the organization and its International
|
||||
Committee for Conservation."
|
||||
</p>
|
||||
</blockquote>
|
||||
<button class="read-more">Read more</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue