msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

refactor: tweak small stylings and refactoring

Browse Source
pull/86/head
Kia King Ishii 5 years ago
parent 62729fa46b
commit e99239d351
4 changed files with 151 additions and 107 deletions
Show Stats Download Patch File Download Diff File

8
docs/.vitepress/config.js
Unescape View File

@ -7,16 +7,16 @@ module.exports = {
repo: 'vuejs/vitepress', repo: 'vuejs/vitepress',
docsDir: 'docs', docsDir: 'docs',
editLinks: true,
editLinkText: 'Edit this page on GitHub',
lastUpdated: 'Last Updated',
carbonAds: { carbonAds: {
carbon: 'CEBDT27Y', carbon: 'CEBDT27Y',
custom: 'CKYD62QM', custom: 'CKYD62QM',
placement: 'vuejsorg' placement: 'vuejsorg'
}, },
editLinks: true,
editLinkText: 'Edit this page on GitHub',
lastUpdated: 'Last Updated',
nav: [ nav: [
{ text: 'Guide', link: '/' }, { text: 'Guide', link: '/' },
{ text: 'Config Reference', link: '/config/basics' }, { text: 'Config Reference', link: '/config/basics' },

153
src/client/theme-default/components/BuySellAds.vue
Unescape View File

@ -1,18 +1,18 @@
<template> <template>
<div class="bsa-cpc-wrapper"> <div class="buy-sell-ads">
<div class="bsa-cpc"></div> <div class="bsa-cpc" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, onMounted } from 'vue' import { defineProps, onMounted } from 'vue'
/* global _bsa */ // global _bsa
const ID = 'bsa-cpc-script' const ID = 'bsa-cpc-script'
const { code, placement } = defineProps<{ code: string; placement: string }>()
declare global { declare global {
var _bsa: BSA | undefined var _bsa: BSA | undefined
interface BSA { interface BSA {
init( init(
name: string, name: string,
@ -27,99 +27,120 @@ declare global {
} }
} }
function load() { const { code, placement } = defineProps<{
if (typeof _bsa !== 'undefined' && _bsa) { code: string
_bsa.init('default', code, `placement:${placement}`, { placement: string
target: '.bsa-cpc', }>()
align: 'horizontal',
disable_css: 'true'
})
}
}
onMounted(() => { onMounted(() => {
if (!document.getElementById(ID)) { if (!document.getElementById(ID)) {
const s = document.createElement('script') const s = document.createElement('script')
s.id = ID s.id = ID
s.src = `//m.servedby-buysellads.com/monetization.js` s.src = '//m.servedby-buysellads.com/monetization.js'
document.head.appendChild(s) document.head.appendChild(s)
s.onload = () => {
load() s.onload = () => { load() }
}
} else { } else {
load() load()
} }
}) })
</script>
<style> function load() {
.bsa-cpc-wrapper { if (typeof _bsa !== 'undefined' && _bsa) {
font-size: 0.95rem; _bsa.init('default', code, `placement:${placement}`, {
/* from Page.vue */ target: '.bsa-cpc',
max-width: 50rem; align: 'horizontal',
margin: 0px auto; disable_css: 'true'
padding: 1rem 2rem 0; })
margin-bottom: -1rem; }
} }
</script>
@media (max-width: 419px) { <style scoped>
.bsa-cpc-wrapper { .buy-sell-ads {
padding: 0 1.5rem; margin: 0 auto;
} padding-top: 2rem;
font-size: .85rem;
} }
.bsa-cpc { .bsa-cpc {
font-size: 0.9em;
background-color: #f8f8f8;
border-radius: 6px; border-radius: 6px;
background-color: #f8f8f8;
} }
.bsa-cpc .default-text { .bsa-cpc ::v-deep(a._default_) {
display: inline; display: flex;
} flex-wrap: wrap;
align-items: flex-start;
.bsa-cpc a._default_ {
text-align: left;
display: block;
text-decoration: none;
padding: 10px 15px 12px;
margin-bottom: 20px; margin-bottom: 20px;
color: #666; padding: 12px;
text-decoration: none;
line-height: 1.4;
font-weight: 400; font-weight: 400;
line-height: 18px; color: var(--c-text-light);
} }
.bsa-cpc a._default_ .default-image img { @media (min-width: 512px) {
height: 20px; .bsa-cpc ::v-deep(a._default_) {
border-radius: 3px; flex-wrap: nowrap;
vertical-align: middle; }
position: relative;
top: -1px;
} }
.bsa-cpc a._default_ .default-title { .bsa-cpc ::v-deep(.default-ad) {
font-weight: 600; display: none;
} }
.bsa-cpc a._default_ .default-description:after { .bsa-cpc ::v-deep(a._default_ .default-image) {
font-size: 0.85em; flex-shrink: 0;
content: 'Sponsored'; margin-right: 12px;
color: #1c90f3; width: 24px;
}
.bsa-cpc ::v-deep(a._default_ .default-image img) {
border-radius: 4px;
height: 24px;
vertical-align: middle;
}
.bsa-cpc ::v-deep(._default_::after) {
border: 1px solid #1c90f3; border: 1px solid #1c90f3;
border-radius: 3px; border-radius: 4px;
padding: 0 4px 1px; margin-top: 8px;
margin-left: 6px; margin-left: 36px;
padding: 0 8px;
line-height: 22px;
font-size: .85em;
font-weight: 500;
color: #1c90f3;
content: 'Sponsored';
} }
.bsa-cpc .default-ad { @media (min-width: 512px) {
display: none; .bsa-cpc ::v-deep(._default_::after) {
margin-top: 0px;
margin-left: 12px;
}
} }
.bsa-cpc a._default_ .default-image, .bsa-cpc ::v-deep(.default-text) {
.bsa-cpc a._default_ .default-title, flex-grow: 1;
.bsa-cpc a._default_ .default-description { align-self: center;
display: inline; width: calc(100% - 36px);
vertical-align: middle; }
margin-right: 6px;
@media (min-width: 512px) {
.bsa-cpc ::v-deep(.default-text) {
width: auto;
}
}
.bsa-cpc ::v-deep(.default-title) {
font-weight: 600;
}
.bsa-cpc ::v-deep(.default-description) {
padding-left: 8px;
} }
</style> </style>

93
src/client/theme-default/components/CarbonAds.vue
Unescape View File

@ -1,9 +1,9 @@
<template> <template>
<div class="carbon-ads" ref="el"></div> <div class="carbon-ads" ref="el" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, onMounted, ref } from 'vue' import { defineProps, ref, onMounted } from 'vue'
const { code, placement } = defineProps<{ const { code, placement } = defineProps<{
code: string code: string
@ -20,62 +20,83 @@ onMounted(() => {
}) })
</script> </script>
<style> <style scoped>
.carbon-ads { .carbon-ads {
min-height: 102px; padding: 1.75rem 0 0;
font-size: 0.75rem; border-radius: 4px;
margin: 0 auto;
width: 130px; max-width: 280px;
position: fixed; font-size: .75rem;
z-index: 1; background-color: rgba(255, 255, 255, .8);
bottom: 0;
right: 22px;
margin: 10px;
} }
@media screen and (max-width: 425px) { .carbon-ads::after {
.carbon-ads { clear: both;
width: auto; display: block;
right: 0; content: "";
}
} }
@media screen and (max-width: 1300px) { @media (min-width: 420px) {
.carbon-ads { .carbon-ads {
position: relative; position: relative;
top: 12px; right: -8px;
right: 0; z-index: 1;
float: right; float: right;
margin: 0 0 20px 30px; margin: -8px -8px 24px 24px;
padding: 8px;
width: 146px;
max-width: 100%;
} }
} }
.carbon-ads a { @media (min-width: 1400px) {
color: #444; .carbon-ads {
font-weight: normal; position: fixed;
display: inline; top: auto;
right: 8px;
bottom: 8px;
float: none;
margin: 0;
}
} }
.carbon-ads .carbon-img { .carbon-ads ::v-deep(.carbon-img) {
float: left; float: left;
margin-right: 1rem; margin-right: .75rem;
border: 1px solid var(--border-color); max-width: 100px;
border: 1px solid var(--c-divider);
} }
.carbon-ads .carbon-img img { @media (min-width: 420px) {
.carbon-ads ::v-deep(.carbon-img) {
float: none;
display: block; display: block;
margin-right: 0;
max-width: 130px;
}
} }
.carbon-ads .carbon-poweredby { .carbon-ads ::v-deep(.carbon-img img) {
color: #999;
display: block; display: block;
margin-top: 0.5em; width: 100%;
} }
@media (max-width: 719px) { @media (min-width: 420px) {
.carbon-ads .carbon-img img { .carbon-ads ::v-deep(.carbon-text) {
width: 100px; padding-top: 8px;
height: 77px;
} }
} }
.carbon-ads ::v-deep(.carbon-text) {
display: block;
font-weight: 400;
color: var(--c-text-light);
}
.carbon-ads ::v-deep(.carbon-poweredby) {
display: block;
padding-top: 2px;
font-weight: 400;
color: var(--c-text-lighter);
}
</style> </style>

2
src/client/theme-default/styles/vars.css
Unescape View File

@ -13,6 +13,7 @@
--c-text-light-1: #2c3e50; --c-text-light-1: #2c3e50;
--c-text-light-2: #476582; --c-text-light-2: #476582;
--c-text-light-3: #90a4b7;
--c-brand: #3eaf7c; --c-brand: #3eaf7c;
--c-brand-light: #4abf8a; --c-brand-light: #4abf8a;
@ -45,6 +46,7 @@
--c-text: var(--c-text-light-1); --c-text: var(--c-text-light-1);
--c-text-light: var(--c-text-light-2); --c-text-light: var(--c-text-light-2);
--c-text-lighter: var(--c-text-light-3);
--c-bg: var(--c-white); --c-bg: var(--c-white);

Write Preview
Loading…
Cancel
Save