diff options
Diffstat (limited to 'static.bak/style.css')
| -rw-r--r-- | static.bak/style.css | 256 |
1 files changed, 256 insertions, 0 deletions
diff --git a/static.bak/style.css b/static.bak/style.css new file mode 100644 index 0000000..04e07d6 --- /dev/null +++ b/static.bak/style.css @@ -0,0 +1,256 @@ + + +:root { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + + --colour: #000000; + --secondary-colour: #202020; + + --primary-background: #fafafa; + --secondary-background: #dadada; + --tertiary-background: #bbbbbb; + + --background-inverted: #101010; + --colour-inverted: #cacaca; + + --link-colour: #3344dd; + --link-colour-visited: #804180; + + --link-colour-secondary: #202FBC; /* link colours for on secondary bg */ + --link-colour-visited-secondary: #885588; + + --brand-colour: #ff8100; + --brand-bg: #b15900; +} + +@media (prefers-color-scheme: dark) { + :root { + --colour: #fafafa; + --secondary-colour: #acacac; + + --primary-background: #202020; + --secondary-background: #404040; + --tertiary-background: #5f5f5f; + + --background-inverted: #fafafa; + --colour-inverted: #000000; + + --link-colour: #2491FF; + --link-colour-visited: #9875FF; + + --link-colour-secondary: #61B0FF; + --link-colour-visited-secondary: #B87AB8; + } +} + +:root { + background-color: var(--primary-background); + color: var(--colour); +} + +body { + margin: 0px; +} +main { + margin: 5px; +} + +a { + color: var(--link-colour); +} +a:visited { + color: var(--link-colour-visited); +} + +nav ul { + list-style-type: none; + margin: 0px; + padding: 0px; + li { + float: left; + } + a:hover { + background-color: var(--brand-bg); + color: #fcfcfc; + } +} + +header { + .title { + background-color: var(--brand-colour); + color: #000000; + } + + background-color: var(--tertiary-background); + margin-bottom: 20px; + + .second { + background-color: var(--secondary-background); + --link-colour: var(--link-colour-secondary); + --link-colour-visited: var(--link-colour-visited-secondary); + padding: 2px; + } + .pathskip { + position: absolute; + display: inline-block; + line-height: 1; + transform: translateY(1rem); + } + .pathskip:not(:focus) { + transform: translateY(-4rem); + } +} + +footer { + .footer-main { + padding: 2px; + background-color: var(--secondary-background); + --link-colour: var(--link-colour-secondary); + --link-colour-visited: var(--link-colour-visited-secondary); + } + + margin-top: 40px; +} + + +.dirlist { + .dirlist-header { + border-bottom: 1px solid; + background-color: var(--tertiary-background); + } + .dirlist-listing:nth-child(2n) { + background-color: var(--primary-background) + } + .dirlist-listing:nth-child(2n+1) { + background-color: var(--secondary-background); + + --link-colour: var(--link-colour-secondary); + --link-colour-visited: var(--link-colour-visited-secondary); + } +} + +.error-heading { + color: #ff2020; +} + +.mediaplayer { + display: grid; + height: 100%; + img, video { + max-width: 100%; + max-height: 70vh; + margin: auto; + object-fit: contain; + } + + audio { + width:90vw; + margin-left: auto; + margin-right: auto; + } + + .media-below { + margin: auto; + margin-top: 30px; + margin-bottom: 0px; + } + + #meta { + tr, td, th { + border: 1px solid var(--colour); + } + th { + border-width: 2px; + } + } +} + + +.line { + width: 100%; + border-bottom: 2px solid var(--colour); + margin-top: 5px; + margin-bottom: 5px; + content: ""; +} + +.textviewer { + .highlighted { + margin: auto; + width: calc( 100% - 20px); + height: calc( 75vh ); + overflow: scroll; + padding: 5px; + } + /*.precontent { + }*/ +} + +.nobullets { + list-style: none; +} + +.markdown { + .toc ul li a { + display: block; + } + .toc ul { + padding-left: 5px; + list-style: none; + } + .toc ul li ul { + padding-left: 20px; + border-left: 1px solid var(--colour); + } + .tocparent { + background: var(--secondary-background); + + width: 19%; + position: fixed; + + overflow: auto; + + height: 100%; + margin: 0px; + + --link-colour: var(--link-colour-secondary); + --link-colour-visited: var(--link-colour-visited-secondary); + } + .main { + width: 80%; + margin-left: calc(19% + 1%); /* first percentage is same value as .tocparent width */ + } + + .hidden:not(:focus) { /*TODO: make it actually hide properly, https://www.makethingsaccessible.com/guides/creating-a-skip-to-content-link/ */ + transform: translateY(-2rem); + } + + @media (max-width: 1100px) { + .main { + width: 70%; + margin-left: calc(29% + 1%); + } + .tocparent { + width: 29%; + } + } + @media (max-width: 940px) { + .tocparent { + width: 100%; + position:unset; + display:block; + } + .toc ul li a { + display: inline; /* to stop accidentally opening links when tapping in "empty" area*/ + } + .main { + width:100%; + margin-left: unset; + } + .hidden:not(:focus) { + transform: unset; + } + } +} + + |