diff --git a/src/App.vue b/src/App.vue index c2b5db6d60938e2daf70db460a8646eac95302d3..f6f984f45088c36a309cf3c21b01c503fecf3a94 100644 --- a/src/App.vue +++ b/src/App.vue @@ -26,12 +26,10 @@ </div> <div class="welcome" v-show="! (article.error || article.lemmas.length || search_results.length || waiting)"> <div class="monthly"> - <h2>Månedens ord</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> - <div id="word-of-month-bm"> + <div> <Article :article="monthly_bm" @article-click="article_link_click" /> </div> - <div id="word-of-month-nn"> + <div> <Article :article="monthly_nn" @article-click="article_link_click" /> </div> </div> @@ -323,33 +321,20 @@ header { div.monthly { padding: 20px; border-radius: 10px; - display: grid; - grid-template-columns: 50% 50%; - grid-template-rows: auto auto auto; - gap: 10px; + display: flex; width: 100%; - background-color: rgba(256,256,256,0.5) -} - -div.monthly > h2{ - padding: 0px; - grid-row: 1; - grid-column: 1 / 3; } -div.monthly > p { - grid-row: 2; - grid-column: 1 / 3; +div.monthly > div { + flex: 50%; } -div#monthly_bm { - grid-row: 3; - grid-column: 1; +div.monthly article.bob .dict-label::before { + content: "månedens "; } -div#monthly_nn { - grid-row: 3; - grid-column: 2; +div.monthly article.nob .dict-label::before { + content: "månadens "; } .top { diff --git a/src/components/Article.vue b/src/components/Article.vue index 75dc33ae809ec689a0f1647b69d7629bb6cf54db..7b8741095cb5ab67c7c56c4ad50626e9d1416ad8 100644 --- a/src/components/Article.vue +++ b/src/components/Article.vue @@ -1,5 +1,5 @@ <template> - <article v-show="article.lemmas.length || article.error"> + <article v-show="article.lemmas.length || article.error" :class="dictionary"> <Header :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" /> <section v-if="! article.error && article.body.pronunciation && article.body.pronunciation.length"> <h3>Uttale</h3>