diff options
author | neodarz <neodarz@neodarz.net> | 2017-06-02 14:24:15 +0200 |
---|---|---|
committer | neodarz <neodarz@neodarz.net> | 2017-06-02 14:24:15 +0200 |
commit | e3ed3e43f563bfed007344f07597193dabd88d57 (patch) | |
tree | 72847f6abea7ffbf10ad6a5ad4cccb56a2eac63f /source/css/theme.scss | |
parent | 5c8c04f4da620a891368f9b8fdf045035b1cdf50 (diff) | |
download | my_new_personal_website-e3ed3e43f563bfed007344f07597193dabd88d57.tar.xz my_new_personal_website-e3ed3e43f563bfed007344f07597193dabd88d57.zip |
Move css to scss with new design
Diffstat (limited to '')
-rw-r--r-- | source/css/theme.scss | 725 |
1 files changed, 725 insertions, 0 deletions
diff --git a/source/css/theme.scss b/source/css/theme.scss new file mode 100644 index 00000000..f4427768 --- /dev/null +++ b/source/css/theme.scss @@ -0,0 +1,725 @@ +/*** Webfonts ***/ + +/* icon font from fontello */ +@font-face { + font-family: 'fontello'; + src: url('../fonts/fontello.eot'); + src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'), + url('../fonts/fontello.woff') format('woff'), + url('../fonts/fontello.ttf') format('truetype'), + url('../fonts/fontello.svg#fontello') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'awesome'; + src: url('/fonts/font-awesome/fonts/fontawesome-webfont.eot'); + src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/fontawesome-webfont.woff') format('woff'), + url('../fonts/fontawesome-webfont.ttf') format('truetype'), + url('../fonts/fontawesome-webfont.svg#fontawesome-webfont') format('svg'); + font-weight: normal; + font-style: normal; +} + +$font-stack: "monospace", "helvetica", serif; +$black: #000; +$white: #fff; +$red: red; + +/*** Main theme ***/ + +body { + background-color: $black; + color: $white; + font-family: $font-stack; + font-size: 12px; + -webkit-font-smoothing: antialiased; + margin: 0 0 100px 0; +} + +.bodya { + border: 1px solid $white; + margin-left: 20vw; + margin-right: 20vw; +} + + +@media +only screen and (-webkit-min-device-pixel-ratio: 1.25), +only screen and ( min-device-pixel-ratio: 1.25), +only screen and ( min-resolution: 200dpi), +only screen and ( min-resolution: 1.25dppx) { + -webkit-font-smoothing: subpixel-antialiased; +} + +#archival-notice { + position: absolute; + top: 30px; + left: 0; + right: 0; + margin: 0 auto; + text-align: center; + color: $red; +} + +li { + list-style: none; +} + +ul li:before { + content: "\25b6 \00a0"; +} + +/* Menu design */ +.nav { + position: fixed; + left: 2.5%; + height: 150px; + width: 200px; + text-align: center; + + li { + list-style: none; + + a { + text-decoration: none; + } + } +} + +.lia { + text-decoration: none; + + li:before { + list-style: none; + content: "" !important; + } + + &:hover li { + background-color: $white; + color: $black; + } +} + +.left-lia { + float: left; + + &:after { + content: "█▓▒░"; + } +} + +.right-lia { + float: right; + + &:after { + content: "░▒▓█"; + } +} + +.lia-border { + border: 1px solid $white; + + ul { + padding: 0px; + margin: 0; + } + + hr { + background-color: $white; + margin: 0; + padding: 0; + } +} + +/* subMenu design */ +.subnav { + position: fixed; + right: 2.5%; + height: 150px; + width: 200px; + text-align: center; + + li { + list-style: none; + + a { + text-decoration: none; + } + } +} + +.sublia { + text-decoration: none; + + li:before { + list-style: none; + content: "" !important; + } + + &:hover li { + background-color: white; + color: black; + } +} + +.subleft-lia { + float: left; + + &:after { + content: "█▓▒░"; + } +} + +.subright-lia { + float: right; + + &:after { + content: "░▒▓█"; + } +} + +.sublia-border { + border: 1px solid $white; + + ul { + padding: 0px; + margin: 0; + } + + hr { + background-color: $white; + margin: 0; + padding: 0; + } + + pre code ul, pre code, pre { + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + font-family: monospace,monospace !important; + font-size: 12px !important; + white-space: normal; + } +} + +/* situations design */ + +.situation1nav, .situation2nav { + position: fixed; + right: 2.5%; + margin-top: 100px; + height: 150px; + width: 200px; + text-align: center; + + li { + list-style: none; + + a { + text-decoration: none; + } + } +} + + .situation1lia, .situation2lia { + text-decoration: none; + + li:hover { + background-color: white; + color: black; + } + + li:before { + list-style: none; + content: "" !important; + } + } + + .situation1left-lia, .situation2left-lia { + float: left; + + &:after { + content: "█▓▒░"; + } + } + + .situation1right-lia, .situation2right-lia { + float: right; + + &:after { + content: "░▒▓█"; + } + } + + .situation1lia-border, .situation2lia-border { + border: 1px solid white; + + ul { + padding: 0px; + margin: 0; + } + + hr { + background-color: white; + margin: 0; + padding: 0; + } + + pre code ul, pre code, pre, pre code ul, pre code, pre { + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + font-family: monospace,monospace !important; + font-size: 12px !important; + white-space: normal; + } + } + +/* end menus design */ + + +.content-separator, .footer { + width: 60%; + margin: 0 auto; +} + + +.content { + text-align: justify; + + pre, ul, p { + width: 60%; + margin: 0 auto; + } +} +.content .sourceCode { + margin: 0 auto; +} + +.header { + width: 100%; +} + +hr { + border: 0; + height: 1px; + background: #888; +} + +.content-separator { + margin: 15px auto 3px auto; +} + +h1 { + text-align: center; + font-size: 160%; + font-weight: bold; + width: 100% +} + +.h1 { + text-align: center; +} + + +h2 { + text-align: center; + font-size: 125%; + font-weight: bold; +} + +h3 { + text-align: center; + font-weight: bold; +} + +.article-metadata { + text-align: center; + font-size: 100%; + font-weight: normal; + margin: 1em 0; +} + +a { + color: #fff; + word-wrap: break-word; +} + +a .active { + color: #fff; +} + +/*p, h2, ul { + padding-left: 10vw; + padding-right: 10vw; +}*/ + +code { + font-size: 90%; + color: $black; + font-family: Courier, monospace; + white-space: pre-wrap; + word-wrap: break-word; + background-color: $white; + border-radius: 2px; + padding-left: 1px; + padding-right: 1px; +} + +h1 code, h2 code { + font-size: 95%; + color: #000; +} + +pre { + padding: 1em; + background: #000; +} + +/* Pandoc wraps pre[class*=sourceCode] in a div tag, so it is necessary to +eliminate the margins of such pre tags to avoid too much spacing.*/ +pre[class*=sourceCode] { + margin: 0; + border: 1px solid; +} + +pre code { + font-size: 85%; + color: #fff; + white-space: pre; + word-wrap: normal; + background-color: black; + border-radius: 0; + padding: 0; +} + +ol { + padding-left: 20px; +} + +ul { + padding-left: 16px; +} + +p { + padding: 7px 0 7px 0; +} + +blockquote { + margin: 0; + padding: 0 1em; + font-style: italic; + border-left: 0.4em solid #ddd; +} + +img { + display: block; + max-width: 100%; + margin: 5px auto; +} + +.figure { + text-align: center; + margin: 0 auto; + width: 60%; +} + +.figure img { + display: inline; + margin: 0 0 5px 0; +} + +.figure .caption { + width: 80%; + margin: auto; + font-size: 90%; +} + +sup { + font-size: 11px; + margin: 0 0 0 1px; +} + +noscript { + color: #999; +} + +noscript a { + color: #999; +} + +.footnotes { + font-size: 90%; + + ol { + padding-left: 1.4em; + } + + p { + margin: 0.6em 0; + } +} + +.footnotes-backlink { + margin-left: 0.2em; + vertical-align: -0.2em; + color: #bbb; + text-decoration: none; + + &:hover { + background-color: #bbb; + color: #fff; + } +} + +.lfooter { + float: left; +} + +.lfooter .updated:before { + content: "Last updated: " +} + +.rfooter { + float: right; +} + +.rss-icon, .atom-icon, .cc-icon { + text-decoration: none; + position: relative; + top: 1px; +} + +.rss-icon, .atom-icon { + margin: 0 3px; +} + +.cc-icon { + margin: 0 1px; +} + +.rss-icon:before, .atom-icon:before { + content: "\e800"; + font-family: "monospace","helvetica"; + font-size: 105%; +} + +.rss-icon:before { + display: inline-block; + transform: scale(-1,1); + -webkit-transform: scale(-1,1); +} + +.cc-icon:before { + content: "\e801"; + font-family: "monospace","helvetica"; + font-size: 95%; +} + +.title-header { + display: table; + margin: 0 auto; +} + +.link-header { + text-decoration: none; +} + +table { + text-align: center; + width: 100% !important; +} + +.skill-table { + text-align:left; + text-decoration: none; + list-style: none; +} + +.skill-table tr td ul li { + list-style: none; +} + +.skill-table tr td ul li::before { + content: ""; +} + +.odd { + background-color: #131313; + border: 1px solid white; +} + +.ouer { + display: block; +} + +.code-outer { + margin-left: 1vw; + width: 65%; + margin-left: 10vw; + margin-bottom: 1vw; + border: 1px solid #fff; + overflow: auto; + font-family: "monospace","helvetica"; +} + +.left-h1 { + float: left; + font-weight: bold; + font-size: 24.4px; +} + +.right-h1 { + float: right; + font-weight: bold; + font-size: 24.4px; +} + +.title-h1 { + display: inline-block; + font-size: 24.4px; + font-weight: bold; +} + +.footer { + text-align: center; +} + +/*** tag cloud ***/ + +#cloudtag { + width: 50%; + margin: 0 auto; + border: 1px solid white; + padding: 10px; + + a { + text-decoration: none; + font-weight: bold; + } + + span { + font-weight: lighter; + } +} + +/*** Wide screen ***/ + +@media screen and (min-width: 1441px) { + .content pre, .content ul, .content p, .content-separator, .footer { + width: 50%; + } + + .content .sourceCode { + + } + + .header { + width: 100%; + } +} + +/*** Narrow screen ***/ + +@media screen and (max-width: 1023px) { + body { + margin: 0 0 100px 0; + } + + .nav { + position: static; + width: 100%; + height: 150px; + margin: 20px 0 80px 0; + } + + .nav-icon { + width: 150px; + height: 150px; + line-height: 150px; + } + + .nav-icon:before { + font-size: 54px; + } + + .nav-title, .nav-author { + height: 0; + width: 0; + visibility: hidden; + pointer-events: none; + } + + p, .content-separator, .footer { + width: 80%; + } + + .header { + width: 100%; + } +} + +/*** Ultranarrow screen ***/ + +@media screen and (max-width: 500px) { + .outer { + display: none; + } + + .content pre, .content ul, .content p, .content-separator, .footer { + width: 90%; + } + + .content .sourceCode { + + } + + .header { + width: 100%; + } + + .blog-index-yearly-index { + margin-left: 0; + } + + .blog-index-post-date { + width: 4em; + } +} + +/*** Print ***/ + +@media print { + body { + margin: 5% 0; + font-size: 12px; + } + + sup { + font-size: 0.5em; + top: -1em; + } + + pre { + -webkit-print-color-adjust: exact; + } + + .content pre, .content ul, .content p, .content-separator, .footer { + width: 90%; + } + + .content .sourceCode { + + } + + .header { + width: 100%; + } + + .nav, .rss-icon, .atom-icon, .cc-icon, #archival-notice { + display: none; + } +} |