PublishingCSS:TheNewSocial - Revision history

Karl at 11:26, 15 June 2023

2023-06-15T11:26:38Z

← Older revision		Revision as of 13:26, 15 June 2023
Line 66:		Line 66:
	font-family: cursive;		font-family: cursive;
	font-size: 2rem;		font-size: 2rem;
	color: ~~pink~~;		color: #ff10c3;
	}		}

Karl at 11:26, 15 June 2023

2023-06-15T11:26:02Z

← Older revision		Revision as of 13:26, 15 June 2023
Line 64:		Line 64:
	font-weight: normal;		font-weight: normal;
	text-align: center;		text-align: center;
	font-family: ~~monospace~~;		font-family: cursive;
	font-size: ~~1rem~~;		font-size: 2rem;
	color: ~~red~~;		color: pink;
	}		}

Karl at 11:15, 15 June 2023

2023-06-15T11:15:44Z

← Older revision		Revision as of 13:15, 15 June 2023
Line 54:		Line 54:
	font-size: 4rem;		font-size: 4rem;
	text-align: center;		text-align: center;
			line-height: 1.2 !important;
	}		}

Line 104:		Line 105:
	transition: right 0.2s linear;		transition: right 0.2s linear;
	/* overflow:scroll; */		/* overflow:scroll; */
			z-index: 10000;
	}		}

Karl at 11:09, 15 June 2023

2023-06-15T11:09:29Z

@@ Line 95: / Line 95: @@
 #toc {
 	position: fixed;
-	right: calc( -1 * ( 40%  - 2rem ) );
+	right: calc( -1 * ( 40%  + 2rem ) );
 	box-sizing: border-box;
 	min-width: 40%;
@@ Line 103: / Line 103: @@
 	padding-right: 1rem;
 	transition: right 0.2s linear;
-	overflow:scroll;
+/* 	overflow:scroll; */
+}
@@ Line 110: / Line 110: @@
 	max-width: 100%;
 	height: auto;
+}
 #toc ul {
 	padding-left: 1rem;
 	list-style: none;
-	text-align: right;
+	text-align: center;
+}
 #toc > ul > li {
@@ Line 148: / Line 163: @@
+}
 /* left navigation */

Karl at 10:49, 15 June 2023

2023-06-15T10:49:59Z

← Older revision		Revision as of 12:49, 15 June 2023
Line 116:		Line 116:
	}		}
	#toc .toctitle {		#toc .toctitle {
	display: none;		/display: none;/
	}		}
	#toc ul {		#toc ul {

Karl at 14:30, 30 May 2023

2023-05-30T14:30:15Z

← Older revision		Revision as of 16:30, 30 May 2023
Line 11:		Line 11:
	--focus: var(--single) blue;		--focus: var(--single) blue;
	--fast: 0.25s;		--fast: 0.25s;

			--center-width: min( 100%, 45rem);
			/* --side-width: calc( ( 100vw - var(--center-width) ) / 2 - 1rem ); */

			--side-width: 30rem;

	}		}

Line 24:		Line 30:
	position: relative;		position: relative;
	margin: auto;		margin: auto;
	max-width: ~~min~~( ~~100%, 40rem~~ );		margin-left: calc(var(--side-width) + 0.5rem);
			max-width: var(--center-width);
	font-family: Arial;		font-family: Arial;
	line-height: 2;		line-height: 2;
Line 82:		Line 89:
	display: none;		display: none;
	}		}


			/* TOC */

	#toc {		#toc {
Line 138:		Line 148:
	}		}


			/* left navigation */

	section#The_New_Social {		section#The_New_Social {
Line 144:		Line 156:
	top: 0;		top: 0;
	left: 0;		left: 0;
	max-width: ~~450px~~;		max-width: var(--side-width);
	max-height: calc( 100vh - 2rem );		max-height: calc( 100vh - 2rem );
	padding: 1rem;		padding: 1rem;
Line 362:		Line 374:
	ul.gallery .controls span.right {		ul.gallery .controls span.right {
	margin-left: 1rem;		margin-left: 1rem;
			}


			@media screen and (max-width: 75rem) {

			:root {
			--main-width: 30rem;
			--side-width: 20rem;
			}

	}		}

Karl at 13:55, 30 May 2023

2023-05-30T13:55:51Z

← Older revision		Revision as of 15:55, 30 May 2023
Line 220:		Line 220:
	/* targeted: show */		/* targeted: show */

	#The_New_Social div#Principles > section:target .content,		/#The_New_Social div#Principles > section:target .content,/
	#The_New_Social div#Principles > section:has(:target) .content,		/#The_New_Social div#Principles > section:has(:target) .content,/
	#The_New_Social div#Principles > section:has(.selected) .content {		#The_New_Social div#Principles > section.selected .content
			/#The_New_Social div#Principles > section:has(.selected) .content/
			{
	display: unset;		display: unset;
	}		}

Karl at 13:32, 30 May 2023

2023-05-30T13:32:39Z

← Older revision		Revision as of 15:32, 30 May 2023
Line 288:		Line 288:
	display: flex;		display: flex;
	justify-content: flex-start;		justify-content: flex-start;
	align-items: ~~flex-start~~;		align-items: center;
	overflow: scroll;		overflow: scroll;
	width: 100%;		width: 100%;
	~~background-color: rgb(0,0,0,0.02);~~
	border-top: var(--single) var(--little-darker);		border-top: var(--single) var(--little-darker);
	border-left: var(--single) var(--little-darker);		border-left: var(--single) var(--little-darker);
Line 301:		Line 300:
	min-width: 100%;		min-width: 100%;
	margin-right: 1rem;		margin-right: 1rem;
			border-top: var(--single) var(--little-darker);
			border-left: var(--single) var(--little-darker);
			border-bottom: var(--single) var(--lighter);
			border-right: var(--single) var(--lighter);
			background-color: rgb(0,0,0,0.02);
			}
			ul.gallery li:last-of-type {
			margin-right: 0;
	}		}
	ul.gallery li div.thumb {		ul.gallery li div.thumb {
Line 319:		Line 326:
	width: 100%;		width: 100%;
	height: unset;		height: unset;
	~~border-top: var(--single) var(--little-darker);~~
	~~border-left: var(--single) var(--little-darker);~~
	~~border-bottom: var(--single) var(--lighter);~~
	~~border-right: var(--single) var(--lighter);~~
	}		}

	ul.gallery .controls {		ul.gallery .controls {
	position: sticky;		position: sticky;
			align-self: flex-start;
	top: 0;		top: 0;
	left: 0;		left: 0;
	~~min-~~width: ~~100~~%;		width: 0%;
	background: red;		background: red;
	display: flex;		display: flex;
	justify-content: center;		justify-content: flex-start;
			overflow: visible;
			}

			ul.gallery .controls span {
			min-width: 2rem;
			height: 2rem;
			text-align: center;
			display: block;
			background-color: grey;
			border-top: var(--single) var(--little-darker);
			border-left: var(--single) var(--little-darker);
			border-bottom: var(--single) var(--lighter);
			border-right: var(--single) var(--lighter);
			padding: 0rem;
			color: lightgrey;
			cursor: pointer;
			}

			ul.gallery .controls span.left {
			margin: -0.5rem;
			}
			ul.gallery .controls span.right {
			margin-left: 1rem;
	}		}

Karl at 13:14, 30 May 2023

2023-05-30T13:14:47Z

← Older revision		Revision as of 15:14, 30 May 2023
Line 281:		Line 281:

	ul.gallery {		ul.gallery {
			position: relative;
	box-sizing: border-box;		box-sizing: border-box;
	list-style: none;		list-style: none;
Line 287:		Line 288:
	display: flex;		display: flex;
	justify-content: flex-start;		justify-content: flex-start;
			align-items: flex-start;
	overflow: scroll;		overflow: scroll;
	width: 100%;		width: 100%;
Line 321:		Line 323:
	border-bottom: var(--single) var(--lighter);		border-bottom: var(--single) var(--lighter);
	border-right: var(--single) var(--lighter);		border-right: var(--single) var(--lighter);
			}

			ul.gallery .controls {
			position: sticky;
			top: 0;
			left: 0;
			min-width: 100%;
			background: red;
			display: flex;
			justify-content: center;
	}		}

Karl at 12:49, 30 May 2023

2023-05-30T12:49:04Z

← Older revision		Revision as of 14:49, 30 May 2023
Line 289:		Line 289:
	overflow: scroll;		overflow: scroll;
	width: 100%;		width: 100%;
	background-color: rgb(0,0,0,0.02);		background-color: rgb(0,0,0,0.02);
	border-top: var(--single) var(--little-darker);		border-top: var(--single) var(--little-darker);
	border-left: var(--single) var(--little-darker);		border-left: var(--single) var(--little-darker);
Line 314:		Line 314:
	}		}
	ul.gallery li div.thumb span a img {		ul.gallery li div.thumb span a img {
			box-sizing: border-box;
	width: 100%;		width: 100%;
	height: unset;		height: unset;
			border-top: var(--single) var(--little-darker);
			border-left: var(--single) var(--little-darker);
			border-bottom: var(--single) var(--lighter);
			border-right: var(--single) var(--lighter);
	}		}