improvement: style un peu mieux

This commit is contained in:
Kazhnuz 2023-02-07 22:02:24 +01:00
parent 628f5ecc38
commit 132bf5f060
6 changed files with 67 additions and 171 deletions

View file

@ -1,28 +0,0 @@
function customTabs(hook, vm) {
hook.doneEach(function() {
// Invoked each time after the data is fully loaded, no arguments,
$(".contentArea :first-child").addClass("active")
$(".tab :first-child").addClass("active")
$(".tablinks").click(function(){
var idParent = "#" + $(this).parent().parent().attr("id")
var targetString = idParent + " .contentArea ." + $(this).attr("data-target")
//On fait en sorte que seule la classe visée soit active
$(idParent + " .contentArea .tabcontent").removeClass("active")
$(targetString).addClass("active")
// On fait de meme pour le bouton
$(idParent + " .tab button").removeClass("active")
$(this).addClass("active")
console.log(idParent + " .contentArea .tabcontent")
console.log(idParent + " .tab button")
console.log(targetString)
});
});
}
window.$docsify.plugins = [].concat(
customTabs,
(window.$docsify.plugins || [])
);

View file

@ -1,103 +0,0 @@
body {
font-size:1em;
}
.markdown-section {
max-width: 1100px;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
color:#FFF;
background-color: #42B983;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tabcontent.active {
display:block;
}
.markdown-section .table-auto table {
display:table;
width:100%;
table-layout: auto;
}
.markdown-section table {
display:table;
width:100%;
table-layout: fixed;
}
.markdown-section th {
height:34px;
}
.markdown-section tr:nth-child(2n) {
background-color:#fff;
}
.sidebar ul li a {
padding:3px;
padding-left:12px;
margin-right:12px;
border-radius:8px;
}
.sidebar ul li a:hover {
text-decoration: none;
background-color:rgba(0,0,0,0.05);
}
.sidebar ul li.active > a {
border-right:0px solid;
background-color:var(--theme-color,#42b983);
color:#fff;
}
.app-nav li {
margin: 0 0.5rem;
}
.app-nav a {
color: inherit;
padding:8px;
padding-left:12px;
padding-right:12px;
border-radius:8px;
}
.app-nav a:hover {
color: inherit;
background-color:rgba(0,0,0,0.05);
}

View file

@ -33,8 +33,8 @@ onBeforeUpdate(() => {
</script>
<template>
<main id="content" class="pt-1">
<article id="content" class="pt-1">
<div v-html="htmlContent"></div>
<slot></slot>
</main>
</article>
</template>

View file

@ -5,4 +5,4 @@
@import 'custom/global';
//@import 'custom/previews';
//@import 'custom/featured';
//@import 'custom/article';
@import 'custom/article';

View file

@ -4,18 +4,22 @@
table {
border-collapse: collapse;
margin-bottom:1.5rem;
}
table, th, td {
border:0;
th, td {
border:1px solid rgba(0,0,0,0.2);
padding:0;
margin:0;
}
th {
vertical-align: center;
text-align: center;
}
th, td {
vertical-align:center;
padding-top: 0.325em;
padding-bottom: 0.325em;
padding: 0.325em;
}
th {

View file

@ -1,37 +1,60 @@
.article {
img {
max-width:100%;
height:auto;
margin:auto;
}
.thumbnail img {
width:100%;
aspect-ratio: 16 / 9;
border-radius: $card-radius;
object-fit: cover;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.article-meta {
.author-area {
display: flex;
align-items: center;
margin-bottom: $lineheight / 2;
img {
border-radius: 9999px;
width: $lineheight * 3;
height: auto;
margin: 0;
margin-right: $lineheight / 2;
}
}
.article-category {
.badge {
display: inline-block;
margin-bottom: $lineheight / 4;
}
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
color: #FFF;
background-color: #42B983;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tabcontent.active {
display: block;
}
article .table-auto table {
display: table;
width: 100%;
table-layout: auto;
}
article table {
display: table;
width: 100%;
table-layout: fixed;
}
article th {
height: 34px;
}
article tr:nth-child(2n) {
background-color: #fff;
}