Research Realm:Main Page/styles.css: Difference between revisions

From Research Realm
copying some css code from wikipedia but modifying it trying to recreate Bestia's mockup
 
No edit summary
 
(51 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* {{pp|small=yes}} */
.mp-box {
.mp-box {
border: 1px solid #aaa; /* all colors overriden on specific elements in @media screen */
border: 1px solid #aaa; /* all colors overriden on specific elements in @media screen */
Line 5: Line 4:
margin-top: 4px;
margin-top: 4px;
}
}
/* Welcome text */


#mp-welcomecount {
#mp-welcomecount {
Line 12: Line 13:


#mp-welcome {
#mp-welcome {
font-size: 162%;
padding: 0.1em;
padding: 0.1em;
margin-top: 0.5em;
margin-bottom: 3px;
}
#mp-welcome h1,
#mp-welcome .mw-heading1 {
margin: 0;
border-bottom: 0
}
#mp-welcome h1 {
border-bottom: solid 1px #000;
text-shadow: 1px 2px 3px #999;
box-shadow: 0 4px 6px -6px #000;
}
#mp-info {
font-size: 95%;
}
#articlecount {
font-size: 85%;
}
#articlecount > ul {
margin: 0;
padding: 0;
}
#articlecount > ul > li {
margin: 0;
display: inline;
}
#articlecount > ul > li::after {
content: " · ";
font-weight: bold;
}
#articlecount > ul > li:last-child::after {
content: "";
}
/* Middle section (flex) */
.topics-container {
display: flex;
flex-direction: row;
margin: 2em auto;
padding: 0 1em;
}
.topics-item {
width: 100%;
vertical-align: top;
text-align: center;
padding: 1em 0;
}
.topics-list {
margin: 1.5em 0.5em 0.5em 0.5em;
line-height: 1.2;
text-align: left;
}
#mp-subtopics {
margin-top: 1.5em
}
.topics-pic1 {
padding: 1px 0;
}
.topics-pic3 {
padding: 3px 0;
}
.topics-pic4 {
padding: 4px 0;
}
/* Bottom text */
#mp-contributetable {
margin: 0 auto 1em auto;
line-height: 1.2;
}
#mp-contribute {
font-size: 105%;
font-weight: bold;
padding-bottom: 1em;
}
#mp-exciting {
text-align: center;
font-size: 1.2em;
font-style: italic;
font-weight: bold;
padding-bottom: 1em;
}
}


@media screen {
@media screen {
#mp-topbanner {
#mp-topbanner {
background-color: #f9f9f9;
background-color: #eee;
border-color: #ddd;
border-color: #b8b8b8;
}
}
}
/* Different sizes */
@media (max-width: 850px) {
.topics-container {
flex-direction: column;
}
.topics-item {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #b8b8b8;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #b8b8b8;
margin-top: -0.5px;
margin-bottom: -0.5px;
}
.topics-list {
text-align: center;
margin: 1em 0.5em;
}
/* hlist replication */
.topics-list ul {
margin: 0;
padding: 0;
}
.topics-list li {
margin: 0;
display: inline;
}
/* Display nested lists inline */
.topics-list ul ul {
display: inline;
}
/* Generate interpuncts */
.topics-list li::after {
content: " · ";
font-weight: bold;
}
.topics-list li:last-child::after {
content: none;
}
/* Add parentheses around nested lists */
.topics-list li li:first-child::before {
content: " (";
font-weight: normal;
}
.topics-list li li:last-child::after {
content: ")";
font-weight: normal;
}
}
@media (min-width: 851px) {
.topics-item {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #b8b8b8;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #b8b8b8;
margin-left: -0.5px;
margin-right: -0.5px;
}
#mp-subtopics {
margin-left: 2em;
}
}
@media screen and (max-width: 1099px) {
.topicstable {
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
transition: 0.5s;
}
}
}

Latest revision as of 23:10, 31 October 2025

.mp-box {
	border: 1px solid #aaa; /* all colors overriden on specific elements in @media screen */
	padding: 0 0.5em 0.5em;
	margin-top: 4px;
}

/* Welcome text */

#mp-welcomecount {
	text-align: center;
	margin: 0.4em;
}

#mp-welcome {
	padding: 0.1em;
	margin-top: 0.5em;
	margin-bottom: 3px;
}

#mp-welcome h1,
#mp-welcome .mw-heading1 {
	margin: 0;
	border-bottom: 0
}

#mp-welcome h1 {
	border-bottom: solid 1px #000;
	text-shadow: 1px 2px 3px #999;
	box-shadow: 0 4px 6px -6px #000;
}

#mp-info {
	font-size: 95%;
}

#articlecount {
	font-size: 85%;
}

#articlecount > ul {
	margin: 0;
	padding: 0;
}

#articlecount > ul > li {
	margin: 0; 
	display: inline;
}

#articlecount > ul > li::after {
	content: " · ";
	font-weight: bold;
}

#articlecount > ul > li:last-child::after {
	content: "";
}

/* Middle section (flex) */

.topics-container {
	display: flex;
	flex-direction: row;
	margin: 2em auto;
	padding: 0 1em;
}

.topics-item {
	width: 100%;
	vertical-align: top;
	text-align: center;
	padding: 1em 0;
}

.topics-list {
	margin: 1.5em 0.5em 0.5em 0.5em;
	line-height: 1.2;
	text-align: left;
}

#mp-subtopics {
	margin-top: 1.5em
}

.topics-pic1 {
	padding: 1px 0;
}

.topics-pic3 {
	padding: 3px 0;
}

.topics-pic4 {
	padding: 4px 0;
}

/* Bottom text */

#mp-contributetable {
	margin: 0 auto 1em auto;
	line-height: 1.2;
}

#mp-contribute {
	font-size: 105%;
	font-weight: bold;
	padding-bottom: 1em;
}

#mp-exciting {
	text-align: center;
	font-size: 1.2em;
	font-style: italic;
	font-weight: bold;
	padding-bottom: 1em;
}

@media screen {
	#mp-topbanner {
		background-color: #eee;
		border-color: #b8b8b8;
	}
}

/* Different sizes */

@media (max-width: 850px) {
	.topics-container {
		flex-direction: column;
	}

	.topics-item {
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #b8b8b8;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #b8b8b8;
		margin-top: -0.5px;
		margin-bottom: -0.5px;
	}
	
	.topics-list {
		text-align: center;
		margin: 1em 0.5em;
	}
	
	/* hlist replication */
	.topics-list ul {
		margin: 0;
		padding: 0;
	}

	.topics-list li {
		margin: 0;
		display: inline;
	}
		/* Display nested lists inline */
	
	.topics-list ul ul {
		display: inline;
	}
	
		/* Generate interpuncts */
	.topics-list li::after {
		content: " · ";
		font-weight: bold;
	}
	
	.topics-list li:last-child::after {
		content: none;
	}
	
		/* Add parentheses around nested lists */
	.topics-list li li:first-child::before {
		content: " (";
		font-weight: normal;
	}

	.topics-list li li:last-child::after {
		content: ")";
		font-weight: normal;
	}

}

@media (min-width: 851px) {
	.topics-item {
		border-right-width: 1px;
		border-right-style: solid;
		border-right-color: #b8b8b8;
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #b8b8b8;
		margin-left: -0.5px;
		margin-right: -0.5px;
	}
	
	#mp-subtopics {
		margin-left: 2em;
	}
}

@media screen and (max-width: 1099px) {
	
	.topicstable {
		box-sizing: border-box;
		display: flex;
		flex-flow: row wrap;
		transition: 0.5s;
	}

}