startpage.css: rework rules for Project News section

1 files changed, 107 insertions, 48 deletions

diff --git a/english/startpage.css b/english/startpage.css
index a36991b4b05..9dfdcda1631 100644
--- a/english/startpage.css
+++ b/english/startpage.css
@@ -187,7 +187,7 @@ div .community {
 .styled-href-blue li a,
 .styled-href-blue strong a,
 .styled-href-blue a:link:hover,
-.news-list a {
+.project-news-content a {
   text-decoration: none;
   position: relative;
   color: #3366FF;
@@ -196,7 +196,7 @@ div .community {
 .styled-href-blue h2 a:after,
 .styled-href-blue li a:after,
 .styled-href-blue strong a:after,
-.news-list a:after {
+.project-news-content a:after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -209,24 +209,26 @@ div .community {
 .styled-href-blue h2 a:hover:after,
 .styled-href-blue li a:hover:after,
 .styled-href-blue strong a:hover:after,
-.news-list a:hover:after {
+.project-news-content a:hover:after {
   width: 100%;
 }
 
 /* Classes used within 'Project News' */
-.news-list {
-  padding-left: 85px;
-  font-size: 1.1em;
+.project-news {
+  margin-left: 15%;
+  padding: 20px;
 }
 
-.end-of-news-list {
-  position: relative;
-  top: 5px;
+.project-news-content {
+  padding-left: 110px;
+  margin-top: -50px;
+  font-size: 1.1em;
 }
 
-.dummy-date {
-  width: 70px;
-  height: 40px;
+.project-news-content-end {
+  position: relative;
+  top: 38px;
+  margin-bottom: 25px;
 }
 
 .end-of-list-arrow {
@@ -238,55 +240,112 @@ div .community {
   border-width: 15px 0 15px 26px;
   border-color: transparent transparent transparent #999;
   position: relative;
-  left: 47px;
-  top: 30px;
+  left: 2%;
+  top: 15px;
+}
+
+/* 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;
+}
+
+.date-as-calendar .weekday,
+.date-as-calendar .day,
+.date-as-calendar .month,
+.date-as-calendar .year {
+  text-align: center;
+  line-height: 1.0;
+}
+
+.date-as-calendar .month {
+  font-family: "Oswald", sans-serif;
+  text-transform: uppercase;
+  background: #B11;
+  background : linear-gradient(to bottom right, #D66 0%, #A00 100%);
+  color: white;
 }
 
-.date {
+/* Layout rules using position: absolute and relative dimensions using em. */
+.position-em.date-as-calendar {
+  display: inline-block;
   position: relative;
-  width: 70px;
-  font-family: Georgia, serif;
-  color: #999;
-  margin: 0 auto;
-  float: left;
-  margin-left: 0px;
-  margin-top: 20px;
-  margin-bottom: 20px;
- }
-
-.day, .month, .year {
+  
+  width: 4em; 
+  height: 4em; 
+}
+
+.position-em.date-as-calendar .weekday,
+.position-em.date-as-calendar .day,
+.position-em.date-as-calendar .month,
+.position-em.date-as-calendar .year {
+  display: block;
   position: absolute;
-  font-weight: bold;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 1em;
 }
 
-.day {
-  font-size: 30px;
-  top: 20px;
+.position-em.date-as-calendar .month {
+  top: 0px;
+  font-size: 0.7em;
+  padding: 0.1em 0;
 }
 
-.month {
-  top: 5px;
-  left: 0;
-  font-size: 18px;
+.position-em.date-as-calendar .weekday {
+  top: 1.6em;
+  font-size: 0.6125em;
 }
 
-.year {
-  top: 19px;
-  right: -18px;
-  padding: 0px 4px 0px 4px;
-  border: 1px solid #8b8b8b;
-  border-radius: 0.3em;
-  background-color: #ec8615;
-  color: white;
-  font-size: 17px;
-  rotation: -90deg !important;
-  -webkit-transform: rotate(-90deg);
-  -moz-transform: rotate(-90deg);
+.position-em.date-as-calendar .day {
+  top: 1.1em;
+  font-size: 1.5em
 }
 
-.previous-year {
-  background-color: #e0a463;
+.position-em.date-as-calendar .year {
+  bottom: 0px;
+  font-size: 0.87750em;
 }
+
+/* Multiple sizes. */
+.date-as-calendar.size0_5x {
+  font-size: 8px;
+}
+.date-as-calendar.size0_75x {
+  font-size: 12px;
+}
+.date-as-calendar.size1x {
+  font-size: 16px;
+}
+.date-as-calendar.size1_25x {
+  font-size: 20px;
+}
+.date-as-calendar.size1_5x {
+  font-size: 24px;
+}
+.date-as-calendar.size1_75x {
+  font-size: 28px;
+}
+.date-as-calendar.size2x {
+  font-size: 32px;
+}
+.date-as-calendar.size3x {
+  font-size: 48px;
+}
+
 /* END Classes used within 'Project News' */
 
 /* Classes used within 'Why Debian' */