441
edits
No edit summary |
mNo edit summary |
||
(74 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 41: | Line 42: | ||
/* LEFTOVER END */ | /* LEFTOVER END */ | ||
/******************************/ | /******************************/ | ||
Line 172: | Line 57: | ||
.mw-body-content { | .mw-body-content { | ||
font-size: unset; | font-size: unset; | ||
} | |||
.vector-body { | |||
font-size: 1em; | |||
} | |||
/* Logo */ | |||
.mw-logo-wordmark { | |||
color: black; | |||
} | |||
/* Sidebar Font Size */ | |||
.vector-menu-portal .vector-menu-content li a, | |||
.vector-menu-portal h3 { | |||
font-size: 14px; | |||
} | } | ||
Line 260: | Line 160: | ||
/* Blockquote */ | /* Blockquote */ | ||
.vector-body blockquote, | |||
blockquote { | blockquote { | ||
padding | padding: 1.5em; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
border-left: 4px solid #ddd; | border-left: 4px solid #ddd; | ||
background: #fdfdff; | |||
background: #d8ecff; | /* background: #d8ecff; */ | ||
border-radius: | border-radius: 4px; | ||
border-color: #a3d3ff; | /* border-color: #a3d3ff; */ | ||
box-shadow: 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: | margin: 1.5em; | ||
} | } | ||
Line 281: | Line 181: | ||
color: black !important; | color: black !important; | ||
display: inline-block; | display: inline-block; | ||
width: | width: 100%; | ||
height: 100%; | height: 100%; | ||
padding: . | padding: .6em; | ||
padding-left: 0.25em; | padding-left: 0.25em; | ||
text-decoration: none; | text-decoration: none; | ||
transition: background .25s ease-in-out; | |||
} | } | ||
.skin-vector:not(.skin-vector-legacy) #mw-panel .vector-menu-content li a:hover { | .skin-vector:not(.skin-vector-legacy) #mw-panel .vector-menu-content li a:hover { | ||
background: #c7c7c7; | background: #c7c7c7; | ||
} | } | ||
.skin-vector:not(.skin-vector-legacy) a.feedlink { | .skin-vector:not(.skin-vector-legacy) a.feedlink { | ||
padding-left: 16px !important; | padding-left: 16px !important; | ||
} | |||
@media screen and (min-width: 1200px) { | |||
.mw-page-container-inner { | |||
grid-template-columns: 257px 20px minmax(0,1fr); | |||
} | |||
.mw-body { | |||
padding-left: 0; | |||
} | |||
} | |||
@media screen and (min-width: 1000px) { | |||
#mw-sidebar-checkbox:not(:checked) ~ .vector-sidebar-container-no-toc ~ .mw-content-container { | |||
padding-left: 0; | |||
} | |||
} | } | ||
Line 335: | Line 251: | ||
background: #0f0; | background: #0f0; | ||
font-weight: unset; | font-weight: unset; | ||
} | |||
/* Math */ | |||
mjx-container { | |||
font-size: 85%!important; | |||
} | } | ||
Line 341: | 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 359: | Line 291: | ||
/* Generic Boxes */ | /* Generic Boxes */ | ||
.box-generic { | .box-generic { | ||
box-shadow: 0 0 4px # | /* box-shadow: 0 0 4px #999; */ /* Maybe a little softer here? */ | ||
box-shadow: 0 0 4px #d6d6d6; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
border: none; | border: none; | ||
Line 393: | 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; | |||
} | |||
} | |||
/* Book Listing */ | |||
.book-listing { | |||
flex: 0 1 300px; | |||
} | |||
.book-listing .book-cover a img { | |||
transition: transform linear .2s, filter linear .2s; | |||
} | |||
.book-listing .book-cover a img:hover { | |||
transform: scale(1.025); | |||
filter: drop-shadow(0px 3px 6px lightgray); | |||
} | |||
.book-listing .book-title h3 { | |||
padding: 0; | |||
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 408: | Line 477: | ||
.skin-vector-legacy .flex-container .flex-item { | .skin-vector-legacy .flex-container .flex-item { | ||
flex: 1 1 32%; | flex: 1 1 32%; | ||
} | |||
/* Projects Container (used on Graph Wall Tome) */ | |||
.projects-container { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |||
gap: 1em; | |||
margin-bottom: 1em; | |||
} | } | ||
Line 463: | 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 526: | Line 614: | ||
.button-object a.external { | .button-object a.external { | ||
background-image: none; | background-image: none; | ||
color: black; | |||
} | } | ||
Line 532: | 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 663: | 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 708: | Line 800: | ||
border-top: 3px solid black; | border-top: 3px solid black; | ||
} | } | ||
/* Main Page styling */ | /* Main Page styling */ | ||
Line 766: | Line 814: | ||
padding: 1.25em; | padding: 1.25em; | ||
margin-bottom: .75em; | margin-bottom: .75em; | ||
/* box-shadow: 0 0 4px #999; */ /* Extra outline seemed unneeded. Feel free to yell at me if you disagree. 🤠 */ | |||
border-radius: 3px; | border-radius: 3px; | ||
} | } | ||
Line 814: | Line 862: | ||
border: none; | border: none; | ||
border-radius: 3px; | border-radius: 3px; | ||
box-shadow: 0 0 4px # | /* box-shadow: 0 0 4px #999; */ /* Maybe a little softer here? */ | ||
box-shadow: 0 0 4px #d6d6d6; | |||
padding: 1.25em; | padding: 1.25em; | ||
} | } | ||
Line 858: | Line 907: | ||
line-height: 1em; | line-height: 1em; | ||
text-align: center; | text-align: center; | ||
} | |||
.page-Main_Page .eric-social .social-icons a.external:hover { | |||
opacity: .85; | |||
} | |||
.eric-social .social-icons a .fa-youtube { | |||
color: #f00; | |||
} | |||
.eric-social .social-icons a .fa-twitter { | |||
color: #1da1f2; | |||
} | |||
.eric-social .social-icons a .fa-facebook { | |||
color: #1877f2; | |||
} | |||
.eric-social .social-icons a .fa-instagram { | |||
color: #262626; | |||
} | |||
.eric-social .social-icons a .fa-periscope { | |||
color: #40a4c4; | |||
} | } | ||
Line 908: | Line 981: | ||
} | } | ||
.page- | .page-Main_Page .intro-container { | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
} | } | ||
.page- | .page-Main_Page .community-section { | ||
max-width: unset; | max-width: unset; | ||
} | } | ||
} | |||
.profile-container img | |||
{ | |||
border-radius: 500px; | |||
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%; | |||
} | } |