diff --git a/main/css/page.css b/main/css/page.css index 546ea02..d326aba 100644 --- a/main/css/page.css +++ b/main/css/page.css @@ -36,6 +36,27 @@ div.contents { padding-left: 3em; } +div.contents a::before { + margin-right: 0em; +} + +a[id*="user-content-"]::before { + display: none; +} + +a[id*="user-content-"] svg { + fill: #e5adea; + margin-right: 5px; + margin-left: -21px; + opacity: 0%; + transition: opacity 0.2s ease-in-out; +} + +:is(h1, h2, h3, h4, h5, h6):hover a[id*="user-content-"] svg { + opacity: 80%; + transition: opacity 0.2s ease-in-out; +} + #header-icon { width: 10em; opacity: 0.6; @@ -71,10 +92,9 @@ div.contents { background: linear-gradient(to right, transparent, #21192c); } -h1, h2, h3 { +h1, h2, h3, h4, h5, h6 { color: #f3c3f7; font-family: "Wenceslas", serif; - font-size: 2rem; border-bottom: 1px dashed #3b2d4f; } @@ -85,6 +105,11 @@ p, ul, ol, table { max-width: 1000px; } +strong { + font-weight: bolder; + text-shadow: 0px 0.5px, 0.5px 0px, 0.8px 0px; +} + img:not(#header-icon) { border-radius: 5px; max-width: 800px; @@ -113,6 +138,12 @@ code { font-size: 1rem; } +:not(pre) > code { + background-color: #3b2947; + padding: 2px; + border-radius: 3px; +} + code[class*="language-"], pre[class*="language-"] { display: block; background: #3b2947; @@ -143,18 +174,26 @@ pre { code .highlight-line:before { -webkit-user-select: none; user-select: none; - border-right: 1px solid #b37ba7; color: #b37ba7; content: counter(lineNumber); counter-increment: lineNumber; display: inline-block; font-variant-numeric: tabular-nums; - margin-right: 1em; + /* this is Hacky but should fix wrap with line numbers */ + /* im so sorry */ + margin-left: -3em; + margin-right: 1.5em; padding-right: 1em; text-align: right; width: 0.5em; } +code .highlight-line { + margin-left: 1.5em; + padding-left: 1.5em; + border-left: 1px solid #b37ba7; +} + /* from eleventy docs */ .highlight-line { display: inline-block; @@ -168,14 +207,6 @@ code .highlight-line:before { .highlight-line:empty:before { content: " "; } - -.highlight-line:not(:last-child) { - min-width: 100%; -} - -.highlight-line .highlight-line:not(:last-child) { - min-width: 0; -} .highlight-line-active { background-color: #59447cc4; @@ -189,14 +220,18 @@ code .highlight-line:before { background-color: #a5505096; } +code[class*="language-"], pre[class*="language-"], +pre > code:not([class]) { + width: auto; + white-space: pre-wrap; +} + @media only screen and (min-width: 1000px) { body { display: inline-block; } - - code[class*="language-"], pre[class*="language-"], - pre > code:not([class]) { - width: max-content; + div.contents { + max-width: 1200px; } } @@ -214,7 +249,7 @@ code .highlight-line:before { border: none; padding-bottom: 2em; padding-left: 3em; - width: 95%; + width: 90%; height: auto; position: relative; } @@ -228,4 +263,9 @@ code .highlight-line:before { padding-left: 0.5em; padding-right: 0.5em; } + + a[id*="user-content-"] { + margin-left: 0; + float: right; + } } \ No newline at end of file