Common.css

From Eating Asturias, the Encyclopedia of Asturian Gastronomy
m (infobox width adjustment)
m (Forcing labels not to wrap)
 
(36 intermediate revisions by the same user not shown)
Line 1: Line 1:


/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;1,700&display=swap');
 
/* https://github.com/SorkinType/Merriweather/tree/master/fonts/webfonts */
 
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
src: url('fonts/Merriweather-Regular.woff2') format('woff2');
font-display: swap;
}
 
@font-face {
font-family: 'Merriweather';
src: url('fonts/Merriweather-Bold.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
 
@font-face {
font-family: 'Merriweather';
src: url('fonts/Merriweather-Italic.woff2') format('woff2');
font-style: italic;
font-display: swap;
}
 
@font-face {
font-family: 'Merriweather';
src: url('fonts/Merriweather-BoldItalic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}


/* Changes the default font used for MediaWiki to Merriweather Sans (does not include headings or monospaced text): */
/* Changes the default font used for MediaWiki to Merriweather Sans (does not include headings or monospaced text): */
Line 31: Line 62:
#p-navigation { background-color: #54692a; }
#p-navigation { background-color: #54692a; }
#catlinks { background-color: #dcdf80; }
#catlinks { background-color: #dcdf80; }
#toc {
  float: left;
}


#siteSub {
#siteSub {
Line 48: Line 75:
   line-height: 1.2em;
   line-height: 1.2em;


}
.infobox {
  border: 1px solid #a2a9b1;
  border-spacing: 3px;
  background-color: #f8f9fa;
  color: black;
  margin: 0.5em 0 0.5em 1em;
  padding: 0.2em;
  float: right;
  clear: right;
  font-size: 88%;
  line-height: 1.5em;
  width: 23em;
}
}


Line 87: Line 100:
}
}


.infobox .infobox-header, .infobox .infobox-subheader, .infobox .infobox-image, .infobox .infobox-full-data, .infobox .infobox-below {
/* Portable Infobox */
  text-align: center;
.portable-infobox {
width: 322px;
}
.pi-image {
width: 320px !important;
}
.pi-theme-eating-asturias {
    background-color: #dcdf80;
    width:320px;
}
 
.pi-theme-eating-asturias .pi-image-thumbnail {
    width: 100%;
    height: auto;
    max-width: 320px; /* Typically, use the same width as your infobox, minus borders */
}
 
figure[data-item-name="flag"],
figure[data-item-name="shield"] {
max-width: fit-content(120px) !important;
}
 
figure[data-item-name="cider-label"] {
background-color: #fff;
}
}


.portable-infobox.pi-theme-eating-asturias {
.pi-theme-eating-asturias .pi-data-label {
    background-color: #dcdf80;
font-weight: 700;
    border-color: #264142;
}
}
.portable-infobox.pi-theme-eating-asturias .pi-header, .portable-infobox.pi-theme-eating-asturias .pi-title {
.pi-theme-eating-asturias .pi-header, .portable-infobox .pi-theme-eating-asturias .pi-title {
     background-color: #54692a;
     background-color: #54692a;
     color: #dcdf80;
     color: #dcdf80;
     font-style: italic;
     font-style: italic;
}
}
.portable-infobox.pi-theme-eating-asturias .pi-title {
.pi-theme-eating-asturias .pi-title {
     text-align: center;
     text-align: center;
}
}
.portable-infobox.pi-theme-eating-asturias .pi-border-color {
.pi-theme-eating-asturias .pi-border-color {
   border-color: #264142;
   border-color: #264142;
}
}
.portable-infobox.pi-theme-eating-asturias .pi-data-value {
.pi-theme-eating-asturias .pi-data-value {
   align-self: center;
   align-self: center;
}
}


.portable-infobox.pi-type-beerstyle {
.pi-theme-eating-asturias .pi-data-label {
  width:325px;
    flex-basis: 120px;
}
}


Line 122: Line 157:
}
}


ul.ask3col {
.ask3col {
   -webkit-column-count: 3;
   -webkit-column-count: 3;
   -moz-column-count: 3;
   -moz-column-count: 3;
  -ms-column-count: 3;
   column-count: 3;
   column-count: 3;
}
}
Line 130: Line 166:
.wikitable {
.wikitable {
   margin: 0 auto;
   margin: 0 auto;
}
/* To make images responsive */
.res-img {
max-width:100%;
height:auto;
}
.list-3-col {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  column-count: 3;
}
.list-2-col {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  column-count: 2;
}
}

Latest revision as of 19:10, 1 July 2023

/* CSS placed here will be applied to all skins */

/* https://github.com/SorkinType/Merriweather/tree/master/fonts/webfonts */

@font-face {
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/Merriweather-Regular.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Merriweather';
	src: url('fonts/Merriweather-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Merriweather';
	src: url('fonts/Merriweather-Italic.woff2') format('woff2');
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Merriweather';
	src: url('fonts/Merriweather-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* Changes the default font used for MediaWiki to Merriweather Sans (does not include headings or monospaced text): */
body {
  font-family: 'Merriweather', serif;
  font-size: 16px;
  font-weight: 400;
}
/* Changes the default font used for MediaWiki headings to Merriweather 700: */
#content h1, 
#content h2 {
  font-family: 'Merriweather', serif;
  font-style:italic;
  font-weight: 700;

}

/*By default, hide most page tabs*/#ca-edit { display: none !important; }
#ca-delete { display: none !important; }
#ca-formedit { display: none !important; }
#ca-history { display:none!important; }
#ca-move { display: none !important; }
#ca-protect { display: none !important; }
#ca-unwatch { display: none !important; }
#ca-ve-edit { display: none !important; }
#ca-view { display: none !important; }
#ca-viewsource { display: none !important; }
#ca-watch { display: none !important; }
#p-navigation { background-color: #54692a; }
#catlinks { background-color: #dcdf80; }

#siteSub {
  display: block;
  font-weight: normal;
  font-size: normal;
  font-style: italic;
}

.mw-parser-output .ib-settlement {
  width: 23em;
  border-collapse: collapse;
  line-height: 1.2em;

}

table.error {
  border: 1px solid #a2a9b1;
  border-spacing: 3px;
  background-color: #f8f9fa;
  color: black;
  margin: 0.5em 0 0.5em 1em;
  padding: 0.2em;
  float: right;
  clear: right;
  font-size: 88%;
  line-height: 1.5em;
  width: 22em;
  border:1px solid #264142;
  background-color: #dcdf80;
  color: #54692a !important;

}

table.error tbody th {
  background-color: #54692a !important;
  color: #dcdf80 !important;
}

/* Portable Infobox */
.portable-infobox {
	width: 322px;
}
.pi-image {
	width: 320px !important;
}
.pi-theme-eating-asturias {
    background-color: #dcdf80;
    width:320px;
}

.pi-theme-eating-asturias .pi-image-thumbnail {
    width: 100%;
    height: auto;
    max-width: 320px; /* Typically, use the same width as your infobox, minus borders */
}

figure[data-item-name="flag"],
figure[data-item-name="shield"] {
	max-width: fit-content(120px) !important;
}

figure[data-item-name="cider-label"] {
	background-color: #fff;
}

.pi-theme-eating-asturias .pi-data-label {
	font-weight: 700;
}
.pi-theme-eating-asturias .pi-header, .portable-infobox .pi-theme-eating-asturias .pi-title {
    background-color: #54692a;
    color: #dcdf80;
    font-style: italic;
}
.pi-theme-eating-asturias .pi-title {
    text-align: center;
}
.pi-theme-eating-asturias .pi-border-color {
   border-color: #264142;
}
.pi-theme-eating-asturias .pi-data-value {
   align-self: center;
}

.pi-theme-eating-asturias .pi-data-label {
    flex-basis: 120px;
}

.pi-layout-stacked .pi-data-label {
	font-weight: bold;
	text-decoration: underline
}
.pi-layout-stacked .pi-data-value {
	font-style: italic;
}

.ask3col {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  column-count: 3;
}

.wikitable {
  margin: 0 auto;
}

/* To make images responsive */
.res-img {
	max-width:100%;
	height:auto;
}

.list-3-col {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  column-count: 3;
}

.list-2-col {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  column-count: 2;
}