Keep working on responsiveness

This commit is contained in:
Matthew Holt 2023-11-23 09:11:03 -07:00 committed by Francis Lavoie
parent 02f328d563
commit 22fddeb556
No known key found for this signature in database
GPG key ID: 0F66EE1687682239
5 changed files with 18 additions and 40 deletions

View file

@ -288,12 +288,13 @@ img.cite {
}
.demobox h2 {
position: absolute;
top: -99px;
font-size: min(90px, 50vw);
font-size: 90px;
font-weight: 700;
max-width: 100%;
white-space: nowrap;
max-width: none;
overflow-x: auto;
white-space: nowrap;
margin-top: -1.65em;
background: linear-gradient(0deg, rgba(27,180,186,1) 10%, rgba(0,61,75,1) 50%);
-webkit-background-clip: text;

View file

@ -334,7 +334,6 @@ section.dark h3.yellow {
.asides {
display: flex;
flex-wrap: wrap;
gap: 50px;
justify-content: space-between;
margin: 100px auto 150px auto;
@ -352,20 +351,15 @@ section.dark h3.yellow {
.asides > * {
flex: 1;
/* margin-right: 50px; */
/*min-width: 0; kind of a hack that allows proper sizing of pre children; see https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow */
/* min-width: 300px;
width: 100%; */
min-width: 0; /* kind of a hack that allows proper sizing of pre children; see https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow */
min-width: 300px;
width: 100%;
}
/* .asides > :last-child {
margin-right: 0;
} */
.asides-40-60 > :first-child { width: 40%; }
.asides-40-60 > :last-child { width: 60%; }
.asides-60-40 > :first-child { width: 60%; }
.asides-60-40 > :last-child { width: 40%; }
.asides-40-60 > :first-child { flex: 2 }
.asides-40-60 > :last-child { flex: 3 }
.asides-60-40 > :first-child { flex: 3 }
.asides-60-40 > :last-child { flex: 2 }
.asides h2 {
text-align: left;
@ -428,7 +422,7 @@ div.ap-wrapper:fullscreen div.ap-player {
.display .chroma,
.display.dark .chroma,
.display.light .chroma {
background: none;
background: none !important;
}
.display code {
@ -437,7 +431,6 @@ div.ap-wrapper:fullscreen div.ap-player {
}
.display code {
max-width: 800px;
font-size: 110%;
display: block;
position: relative;
@ -656,27 +649,11 @@ div.ap-wrapper:fullscreen div.ap-player {
margin-bottom: 0;
}
@media (min-width: 1001px) {
/* .hero-content .display {
transform: scale(1.1);
position: relative;
left: -7%;
} */
/* div.ap-wrapper div.ap-player {
} */
}
@media (max-width: 1000px) {
.asides {
flex-direction: column;
}
.asides > * {
margin-right: 0;
}
.display {
margin-top: 50px;
margin-bottom: 50px;