From c16fac4a5ca1f4a42d0344791132fb1a1d9ae0b2 Mon Sep 17 00:00:00 2001 From: Guillaume Ayoub Date: Fri, 2 Sep 2016 18:12:46 +0200 Subject: [PATCH] Use Sass instead of Scss --- css/main.sass | 174 +++++++++++++++++++++++++++++++++++++++++++++ css/main.scss | 191 -------------------------------------------------- 2 files changed, 174 insertions(+), 191 deletions(-) create mode 100644 css/main.sass delete mode 100755 css/main.scss diff --git a/css/main.sass b/css/main.sass new file mode 100644 index 00000000..e64f3a64 --- /dev/null +++ b/css/main.sass @@ -0,0 +1,174 @@ +--- +# Sass for Radicale +--- + +@charset "utf-8" +@import url(https:\/\/fonts.googleapis.com/css?family=Oxygen:400,300) + +body + background: #e4e9f6 + color: #424247 + display: flex + flex-direction: column + font-family: Oxygen, sans + font-size: 14pt + line-height: 160% + margin: 0 + min-height: 100vh + +a + color: inherit + +nav, footer + background: #a40000 + color: white + padding: 0 20% + + ul + display: flex + flex-wrap: wrap + margin: 0 + padding: 0 + + li + display: block + padding: 0 1em 0 0 + + a + color: inherit + display: block + padding: 1em 0.5em 1em 0 + text-decoration: inherit + transition: 0.2s + + &:hover, + &:focus + color: black + outline: none + +header + background: url(logo.svg), linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1)) + background-position: 22% 45% + background-repeat: no-repeat + color: #efdddd + font-size: 1.5em + min-height: 250px + overflow: auto + padding: 3em 22% + text-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5) + + & > * + padding-left: 220px + + h1 + font-size: 2.5em + font-weight: lighter + margin: 0.5em 0 + +main + flex: 1 + +section + padding: 0 20% 2em + + &:not(:last-child) + border-bottom: 1px dashed #ccc + + h1 + background: linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1)) + color: #e5dddd + font-size: 2.5em + margin: 0 -33.33% 1em + padding: 1em 33.33% + + h2, h3, h4 + font-weight: lighter + margin: 1.5em 0 1em + +article + border-top: 1px solid transparent + position: relative + margin: 3em 0 + + aside + box-sizing: border-box + color: #aaa + font-size: 0.8em + right: -30% + top: 0.5em + position: absolute + + &:before + border-top: 1px dashed #ccc + content: '' + display: block + left: -33.33% + position: absolute + right: -33.33% + +pre + border-radius: 3px + background: black + color: #d3d5db + margin: 0 -1em + overflow-x: auto + padding: 1em + +table + border-collapse: collapse + font-size: 0.8em + margin: auto + + td + border: 1px solid #ccc + padding: 0.5em + +dl + dt + margin-bottom: 0.5em + margin-top: 1em + +@media (max-width: 800px) + body + font-size: 12pt + + header, section + padding-left: 2em + padding-right: 2em + + nav, footer + padding-left: 0 + padding-right: 0 + + ul + justify-content: center + + li + padding: 0 0.5em + + a + padding: 1em 0 + + header + background-position: 50% 30px, 0 0 + padding-bottom: 0 + padding-top: 330px + text-align: center + + & > * + margin: 0 + padding-left: 0 + + section h1 + margin: 0 -0.8em 1.3em + padding: 0.5em 0 + text-align: center + + article + aside + top: 0.5em + right: -1.5em + + &:before + left: -2em + right: -2em diff --git a/css/main.scss b/css/main.scss deleted file mode 100755 index 7bcf65a2..00000000 --- a/css/main.scss +++ /dev/null @@ -1,191 +0,0 @@ ---- -# Scss for Radicale ---- - -@charset "utf-8"; -@import url(https:\/\/fonts.googleapis.com/css?family=Oxygen:400,300); - -body { - background: #e4e9f6; - color: #424247; - display: flex; - flex-direction: column; - font-family: Oxygen, sans; - font-size: 14pt; - margin: 0; - min-height: 100vh; -} - -a { - color: inherit; -} - -nav, footer { - background: #a40000; - color: white; - padding: 0 20%; - - ul { - display: flex; - flex-wrap: wrap; - margin: 0; - padding: 0; - - li { - display: block; - padding: 0 1em 0 0; - - a { - color: inherit; - display: block; - padding: 1em 0.5em 1em 0; - text-decoration: inherit; - transition: 0.2s; - - &:hover, - &:focus { - color: black; - outline: none; - } - } - } - } -} - -header { - background: url(logo.svg), linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1)); - background-position: 22% 45%; - background-repeat: no-repeat; - color: #efdddd; - font-size: 1.5em; - min-height: 250px; - overflow: auto; - padding: 3em 22%; - text-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5); - - & > * { - padding-left: 220px; - } - - h1 { - font-size: 2.5em; - font-weight: lighter; - margin: 0.5em 0; - } -} - -main { - flex: 1; -} - -section { - padding: 0 20% 2em; - - &:not(:last-child) { - border-bottom: 1px dashed #ccc; - } - - h1 { - background: linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1)); - color: #e5dddd; - font-size: 2.5em; - margin: 0 -33.33% 1em; - padding: 1em 33.33%; - } - - h2, h3, h4 { - font-weight: lighter; - margin: 1.5em 0 1em; - } -} - -article { - border-top: 1px solid transparent; - position: relative; - margin: 3em 0; - - aside { - box-sizing: border-box; - color: #aaa; - font-size: 0.8em; - right: -30%; - top: 0.5em; - position: absolute; - } - - &:before { - border-top: 1px dashed #ccc; - content: ''; - display: block; - left: -33.33%; - position: absolute; - right: -33.33%; - } -} - -pre { - border-radius: 3px; - background: black; - color: #d3d5db; - margin: 0 -1em; - overflow-x: auto; - padding: 1em; -} - -@media (max-width: 800px) { - body { - font-size: 12pt; - } - - header, section { - padding-left: 2em; - padding-right: 2em; - } - - nav, footer { - padding-left: 0; - padding-right: 0; - - ul { - justify-content: center; - - li { - padding: 0 0.5em; - - a { - padding: 1em 0; - } - } - } - } - - header { - background-position: 50% 30px, 0 0; - padding-bottom: 0; - padding-top: 330px; - text-align: center; - - & > * { - margin: 0; - padding-left: 0; - } - } - - section h1 { - margin: 0 -0.8em 1.3em; - padding: 0.5em 0; - text-align: center; - } - - article { - aside { - top: 0.5em; - right: -1.5em; - } - - &:before { - left: -2em; - right: -2em; - } - } -} \ No newline at end of file