feat(solis): add image style (#97)

packages/Solis/package.json

@@ -32,7 +32,7 @@
     "blog-theme"
   ],
   "main": "types/theme.ts",
-  "style": "style/styles.scss",
+  "style": "style/index.scss",
   "scripts": {
     "release": "pnpm run build && bumpp --sign && pnpm publish --registry=https://registry.npmjs.org",
     "build": "npx tsc --project tsconfig.json"

packages/Solis/style/index.scss

@@ -0,0 +1,3 @@
+@use './font.scss';
+@use './styles.scss';
+@use './picture.scss';

packages/Solis/style/picture.scss

@@ -0,0 +1,34 @@
+/**
+ * Component: picture
+ * -------------------------------------------------------------------------- */
+
+:root:not(.dark) .dark-only,
+:root:is(.dark) .light-only,
+:root:not(.dark) img[src$='#dark'],
+:root:is(.dark) img[src$='#light'] {
+  display: none;
+}
+
+/* image subtitle */
+figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  img {
+    border-radius: 0.5rem;
+  }
+
+  figcaption {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    color: var(--vp-c-text-3);
+    font-size: 0.875rem;
+    font-weight: 400;
+
+    a {
+      color: var(--vp-c-text-3) !important;
+    }
+  }
+}

packages/Solis/style/styles.scss

@@ -109,7 +109,6 @@
 
   .top-label {
     margin-right: 6px;
-    color: rgba(255, 87, 51, 1);
   }
 }
 
@@ -124,6 +123,7 @@
   align-items: center;
   margin-right: 1em;
   font-size: 0.75rem;
+  font-weight: 600;
   color: var(--vp-c-brand-1);
 
   span {

packages/Solis/types/theme.ts

@@ -5,7 +5,7 @@ export { default as Page } from '../components/Page.vue'
 export { default as Twikoo } from '../components/Twikoo.vue'
 export { default as Info } from '../components/DocInfo.vue'
 
-import '../style/styles.scss'
+import '../style/index.scss'
 
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'