Update 'assets/styles/site.css'

assets/styles/site.css

@@ -19,11 +19,23 @@ html {
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 body {
-    width: 20rem;
     margin: auto;
     padding: 2rem 0.5rem;
 }
 
+.main-container
+{
+	width:46rem;
+	font-weight: normal;
+	 margin: auto;
+}
+
+.main-container.home
+{
+	width:20rem;
+	margin: auto;
+}
+
 
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
  *  HEADER                                                                   *
@@ -62,7 +74,7 @@ nav > ul {
 nav > ul > li {
     display: inline-block;
     margin-right: 0.8rem;
-    color: #004405;
+    color: #378ab4;
 }
 
 nav > ul > li:before {
@@ -83,6 +95,16 @@ h1 {
     font-size: 4rem;
 }
 
+h2
+{
+	font-size:1.35rem;
+	color: #ffffff;
+    background: #378ab4;
+	display:inline-block;
+	font-weight:400;
+	margin: 1rem 0;
+}
+
 p, li {
     font-size: 1.3rem;
 }
@@ -107,12 +129,11 @@ a:hover {
 
 p > a{
     color: #ffffff;
-    background: #004405;
+    background: #378ab4;
-
     padding-bottom: 0.1rem;
 }
 
-p > strong {
+p > strong, li > strong {
     background: #000000;
     color: #ffffff;
     margin: 0;
@@ -120,3 +141,210 @@ p > strong {
     font-weight: normal;
 }
 
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
+ *  ASCII                                                                    *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+ 
+.letterhead 
+{
+    margin-bottom: 2rem;
+	display:table;
+	width:100% !important;
+	font-size:1.1rem;
+}
+
+
+.letterhead > span.ascii, span.ascii
+{
+  white-space: pre-wrap;
+  background: #000000;
+  color: #ffffff;
+  font-weight:700;
+  /*outline: 3px solid #000000;*/	
+  position: relative;
+  line-height: 1;
+  color: #fff;
+  display: inline;
+  border: 0 solid #000;
+  border-width: 0.15em 0; /* 0.25em is roughly equal to one space character. */	
+ 
+}
+
+.letterhead > span.ascii:after, span.ascii:after{
+  background-color: #000;
+}
+
+.letterhead > span.ascii:after, span.ascii:after 
+{
+  content: "";
+  position: absolute;
+  top: -0.1em;
+  right: 100%;
+  bottom: -0.1em;
+  width: 0.1em;
+}
+
+
+
+.letterhead > span.ascii.shadow, span.ascii.shadow
+{
+  text-shadow:
+    0 1px #378ab4,
+    1px 0 #5dabcd,
+    1px 2px #378ab4,
+    2px 1px #5dabcd,
+    2px 3px #378ab4,
+    3px 2px #5dabcd,
+    3px 4px #378ab4,
+    4px 3px #5dabcd,
+    4px 5px #378ab4,
+    5px 4px #5dabcd,
+    5px 6px #378ab4,
+    6px 5px #5dabcd,
+    6px 7px #378ab4,
+    7px 6px #5dabcd,
+    7px 8px #378ab4,
+    8px 7px #5dabcd;
+	/*outline: 12px solid #000000;*/
+}
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
+ *  COLUMNS FESTIVAL                                                                  *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+ 
+p.festival
+{
+	font-size:0.9rem;
+	margin-bottom:1rem;
+}
+
+p.festival > strong
+{
+    font-size:1rem;
+	text-align:center;
+}
+
+.col-pagination p
+{
+	font-size:0.9rem;
+	margin-bottom:1rem;
+}
+
+.col-pagination p.room
+{
+	font-size:0.9rem;
+	margin:0.5rem 0;	
+}
+
+.col-pagination li
+{
+	font-size:0.9rem;
+	margin-bottom:0.3rem;
+}
+
+.col-pagination  li > strong
+{
+	font-size:1rem;
+	text-align:center;
+}
+
+
+
+ .col-pagination
+{
+	display:flex;
+	 display: -webkit-flex;
+}
+ 
+.col
+{
+	-webkit-flex: 1;
+    flex: 1;	
+	padding-right: 5%;
+}
+
+.col.last{
+	padding-right: 0;
+	}
+
+.col p.room span.ascii
+{
+	margin-right:10px;
+}
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
+ *  FOOTER                                                                   *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+footer {
+	font-weight: normal;
+	text-align:left;
+	margin-top: -3.5rem;
+}
+
+footer > img,
+footer > h1 {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+footer > h1, footer  a  {
+	font-size:2rem;	
+}
+
+footer > img {
+    width: 2.5rem;
+    margin-right: 0;
+}
+
+	
+ 
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
+ *  MEDIA QUERY                                                                 *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+ 
+@media(max-width:768px){
+.main-container{
+	width:98% !important;
+	padding:0 2%;
+}
+
+.main-container.home
+{
+	width:20rem !important;
+}
+
+.letterhead 
+{
+	font-size:0.9rem;
+}
+}
+
+@media(max-width:635px){
+.col-pagination
+{
+	display:block;
+}
+.col
+{
+	width:100% !important;	
+	padding: 0;
+}
+
+.letterhead 
+{
+	font-size:0.45rem;
+}
+footer {
+	
+	margin-top: 2rem;
+}
+
+}
+