/* ======================================== CSS Custom Properties for Theming ======================================== The entire theme system is controlled by these variables. The default state (:root) is the light theme. */ :root { /* Color Palette */ --colorMain: #EFD2C9; --colorSecond: #200894; --colorContrast: #1e29ff; --accentOne: #EDA0B3; --accentTwo: #A85080; /* general page and text colours */ --colorBackground: var(--colorMain); --nav-color: var(--accentOne); --colorText: var(--colorSecond); --color-border: var(--colorSecond); --color-link: var(--colorContrast); --color-link-hover: var(--accentTwo); --color-primary: #0F43B2; --color-primary-hover: #A85080; --footer-height: 40px; /* Define footer height as a variable */ --footer-text: #0F43B2; --footer-link-hover: #A85080; --transition-speed: 0.3s; --navbar-height: 60px; --navbar-padding: 1.5rem; --container-width: 1140px; --border-radius: 8px; --font-body: cp-sans; --font-header: dotgothic16; } /* The dark theme is an override of the root variables. It is applied when the tag has the `data-theme="dark"` attribute. */ [data-theme="dark"] { /* Color Palette */ --colorMain: #08041D; --colorSecond: #E9FF91; --colorContrast: #96FFFA; --accentOne: #20106D; --accentTwo: #6363c6; /* general page and text colours */ --colorBackground: var(--colorMain); --nav-color: var(--accentOne); --colorText: var(--colorSecond); --color-border: var(--colorSecond); --color-link: var(--colorContrast); --color-link-hover: var(--accentTwo); --color-primary: #E9FF91; --color-primary-hover: #6363c6; --footer-height: 40px; /* Define footer height as a variable */ --footer-text: #E9FF91; --footer-link-hover: #6363c6; } /* ======================================== Navbar Styles ======================================== */ .navbar { height: var(--navbar-height); display: flex; align-items: center; position: sticky; top: 0; background-color: var(--nav-color); border-bottom: 1px solid var(--color-border); transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease; z-index: 1000; } .navbar__container { display: flex; justify-content: space-between; align-items: center; height: 60px; width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--navbar-padding); } .navbar__brand { font-size: 1.5rem; font-weight: bold; color: var(--colorText); font-family: var(--font-header); text-decoration: none; transition: color var(--transition-speed) ease; } .navbar__toggle { display: block; border: none; background: transparent; cursor: pointer; padding: 0.5rem; } .navbar__toggle .bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--colorText); transition: all var(--transition-speed) ease; } .navbar__toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .navbar__toggle.is-active .bar:nth-child(2) { opacity: 0; } .navbar__toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .navbar__menu { display: none; flex-direction: column; width: 100%; position: absolute; top: var(--navbar-height); left: 0; background-color: var(--nav-color); border-bottom: 1px solid var(--color-border); z-index: 999; } .navbar__menu.is-active { display: flex; } .navbar__item { text-align: center; border-top: 1px solid var(--color-border); } .navbar__link { color: var(--colorSecond); display: block; padding: 1.5rem; font-family: var(--font-header); font-size: 1rem; font-weight: bold; } /* Focus state for all interactive elements */ :is(.navbar__toggle, .navbar__link, #theme-toggle):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; } footer { display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; border-top: var(--borderDotted); padding: 0 1em; font-size: .9em; font-family: var(--font-header); font-weight: 600; } /* Essential SVG Control */ .navbar-logo { width: 95px; /* Set the explicit size of your logo */ height: 28px; fill: var(--colorText); /* Change logo color dynamically via CSS */ transition: fill 0.3s ease; margin: auto; } .navbar-logo :hover{ fill: var(--accentTwo); } /* ======================================== Theme Toggle Button Styles ======================================== */ #theme-toggle { background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%; display: flex; align-items: center; } .theme-icon { width: 24px; height: 24px; color: var(--colorText); transition: color var(--transition-speed) ease, transform var(--transition-speed) ease; } #theme-toggle:hover .theme-icon { color: var(--accentTwo); transform: rotate(15deg); } /* Logic to show the correct icon based on the current theme */ .sun-icon { display: none; } .moon-icon { display: block; } [data-theme="dark"] .sun-icon { display: block; } [data-theme="dark"] .moon-icon { display: none; } /* ======================================== Desktop Navbar Styles ======================================== */ @media (min-width: 768px) { .navbar__toggle { display: none; } .navbar__menu { display: flex; flex-direction: row; align-items: center; position: static; width: auto; background-color: transparent; border: none; } .navbar__list { display: flex; align-items: center; gap: 1rem; } .navbar__item { border-top: none; } .navbar__link { padding: 0.5rem; } /* The theme toggle is the last item in the list */ .navbar__item:last-child { margin-left: 1.5rem; } } /* ======================================== Body Styles ======================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; background-color: var(--colorBackground); color: var(--colorText); transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease; } .content { height: 200vh; padding: 100px var(--navbar-padding); text-align: center; } ul { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; color: var(--colorContrast); } a:hover { color: var(--accentTwo); } mark { background-color: var(--accentOne); color: var(--colorSecond); } body { display: flex; flex-flow: column; justify-content: space-between; margin: 0; height: 100vh; font-family: var(--font-body); color: var(--colorText); background-color: var(--colorBackground); background-image: var(--imageBackground); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; } hr { border: 0; border-top: var(--borderDotted); margin: 1em 0; width: 100%; } blockquote { margin: 1.5em; padding-left: 1.5em; border-left: 1px solid var(--colorSecondary); } pre, code { width: calc(var(--widthContent) - 200px); background: var(--colorTertiary); padding: 4px 8px; margin: 1em auto; max-height: 300px; overflow: scroll; } figure > figcaption:before { content: '↳ '; } figure > figcaption { font-size: 12px; } audio, video, iframe { display: block; margin: auto; border: var(--borderSolid); box-shadow: 0.3em 0.3em var(--colorShadow); } details > summary { padding: 0.2em 0; margin: 0 2em; border-bottom: 1px solid var(--colorTertiary); cursor: pointer; } /* Headers */ .h2-link { color: var(--colorMain); font-weight: bold; } .h3-link { color: var(--colorMain); font-weight: bold; } .h3-title { text-transform: uppercase; padding: 0 1em; font-family: var(--font-header); color: var(--colorMain); background: var(--colorText); font-weight: bold; } h3 { font-family: var(--font-header); font-size: 1.25rem; text-decoration: underline; } h4 { font-family: var(--font-header); font-size: 1rem; text-decoration: underline dotted; } h5 { font-family: var(--font-header); font-size: 1rem; } h6 { font-family: var(--font-header); font-size: .75rem; } /*UL Styles*/ .bullet-list > li { /* padding: 0.2em 0; */ list-style-type: disc; list-style-position: outside; padding-left: 20px; /* Gives the bullets room to appear */ list-style-position: inside; /* Forces bullets inside the content box */ } /* ======================================== Fonts ======================================== */ @font-face { font-family: cp-code; src: url(/fonts/courier-prime-code.ttf); } @font-face { font-family: dotgothic16; src: url(/fonts/DotGothic16-Regular.ttf); } @font-face { font-family: cp-sans; src: url(/fonts/Courier\ Prime\ Sans.ttf); } /* ======================================== Main Body ======================================== */ main { display: flex; flex-flow: row wrap; align-items: flex-start; } main > .content { display: flex; flex-flow: row wrap; flex: 1 1 20em; max-width: var(--widthContent); padding: 1em; } html{ scroll-behavior: smooth; } /* ======================================== Scroll to Top ======================================== */ .topscroll { height: 50px; width: 50px; background-color: var(--nav-color); position: fixed; bottom: 10px; right: 10px; margin: 0px 0px 32px 0px; cursor: pointer; border-radius: 6px; border: 1px solid var(--color-border); box-shadow: 0.2em 0.2em var(--color-border); transform: scale(0.9); transition: 0.3s ease-in-out transform; display: flex; align-items: center; justify-content: center; } .topscroll:hover { transform: scale(1); border: 1px solid var(--color-link-hover); box-shadow: 0.2em 0.2em var(--color-link-hover); } .topscroll svg { width: 50%; pointer-events: none; color: var(--colorText); } .topscroll svg:hover { color: var(--color-link-hover); } /* ======================================== Section Styles ======================================== */ section { border: 2px solid var(--color-border); background-color: var(--colorBackgroundMain); color: var(--colorText); box-shadow: 0.5em 0.5em var(--color-border); padding: 1em; margin: .8em auto; width: 85%; } section h1 { text-transform: uppercase; padding: 0 1em; font-family: var(--font-header); color: var(--colorBackground); background: var(--colorText); } section h2 { text-transform: uppercase; padding: 0 1em; font-family: var(--font-header); color: var(--colorBackground); background: var(--colorText); } section a::after { content: '\21F2'; padding: 0; display: inline-block; transform: rotate(-90deg); vertical-align: super; font-style: normal; font-weight: bold; font-size: 0.7em; color: var(--colorTertiary); } section img { width: 100%; } /* .char-profile { display: block; margin: auto; height: 50%; width: 50%; } */ section p { font-family: var(--font-body); font-size: 1; font-weight: 600; padding: 0 1em; max-inline-size: 95%; text-align: justify; text-decoration: none; } section > ul li, section > ol li { list-style-type: disc; list-style-position: outside; padding-left: 20px; /* Gives the bullets room to appear */ list-style-position: inside; /* Forces bullets inside the content box */ } .half-width { display: flex; flex-flow: row wrap; width: 100%; min-height: 300px; } .half-width section { width: 45%; margin: 1em auto 1em; } section.half-width pre { width: unset; } .title-bar { width: 95%; } section .scrollbox { max-height:250px; overflow: scroll; border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAo0lEQVRYR+2YsQ2AMAwE8XB0rMFUrEHHcECQQkdh6w2yODcRUnI4n6MINs7TPpy1Lau10fvc1njKy+/zLbqwb8zTZCSIu1Hvi76afx13hapz9Dgq9glHnwKNqlbnYxKrlIbDURxNk0sEruOoaMPpGBJVR0yiJKpOQM3DURJVJ6Dm1XE0eod5/ZdOmUbVLmXxcJQ7U5ZbKi6O4qjKpSwOjv7W0QOMUt+K9QUh9QAAAABJRU5ErkJggg==") 14 / 14px / 0 round; border-width: 14px; border-style: solid; } /* in-section flex settings */ section > .flex-columns { display: flex; flex-flow: row wrap; align-items: center; } .flex-columns > .flex-text { width: 60%; } .flex-columns > .flex-image { width: 40%; } .flex-columns > .flex-image > img { width: 100%; padding: 0 1em; } /* preview frames */ .preview-frame { display: flex; flex-flow: row wrap; border: 1px solid var(--colorPrimary); border-radius: 0 0 1em 0; margin: 1em; } .preview-frame a { max-width: 250px; } .preview-frame a:after { content: ''; } .preview-frame a img{ height: 100%; object-fit: contain; flex-basis: 0; padding: 10px; } .preview-frame > div { border-left: 1px solid var(--colorPrimary); width: calc(100% - 250px); flex-basis: 1 1 auto; } .preview-frame h3 { padding: 8px 0; margin: 0; border-bottom: 1px solid var(--colorPrimary); } .preview-frame h3, .preview-frame p { padding-left: 12px; } .preview-frame button { margin-left: 12px; margin-bottom: 12px; } /* gallery */ .gallery { /* Prevent vertical gaps */ line-height: 0; -webkit-column-count: var(--columnCount); -webkit-column-gap: var(--columnGap); -moz-column-count: var(--columnCount); -moz-column-gap: var(--columnGap); column-count: var(--columnCount); column-gap: var(--columnGap); } .gallery div, .gallery img { /* Just in case there are inline attributes */ width: 100% !important; height: auto !important; margin-bottom: var(--columnGap); } /* tree view */ .tree-view { margin-bottom: 12px; } .tree-view ul > li::before { content: ''; border-bottom: var(--borderTree); display: block; width: 24px; /* transform: translate(0, 25px);*/ } nav .tree-view ul { display: flex; flex-flow: column; border-left: var(--borderTree); transform: translate(0, -8px); margin: 0 0 0 24px; padding: 0; } nav .tree-view ul li { display: flex; flex-flow: row nowrap; align-items: flex-end; list-style-type: none; min-height: 32px; } nav .tree-view a { display: block; margin-left: 8px; transform: translate(0, 8px); padding: 2px; text-decoration: none; width: 100%; } section .tree-view ul { border-left: var(--borderTree); transform: translate(24px, 0px); margin: 0 0 0 24px; padding: 0; } section .tree-view ul li { display: flex; flex-flow: row nowrap; align-items: flex-end; padding: 0; min-height: 32px; list-style-type: none; max-width: 500px; } section .tree-view ul > ul > li { margin-top: 10px; } section .tree-view a, section .tree-view li p { margin: 0 0 0 8px; transform: translate(0, 8px); padding: 2px; text-decoration: none; width: 100%; } section .tree-view > p { margin: 0; padding: 8px; border: var(--borderTree); } /* arrow list */ .arrow-list > li { padding: 0.2em 0; border-bottom: 1px solid var(--colorTertiary); list-style-position: outside; list-style-type: '→ '; /* for Safari/iOS/whatever other browser that hates ::marker */ } .arrow-list > li::marker { content: '→ '; font-family: sans-serif; } /* to do list */ .todo-list li { padding: 0.2em 0; border-bottom: 1px solid var(--colorTertiary); list-style-position: outside; list-style-type: '☐ '; /* for Safari/iOS/whatever other browser that hates ::marker */ } .todo-list > li::marker { content: '☐ '; font-family: sans-serif; } .todo-list > .task-done { color: var(--colorTertiary); text-decoration: line-through; list-style-position: outside; list-style-type: '☒ '; /* for Safari/iOS/whatever other browser that hates ::marker */ } .todo-list > .task-done::marker { content: '☒ '; font-family: sans-serif; } /* not found page */ .not-found { display: flex; flex-flow: column; max-width: 800px; height: 500px; justify-content: center; margin: auto; padding: 2em; } @media screen and (max-width: 600px) { :root { /* gallery settings */ --columnCount: 1; --columnGap: 8px; } html { font-size: 0.9em; } header.mobile-only { display: flex; flex-flow: row; justify-content: space-between; align-items: center; width: 100%; border-bottom: var(--borderDotted); padding: 0 1em; margin-bottom: 1em; text-transform: uppercase; } main > .content { order: 1; padding: 4px; } main > .sidebar { order: 2; max-width: 100%; padding: 1em; } section > .flex-columns { display: flex; flex-flow: column; } pre, code { max-width: 250px; } audio, video, iframe { width: 100%; } video, iframe { height: 200px; } .flex-columns > .flex-text { width: 100%; } .flex-columns > .flex-image { width: 100%; } .flex-columns > .flex-image > img { margin: 12px 0; } .half-width section { width: 100%; } /* preview frames */ .preview-frame { display: flex; flex-flow: column; } .preview-frame a { max-width: 100%; } .preview-frame > a > img { height: 100%; border-bottom: 1px solid var(--colorPrimary); } .preview-frame > div { border-left: none; width: 100%; } .preview-frame h3 { padding: 8px 0; margin: 0; } .preview-frame h3, .preview-frame p { padding-left: 12px; } } /* ======================================== Buttons ======================================== */ .btn { color: var(--colorMain); background: var(--colorSecond); padding: 2px 6px; border: none; border-radius:5px; font-family: var(--font-header); font-weight: bold; }