summaryrefslogtreecommitdiff
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/components/_footer.scss64
-rw-r--r--assets/css/components/_post.scss56
-rw-r--r--assets/css/components/_shortcodes.scss226
-rw-r--r--assets/css/global.scss2
4 files changed, 56 insertions, 292 deletions
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
deleted file mode 100644
index d4996ab7..00000000
--- a/assets/css/components/_footer.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-#footer {
- margin: 2rem auto;
- font-family: var(--mono-font-family);
-
- @media screen and (min-width: 768px) {
- width: var(--page-width);
- display: flex;
- justify-content: space-between;
- }
-
- #footer-copyright {
- .word-count {
- font-family: var(--serif-font-family);
- font-size: .9rem;
- color: var(--secondary-text-color)
- }
- }
-
- #footer-links {
- display: flex;
- flex-direction: column;
-
- @media screen and (min-width: 768px) {
- align-items: flex-end;
- }
-
- ul.footer-navigation {
- list-style: none;
- display: flex;
- gap: 0.5rem;
- padding-inline-start: 0;
- margin: .5rem 0;
-
- @media screen and (min-width: 768px) {
- justify-content: flex-end;
- }
-
- li {
- display: inline-flex;
- align-items: center;
- img, svg {
- height: 1rem;
- width: auto;
- display: inline-block;
- border-radius: 100%;
- filter: grayscale(1);
- @media (prefers-color-scheme: dark) {
- filter: grayscale(1) invert(1);
- }
- }
- }
-
- /* internal links */
- &.footer-navigation-internal {
- gap: 0.25rem;
- li:not(:last-child)::after {
- color: var(--secondary-text-color);
- content: '/';
- margin-left: 0.25rem;
- }
- }
- }
- }
-}
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index e93f9b77..10c7900d 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -97,3 +97,59 @@
}
}
}
+
+/* gallery shortcode */
+
+.gallery {
+ display: flex;
+ overflow-x: auto;
+ scroll-behavior: smooth;
+ gap: 0.5rem;
+ white-space: nowrap;
+
+ & > figure, & > a:has(> figure) {
+ margin: 0;
+ flex-shrink: 0;
+ display: inline-block;
+ max-width: 100%;
+ position: relative;
+ box-shadow: inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1);
+ img {
+ height: 20rem;
+ display: block;
+ border-radius: 4px;
+ margin: 0;
+ }
+ figcaption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ padding: 0.35rem;
+ h4 {
+ font-size: 0.8rem;
+ margin: 0;
+ text-align: left;
+ width: fit-content;
+ color: var(--text-color);
+ background-color: rgba(var(--block-background-color-rgb), 0.75);
+ backdrop-filter: blur(0.5rem);
+ padding: 0.2rem 0.35rem;
+ border-radius: 3px;
+ line-height: 1.2;
+ }
+ }
+ }
+ & > p { display: none }
+
+ &.center {
+ justify-content: center;
+ }
+ &.full-width {
+ & > figure {
+ flex-shrink: unset;
+ img {
+ width: 100%;
+ }
+ }
+ }
+}
diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss
deleted file mode 100644
index 5c4e893a..00000000
--- a/assets/css/components/_shortcodes.scss
+++ /dev/null
@@ -1,226 +0,0 @@
-/* callouts */
-
-.callout {
- background-color: rgba(var(--block-background-color-rgb), 0.5);
- border-radius: .25rem;
- padding: 1rem 1.25rem;
- line-height: 1.75;
-
- display: flex;
- gap: .75rem;
-
- margin: 0.5rem 0;
-}
-
-.callout .callout-content p {
- margin: 0;
-}
-
-/* quote shortcode */
-
-.quote-card {
- --card-bg: rgba(255,255,255,0.25);
- --card-bg-lighter: rgba(255,255,255,0.1);
- --card-noise: rgba(255,255,255,0.04);
-
- font-size: 1.5rem;
- font-style: italic;
- text-align: center;
- margin: 5rem 3rem;
- padding: 1rem;
- border: 1px solid var(--border-color);
- border-radius: 1rem;
- box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
- transform: rotate(3deg);
- background-color: rgba(255,255,255,0.35);
-
- background: linear-gradient(var(--card-bg-lighter), var(--card-bg-lighter)),
- repeating-radial-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 50% 0 / 2500px 2500px,
- repeating-conic-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 60% 60% / 2500px 2500px;
- background-blend-mode: normal, difference;
-}
-
-@media screen and (max-width: 768px) {
- .quote-card {
- font-size: 1.2rem;
- margin: 3rem 1rem;
- }
-}
-
-/* book showcase shortcode */
-
-.book-showcase {
- display: flex;
- gap: 2rem;
- line-height: 1.5;
- margin: 2rem 0
-}
-
-.book-showcase .book-cover {
- width: 25%;
- flex-shrink: 0;
-}
-
-.book-description-header .book-title {
- margin: 0
-}
-
-.book-description-header p {
- font-size: 1rem;
- margin: 0.1rem
-}
-
-/* gallery shortcode */
-
-.gallery {
- display: flex;
- overflow-x: auto;
- scroll-behavior: smooth;
- gap: 0.5rem;
- white-space: nowrap;
-
- & > figure, & > a:has(> figure) {
- margin: 0;
- flex-shrink: 0;
- display: inline-block;
- max-width: 100%;
- position: relative;
- box-shadow: inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1);
- img {
- height: 20rem;
- display: block;
- border-radius: 4px;
- margin: 0;
- }
- figcaption {
- position: absolute;
- bottom: 0;
- left: 0;
- padding: 0.35rem;
- h4 {
- font-size: 0.8rem;
- margin: 0;
- text-align: left;
- width: fit-content;
- color: var(--text-color);
- background-color: rgba(var(--block-background-color-rgb), 0.75);
- backdrop-filter: blur(0.5rem);
- padding: 0.2rem 0.35rem;
- border-radius: 3px;
- line-height: 1.2;
- }
- }
- }
- & > p { display: none }
-
- &.center {
- justify-content: center;
- }
- &.full-width {
- & > figure {
- flex-shrink: unset;
- img {
- width: 100%;
- }
- }
- }
-}
-
-/* sidenote shortcode */
-
-@media screen and (max-width: 1199px) {
- .sidenote {
- border: 1px solid var(--block-background-color);
- padding: .75rem 1rem;
- border-radius: 0.5rem;
- line-height: 1.5;
- }
- .sidenote-title {
- font-size: 1rem;
- text-align: right;
- font-style: italic
- }
-}
-
-@media screen and (min-width: 1200px) {
- .sidenote {
- position: absolute;
- left: calc(50% + var(--page-width) / 2);
- margin-left: 2rem;
- max-width: 20rem
- }
-}
-
-.sidenote-title {
- margin: 0.5rem 0
-}
-
-.sidenote-content {
- font-size: 1rem
-}
-
-/* blog links */
-
-.linkroll {
- display: flex;
- flex-wrap: wrap;
- gap: 1rem;
-}
-
-a.blog-link {
- position: relative;
- background-color: var(--block-background-color);
- text-decoration: none;
- color: var(--text-color);
- padding: 1rem 2rem;
- padding-right: 4rem;
- border-radius: 1rem;
- width: calc(50% - 2rem);
- box-sizing: border-box;
- overflow: hidden;
-
- h4, p {
- margin: 0;
- font-size: 1.2rem;
- }
-
- p {
- line-height: 1.5;
- }
-
- .link-content {
- z-index: 10;
- }
-
- img {
- --size: 5rem;
- display: block;
- position: absolute;
- right: -1rem;
- bottom: -1rem;
- width: var(--size);
- height: var(--size);
- border-radius: 100%;
- z-index: 0;
- }
-}
-
-@media screen and (max-width: 768px) {
- a.blog-link {
- font-size: 1.2rem;
- padding: 0.5rem 1rem;
- padding-right: 2rem;
- width: 100%;
- }
-}
-
-a.podcast-link {
- text-decoration: none;
- color: inherit;
- width: calc(25% - 1rem);
- .link-image {
- overflow: hidden;
- border-radius: 5px;
- img { margin: 0 }
- }
-}
diff --git a/assets/css/global.scss b/assets/css/global.scss
index 51261ee8..2cfdb01f 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -8,7 +8,5 @@
@import "components/pages";
@import "components/taxonomy";
@import "components/postlist";
-@import "components/shortcodes";
@import "components/card";
-@import "components/footer";
@import "components/global-search";