@sugarat/theme 0.5.12-beta.0 → 0.5.12-beta.1

package/src/components/UserWorks.vue

@@ -301,29 +301,27 @@ function handleChooseTag(tag: string) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
+@charset "UTF-8";
 .user-works-page {
   display: flex;
   justify-content: center;
   width: 100%;
   margin: 20px auto;
   padding: 16px;
-
-  h1 {
-    font-size: 32px;
-    font-weight: bold;
-  }
-
-  .description {
-    margin-top: 16px;
-    color: #999;
-    font-size: 16px;
-  }
-
-  a {
-    font-weight: 500;
-    color: var(--vp-c-brand-1);
-  }
+}
+.user-works-page h1 {
+  font-size: 32px;
+  font-weight: bold;
+}
+.user-works-page .description {
+  margin-top: 16px;
+  color: #999;
+  font-size: 16px;
+}
+.user-works-page a {
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
 }
 
 .works-container {
@@ -333,143 +331,113 @@ function handleChooseTag(tag: string) {
 
 .work {
   max-width: 900px;
-
-  h2 {
-    margin-top: 6px;
-    padding-top: 18px;
-    line-height: 32px;
-    font-size: 24px;
-    border-top: 1px solid var(--vp-c-divider);
-
-    a {
-      color: inherit;
-    }
-
-    &:hover {
-      a {
-        &::before {
-          opacity: 1;
-        }
-      }
-    }
-
-    a {
-      position: relative;
-
-      &::before {
-        position: absolute;
-        left: -16px;
-        opacity: 0;
-        content: var(--vp-header-anchor-symbol);
-      }
-    }
-  }
-
-  h3 {
-    margin: 32px 0 0;
-    line-height: 28px;
-    font-size: 20px;
-    position: relative;
-
-    &.title>a.pin {
-      position: absolute;
-      left: -16px;
-
-      &::before {
-        left: -16px;
-        opacity: 0;
-        content: var(--vp-header-anchor-symbol);
-      }
-    }
-
-    &:hover>a.pin {
-      &::before {
-        opacity: 1;
-      }
-    }
-  }
-
-  .info {
-    display: flex;
-    font-size: 14px;
-    margin-top: 10px;
-    flex-wrap: wrap;
-  }
-
-  .links,
-  .times,
-  .tags {
-    display: flex;
-    align-items: center;
-
-    .icon {
-      color: var(--vp-c-text-1);
-      display: block;
-      width: 20px;
-      height: 20px;
-      margin-right: 6px;
-    }
-  }
-
-  .times {
-    margin-right: 18px;
-  }
-
-  .links {
-    a {
-      display: flex;
-      align-items: center;
-    }
-
-    a.github-link {
-      margin-right: 10px;
-    }
-
-    a.link {
-      margin-right: 0;
-
-      &::after {
-        content: ',';
-        color: var(--vp-c-text-1);
-        margin-right: 6px;
-        margin-left: 2px;
-      }
-
-      &:last-child::after {
-        content: '';
-      }
-    }
-  }
-
-  .tags {
-    span.tag {
-      cursor: pointer;
-    }
-
-    span.tag:not(:last-child) {
-      &::after {
-        content: '·';
-        display: inline-block;
-        padding: 0 4px;
-      }
-    }
-  }
 }
+.work h2 {
+  margin-top: 6px;
+  padding-top: 18px;
+  line-height: 32px;
+  font-size: 24px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+.work h2 a {
+  color: inherit;
+}
+.work h2:hover a::before {
+  opacity: 1;
+}
+.work h2 a {
+  position: relative;
+}
+.work h2 a::before {
+  position: absolute;
+  left: -16px;
+  opacity: 0;
+  content: var(--vp-header-anchor-symbol);
+}
+.work h3 {
+  margin: 32px 0 0;
+  line-height: 28px;
+  font-size: 20px;
+  position: relative;
+}
+.work h3.title > a.pin {
+  position: absolute;
+  left: -16px;
+}
+.work h3.title > a.pin::before {
+  left: -16px;
+  opacity: 0;
+  content: var(--vp-header-anchor-symbol);
+}
+.work h3:hover > a.pin::before {
+  opacity: 1;
+}
+.work .info {
+  display: flex;
+  font-size: 14px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+.work .links,
+.work .times,
+.work .tags {
+  display: flex;
+  align-items: center;
+}
+.work .links .icon,
+.work .times .icon,
+.work .tags .icon {
+  color: var(--vp-c-text-1);
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin-right: 6px;
+}
+.work .times {
+  margin-right: 18px;
+}
+.work .links a {
+  display: flex;
+  align-items: center;
+}
+.work .links a.github-link {
+  margin-right: 10px;
+}
+.work .links a.link {
+  margin-right: 0;
+}
+.work .links a.link::after {
+  content: ",";
+  color: var(--vp-c-text-1);
+  margin-right: 6px;
+  margin-left: 2px;
+}
+.work .links a.link:last-child::after {
+  content: "";
+}
+.work .tags span.tag {
+  cursor: pointer;
+}
+.work .tags span.tag:not(:last-child)::after {
+  content: "·";
+  display: inline-block;
+  padding: 0 4px;
+}
+
 .works {
   flex: 1;
 }
+
 @media (min-width: 1440px) {
   .works {
     max-width: 784px;
   }
 }
-
 @media (min-width: 960px) {
   .works {
     max-width: 752px;
   }
 }
-
 .aside-container {
   display: none;
   flex: 1;
@@ -483,7 +451,6 @@ function handleChooseTag(tag: string) {
     display: block;
   }
 }
-
 .aside-outline-container {
   position: sticky;
   top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);
@@ -500,24 +467,17 @@ function handleChooseTag(tag: string) {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-
-  .sugar-image {
-    :deep(img) {
-      object-fit: contain;
-      // max-height: 360px;
-    }
-  }
+}
+.list-mode .sugar-image :deep(img) {
+  object-fit: contain;
 }
 
 .swiper-mode {
   margin-top: 16px;
-
-  .sugar-image {
-    :deep(img) {
-      object-fit: contain;
-      max-height: 260px;
-    }
-  }
+}
+.swiper-mode .sugar-image :deep(img) {
+  object-fit: contain;
+  max-height: 260px;
 }
 
 .split {

package/src/index.ts

@@ -1,6 +1,6 @@
 // @sugarat/theme index
 // override style
-import './styles/index.scss'
+import './styles/index.css'
 
 // element-ui-copy
 import './styles/el-base.css'

package/src/styles/{index.scss → index.css}

@@ -1,15 +1,13 @@
+@charset "UTF-8";
 html {
   --bg-gradient: 255, 255, 255, 0.1;
   --bg-gradient-home: 255, 255, 255;
   --box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
-
-  // blog-item
   --box-shadow-hover: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
   --nav-bgc: rgba(255, 255, 255, 0.9);
   --badge-font-color: #4e5969;
   --description-font-color: #86909c;
   --blog-theme-color: var(--vp-c-brand-1);
-  // --blog-theme-color: #409eff;
 }
 
 html.dark {
@@ -25,20 +23,18 @@ html.dark {
 .VPHome {
   min-height: 100vh;
   background: radial-gradient(ellipse, rgba(var(--bg-gradient-home), 1) 0%, rgba(var(--bg-gradient-home), 0) 700%);
-  
-  &::before {
-    content: "";
-    inset: 0;
-    position: fixed;
-    top: 0;
-    z-index: -1;
-    background-image: url(./bg.png);
-    background-repeat: repeat;
-    min-height: 100%;
-  }
+}
+.VPHome::before {
+  content: "";
+  inset: 0;
+  position: fixed;
+  top: 0;
+  z-index: -1;
+  background-image: url(./bg.png);
+  background-repeat: repeat;
+  min-height: 100%;
 }
 
-// 样式重写
 .VPHome {
   margin-bottom: 0 !important;
   padding-bottom: 96px;
@@ -49,76 +45,51 @@ html.dark {
     padding-bottom: 128px;
   }
 }
-
 @media screen and (min-width: 960px) {
   #VPContent.is-home.VPContent {
     padding-top: 0;
-
-    .VPHome {
-      min-height: 100vh;
-
-      .VPHero>.container {
-        padding-top: var(--vp-nav-height);
-      }
-    }
+  }
+  #VPContent.is-home.VPContent .VPHome {
+    min-height: 100vh;
+  }
+  #VPContent.is-home.VPContent .VPHome .VPHero > .container {
+    padding-top: var(--vp-nav-height);
   }
 }
-
 @media screen and (max-width: 959px) {
   .VPNav {
     background-color: var(--nav-bgc);
   }
 }
-
 .el-pagination {
   flex-wrap: wrap;
   justify-content: center;
 }
 
-// .el-pagination > * {
-//   margin-bottom: 10px !important;
-// }
-
 @media screen and (min-width: 768px) and (max-width: 1200px) {
-
   .VPNavBarMenuGroup .button span.text,
   .VPNavBarMenuLink {
     font-size: 12px !important;
   }
-
   .VPNavBar {
     height: auto !important;
   }
-
   .VPNavBarMenu.menu {
     flex-wrap: wrap;
   }
 }
-
 @media screen and (min-width: 960px) and (max-width: 1120px) {
   .VPContent.has-sidebar {
     margin-top: 60px !important;
   }
 }
-
-// sidebar
-// @media (min-width: 1440px) {
-//   aside.VPSidebar {
-//     // padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 16px)) / 2)) !important;
-//     // padding-right: 10px !important;
-//   }
-// }
-
-.VPDoc .content main {
-  img {
-    max-height: 300px;
-    margin: 0 auto;
-    cursor: pointer;
-  }
-
-  .vp-doc a {
-    word-break: break-all;
-  }
+.VPDoc .content main img {
+  max-height: 300px;
+  margin: 0 auto;
+  cursor: pointer;
+}
+.VPDoc .content main .vp-doc a {
+  word-break: break-all;
 }
 
 ::-webkit-scrollbar {
@@ -150,51 +121,45 @@ main .vp-doc a:hover {
   text-decoration: underline dotted;
 }
 
-// 自定义全局样式
-span.svg-icon {
-  svg {
-    width: 14px;
-    height: 14px;
-    margin-right: 4px;
-  }
+span.svg-icon svg {
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
 }
 
 .vp-doc ul.task-list {
   list-style: none;
   padding-left: 10px;
-
-  input[type="checkbox"] {
-    cursor: pointer;
-    position: relative;
-    width: 13px;
-    height: 13px;
-  }
-
-  input[type="checkbox"]::after {
-    position: absolute;
-    top: 0;
-    color: #000;
-    width: 13px;
-    height: 13px;
-    display: inline-block;
-    visibility: visible;
-    padding-left: 0px;
-    text-align: center;
-    content: " ";
-    border-radius: 3px;
-  }
-
-  input[type="checkbox"]:checked::after {
-    content: "✓";
-    color: #fff;
-    line-height: 14px;
-    font-size: 10px;
-    font-weight: bold;
-    background-color: var(--vp-c-brand-1);
-  }
+}
+.vp-doc ul.task-list input[type=checkbox] {
+  cursor: pointer;
+  position: relative;
+  width: 13px;
+  height: 13px;
+}
+.vp-doc ul.task-list input[type=checkbox]::after {
+  position: absolute;
+  top: 0;
+  color: #000;
+  width: 13px;
+  height: 13px;
+  display: inline-block;
+  visibility: visible;
+  padding-left: 0px;
+  text-align: center;
+  content: " ";
+  border-radius: 3px;
+}
+.vp-doc ul.task-list input[type=checkbox]:checked::after {
+  content: "✓";
+  color: #fff;
+  line-height: 14px;
+  font-size: 10px;
+  font-weight: bold;
+  background-color: var(--vp-c-brand-1);
 }
 
-.VPImage.logo{
+.VPImage.logo {
   width: 24px;
   height: 24px;
 }