From cdb7f8c74dee9665d7bc345d272e4fe642863d23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20M=C3=BCller?= Date: Sun, 24 Sep 2017 20:04:18 +0200 Subject: [PATCH] makes pre wrap text + whitespace --- assets/public/style.css | 233 ++++++++++++++++++++-------------------- 1 file changed, 117 insertions(+), 116 deletions(-) diff --git a/assets/public/style.css b/assets/public/style.css index 7680cf0..473bc25 100644 --- a/assets/public/style.css +++ b/assets/public/style.css @@ -1,164 +1,164 @@ body { - display: flex; - flex-direction: column; - min-height: 100vh; + display: flex; + flex-direction: column; + min-height: 100vh; } html, body { - font-family: sans-serif; - padding: 0; - margin: 0; - color: #b0b0b0; - background: #353a3a; + font-family: sans-serif; + padding: 0; + margin: 0; + color: #b0b0b0; + background: #353a3a; } #hero { - text-align: center; - padding-bottom: 5em; - padding-top: 5em; + text-align: center; + padding-bottom: 5em; + padding-top: 5em; } .ui-border { - border-radius: 3px; - border: 1px solid #333; + border-radius: 3px; + border: 1px solid #333; } a { - border-bottom: 1px dotted; - text-decoration: none; - color: #097; + border-bottom: 1px dotted; + text-decoration: none; + color: #097; } a:hover { - color: #0a8; + color: #0a8; } a:visited { - color: #086; + color: #086; } .button { - cursor: pointer; + cursor: pointer; } .ui-elem { - background: #fff; - font-size: 1em; - opacity: 0.8; - padding: 0.3em; - border-radius: 3px; - font-weight: 300; - border: 1px solid #333; + background: #fff; + font-size: 1em; + opacity: 0.8; + padding: 0.3em; + border-radius: 3px; + font-weight: 300; + border: 1px solid #333; } .landing-button { - line-height: 200%; - display: inline-block; - width: 10em; - white-space: nowrap; - border-radius: 3px; - border: none; - margin: 0.5em; - background: #0a6; - font-size: 1.5em; - text-decoration: none; - font-weight: 300; + line-height: 200%; + display: inline-block; + width: 10em; + white-space: nowrap; + border-radius: 3px; + border: none; + margin: 0.5em; + background: #0a6; + font-size: 1.5em; + text-decoration: none; + font-weight: 300; } .landing-button.demo { - opacity: 0.9; - background: #ddd; - color: black !important; + opacity: 0.9; + background: #ddd; + color: black !important; } .landing-button:hover { - background: #0b7; + background: #0b7; } .landing-button.demo:hover { - background: #eee; + background: #eee; } footer { - text-align: center; - padding-bottom: 1em; - font-size: 0.8em; - width: 100%; - font-weight: 300; + text-align: center; + padding-bottom: 1em; + font-size: 0.8em; + width: 100%; + font-weight: 300; } footer a { - border: none; + border: none; } h1, h2, h3, h4, h5, h6 { - font-weight: 400; + font-weight: 400; } h1 { - font-size: 1.8em; + font-size: 1.8em; } h2 { - font-size: 1.6em; + font-size: 1.6em; } h3 { - font-size: 1.4em; + font-size: 1.4em; } h4 { - font-size: 1.2em; + font-size: 1.2em; } h5 { - font-size: 1.1em; + font-size: 1.1em; } h6 { - font-size: 1.0em; + font-size: 1.0em; } #hero h1 { - font-size: 2.5em; + font-size: 2.5em; } #hero h2 { - margin: 2em; - font-weight: 300; + margin: 2em; + font-weight: 300; } #dashed-line { - border-bottom: 1px dashed#888; + border-bottom: 1px dashed#888; } article { - text-align: justify; + text-align: justify; font-weight: 300; - margin-top: 3em; - margin-bottom: 5em; - margin-right: auto; - margin-left: auto; + margin-top: 3em; + margin-bottom: 5em; + margin-right: auto; + margin-left: auto; } article img { - max-width: 100%; + max-width: 100%; } article p { - line-height: 160%; - font-size: 1.05em; + line-height: 160%; + font-size: 1.05em; } article > h1:first-child { - margin: 2em; - font-size: 2.0em; - text-align: center; + margin: 2em; + font-size: 2.0em; + text-align: center; } .central-element { - margin-right: auto; - margin-left: auto; + margin-right: auto; + margin-left: auto; } strong { @@ -166,102 +166,103 @@ strong { } em, blockquote { - font-family: Georgia, Palatino, "Palatino Linotype", serif; + font-family: Georgia, Palatino, "Palatino Linotype", serif; } blockquote { - padding-left: 1em; - border-left: 4px solid #097; + padding-left: 1em; + border-left: 4px solid #097; } .centered { - text-align: center; + text-align: center; } .bottom-space { - margin-bottom: 7em; + margin-bottom: 7em; } *:focus { - outline: 0px none transparent; + outline: 0px none transparent; } pre, code { - font-family: monospace; - border-radius: 3px; - background-color: #303535; + white-space: pre-wrap; + font-family: monospace; + border-radius: 3px; + background-color: #303535; } pre { - padding: 1em; + padding: 1em; } table { - border-collapse: collapse; - width: 100%; + border-collapse: collapse; + width: 100%; } th { - background-color: #303535; - line-height: 2.5em; - padding: 0.3em; + background-color: #303535; + line-height: 2.5em; + padding: 0.3em; } td { - line-height: 2.5em; - padding: 0.3em; - border-top: 1px solid #404545; + line-height: 2.5em; + padding: 0.3em; + border-top: 1px solid #404545; } .middot { - padding: 0.5em; + padding: 0.5em; } /* MEDIA QUERIES */ @media screen and (min-width: 1024px) { - article, .central-element { - width: 800px; - } - #dashed-line { - margin-bottom: 3em; - margin-top: 3em; - } + article, .central-element { + width: 800px; + } + #dashed-line { + margin-bottom: 3em; + margin-top: 3em; + } } @media screen and (max-width: 1023px) { - article, .central-element { - width: 90%; - } - #dashed-line { - margin-bottom: 0.5em; - margin-top: 0.5em; - } + article, .central-element { + width: 90%; + } + #dashed-line { + margin-bottom: 0.5em; + margin-top: 0.5em; + } } textarea { - background-color: #303535; - font-size: 1.2em; + background-color: #303535; + font-size: 1.2em; color: #b0b0b0; - border-radius: 5px; - flex: 1 0; - margin: 3em; - padding: 2em; + border-radius: 5px; + flex: 1 0; + margin: 3em; + padding: 2em; } textarea, fieldset { - border: none; + border: none; } fieldset { - margin-left: 3em; - margin-right: 3em; - margin-bottom: 3em; + margin-left: 3em; + margin-right: 3em; + margin-bottom: 3em; } form { display: flex; - flex: 1 0; + flex: 1 0; flex-direction: column; }