/* * Theme definitions */ :root { --background-color: #dadfe1; --text-color: #000000; --accent-color: #0000a0; --accent-color-alternate: #800080; --active-color: #00ffff; --card-color: #adb5bd; } [data-theme=dark] { --background-color: #282828; --text-color: #dadfe1; --accent-color: #fffacd; --accent-color-alternate: #ffd700; --active-color: #f89406; --card-color: #343a40; } /*******************************************************/ /* Variables */ /*******************************************************/ /*******************************************************/ /* Basics */ /*******************************************************/ body, html { height: 100%; } body { background-image: url("/assets/images/backgrounds/hexellence.png"), linear-gradient(#000000, #000000); font-family: "Source Sans Pro", Trebuchet MS, Arial, Helvetica, Verdana, sans-serif; padding-top: 70px; color: var(--text-color); } h1, h2, h3 { text-align: center; } h5.faq { color: var(--accent-color-alternate); } a:link { color: var(--accent-color); } a:visited { color: var(--accent-color); } a:hover { color: var(--accent-color-alternate); } a:active { color: var(--active-color); } .navbar-nav a.nav-link:link { color: #fffacd; } .navbar-nav a.nav-link:visited { color: #fffacd; } .navbar-nav a.nav-link:hover { color: #ffd700; } .navbar-nav a.nav-link:active { color: #f89406; } a.footer-link:link { color: #A57E54; } a.footer-link:visited { color: #A57E54; } a.footer-link:hover { color: #A57E54; } a.footer-link:active { color: #A57E54; } /* Make the navbar semi-transparent */ .navbar.transparent { background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)); } /* Site header carousel */ #header-carousel { margin-bottom: 20px; border-bottom: 3px solid rgba(255, 250, 205, 0.3); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); background-image: url("/assets/images/backgrounds/hexellence.png"), linear-gradient(#000000, #000000); } /* Site header splash image */ .site-header-splash { width: 100%; max-height: 500px; object-fit: contain; } /********************************/ /** Adjustments to containers **/ /********************************/ .container.footer { color: #dadfe1; } /* Custom top level container for the body */ .container.top { border-radius: 25px; margin-top: 10px; color: var(--text-color); background-color: var(--background-color); } /* custom container for faq answers */ blockquote { padding: 10px; margin-top: 5px; margin-bottom: 15px; border-radius: 20px; border: 2px inset; color: var(--text-color); background-color: tint(var(--background-color), 10%); } /*******************************************/ /* A special class for the download button */ /*******************************************/ a.download_link { text-decoration: none; color: #dadfe1; background-image: linear-gradient(#000000, #434343, #000000); padding: 12px 30px; cursor: pointer; font-size: 20px; border-radius: 8px; border: 5px solid var(--accent-color); display: block; } a.download_link img { float: left; height: 100px; } a.download_link span { line-height: 14px; font-size: 14px; padding: 4px; display: inline-block; vertical-align: middle; text-align: center; } a.download_link:hover { stroke-width: 5.3px; color: #dadfe1; text-shadow: 1px 0 20px var(--accent-color-alternate); border: 5px solid var(--accent-color-alternate); } a.download_link:active { background: var(--active-color); } /****************************************************/ /* Override default lists to use Font Awesome icons */ /****************************************************/ ul { list-style-type: none; } ul li:before { content: "\f05b"; font-family: "Font Awesome 6 Free"; padding-right: 5px; margin-left: -20px; } ul li.news:before { font-family: "Font Awesome 6 Free"; content: "\f1ea"; } ul li.list-group-item { color: var(--text-color); background-color: var(--background-color); } /*********************************************************************/ /* Screenshot carousel */ /*********************************************************************/ .carousel { border: 3px solid black; border-radius: 10px; overflow: hidden; } .carousel-caption { background: rgba(0, 0, 0, 0.7); border-radius: 20px; padding: 5px; bottom: 10px; max-width: 400px; } .carousel-control-prev { background: rgba(0, 0, 0, 0.9); max-width: 30px; max-height: 30px; position: absolute; top: 50%; border-radius: 5px; margin-left: 20px; } .carousel-control-next { background: rgba(0, 0, 0, 0.9); max-width: 30px; max-height: 30px; position: absolute; top: 50%; border-radius: 5px; margin-right: 20px; } /*********************************************************************/ /* posts */ /*********************************************************************/ div.post-meta { border-width: 1px 0; border-color: #666666; border-style: solid; margin: 0 0 20px; } div.post-meta ul { display: inline; padding-left: 0; } div.post-meta ul > li { display: inline; padding: 0 0 5px 20px; } div.post-meta li:before { content: ""; margin: 0 5px 0 0; } div.post-meta .post-time { display: inline; } /*********************************************************************/ /* Download page program images */ /*********************************************************************/ .download-program-img { max-height: 150px; width: auto; } /*********************************************************************/ /* Bootstrap cards */ /*********************************************************************/ .dl-card { background-color: var(--card-color); color: var(--text-color); } /*********************************************************************/ /* Program cards with splash art */ /*********************************************************************/ .program-card { background-color: var(--card-color); color: var(--text-color); border: 1px solid rgba(255, 250, 205, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; } .program-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } .program-card .card-img-top { height: 180px; object-fit: cover; object-position: center; } .program-card .card-title { color: var(--accent-color); font-weight: bold; margin-bottom: 0.75rem; } .program-card .card-text { font-size: 0.9rem; } /*********************************************************************/ /* Code formatting */ /*********************************************************************/ pre { border: 1px solid #e8e8e8; border-radius: 5px; overflow-x: auto; padding: 8px 12px; } code.highlighter-rouge { border-radius: 5px; padding: 0; color: var(--accent-color-alternate); font-weight: 600; } /* Nav Bar Dark Mode Toggle Switch */ /*Simple css to style it like a toggle switch*/ .theme-switch-wrapper { display: flex; align-items: center; } .theme-switch-wrapper em { margin-left: 10px; font-size: 1rem; } .theme-switch { display: inline-block; height: 17px; position: relative; width: 30px; } .theme-switch input { display: none; } .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: #fff; bottom: 2px; content: ""; height: 13px; left: 2px; position: absolute; transition: 0.4s; width: 13px; } input:checked + .slider { background-color: #66bb6a; } input:checked + .slider:before { transform: translateX(13px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /*# sourceMappingURL=mmsite.css.map */