MediaWiki:Timeless.css

/* All CSS here will be loaded for users of the Timeless skin */
/* One-sided navigation menu */
@media (min-width: 1340px) {
  #mw-content-block {
    display: block;
  }
  #mw-content,
  #content-bottom-stuff {
    margin-left: 14em;
  }
  #mw-content-wrapper {
    float: right;
    margin-left: -14em;
    width: 100%;
  }
  #mw-related-navigation {
    width: 14em;
    padding: 0 1em 0 0;
  }
  div.color-middle {
    margin-right: 0;
  }
  .mw-wiki-logo {
  	display: inline-block;
  }
}

/* Align top colour bar with page columns */
.ts-inner {
  padding: 0 0 0 1em;
}

/* Re-aligning bottom logos */
#footer { padding-right: 1em; }

/* Top bar font modernization */
#mw-header *,
#mw-site-navigation *,
#mw-related-navigation *  { font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif  }

/* Avoid cutting off letters with descenders: g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

/* Triangle position patch */
#personal h2::after {
   position: relative;
   bottom: 0.5em;
}

.mw-headline:target {
  background-color: gold;
}

/* Width optimization: Prevents too narrow appearance on mobile phones */
@media (max-width:850px) {
  #mw-content  { padding: 0.5em 0.5em 3em; }
  #firstHeading { width: 100%; }
  #mw-header-container { padding: 3.75em 0.5em 0.35em; }
  #site-navigation h2 { left: 0.5em; }
  #p-logo-text { left: 3em; }
  #user-tools h2 { right: 1em; }
  #site-tools h2 { right: 4em; }
}

/* Table of contents indentation patch (retrofits header level indentations if missing) */
#toc ul ul {
  margin: 0 0 0 2em;
}


@media screen and (min-width: 1340px)
#mw-site-navigation .sidebar-chunk h3 {
    font-weight: bold;
    font-size: 1.5em;
    text-transform: uppercase;
}


@media screen and (min-width: 851px) {
	#p-logo-text a {
		position: fixed;
		right: 75vw;
	}
	#p-logo-text {
		width: 29em;
	}	
	#user-tools {
		left: 74vw;
		top: 5px;
	}
	#personal h2:after {
		width: 36px;
	}	
}
@media screen and (max-width: 850px) {
	#p-logo-text {
		margin-top: 0;
	}
	#personal h2 {
		display: none;
	}
	#p-logo-text a.long {
		width: 100%;
		top: 7px;
		text-align: center;
		font-size: 40px !important;
	}
	#p-logo-text {
		position: static;
		left: 0 !important;
		right: 0;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		top: 3.3em;
	}
	#searchInput {
		padding: 0 0 0 6px !important;
	}	
|
@media screen and (max-width: 1099px) and (min-width: 851px) {
	#p-logo-text a.long {
		padding-left: 7px;
		float: left;
		font-size: 23px !important;
	}
}
@media screen and (max-width: 851px) {

}
@media only screen and (min-width: 992px) and (max-width:768px) {
	#p-logo-text {
		right:74vw;
	}

}
@media only screen and (min-width: 900px) and (max-width:100px) {
	#p-logo-text {
		right: 74vw;
		top: 3em;
	}
}
@media screen and (max-width: 900px) and (min-width: 100px) {
	#p-logo-text a.long {
		font-size: 43px !important;
	}
}
@media screen and (max-width: 1700px) and (min-width: 800px) {
	#p-logo-text {
		left: 12px !important;
	}
}
@media screen and (max-width: 1700px) and (min-width: 851px) {
	#p-search {
		width: 70em;
		padding-right: 33px;
	}
}

#p-logo-text {
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto; 
    -ms-flex-order: 2;
    order: 2;
    max-width: 144em;
}