diff --git a/static/css/in.css b/static/css/in.css index 5b239dda..76442b38 100644 --- a/static/css/in.css +++ b/static/css/in.css @@ -61,6 +61,11 @@ } } +/*Hide heading anchor links unless hovering over them*/ +.headerlink { + @apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline; +} + .note { @apply bg-rp-dawn-highlight-med dark:bg-rp-moon-highlight-med m-8 p-4; } @@ -68,6 +73,14 @@ @apply bg-rp-dawn-text text-rp-dawn-base dark:bg-rp-moon-text dark:text-rp-moon-base m-8 p-4; } +/*Attempt to only float thumbnails to the right*/ +.image-process-article-image, +.image-process-thumb, +.image-process-responsive { + /*@apply lg:float-right p-2 lg:p-4;*/ + @apply lg:float-right px-1 lg:px-3; +} + #skiptocontent a { position: absolute; top: -40px; diff --git a/static/css/out.css b/static/css/out.css index edc93ef0..11e62890 100644 --- a/static/css/out.css +++ b/static/css/out.css @@ -1217,6 +1217,10 @@ code { grid-column: span 2 / span 2; } +.col-span-3 { + grid-column: span 3 / span 3; +} + .col-span-7 { grid-column: span 7 / span 7; } @@ -1368,6 +1372,16 @@ code { background-color: rgb(255 250 243 / var(--tw-bg-opacity, 1)); } +.bg-green-600 { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); +} + +.bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1)); +} + .p-1 { padding: 0.25rem; } @@ -1380,10 +1394,6 @@ code { padding: 1rem; } -.p-5 { - padding: 1.25rem; -} - .p-8 { padding: 2rem; } @@ -1450,11 +1460,6 @@ code { color: rgb(180 99 122 / var(--tw-text-opacity, 1)); } -.text-rp-dawn-overlay { - --tw-text-opacity: 1; - color: rgb(242 233 225 / var(--tw-text-opacity, 1)); -} - .text-rp-dawn-pine { --tw-text-opacity: 1; color: rgb(40 105 131 / var(--tw-text-opacity, 1)); @@ -1475,6 +1480,25 @@ code { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +/*Hide heading anchor links unless hovering over them*/ + +.headerlink { + margin-left: 0.25rem; + --tw-text-opacity: 1; + color: rgb(180 99 122 / var(--tw-text-opacity, 1)); + text-decoration-line: none; +} + +.headerlink:hover { + text-decoration-line: none; +} + +@media (min-width: 768px) { + .headerlink { + margin-left: 0.5rem; + } +} + .note { margin: 2rem; --tw-bg-opacity: 1; @@ -1507,6 +1531,26 @@ code { } } +/*Attempt to only float thumbnails to the right*/ + +.image-process-article-image, +.image-process-thumb, +.image-process-responsive { + /*@apply lg:float-right p-2 lg:p-4;*/ + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +@media (min-width: 1024px) { + .image-process-article-image, +.image-process-thumb, +.image-process-responsive { + float: right; + padding-left: 0.75rem; + padding-right: 0.75rem; + } +} + #skiptocontent a { position: absolute; top: -40px; @@ -2070,6 +2114,11 @@ code { text-decoration-line: none; } +.prose-img\:mx-auto :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) { + margin-left: auto; + margin-right: auto; +} + .prose-img\:rounded :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) { border-radius: 0.25rem; } @@ -2083,10 +2132,18 @@ code { grid-column: span 6 / span 6; } + .md\:col-span-7 { + grid-column: span 7 / span 7; + } + .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .md\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + .md\:border-l-4 { border-left-width: 4px; } diff --git a/templates/article.html b/templates/article.html index 1f82af44..a59558ad 100644 --- a/templates/article.html +++ b/templates/article.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% block html_lang %}{{ article.lang }}{% endblock %} -{% block title %}{{ SITENAME|striptags }} - {{ article.title|striptags }}{% endblock %} +{% block title %}{{ article.title|striptags }} - {{ SITENAME|striptags }}{% endblock %} {% block head %} {{ super() }} @@ -17,11 +17,11 @@ {% endblock %} {% block content %} -
+

{{ article.title }} - # + #