jomalo.paste.lol / jomalo.com-customcss---tiny · 5 months ago·

/* remove stats from navigation */
nav a[href='/stats/'] {
    display: none;
}
/* remove feeds from navigation */
nav a[href='/feeds/'] {
    display: none;
}

/* remove hyperlink underline unless hover or clicked */

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }

:root {
	--text: #000000;
	--link: #EE6000;
	--link_visited: #EE6000;
	--accent1: #333333;
	--accent2: #666666;
	--background: #ffffff;
	--code: #e3e3e3;
	--button-text: #ffffff;
	--blockquote: #fcd9ae;
}

/* Dark mode */

/* --background: #141414; */

@media (prefers-color-scheme: dark) {
	:root {
		--text: #f8f8f2;
		--link: #EE6000;
		--link_visited: #EE6000;
		--accent1: #f8f8f2;
		--accent2: #f8f8f2;
		--background: #1c1c1e;
		--code: #44475a;
		--button-text: #282a36;
		--blockquote: #282828;
	}
}

/* Change the font */

@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400);

body {
	max-width: 40em;
	margin: 2em auto;
	font-family: 'JetBrains Mono',
		monospace, 
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol";
	font-size: 14px;
	padding: 0 1em;
	line-height: 1.6;
	color: var(--text);
	background-color: var(--background); 

/* Offset the link underline to give it a bit of a pop */

a {
color: var(--link);
text-underline-offset: 5px;	
}

/* Changing to a more standard blockquote type */

blockquote {
	border-left: 3px solid var(--link);
}

/* Add floating image */ 

/* Example: <img src="https://jomalo.com/uploads/2023/5b0cc8a87e.jpg" width="50" height="50" class="float-right-img" alt="I'm a floating image" /> */

.float-right-img {
  float: right;
  max-width: 100px !important;
  margin-left: 35px;
}

/* Example: <img src="https://jomalo.com/uploads/2023/5b0cc8a87e.jpg" width="50" height="50" class="float-left-img" alt="I'm a floating image" /> */

.float-left-img {
  float: left;
  max-width: 100px !important;
  margin-left: 35px;
}

/* To increase or decrease the area around nav buttons adjust the line-height of the elements. The site uses these nav button styles in two areas: The nav bar and the comments/email buttons on single posts.  */

nav ul li, ul.reply-buttons li {
    line-height: 2.4em;
    margin-right: 2em auto;
}

/* set img max-width */

img {
max-width: 600px;
width: auto;
height: auto;
}