samples/vue-todo
3
0
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases 2 Wiki Activity

about layout

Browse Source
This commit is contained in:
Markus Thielen 2023-03-16 10:04:53 +01:00
parent 1cbf736686
commit c7dd690ced
Signed by: markus
GPG Key ID: 3D4980D3EC9C8E26
2 changed files with 11 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/AboutItem.vue
View File

@ -14,13 +14,14 @@
<style scoped>
.item {
margin-top: 2rem;
display: flex;
}
.details {
flex: 1;
margin-left: 1rem;
margin-left: 1em;
border-left: 1px solid var(--bs-border-color);
padding: 2em;
}
i {
@ -29,36 +30,30 @@ i {
place-content: center;
width: 32px;
height: 32px;
color: var(--color-text);
margin-top: 2.5em;
color: var(--bs-body-color);
}
h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
volor: var(--bs-body-color);
}
@media (min-width: 1024px) {
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}
i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border: 1px solid var(--bs-border-color);
border-radius: 8px;
width: 50px;
height: 50px;
margin-right: 2em;
}
.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
border-left: 1px solid var(--bs-border-color);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
@ -67,7 +62,7 @@ h3 {
.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
border-left: 1px solid var(--bs-border-color);
position: absolute;
left: 0;
top: calc(50% + 25px);

2
src/views/AboutView.vue
View File

@ -4,9 +4,7 @@ import TheAbout from '../components/TheAbout.vue'
</script>
<template>
<main>
<TheAbout />
</main>
</template>
<style>