Update css formatting across all debian *.css files to be more consistent

Removed excessive white space, set consistent tab spacing, replaced named colours (white and black) with hex values (#fff and #000) as well as replacing padding and margin values with more compact versions where possible.

'font-awesome.css' & 'docbook.css' are the only css files not modified in this commit.

1 files changed, 214 insertions, 246 deletions

diff --git a/english/startpage.css b/english/startpage.css
index 1634175ef89..1e1e4259f6c 100644
--- a/english/startpage.css
+++ b/english/startpage.css
@@ -22,160 +22,143 @@
 */
 
 html {
-  font-size: 16px;
+	font-size: 16px;
 }
-
 h1 {
-  font-size: 2.2em;
+	font-size: 2.2em;
 }
-
 hr {
-  margin: 1em;
+	margin: 1em;
 }
 
-/* Basically taken from https://www.yudiz.com/3-easiest-ways-to-make-equal-height-blocks-using-css/
-   Method 3: Using CSS Flex Box
-   and https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01
+/* 
+	Basically taken from https://www.yudiz.com/3-easiest-ways-to-make-equal-height-blocks-using-css/
+	Method 3: Using CSS Flex Box
+	and https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01
 */
-
 .row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 100%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	width: 100%;
 }
-
 .column {
-  display: flex;
-  flex-direction: column;
-  flex-basis: 100%;
-  flex: 1;
-  padding: 20px;
-  border: 1px solid white;
-  transition: all .2s ease-in-out;
-  width: 50%;
+	display: flex;
+	flex-direction: column;
+	flex-basis: 100%;
+	flex: 1;
+	padding: 20px;
+	border: 1px solid #fff;
+	transition: all .2s ease-in-out;
+	width: 50%;
 }
-
 .column-left, .column-right {
-  /* Currently not used and empty. */
+	/* Currently not used and empty. */
 }
 
-/* CSS classes for columns greater than 50%.
-   Only useful in combination with the base class 'column'.
+/* 
+	CSS classes for columns greater than 50%.
+  Only useful in combination with the base class 'column'.
 */
 .column-2-parts {
-  display: flex;
-  flex-direction: column;
-  flex-basis: 100%;
-  flex: 2;
+	display: flex;
+	flex-direction: column;
+	flex-basis: 100%;
+	flex: 2;
 }
 .column-3-parts {
-  display: flex;
-  flex-direction: column;
-  flex-basis: 100%;
-  flex: 3;
+	display: flex;
+	flex-direction: column;
+	flex-basis: 100%;
+	flex: 3;
 }
-
 .column-4-parts {
-  display: flex;
-  flex-direction: column;
-  flex-basis: 100%;
-  flex: 4;
+	display: flex;
+	flex-direction: column;
+	flex-basis: 100%;
+	flex: 4;
 }
-
 .community img {
-  height: 60px;
+	height: 60px;
 }
-
 div .community {
-  padding: 10px 0 10px 0;
-  color: #ffffff;
+	padding: 10px 0;
+	color: #fff;
 }
-
 .column-2-parts > h2,
 .column-3-parts > h2,
 .column-4-parts > h2 {
-  padding-top: 20px;
+	padding-top: 20px;
 }
-
 .column-2-parts > p,
 .column-3-parts > p,
 .column-4-parts > p {
-  margin-top: 10px;
+	margin-top: 10px;
 }
-
 .community.column:focus img {
-  border: none;
-  outline: 0px;
+	border: none;
+	outline: 0;
 }
-
 .community.column:hover {
-  border: 1px solid #fcfcfc;
+	border: 1px solid #fcfcfc;
 }
-
 .column:hover {
-  border: 1px solid #e2e2e2;
-  background: #fcfcfc;
+	border: 1px solid #e2e2e2;
+	background: #fcfcfc;
 }
-
 .column h1 {
-  text-transform: uppercase;
-  text-align: center;
-  letter-spacing: 0.08em;
-  font-weight: bold;
+	text-transform: uppercase;
+	text-align: center;
+	letter-spacing: 0.08em;
+	font-weight: bold;
 }
-
 .column h2 {
-  margin: .2em;
+	margin: .2em;
 }
-
 .column img {
-  object-fit: contain;
-  max-width: 96%;
-  max-height: 400px;
-  padding: 10px 0 10px 0;
+	object-fit: contain;
+	max-width: 96%;
+	max-height: 400px;
+	padding: 10px 0;
 }
 
 /* Classes used within 'The Operating System' */
 .os-img-container {
-  position: relative;
-  width: 100%;
+	position: relative;
+	width: 100%;
 }
-
 .os-img-container img {
-  max-width: 100%;
-  height: auto;
+	max-width: 100%;
+	height: auto;
 }
-
 .os-dl-btn {
-    width: 8em;
-  text-decoration: none;
+	width: 8em;
+	text-decoration: none;
 }
 
-/* Unfortunately the 'backdrop-filter' element isn't working even in FF >= 60.x,
-   which would be a nice use case here, using the classical CSS button method
-   then.
-   For more info see: https://webkit.org/blog/3632/introducing-backdrop-filters/
+/* 
+	Unfortunately the 'backdrop-filter' element isn't working even in FF >= 60.x,
+	which would be a nice use case here, using the classical CSS button method then.
+	For more info see: https://webkit.org/blog/3632/introducing-backdrop-filters/ 
 */
 .os-img-container .os-dl-btn {
-  position: absolute;
-  top: 82%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  -ms-transform: translate(-50%, -50%);
-  background-color: #090909C0;
-  color: white;
-  font-size: 2.3em;
-  padding: 10px 40px;
-  border: none;
-  cursor: pointer;
-  border-radius: 10px;
-  text-decoration: none;
+	position: absolute;
+	top: 82%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	-ms-transform: translate(-50%, -50%);
+	background-color: #090909C0;
+	color: #fff;
+	font-size: 2.3em;
+	padding: 10px 40px;
+	border: none;
+	cursor: pointer;
+	border-radius: 10px;
+	text-decoration: none;
 }
-
 .os-img-container .os-dl-btn:hover {
-  background-color: black;
-  color: white;
+	background-color: #000;
+	color: #fff;
 }
 /* END Classes used within 'The Operating System' */
 
@@ -183,234 +166,219 @@ div .community {
 .project-news-content a,
 .styled-href-blue a:hover,
 .project-news-content a:hover {
-  text-decoration: none;
-  position: relative;
-  color: #3366FF;
+	text-decoration: none;
+	position: relative;
+	color: #3366FF;
 }
-
 .styled-href-blue a::after,
 .project-news-content a::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 0%;
-  border-bottom: 2px solid currentColor;
-  transition: 0.35s;
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 0;
+	border-bottom: 2px solid currentColor;
+	transition: 0.35s;
 }
-
 .styled-href-blue a:focus::after,
 .styled-href-blue a:hover::after,
 .project-news-content a:focus::after,
-  .project-news-content a:hover::after {
-  width: 100%;
+.project-news-content a:hover::after {
+	width: 100%;
 }
 
 /* Classes used within 'Project News' */
 .project-news {
-  margin-left: 15%;
-  padding: 20px;
+	margin-left: 15%;
+	padding: 20px;
 }
-
 .project-news-content {
-  padding-left: 110px;
-  margin-top: -40px;
-  font-size: 1.1em;
+	padding-left: 110px;
+	margin-top: -40px;
+	font-size: 1.1em;
 }
-
 .project-news-content-end {
-  position: relative;
-  top: 38px;
-  margin-bottom: 25px;
+	position: relative;
+	top: 38px;
+	margin-bottom: 25px;
 }
-
 .end-of-list-arrow {
-  width: 0px;
-  height: 0px;
-  -webkit-transform: rotate(360deg);
-  -moz-transform: rotate(360deg);
-  border-style: solid;
-  border-width: 15px 0 15px 26px;
-  border-color: transparent transparent transparent #999;
-  position: relative;
-  left: 3.5em;
-  top: 24px;
+	width: 0;
+	height: 0;
+	-webkit-transform: rotate(360deg);
+	-moz-transform: rotate(360deg);
+	border-style: solid;
+	border-width: 15px 0 15px 26px;
+	border-color: transparent transparent transparent #999;
+	position: relative;
+	left: 3.5em;
+	top: 24px;
 }
 
-/* The following rules are taken from https://codepen.io/denilsonsa/pen/Etrba
-    but are modified to fit better into our design. */
+/*
+	The following rules are taken from https://codepen.io/denilsonsa/pen/Etrba
+	but are modified to fit better into our design. 
+*/
 .date-as-calendar {
-  font-variant: normal;
-  font-style: normal;
-  font-weight: normal;
-  font-family: "Helvetica", "Arial", sans-serif;
-  /* It seems vertical-align: baseline does not work correctly with display: inline-flex. */
-  vertical-align: top;
-  color: black;
-  background: white;
-  background : linear-gradient(to bottom right, #FFF 0%, #EEE 100%);
-  border: 1px solid #888;
-  border-radius: 3px;
-  overflow: hidden;
-  box-shadow: 2px 2px 2px -2px black;
+	font-variant: normal;
+	font-style: normal;
+	font-weight: normal;
+	font-family: "Helvetica", "Arial", sans-serif;
+	/* It seems vertical-align: baseline does not work correctly with display: inline-flex. */
+	vertical-align: top;
+	color: #000;
+	background: #fff;
+	background: linear-gradient(to bottom right, #fff 0%, #eee 100%);
+	border: 1px solid #888;
+	border-radius: 3px;
+	overflow: hidden;
+	box-shadow: 2px 2px 2px -2px #000;
 }
-
 .date-as-calendar .day,
 .date-as-calendar .month,
 .date-as-calendar .year {
-  text-align: center;
-  line-height: 1.0;
+	text-align: center;
+	line-height: 1.0;
 }
-
 .date-as-calendar .month {
-  font-family: "Oswald", sans-serif;
-  text-transform: uppercase;
-  background: #A00;
-  background : linear-gradient(to bottom right, #B60109 0%, #A00 100%);
-  color: white;
+	font-family: "Oswald", sans-serif;
+	text-transform: uppercase;
+	background: #a00;
+	background: linear-gradient(to bottom right, #b60109 0%, #a00 100%);
+	color: #fff;
 }
 
 /* Layout rules using position: absolute and relative dimensions using em. */
 .position-em.date-as-calendar {
-  display: inline-block;
-  position: relative;
-  
-  width: 4.4em;
-  height: 2.6em;
+	display: inline-block;
+	position: relative;
+	width: 4.4em;
+	height: 2.6em;
 }
-
 .position-em.date-as-calendar .day,
 .position-em.date-as-calendar .month,
 .position-em.date-as-calendar .year {
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 1em;
+	display: block;
+	position: absolute;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 1em;
 }
-
 .position-em.date-as-calendar .month {
-  top: 0em;
-  font-size: 0.6em;
-  padding: 0.2em 0;
-  margin-top: -0.1em;
-  line-height: 1.1em;
+	top: 0;
+	font-size: 0.6em;
+	padding: 0.2em 0;
+	margin-top: -0.1em;
+	line-height: 1.1em;
 }
-
 .position-em.date-as-calendar .day {
-  top: .6em;
-  font-size: 1.2em;
-  margin-top: 0.1em;
+	top: .6em;
+	font-size: 1.2em;
+	margin-top: 0.1em;
 }
-
 .position-em.date-as-calendar .year {
-  bottom: 0px;
-  font-size: 0.6em;
+	bottom: 0;
+	font-size: 0.6em;
 }
 
 /* Multiple sizes. */
 .date-as-calendar.size0_5x {
-  font-size: 8px;
+	font-size: 8px;
 }
 .date-as-calendar.size0_75x {
-  font-size: 12px;
+	font-size: 12px;
 }
 .date-as-calendar.size1x {
-  font-size: 16px;
+	font-size: 16px;
 }
 .date-as-calendar.size1_25x {
-  font-size: 20px;
+	font-size: 20px;
 }
 .date-as-calendar.size1_5x {
-  font-size: 24px;
+	font-size: 24px;
 }
 .date-as-calendar.size1_75x {
-  font-size: 28px;
+	font-size: 28px;
 }
 .date-as-calendar.size2x {
-  font-size: 32px;
+	font-size: 32px;
 }
 .date-as-calendar.size3x {
-  font-size: 48px;
+	font-size: 48px;
 }
-
 /* END Classes used within 'Project News' */
 
 /* Classes used within 'Why Debian' */
 ol.why-debian {
-  list-style-type: none;
-  list-style-type: decimal !ie; /*IE 7- hack*/
-  margin: 0;
-  font-size: 1.1em;
-  padding-left: 15%;
-  counter-reset: li-counter;
+	list-style-type: none;
+	list-style-type: decimal !ie; /*IE 7- hack*/
+	margin: 0;
+	font-size: 1.1em;
+	padding-left: 15%;
+	counter-reset: li-counter;
 }
 ol.why-debian > li {
-  position: relative;
-  margin: 1.5em 0 2.5em 0;
-  padding: 1.3em;
-  background-color: #eaeaea;
-  max-width: 75%;
+	position: relative;
+	margin: 1.5em 0 2.5em;
+	padding: 1.3em;
+	background-color: #eaeaea;
+	max-width: 75%;
 }
 
 ol.why-debian > li:before {
-  position: absolute;
-  top: -0.5em;
-  left: -0.8em;
-  width: 1.8em;
-  height: 1.2em;
-  font-size: 2em;
-  line-height: 1.2;
-  font-weight: bold;
-  text-align: center;
-  color: #ffffff;
-  background-color: #a80030; /* The color of the swirl.*/
-  transform: rotate(-15deg);
-  -ms-transform: rotate(-15deg);
-  -webkit-transform: rotate(-15deg);
-  z-index: 99;
-  overflow: hidden;
-  content: counter(li-counter);
-  counter-increment: li-counter;
+	position: absolute;
+	top: -0.5em;
+	left: -0.8em;
+	width: 1.8em;
+	height: 1.2em;
+	font-size: 2em;
+	line-height: 1.2;
+	font-weight: bold;
+	text-align: center;
+	color: #fff;
+	background-color: #a80030;	/* The color of the swirl. */
+	transform: rotate(-15deg);
+	-ms-transform: rotate(-15deg);
+	-webkit-transform: rotate(-15deg);
+	z-index: 99;
+	overflow: hidden;
+	content: counter(li-counter);
+	counter-increment: li-counter;
 }
 /* END Classes used within 'Why Debian' */
 
 @media screen and (min-width: 800px) {
-  .column {
-    flex: 1;
-  }
-  .column-2-parts {
-    flex: 2
-  }
-  .column-3-parts {
-    flex: 3
-  }
-  .column-4-parts {
-    flex: 4
-  }
+	.column {
+		flex: 1;
+	}
+	.column-2-parts {
+		flex: 2;
+	}
+	.column-3-parts {
+		flex: 3;
+	}
+	.column-4-parts {
+		flex: 4;
+	}
 }
-
 @media(max-width: 1580px) {
-  html {
-    font-size: 15px;
-  }
+	html {
+		font-size: 15px;
+	}
 }
-
 @media(max-width: 1250px) {
-  html {
-    font-size: 14px;
-  }
+	html {
+		font-size: 14px;
+	}
 }
-
 @media(max-width: 980px) {
-  html {
-    font-size: 13px;
-  }
+	html {
+		font-size: 13px;
+	}
 }
-
 @media(max-width: 800px) {
-  html {
-    font-size: 12px;
-  }
+	html {
+		font-size: 12px;
+	}
 }