summaryrefslogtreecommitdiff
path: root/assets/css/styles.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/styles.css')
-rw-r--r--assets/css/styles.css259
1 files changed, 186 insertions, 73 deletions
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 3ad8db1..186faf7 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -10,33 +10,63 @@
--bulma-info-s: 43%;
--bulma-info-l: 23%;
--bulma-body-background-color: #E8E9EB;
+ --bulma-body-color: #000807;
+ --branding-color: #054a91;
+ --page-title-hover-color: #617284;
+ --footer-text-color: #617284;
+ --anchor-hover-color: #ed6a5a;
+ --footer-border-color: #c1c1d1;
+ --pagination-hover-color: #668eb0;
+ --header-color: #4F759B;
+ --header-two-color: #610F7F;
+ --header-three-color: #9DC4B5;
}
- body {
- background: #E8E9EB;
+ .toc-entry a {
+ color: var(--bulma-body-color);
+ }
+
+ .toc-entry::marker {
+ color: var(--header-color);
+ }
+
+ .toc-entry a:hover {
+ color: var(--header-color);
+ }
+
+ .footer-element {
+ color: var(--footer-text-color);
+ }
+
+ .footer-element:hover {
+ color: var(--branding-color);
}
.page-title {
- color: #054a91;
+ color: var(--branding-color);
font-size: var(--bulma-size-3);
}
.page-title:hover {
- color: #617284;
+ color: var(--footer-text-color);
}
.top-bar {
- border-bottom: 1px solid #ed6a5a;
+ border-bottom: 1px solid var(--anchor-hover-color);
+ }
+
+ .bottom {
+ border-top: 1px solid var(--footer-border-color);
}
.rss-icon {
width:1.5rem;
height: 1.5rem;
- fill: #e28816;
+ fill: var(--rss-icon-color);
}
.rss-icon:hover {
- fill: #b1844b;
+ fill: var(--rss-icon-hover-color);
}
a.svg {
@@ -56,90 +86,90 @@
.svg-icon-body {
width: .8rem;
height: .8rem;
- fill: #000807;
+ fill: var(--bulma-body-color);
}
.tag-icon {
width: 1.2rem;
height: 1.2rem;
- fill: #000807;
+ fill: var(--bulma-body-color);
}
.tag-name {
- color: #000807;
+ color: var(--bulma-body-color);
font-size: 1.8em;
}
.tag-name:hover {
- color: #054a91;
+ color: var(--branding-color);
}
.footer-content {
- color: #000807 !important;
+ color: var(--bulma-body-color) !important;
}
.caption {
- color: #000807;
+ color: var(--bulma-body-color);
}
.pagination-element {
- color: #054a91;
+ color: var(--branding-color);
}
.pagination-element:hover {
- color: #617284;
+ color: var(--foter-text-color);
}
.tabs {
- --bulma-tabs-border-bottom-color: #ed6a5a;
- --bulma-tabs-link-color: #ed6a5a;
+ --bulma-tabs-border-bottom-color: var(--anchor-hover-color);
+ --bulma-tabs-link-color: var(--anchor-hover-color);
--bulma-tabs-boxed-link-hover-background-color: #b6756d;
- --bulma-tabs-link-hover-color: #E8E9EB;
+ --bulma-tabs-link-hover-color: var(--bulma-body-background-color);
}
a.index-post-title {
- color: #000807;
+ color: var(--bulma-body-color);
}
a.index-post-title:hover {
- color: #054a91;
+ color: var(--branding-color);
}
a.archive-post-title {
- color: #000807;
+ color: var(--bulma-body-color);
}
a.archive-post-title:hover {
- color: #054a91;
+ color: var(--branding-color);
}
p {
- color: #000807;
+ color: var(--bulma-body-color);
}
a {
- color: #054a91;
+ color: var(--branding-color);
}
h1 {
- color: #4F759B !important;
+ color: var(--header-color) !important;
}
h2 {
- color: #610F7F !important;
+ color: var(--header-two-color) !important;
}
h3 {
- color: #9DC4B5 !important;
+ color: var(--header-three-color) !important;
}
li {
- color: #000807;
+ color: var(--bulma-body-color);
font-size: 1.2rem;
}
li::marker {
- color: #4D9DE0;
+ color: var(--header-color);
}
}
@@ -154,40 +184,99 @@
--bulma-info-h: 253deg;
--bulma-info-s: 30%;
--bulma-info-l: 55%;
- --bulma-body-color: #FBF9FF;
+ --bulma-body-color: #F5F5F5;
--bulma-body-background-color: #2F2F37;
+ --branding-color: #3BB273;
+ --page-title-hover-color: #5d9979;
+ --footer-text-color: #c9c7cc;
+ --anchor-hover-color: #4D9DE0;
+ --footer-border-color: #6a6c7f;
+ --pagination-hover-color: #668eb0;
+ --header-two-color: #E15554;
+ --header-three-color: #7768AE;
+ }
+
+ .toc-entry a {
+ color: var(--bulma-body-color);
+ }
+
+ .toc-entry::marker {
+ color: var(--anchor-hover-color);
+ }
+
+ .toc-entry a:hover {
+ color: var(--anchor-hover-color);
}
.page-title {
- color: #3BB273;
+ color: var(--branding-color);
font-size: var(--bulma-size-3);
}
.page-title:hover {
- color: #5d9979;
+ color: var(--branding-color);
+ }
+
+ .footer-element {
+ color: var(--footer-text-color);
+ }
+
+ .footer-element:hover {
+ color: var(--anchor-hover-color);
}
.language {
- color: #3BB273;
+ color: var(--branding-color);
font-size: var(--bulma-size-6);
}
.top-bar {
- border-bottom: 1px solid #4D9DE0;
+ border-bottom: 1px solid var(--anchor-hover-color);
+ }
+
+ .bottom {
+ border-top: 1px solid var(--footer-border-color);
}
.rss-icon {
width:1.5rem;
height: 1.5rem;
- fill: #e28816;
+ fill: var(--rss-icon-color);
}
.rss-icon:hover {
- fill: #b1844b;
+ fill: var(--rss-icon-hover-color);
+ }
+
+ .footer-element {
+ color: var(--footer-text-color);
+ }
+
+ .footer-element:hover {
+ color: var(--anchor-hover-color);
+ }
+
+ .language {
+ color: var(--branding-color);
+ font-size: var(--bulma-size-6);
+ }
+
+ .top-bar {
+ border-bottom: 1px solid var(--anchor-hover-color);
+ }
+
+ .bottom {
+ border-top: 1px solid var(--footer-border-color);
+ }
+
+ .rss-icon {
+ width:1.5rem;
+ height: 1.5rem;
+ fill: var(--rss-icon-color);
}
- .is-info-button {
- color: #F4FAFF;
+ .rss-icon:hover {
+ fill: var(--rss-icon-hover-color);
}
a.svg {
@@ -201,7 +290,7 @@
top: 0;
right: 0;
bottom: 0;
- left:0;
+ left: 0;
}
.svg-icon-body {
@@ -222,78 +311,62 @@
}
.tag-name:hover {
- color: #668eb0;
- }
-
- .footer-content {
- color: #F4FAFF !important;
- }
-
- .caption {
- color: #E0E0E0;
+ color: var(--anchor-hover-color);
}
.pagination-element {
- color: #4D9DE0;
+ color: var(--anchor-hover-color);
}
.pagination-element:hover {
- color: #668eb0;
+ color: var(--pagination-hover-color);
}
.tabs {
- --bulma-tabs-border-bottom-color: #4D9DE0;
- --bulma-tabs-link-color: #4D9DE0;
- --bulma-tabs-boxed-link-hover-background-color: #668eb0;
- }
-
- a.footer-url {
- color: #F4FAFF;
+ --bulma-tabs-border-bottom-color: var(--anchor-hover-color);
+ --bulma-tabs-link-color: var(--anchor-hover-color);
+ --bulma-tabs-boxed-link-hover-background-color: var(--pagination-hover-color);
}
a.index-post-title {
- color: #F5F5F5;
+ color: var(--bulma-body-color);
}
a.index-post-title:hover {
- color: #4D9DE0;
+ color: var(--anchor-hover-color);
}
a.archive-post-title {
- color: #F5F5F5;
+ color: var(--bulma-body-color);
}
a.archive-post-title:hover {
- color: #4D9DE0;
- }
-
- p {
- color: #F5F5F5;
+ color: var(--anchor-hover-color);
}
a {
- color: #668eb0;
+ color: var(--pagination-hover-color);
}
h1 {
- color: #4D9DE0 !important;
+ color: var(--anchor-hover-color) !important;
}
h2 {
- color: #E15554 !important;
+ color: var(--header-two-color) !important;
}
h3 {
- color: #7768AE !important;
+ color: var(--header-three-color) !important;
}
li {
- color: #F5F5F5;
+ color: var(--bulma-body-color);
font-size: 1.2rem;
}
li::marker {
- color: #4D9DE0;
+ color: var(--anchor-hover-color);
}
}
@@ -339,11 +412,25 @@
}
}
+@media (width <= 1000px) {
+ .post-with-toc-container {
+ flex: none;
+ width: 100%;
+ }
+}
+
+@media (width > 1000px) {
+ .post-with-toc-container {
+ flex: none;
+ width: 60%;
+ }
+}
+
.sr-only {
clip: rect(0,0,0,0);
border-width:0;
- height:1px;
- margin:-1px;
+ height: 1px;
+ margin: -1px;
overflow:hidden;
padding:0;
position:absolute;
@@ -351,6 +438,11 @@
width:1px
}
+.toc-entry {
+ padding-inline-start: 2ch;
+ list-style: inside;
+}
+
.svg-icon {
width:1.5rem;
height: 1.5rem;
@@ -362,6 +454,18 @@
font-size: 18px;
}
+.toc-column {
+ margin-inline-start: 4%;
+}
+
+.is-wrap {
+ flex-wrap: wrap !important;
+}
+
+.wrap-tabs {
+ display: block;
+}
+
a.index-post-title {
font-size: 2rem;
}
@@ -378,6 +482,11 @@ p.archive-post-date {
margin-bottom: 0rem;
}
+.toc-entry a {
+ font-size: 18px;
+ text-decoration: underline;
+}
+
h1 {
font-size: 2rem;
}
@@ -389,3 +498,7 @@ h2 {
p {
font-size: 1.2rem;
}
+:root {
+ --rss-icon-color: #e28816;
+ --rss-icon-hover-color: #b1844b;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-15 21:45:58 +0000