From 91c1ad55b7a1b718d5e0fd362704d4f5971f1a38 Mon Sep 17 00:00:00 2001 From: lo_bo Date: Thu, 2 Nov 2017 21:03:03 +0100 Subject: [PATCH] Update 'assets/styles/site.css' --- assets/styles/site.css | 240 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 234 insertions(+), 6 deletions(-) diff --git a/assets/styles/site.css b/assets/styles/site.css index aa8d3ca..6caa508 100644 --- a/assets/styles/site.css +++ b/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; } @@ -105,14 +127,13 @@ a:hover { font-weight: bold; } -p > a { +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; +} + +} +