makz | Entries tagged with web dev

I'm using Planet Caravan as my theme here on Dreamwidth at the moment. I've extensively retooled its appearance using custom CSS. Although many of the changes I've made are to mimic the look of my website, others are just to make the text larger and the overall website more mobile friendly. I've copied my CSS edits for those purposes below, both for reference and in case anyone else hates staring at small text on their own journal.

body {
font-size: calc(14px + 16 * ((100vw - 300px) / 2000));
line-height: 1.6;
}

#content {
width: 100%;
margin: 0px auto;
}

/*header*/

h1#title {
line-height: 1.6;
margin-bottom: 0.5em;
}

#subtitle, #pagetitle {
line-height: 1.6;
}

/*navigation*/

.page-back a, .page-forward a {
padding: 0.25em;
}

.topnav {
margin-bottom: 0.4em;
}

/*entries*/

.entry-wrapper {
padding-bottom: 1em;
}

.entry-wrapper: last-of-type {
padding-bottom: 0;
}

.datetime {
font-size: calc(14px + 16 * ((100vw - 300px) / 2000));
padding-right: 2em;
}

.entry-management-links li a img {
width: 30px;
height: auto;
}

.access-filter {
float: left;
padding-left: 1.75em;
}

.access-filter img {
width: 20px;
height: auto;
}

.month-wrapper {
padding-top: 0.5em;
padding-bottom: 0.5em;
}

.month-wrapper:first-of-type {
padding-top: 0;
}

.month-wrapper: last-of-type {
padding-bottom: 0;
}

.month table thead th, .month table tbody tr td {
width: 14.28%;
}

#archive-year .inner .year .inner .month-wrapper .month .inner .contents {
padding-bottom: 0.5em;
}

caption {
padding: 0.5em;
}

/*footer*/

.module {
min-width: 33%;
}

.module-content {
padding-bottom: 0.5em;
}

#secondary .module, #tertiary .module {
text-align: center;
}

.module-content .userpic a img {
margin: auto;
}

.module-content table tbody tr:first-child {
text-align: center;
}

.module-content table tbody tr th, .module-content table tbody tr td {
width: 14.28%;
padding: 0.5rem;
}

.module-calendar .module-content table {
padding: 0.5em;
width: auto;
margin: auto;
}

.module-syndicate .module-content a img {
width: 64px;
height: auto;
}

.userlite-interaction-links li a img {
width: 30px;
height: auto;
}

/*misc fixes*/

.month dl h3 {
font-size: inherit;
}

.journal-name {
padding-top: 1em;
padding-bottom: 0.5em;
}

.journal-website-name {
padding-bottom: 0.5em;
}

This will only work reliably for styles derived for Planet Caravan with the "1 Column (modules at bottom; no sidebar)" layout chosen. I might play around and try to embiggen other styles in the future. (Let me know if you have any requests.)

S	M	T	W	T	F	S
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

makz survives the apocalypse

one millennial; no plan

Entries tagged with web dev

Navigation

Embiggener for the Planet Caravan Theme

Profile

April 2021

Syndicate