Skip to content

Commit

Permalink
fix: title too long overflowing issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@bennyxguo
bennyxguo committed Sep 3, 2023
1 parent 8261291 commit 9123bbe
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 59 deletions.
16 changes: 6 additions & 10 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<div id="loading-bar-wrapper" :class="loadingBarClass"></div>
</div>
<FooterLink :links="themeConfig.footerLinks.data" />
<Footer :style="cssVariables" />
<template v-if="isMobile" ref="mobileSidebar">
<FooterContainer :style="cssVariables" />
<template v-if="isMobile">
<MobileMenu />
</template>
<!-- <Navigator /> -->
Expand Down Expand Up @@ -59,7 +59,7 @@ import { useLightBoxStore } from '@/stores/lightbox'
import { useMetaStore } from '@/stores/meta'
import { useSearchStore } from './stores/search'
import HeaderMain from '@/components/Header/src/Header.vue'
import Footer from '@/components/Footer/Footer.vue'
import FooterContainer from '@/components/Footer/FooterContainer.vue'
import Navigator from '@/components/Navigator.vue'
import MobileMenu from '@/components/MobileMenu.vue'
import Dia from '@/components/Dia.vue'
Expand All @@ -72,7 +72,7 @@ export default defineComponent({
name: 'App',
components: {
HeaderMain,
Footer,
FooterContainer,
Navigator,
MobileMenu,
Dia,
Expand All @@ -87,7 +87,6 @@ export default defineComponent({
const searchStore = useSearchStore()
const MOBILE_WITH = 1024 // Using the mobile width by Bootstrap design.
const { t } = useI18n()
const mobileSidebar = ref()
const appWrapperClass = 'app-wrapper'
const loadingBarClass = ref({
Expand All @@ -96,7 +95,7 @@ export default defineComponent({
let pagelink = `\n\nRead more at: ${document.location.href}`
/** Intiallizing App config and other setups */
/** Initializing App config and other setups */
const initialApp = async () => {
initResizeEvent()
await appStore.fetchConfig().then(() => {
Expand Down Expand Up @@ -184,9 +183,7 @@ export default defineComponent({
let wrapperHeight = screen.height
const footerEl = document.getElementById('footer')
const footerHeight = footerEl?.getBoundingClientRect().height
if (typeof footerHeight === 'number') {
wrapperHeight = wrapperHeight - footerHeight * 2
}
wrapperHeight = wrapperHeight - footerHeight * 2
wrapperStyle.value = {
'min-height': wrapperHeight + 'px'
}
Expand Down Expand Up @@ -241,7 +238,6 @@ export default defineComponent({
lightBoxVisible: computed(() => lightBoxStore.visible),
lightBoxIndex: computed(() => lightBoxStore.index),
lightBoxImages: computed(() => lightBoxStore.images),
mobileSidebar,
appWrapperClass,
loadingBarClass,
handleOpenModal,
Expand Down
98 changes: 49 additions & 49 deletions src/styles/components/article.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
}
}
h1 {
@apply text-ob-bright text-2xl font-extrabold mb-6 lg:mt-4 lg:mb-8;
@apply text-ob-bright text-2xl font-extrabold mb-6 lg:mt-4 lg:mb-8 line-clamp-3;
}
p {
@apply text-sm lg:text-base pb-4 mb-2 lg:pb-6 lg:mb-2;
Expand Down Expand Up @@ -147,10 +147,10 @@
}
}
h1 {
@apply text-ob-bright text-2xl lg:text-4xl font-extrabold mb-6 lg:mt-4 lg:mb-8;
@apply text-ob-bright text-2xl lg:text-4xl font-extrabold mb-6 lg:mt-4 lg:mb-8 line-clamp-2;
}
p {
@apply text-base lg:text-lg pb-4 mb-2 lg:pb-6 lg:mb-2;
@apply text-base lg:text-lg pb-4 mb-2 lg:pb-6 lg:mb-2 line-clamp-3;
}
.article-footer {
@apply w-full flex justify-start flex-1 content-end items-end text-sm;
Expand Down Expand Up @@ -335,11 +335,11 @@
border-bottom: transparent;
border-right: transparent;
background: linear-gradient(
135deg,
var(--background-primary),
var(--background-primary) 41.07%,
var(--background-secondary) 76.05%,
var(--background-secondary)
135deg,
var(--background-primary),
var(--background-primary) 41.07%,
var(--background-secondary) 76.05%,
var(--background-secondary)
);
}

Expand All @@ -352,9 +352,9 @@
height: 2px;
width: 76%;
background: linear-gradient(
90deg,
var(--text-accent),
var(--background-secondary) 76.05%
90deg,
var(--text-accent),
var(--background-secondary) 76.05%
);
}

Expand All @@ -367,9 +367,9 @@
height: 2px;
width: 45%;
background: linear-gradient(
90deg,
var(--text-accent),
var(--background-primary) 45%
90deg,
var(--text-accent),
var(--background-primary) 45%
);
}

Expand Down Expand Up @@ -409,17 +409,17 @@

.custom-quote.tip::before {
background: linear-gradient(
90deg,
var(--custom-quote-tip),
var(--background-primary)
90deg,
var(--custom-quote-tip),
var(--background-primary)
);
}

.custom-quote.tip::after {
background: linear-gradient(
90deg,
var(--custom-quote-tip),
var(--background-primary)
90deg,
var(--custom-quote-tip),
var(--background-primary)
);
}

Expand All @@ -436,17 +436,17 @@

.custom-quote.warning::before {
background: linear-gradient(
90deg,
var(--custom-quote-warning),
var(--background-primary)
90deg,
var(--custom-quote-warning),
var(--background-primary)
);
}

.custom-quote.warning::after {
background: linear-gradient(
90deg,
var(--custom-quote-warning),
var(--background-primary)
90deg,
var(--custom-quote-warning),
var(--background-primary)
);
}

Expand All @@ -463,29 +463,29 @@

.custom-quote.danger::before {
background: linear-gradient(
90deg,
var(--custom-quote-danger),
var(--background-primary)
90deg,
var(--custom-quote-danger),
var(--background-primary)
);
}

.custom-quote.danger::after {
background: linear-gradient(
90deg,
var(--custom-quote-danger),
var(--background-primary)
90deg,
var(--custom-quote-danger),
var(--background-primary)
);
}

.custom-details {
@apply rounded-xl;
padding: 1rem;
background: linear-gradient(
135deg,
var(--background-primary),
var(--background-primary) 41.07%,
var(--background-secondary) 76.05%,
var(--background-secondary)
135deg,
var(--background-primary),
var(--background-primary) 41.07%,
var(--background-secondary) 76.05%,
var(--background-secondary)
);
summary {
@apply rounded-lg cursor-pointer transition-all;
Expand All @@ -497,9 +497,9 @@
user-select: none; /* Non-prefixed version, currently */
padding: 0.5rem 1.2rem;
background: linear-gradient(
135deg,
var(--bg-accent-55),
transparent 46.07%
135deg,
var(--bg-accent-55),
transparent 46.07%
);
opacity: 1;
&:hover {
Expand Down Expand Up @@ -555,19 +555,19 @@

a {
text-shadow: -1px -1px 2px var(--background-primary),
-1px 1px 2px var(--background-primary),
1px -1px 2px var(--background-primary),
1px 1px 2px var(--background-primary);
-1px 1px 2px var(--background-primary),
1px -1px 2px var(--background-primary),
1px 1px 2px var(--background-primary);
-webkit-text-fill-color: var(--text-bright);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 5px 5px;
text-decoration: none;
transition: all 350ms ease;
background-image: linear-gradient(
to bottom,
var(--bg-sub-accent-55) 0%,
var(--bg-sub-accent-55) 100%
to bottom,
var(--bg-sub-accent-55) 0%,
var(--bg-sub-accent-55) 100%
);
}

Expand All @@ -581,9 +581,9 @@

a:hover {
text-shadow: -1px -1px 2px var(--background-modifier-border),
-1px 1px 2px var(--background-modifier-border),
1px -1px 2px var(--background-modifier-border),
1px 1px 2px var(--background-modifier-border);
-1px 1px 2px var(--background-modifier-border),
1px -1px 2px var(--background-modifier-border),
1px 1px 2px var(--background-modifier-border);
-webkit-text-fill-color: var(--text-bright);
background-size: 4px 50px;
}
Expand Down

0 comments on commit 9123bbe

Please sign in to comment.