style: start with large and not much designed

[chloro.git] / chloro / phyll / static / css / style.scss

diff --git a/chloro/phyll/static/css/style.scss b/chloro/phyll/static/css/style.scss
new file mode 100644 (file)
index 0000000..e25a946
--- /dev/null
+++ b/chloro/phyll/static/css/style.scss
@@ -0,0 +1,114 @@
+@charset "UTF-8";
+
+$text-color: #222;
+$link-color: #0000ee;
+$visited-link-color: #551a8b;
+
+@import "opensans";
+
+body {
+       font-family: "Open Sans", sans-serif;
+       background: white;
+       color: $text-color;
+       font-size: 100%;
+}
+
+a {
+       color: $link-color;
+       text-decoration: none;
+       border-bottom: 0.1em dotted $link-color;
+       &:visited {
+               color: $visited-link-color;
+               border-color: $visited-link-color;
+       }
+       &:hover {
+               border-bottom-style: solid;
+       }
+}
+
+header {
+       display: inline-block;
+       h1 {
+               font-weight: normal;
+               text-transform: uppercase;
+               margin: 1em 0 0 1em;
+               padding: 0 0.5em;
+               color: lighten($text-color, 20%);
+               background: #fafaff;
+               display: inline-block;
+               a {
+                       border: none;
+               }
+       }
+       transform: rotate(-2deg);
+       position: relative;
+       z-index: 2;
+}
+
+div.actions {
+       position: absolute;
+       top: 1rem;
+       right: 1rem;
+       a {
+               margin-left: 1rem;
+       }
+}
+
+main {
+       margin: 0 4em;
+       padding: 1em;
+       background: #fafaff;
+       max-width: 70em;
+       min-height: 70vh;
+       clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
+}
+
+.home {
+       a {
+               text-transform: uppercase;
+               display: block;
+               text-decoration: none;
+               font-size: 500%;
+               font-weight: bold;
+               padding-top: 0.5em;
+               line-height: 50%;
+               span {
+                       font-size: 30%;
+               }
+               margin-bottom: 2rem;
+       }
+}
+
+.post {
+       max-width: 50em;
+       div.figure {
+               text-align: center;
+               margin: 1em 0;
+               img {
+                       border: 1px solid gray;
+                       padding: 3px;
+               }
+       }
+}
+
+.post-list {
+       ul, li {
+               margin: 0;
+               padding: 0;
+               list-style: none;
+               display: inline-block;
+       }
+       a {
+               text-transform: uppercase;
+               display: inline-block;
+               text-decoration: none;
+               font-size: 200%;
+               font-weight: bold;
+               padding-top: 0.5em;
+               margin-right: 1em;
+               span {
+                       font-size: 60%;
+               }
+       }
+
+}