adam/doordesk-js
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: adam:986bb9ffee2bea6e200e1c1d3195180c1287bc43
Branches Tags
adam:master
...
compare: adam:ee4b2c0cedc38c9b178a3b01b13020d723ad2964
Branches Tags
adam:master

2 commits
986bb9ffee ... ee4b2c0ced

Author SHA1 Message Date
Adam
ee4b2c0ced shadows for articles 2024-01-19 22:36:03 -05:00
Adam
2119658560 make code block behave on mobile 2024-01-19 22:32:59 -05:00
2 changed files with 9 additions and 3 deletions
Show stats Expand all files Collapse all files

3
doordesk/app/src/components/article.rs
View file

@ -12,7 +12,8 @@ pub struct ArticleData {
#[component]
pub fn Article(data: ArticleData) -> impl IntoView {
view! {
<article class="p-7 my-5 mx-auto w-11/12 max-w-screen-xl bg-opacity-10 rounded-md bg-zinc-700 shadow-1g">
// Shadow styling is in main .css file
<article class="p-7 my-5 mx-auto w-11/12 max-w-screen-xl bg-opacity-10 rounded-md bg-zinc-700">
<h1 class="text-3xl font-light text-orange-600 capitalize max-6-xs">{&data.title}</h1>
<hr class="opacity-50"/>
<span class="pt-0 pb-3.5 text-xs opacity-50 m-t">{&data.date}</span>

9
doordesk/style/tailwind.css
View file

@ -19,6 +19,11 @@ nav li:has(> a[aria-current="page"]) {
@apply border-b-orange-700 border-b-2;
}
/* Shadows don't work inline for some reason */
article {
@apply shadow-lg shadow-black;
}
/* for innerHTML articles */
article p {
@apply mt-5 indent-4;
@ -76,9 +81,9 @@ article ol {
}
.code-block {
@apply bg-black bg-opacity-40 p-3 rounded-lg shadow-lg shadow-black;
@apply bg-black bg-opacity-50 p-3 rounded-lg shadow-lg shadow-black max-w-fit m-auto;
}
.code-block-inner {
@apply p-2;
@apply p-2 mt-2 text-sm border-t-gray-500 overflow-x-scroll border-t-2;
}