447
edits
No edit summary |
mNo edit summary |
||
(47 intermediate revisions by 3 users not shown) | |||
Line 13: | Line 13: | ||
6. Per-Page Styling | 6. Per-Page Styling | ||
7. Mobile Styling | 7. Mobile Styling | ||
8. New Styling (6-23-2023) | |||
*/ | */ | ||
Line 168: | Line 169: | ||
border-radius: 4px; | border-radius: 4px; | ||
/* border-color: #a3d3ff; */ | /* border-color: #a3d3ff; */ | ||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0. | box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1); /* 0.2 opacity was a little heavy. Bumped it down to 0.1. Relates to krfdyh */ | ||
margin: 1.5em; | margin: 1.5em; | ||
} | } | ||
Line 250: | Line 251: | ||
background: #0f0; | background: #0f0; | ||
font-weight: unset; | font-weight: unset; | ||
} | |||
/* Math */ | |||
mjx-container { | |||
font-size: 85%!important; | |||
} | } | ||
Line 256: | Line 263: | ||
/***********************/ | /***********************/ | ||
div.math-typesetting p { | |||
margin: 0 0 2em; | |||
text-indent: 1.5em; | |||
} | |||
div.math-block mjx-container { | |||
font-size: 117.4%!important; | |||
} | |||
div.math-block { | |||
text-align: center; | |||
} | |||
Line 309: | Line 326: | ||
.box-links ul { | .box-links ul { | ||
margin: 0.3em 0 0 1.16em; | margin: 0.3em 0 0 1.16em; | ||
} | |||
/* Grid Templates */ | |||
.grid-3-col { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr 1fr; | |||
gap: 1em; | |||
} | |||
.grid-2-col { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 1em; | |||
} | |||
@media screen and (max-width: 800px) { | |||
.grid-3-col, | |||
.grid-2-col { | |||
grid-template-columns: 1fr; | |||
} | |||
} | } | ||
Line 314: | Line 351: | ||
.book-listing { | .book-listing { | ||
flex: 0 1 300px; | flex: 0 1 300px; | ||
} | |||
.book-listing .book-cover a img { | |||
transition: transform linear .2s, filter linear .2s; | |||
} | } | ||
Line 319: | Line 360: | ||
transform: scale(1.025); | transform: scale(1.025); | ||
filter: drop-shadow(0px 3px 6px lightgray); | filter: drop-shadow(0px 3px 6px lightgray); | ||
} | } | ||
Line 325: | Line 365: | ||
padding: 0; | padding: 0; | ||
margin-top: 0.25em; | margin-top: 0.25em; | ||
} | |||
/* CardBook */ | |||
.card-book { | |||
display: grid; | |||
grid-template-columns: 112px 1fr; | |||
grid-template-rows: auto 1fr; | |||
grid-template-areas: | |||
"img info" | |||
"followon followon"; | |||
gap: 0.75em; | |||
padding: 0.75em; | |||
background: #e9e9e9; | |||
border-radius: 6px; | |||
} | |||
.card-book-img { | |||
grid-area: img; | |||
} | |||
.card-book-img img { | |||
border-radius: 3px; | |||
} | |||
.card-book-info { | |||
grid-area: info; | |||
} | |||
.card-book-title p, | |||
.card-book-authors p { | |||
line-height: 1.15; | |||
} | |||
.card-book-title p { | |||
margin: 0 0 0.25em; | |||
} | |||
.card-book-title a { | |||
font-weight: bold; | |||
} | |||
.card-book-authors p, | |||
.card-book-description p { | |||
margin: 0 0 0.5em; | |||
} | |||
.card-book-authors { | |||
font-size: 0.8em; | |||
} | |||
.card-book-description { | |||
line-height: 1.3; | |||
} | |||
.card-book-followon { | |||
grid-area: followon; | |||
line-height: 1.3; | |||
} | |||
.card-book-followon-heading { | |||
color: #393939; | |||
font-weight: bold; | |||
line-height: 1.3; | |||
margin: 0 0 0.5em; | |||
} | |||
.mw-collapsed .card-book-followon-heading { | |||
margin: 0; | |||
} | |||
ul.card-book-followon-list { | |||
margin: 0; | |||
} | |||
.card-book-followon-list-item { | |||
list-style: none; | |||
display: grid; | |||
grid-template-columns: 80px 1fr; | |||
gap: 0.75em; | |||
width: 100%; | |||
} | |||
.card-book-followon-list-item:not(:last-child) { | |||
margin: 0 0 0.75em; | |||
} | |||
.card-book-followon-img { | |||
border-radius: 3px; | |||
} | |||
.card-book-followon-title p { | |||
margin: 0; | |||
} | |||
.card-book-followon-title p, | |||
.card-book-followon-authors p { | |||
line-height: 1.15; | |||
} | } | ||
Line 403: | Line 540: | ||
display: grid; | display: grid; | ||
grid-template-columns: auto auto; | grid-template-columns: auto auto; | ||
} | |||
.nav-container-flex { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 1em; | |||
margin: 1em 0; | |||
} | |||
.nav-container-flex p { | |||
margin: 0; | |||
} | } | ||
Line 473: | Line 621: | ||
padding: .5em; | padding: .5em; | ||
text-align: center; | text-align: center; | ||
} | |||
.button-object a { | |||
transition: background linear .1s; | |||
} | } | ||
.button-object a:hover { | .button-object a:hover { | ||
background: #c7c7c7; | background: #c7c7c7; | ||
} | } | ||
Line 604: | Line 755: | ||
padding: 2em; | padding: 2em; | ||
border-radius: 0.33em; | border-radius: 0.33em; | ||
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0. | box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.12); /* Changed from 0.2 to 0.12. It's not at 0.1, because it should visually feel like it matches with krfdyh, which also has a border */ | ||
margin: 2em; | margin: 2em; | ||
} | } | ||
Line 843: | Line 994: | ||
border-radius: 500px; | border-radius: 500px; | ||
margin: 10px; | margin: 10px; | ||
} | |||
/***********************/ | |||
/* 8. New Styling */ | |||
/***********************/ | |||
.home-splash { | |||
margin: 0 0 1.5rem; | |||
} | |||
.home-header { | |||
display: flex; | |||
gap: 1rem; | |||
justify-content: space-between; | |||
margin: 0 0 1.5rem; | |||
} | |||
.mw-body .home-title h1 { | |||
margin: 0; | |||
border: 0; | |||
} | |||
.home-title p, | |||
.home-stats p, | |||
.home-intro p { | |||
margin: 0; | |||
} | |||
.home-intro p { | |||
max-width: 650px; | |||
} | |||
.home-intro-link a { | |||
background: #ededed; | |||
border-radius: 4px; | |||
color: black; | |||
display: block; | |||
line-height: 1.1; | |||
padding: 1rem; | |||
} | |||
.home-intro-link a:first-child { | |||
margin: 0 0 1rem; | |||
} | |||
.home-intro { | |||
display: flex; | |||
justify-content: space-between; | |||
gap: 1rem; | |||
} | |||
.home-section { | |||
margin: 0 0 3rem; | |||
} | |||
.home-section h2, | |||
.home-section h3 { | |||
border: 0; | |||
margin: 0 0 1rem; | |||
padding: 0; | |||
} | |||
.home-section-info { | |||
display: flex; | |||
gap: 1rem; | |||
margin: 1.5rem 0 0; | |||
} | |||
.home-media { | |||
flex-basis: 50%; | |||
} | |||
.home-direction, | |||
.home-resources { | |||
flex-grow: 1; | |||
border-radius: 16px; | |||
box-shadow: 0px 1px 3px rgb(0 0 0 / 10%), 0px 2px 7px hsl(0deg 0% 0% / 5%); | |||
padding: 1rem; | |||
} | |||
.home-direction { | |||
flex-basis: 36%; | |||
} | |||
.home-resources { | |||
flex-basis: 50%; | |||
} | } |