diff options
Diffstat (limited to 'theme/static/style.css')
| -rw-r--r-- | theme/static/style.css | 225 |
1 files changed, 225 insertions, 0 deletions
diff --git a/theme/static/style.css b/theme/static/style.css new file mode 100644 index 0000000..f209a2c --- /dev/null +++ b/theme/static/style.css @@ -0,0 +1,225 @@ +:root { + /* colors */ + --cl-border: #E7E7E7; + --cl-foreground: #212121; + --cl-background: #edebf8; + --cl-gray: #828282; + --cl-note: #F2FFDD; + --cl-link: #E49619; + + /* -- Code Block Colors -- */ + + /* --- Monokai Theme */ + --cl-code-monokai-background: #272822; + --cl-code-monokai-foreground: #F8F8F2; + --cl-code-monokai-comment: #75715E; + --cl-code-monokai-red: #F92672; + --cl-code-monokai-orange: #FD971F; + --cl-code-monokai-light-orange: #E69F66; + --cl-code-monokai-yellow: #E6DB74; + --cl-code-monokai-green: #A6E22E; + --cl-code-monokai-blue: #66D9EF; + --cl-code-monokai-purple: #AE81FF; + + /* --- Theme Variables */ + --cl-code-background: var(--cl-code-monokai-background); + --cl-code-foreground: var(--cl-code-monokai-foreground); + --cl-code-builtin: var(--cl-code-monokai-green); + --cl-code-comment: var(--cl-code-monokai-comment); + --cl-code-function-name: var(--cl-code-monokai-green); + --cl-code-keyword: var(--cl-code-monokai-red); + --cl-code-string: var(--cl-code-monokai-yellow); + --cl-code-type: var(--cl-code-monokai-blue); + --cl-code-variable-name: var(--cl-code-monokai-orange); +} + +body { + font-family: 'Lora', serif; + background: var(--cl-background); + color: var(--cl-foreground); + margin: 0; + padding: 0 0 0 30 0; + min-height: 100vh; + display: flex; + flex-direction: column; + + background-position: bottom; + background-image: url("footer.png"); + background-repeat: no-repeat; + background-size: contain; +} + +header { + background: var(--cl-foreground); + color: var(--cl-background); + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--cl-border); + padding: 10px 100px; + margin-bottom: 40px; + background-image: url("portrait.png"); + background-repeat: no-repeat; + background-size: 64px; + background-position: bottom left; +} +header h1 { font-size: 24px; } +header nav { + display: flex; + align-items: center; +} +header nav ul { + margin: 0; + padding: 0; +} +header nav ul li { + display: inline; +} + +/* helper classes */ +.visually-hidden { + display: none; +} + +.menu li { + padding-left: 50px; + cursor: pointer; +} +.menu a { + color: var(--cl-background); + font-size: 16px; + font-weight: bold; +} + +/* -- main content -- */ +a { color: var(--cl-link); } +a:hover { + transition: 0.2s; + text-decoration: none; +} +p { + line-height: 25px; + font-size: 15px; + padding-bottom: 20px; +} +h2 { + font-size: 24px; + font-weight: bold; +} +main { + width: 600px; + margin: 0 auto; + flex-grow: 1; +} +@media (max-width: 599px) { + main { + width: calc(100% - 20px); + padding: 10px; + } +} +article h1:first-child { font-size: 36px; } +.post__meta { + font-size: 14px; + color: var(--cl-gray); +} + +/* -- table -- */ +main table { width: 100% } +main table th { text-align: left; } + +/* -- Highlight Note Class -- */ +.note { + margin-top: 20px; + background-color: var(--cl-note); + padding: 20px; + border-radius: 2px; + font-size: 13px; + line-height: 22px; + margin-bottom: 30px; +} +.note p { + margin: 0; + padding: 0; +} + +/* -- Page -- */ + +li.post-title { + margin-bottom: 20px; +} + + +/* -- Code Blocks -- */ +.org-builtin { color: var(--cl-code-builtin); } +.org-doc { color: var(--cl-code-doc); } +.org-function-name { color: var(--cl-code-function-name); } +.org-keyword { color: var(--cl-code-keyword); } +.org-string { color: var(--cl-code-string); } +.org-type { color: var(--cl-code-type); } +.org-variable-name { color: var(--cl-code-variable-name); } +.org-comment, .org-comment-delimiter { color: var(--cl-code-comment); } +.org-src-container { color: var(--cl-code-foreground); + background: var(--cl-code-background); + border: 1px solid var(--cl-border-src); + padding: 0px 15px; + max-width: 100%; + overflow-y: scroll; + border-radius: 5px; } + + +/* -- Footer --*/ +footer { +/* background: var(--cl-foreground); */ + color: var(--cl-background); + height: 300px; + display: flex; + align-items: center; + justify-content: center; +} + + + +/* -- Polaroid -- */ +.image_inline a { + background: #ffffff; + display: inline-block; + margin: 55px 75px 30px; + padding: 15px 15px 30px; + text-align: center; + text-decoration: none; + -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3); + -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3); + box-shadow: 0 4px 6px rgba(0, 0, 0, .3); + -webkit-transition: all .20s linear; + -moz-transition: all .20s linear; + transition: all .20s linear; + z-index: 0; + position: relative; + transform: rotate( 5deg); +} + +.image_inline a:before { +} + +.image_inline a:after { + color: #333; + font-size: 9px; + content: attr(title); + position: relative; + top: 15px; +} + +.image_inline img { + display: block; + width: 250px; +} + +.image_inline a:hover { + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + transform: scale(1.2); + z-index: 10; + -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7); + -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7); + box-shadow: 0 10px 20px rgba(0, 0, 0, .7); +} |