custom columns/cards view for Logseq.com

logseq-columns.css

/* SETTINGS: adjust width of the page and cards below*/

	:root {
		--main-container-width : 1800px; 
		--mod-cards-width: 252px;
		}  

/* ============================= */
/* ==== columns view layout ==== */
/* ====================-======== */

	.cp__sidebar-main-content {
			padding: 2rem 1.5rem;
			margin: 0;
			max-width: var(--main-container-width);
		}
	.foldable-title {
		max-width: var(--main-container-width);
		}   
	div[level="2"]{
		display:inline-block;
		width: var(--mod-cards-width); 
		position:absolute;
		top: 10px;
		vertical-align: top;
		margin-bottom: 20px;
	}
	.embed-block .ls-block {
		display: inline;
	}

/* ============================== */
/* === tweak layout margins  ==== */
	
.blocks-container,.doc-mode {
		margin: 0px 0;
	}

/* ============================== */
/* ======== cards look ========== */
	
div[level="2"]{
		box-shadow: 2px 2px 3px #0000003b;
		border: 1px solid black;
		border-radius: 6px;
		background-color: var(--ls-tertiary-background-color);
		margin: 0px 15px 15px 0px; /* SPACE BETWEEN CARDS */
		padding: 1em 0.5em;  /* CARDS BOARDER */
	}
	.block-children .ls-block {
		border: 0px solid var(--ls-secondary-text-color);
		margin: 0px;
	}
	.ls-block {
		margin: 0px 12px 0px -2px;
		padding: 5px 8px 0px 0px;
	}