/* Add your CSS here! It'll be added to the of each page. */ body { background-color: #ecebe8; color: #414140; font-family: "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 28px; line-height: 1.5; } .pacifico-regular, main h2 { font-family: "Pacifico", cursive; font-weight: 400; font-style: normal; } ::selection { color: white; background-color: #414140; } main { max-width: 950px; margin: 0 auto; } main img { display: block; margin: 10px auto; max-width: 100%; height: auto; background-color: #dadada; border: solid #cacaca 1px; } main figcaption { display: block; margin: 10px auto; text-align: center; max-width: 500px; font-weight: 200; font-style: italic; } #logo { display: block; text-align: center; } #logo a { text-decoration: none; border-width: 0 0 3px; border-color: #dadada; border-style: solid; color: #c7433f; } h2 { text-align: center; } a { color: #414140; } a:hover { color: #c7433f; } nav { display: flex; justify-content: center; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; line-height: 27px; display: flex; flex-wrap: wrap; justify-content: center; } nav ul li a { text-decoration: none; display: flex; text-align: center; padding: 8px 10px; line-height: 36px; font-size: 24px; font-weight: 200; position: relative; } nav ul li a:hover { transition: 0.2s; font-weight: bold; } #unread-badge { position: absolute; right: 0; background-color: #c7433f; border-radius: 50%; color: white; padding: 1px 4px; font-size: 12px; font-weight: bold; /* vertical-align: top; */ /* margin-left: -5px; */ display: block; line-height: 14px; } #home-splash { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 2em 0; flex-direction: row; padding: 5px; } .illustration { margin: 2em 0; } .splash-image { flex: 1; height: 300px; } .splash-image img { width: 100%; height: 100%; max-width: 280px; max-height: 280px; object-fit: cover; border-radius: 30px; overflow: hidden; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); } #notice { background-color: #f5f5f5; color: #333; padding: 10px 20px; font-size: 14px; font-family: "Roboto Mono", monospace; font-weight: 400; display: block; } article { margin: 0 auto; max-width: 680px; border-bottom: 1px solid #dadada; } article a.previous, article a.next { display: block; text-align: center; padding: 10px 0; font-size: 20px; font-weight: 200; } footer { margin-top: 1em; text-align: center; } footer .social-icons { align-items: center; display: flex; justify-content: center; } footer .counter { font-size: 11px; font-style: italic; } .opening { color: #c7433f; padding: 5px; font-size: 50px; text-align: center; } .thick-box-text { font-weight: 600; color: #414140; /* background-color: #414140; */ /* display: inline-block; */ /* padding: 0px 10px; */ /* border-radius: 10px; */ /* overflow: hidden; */ /* position: relative; */ /* top: 18px; */ } .hoverable-image { position: relative; } .hoverable-image img { transition: 1.5s; } .hoverable-image .nohover { opacity: 1; } .hoverable-image .onhover { opacity: 0; position: relative; top: -305px; } .hoverable-image:hover .onhover { opacity: 1; } .hoverable-image:hover .nohover { opacity: 0; } /* These are YouTube-style thumbnails and titles/descriptions. */ .youtube-videos { font-family: Helvetica, Arial, sans-serif; display: flex; gap: 20px; } .youtube-videos a { display: flex; align-items: start; flex-direction: column; color: black; text-decoration: none; margin-top: 0; margin-bottom: 0; transition: transform 0.3s ease; will-change: transform; } .youtube-videos a:hover img.thumb { transform: scale(1.03); /* Slightly scale up the thumbnail */ transition: transform 0.3s ease; will-change: transform; } .youtube-videos img.thumb { flex-shrink: 0; object-fit: cover; margin-right: 10px; padding: 0; } .youtube-videos .text-container { display: flex; flex-direction: column; justify-content: center; } .youtube-videos h4 { font-size: 14px; margin: 0 0 4px 0; line-height: 1.2; } .youtube-videos span { color: grey; font-size: 12px; margin-bottom: 2px; } #avatar-circle { margin: 0 auto; display: block; background-color: none; border: none; } #avatar-circle img { border-radius: 50%; width: 300px; height: 300px; object-fit: cover; } /* Buttons arranged vertically, like LinkedTree */ #link-tree { list-style-type: none; margin: 0; padding: 20px; overflow: hidden; line-height: 27px; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; } /* Buttons are rounded and have a border and nice background gradient */ #link-tree a { text-decoration: none; display: block; text-align: center; padding: 18px 20px; line-height: 36px; font-size: 24px; font-weight: 200; border-radius: 40px; border: solid #dadada 1px; background: linear-gradient(to bottom, #f5f5f5 0%, #ecebe8 100%); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); margin: 5px; } code { background-color: #424e5f; color: #ffffff; padding: 8px 16px; display: block; border-radius: 6px; /* border-left: solid 1px black; */ font-size: 13px; margin: 10px 0; /* slight interior shadow */ box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); } .copyright { font-size: 12px; text-align: center; margin: 20px 0; } #blog-years { display: flex; margin: 2rem auto; /* set max-width to normal width of the main nav just go measure it in the browser and set it here and in the media query below */ width: 542px; } @media (max-width: 560px) { body { font-size: 24px; } #blog-years { width: 100%; } nav ul li a { /* smaller font size on main menu too */ font-size: 70%; } } #blog-years ul.articles { /* listed horizontally, aligned left, flowing to the right and wrapping */ /* but staying left justified, not expanding to fill the space */ display: flex; flex: 1; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 0.25rem; } #blog-years ul.articles li { margin: 0.5rem; flex: initial; } #blog-years ul.articles li a { display: inline-flex; padding: 0 0.5rem; border-radius: 5px; background-color: #f5f5f5; color: #414140; text-decoration: none; flex-direction: column; font-size: 70%; } #blog-years ul.articles li a.active { background-color: #c7433f; color: white; } #blog-years div.years { /* listed vertically */ flex-direction: column; align-items: center; border-right: 1px solid #fff; } #blog-years div.years a { display: block; padding: 0.5rem 1rem; margin: 0.5rem; border-radius: 5px; background-color: #f5f5f5; color: #414140; text-decoration: none; font-size: 70%; } #blog-years div.years a.active { background-color: #c7433f; color: white; } /* prevent the hover effect from changing the layout */ /* brilliant: https://css-tricks.com/bold-on-hover-without-the-layout-shift/ */ /* any a links with a data-text attribute will use this fix for hover */ a[data-text] { flex-direction: column; } a[data-text]::after { content: attr(data-text); content: attr(data-text) / ""; height: 0; visibility: hidden; overflow: hidden; user-select: none; pointer-events: none; font-weight: bold; }