From ff7b81c5d4d93b8558427a41676911f4483c073a Mon Sep 17 00:00:00 2001 From: Ralf Jung Date: Sat, 2 Jan 2016 14:38:29 +0100 Subject: [PATCH] split CSS into several files; take some CSS from the default jekyll skeleton --- personal/_sass/_base.scss | 106 ++++++ personal/_sass/_layout.scss | 152 ++++++++ personal/_sass/_normalize.scss | 425 +++++++++++++++++++++++ personal/_sass/_syntax-highlighting.scss | 64 ++++ personal/style.scss | 265 +------------- research/_sass | 1 + 6 files changed, 755 insertions(+), 258 deletions(-) create mode 100644 personal/_sass/_base.scss create mode 100644 personal/_sass/_layout.scss create mode 100644 personal/_sass/_normalize.scss create mode 100644 personal/_sass/_syntax-highlighting.scss create mode 120000 research/_sass diff --git a/personal/_sass/_base.scss b/personal/_sass/_base.scss new file mode 100644 index 0000000..74f495a --- /dev/null +++ b/personal/_sass/_base.scss @@ -0,0 +1,106 @@ + +/* General Fonts */ +html, body, div, p { + font-family: DejaVu Sans, Verdana, Arial, sans-serif; + font-size: 12pt; + color: $text-color; +} +/* Links */ +a { + text-decoration: none; + color: $link-color; +} +a:hover, a:focus { + text-decoration: underline; +} +/* Header Size & Spacing */ +h1, h2, h3, h4 { + color: $text-color; + + a { + color: $text-color; + } +} +h1 { + margin-top: 0.1em; + font-size: 200%; + margin-bottom: 0.2em; +} +h2 { + margin-top: 0.5em; + font-size: 150%; + margin-bottom: 0.2em; +} +h3 { + margin-top: 0.5em; + font-size: 135%; + margin-bottom: 0.1em; +} +h4 { + margin-top: 0.5em; + font-size: 120%; + margin-bottom: 0.0em; +} + +/* Content styling */ +.side { + float: right; +} + +.side, .comment { + color: $light-text-color; + + a { + color: $light-link-color; + } +} + + +.pretitle, .subtitle { + h1 { + display: inline-block; + font-size: 165%; + } + .side { + margin-left: 0.5em; + margin-top: 0.8em; + } +} +.pretitle { + margin-bottom: 1em; +} +.subtitle { + margin-top: 2em; +} +.title { + clear: both; + margin-bottom: 1em; +} + +figure { + margin: 0; +} +pre, code { + background-color: $code-background-color; + font-family: monospace; + font-size: 82%; +} +code { + padding: 0.1em 0.2em; +} +pre { + padding: 0.6em; +} +pre code { + padding: 0; + font-size: 100%; +} + +p { + margin: 0.5em 0; + line-height: 1.3; +} + +.comment { + margin-top: 1.5em; +} diff --git a/personal/_sass/_layout.scss b/personal/_sass/_layout.scss new file mode 100644 index 0000000..4ac6bb2 --- /dev/null +++ b/personal/_sass/_layout.scss @@ -0,0 +1,152 @@ + +/* General page structure */ +html { + overflow-y: scroll; +} +body { /* This centers us in the page, and handles the "too wide" case */ + padding: 0; + margin: 0 auto; + background-color: $background-color; + max-width: calc(#{$medium-width + $navi-width} + 1px); /* add the right-hand "navi" space for centering - and the border... ;-) */ +} +#-frame { /* Add a frame, full height */ + margin: 0 $navi-width; + padding-top: $outer-margin; + border-left: solid $text-color 1px; + min-height: calc(100vh - #{$outer-margin}); +} + +/* The content of the frame */ +#-content { + margin-left: $intrusion-width; + padding: $outer-margin; + padding-top: 1px; /* If we use 0 here, some paddings add up things get ugly. What?!? */ +} + +/* Navigation menu */ +#-navi { + padding: 0; + margin: 0; + margin-left: -#{$navi-indent}; + width: #{$navi-width + $navi-indent}; + /* Put it into the right spot */ + float: left; + position: relative; + left: calc(-#{$navi-width} - 1px); + /* Make it not take space away from the main text */ + height: 0; + overflow: visible; + + ul { + margin: 0; + padding: 0; + list-style-type: none; + /* Indentation for nested nodes */ + margin-left: $navi-indent; + } + a { + display: block; + width: calc(100% - 2*0.25em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */ + padding: 0.08em 0.25em 0.02em; /* top left-right bottom */ + /* Always have *one* border, for the width to stay constant */ + border-left: solid transparent 1px; + + font-size:110%; + text-align: left; + } + a.current { + padding-top: 0.12em; + border: solid $text-color 1px; + border-right: none; /* solid $background-color 1px; */ + background-color: $background-color; + } + a.root { + margin-top: 0.7em; + border-bottom: solid $text-color 1px; + margin-bottom: 0.3em; + } +} + +/* Medium-size screens */ +@media screen and (max-width:#{ $medium-width + $navi-width } ) { + body { + margin-left: 0; + max-width: calc(#{ $medium-width} + 1px); /* add the left-hand *only* navi space for centering - and the border... ;-) */ + } + #-frame { + margin-right: 0; + } +} + +/* Small screens */ +@media screen and (max-width:#{ $small-width } ) { + html { + overflow-y: auto; + } + body, #-frame, #-content, #-navi { + margin: 0; + padding: 0; + height: auto; + width: auto; + max-width: none; + clear: both; + float: none; + position: static; + } + #-content { + padding: $outer-margin; + } + #-navi { + padding: $outer-margin; + border-bottom: solid $text-color 1px; + + ul { + display: inline; + padding: 0; + margin: 0; + } + li { + display: inline-block; + } + /* Display only parent and children, and decorate them appropriately */ + a { + display:inline-block; + margin: 0 0.3em !important; + padding: 0 !important; + border: none !important; + width: auto !important; + } + a.sibling { + display:none; + } + a.current { + text-decoration: underline; + } + li.parent::before, li.current:before { + content: "»"; + } + li.child::before { + content: "»"; + } + li.child + li.child::before { + content: "|"; + } + } +} + +/* Printing */ +@media print { + body, #-frame, #-content { + margin: 0; + padding: 0; + width: auto; + max-width: none; + border: none; + } + #-title h1 { + border: none; + } + #-navi { + display: none; + } +} diff --git a/personal/_sass/_normalize.scss b/personal/_sass/_normalize.scss new file mode 100644 index 0000000..08f8950 --- /dev/null +++ b/personal/_sass/_normalize.scss @@ -0,0 +1,425 @@ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/personal/_sass/_syntax-highlighting.scss b/personal/_sass/_syntax-highlighting.scss new file mode 100644 index 0000000..a6d05d0 --- /dev/null +++ b/personal/_sass/_syntax-highlighting.scss @@ -0,0 +1,64 @@ +/** + * Syntax highlighting styles + */ +.highlight { + .c { color: #998; font-style: italic } // Comment + .err { color: #a61717; background-color: #e3d2d2 } // Error + .k { font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #998; font-style: italic } // Comment.Multiline + .cp { color: #999; font-weight: bold } // Comment.Preproc + .c1 { color: #998; font-style: italic } // Comment.Single + .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #a00 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #a00 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #458; font-weight: bold } // Keyword.Type + .m { color: #099 } // Literal.Number + .s { color: #d14 } // Literal.String + .na { color: #008080 } // Name.Attribute + .nb { color: #0086B3 } // Name.Builtin + .nc { color: #458; font-weight: bold } // Name.Class + .no { color: #008080 } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #900; font-weight: bold } // Name.Exception + .nf { color: #900; font-weight: bold } // Name.Function + .nn { color: #555 } // Name.Namespace + .nt { color: #000080 } // Name.Tag + .nv { color: #008080 } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #bbb } // Text.Whitespace + .mf { color: #099 } // Literal.Number.Float + .mh { color: #099 } // Literal.Number.Hex + .mi { color: #099 } // Literal.Number.Integer + .mo { color: #099 } // Literal.Number.Oct + .sb { color: #d14 } // Literal.String.Backtick + .sc { color: #d14 } // Literal.String.Char + .sd { color: #d14 } // Literal.String.Doc + .s2 { color: #d14 } // Literal.String.Double + .se { color: #d14 } // Literal.String.Escape + .sh { color: #d14 } // Literal.String.Heredoc + .si { color: #d14 } // Literal.String.Interpol + .sx { color: #d14 } // Literal.String.Other + .sr { color: #009926 } // Literal.String.Regex + .s1 { color: #d14 } // Literal.String.Single + .ss { color: #990073 } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #008080 } // Name.Variable.Class + .vg { color: #008080 } // Name.Variable.Global + .vi { color: #008080 } // Name.Variable.Instance + .il { color: #099 } // Literal.Number.Integer.Long +} diff --git a/personal/style.scss b/personal/style.scss index 2953065..ff9ad1b 100644 --- a/personal/style.scss +++ b/personal/style.scss @@ -20,261 +20,10 @@ $code-background-color: #F7F7F7; $link-color: #237fbf; $light-link-color: #69a7d2; -/* General Fonts */ -html, body, div, p { - font-family: DejaVu Sans, Verdana, Arial, sans-serif; - font-size: 12pt; - color: $text-color; -} -/* Links */ -a { - text-decoration: none; - color: $link-color; -} -a:hover, a:focus { - text-decoration: underline; -} -/* Header Size & Spacing */ -h1, h2, h3, h4 { - color: $text-color; - - a { - color: $text-color; - } -} -h1 { - margin-top: 0.1em; - font-size: 200%; - margin-bottom: 0.2em; -} -h2 { - margin-top: 0.5em; - font-size: 150%; - margin-bottom: 0.2em; -} -h3 { - margin-top: 0.5em; - font-size: 135%; - margin-bottom: 0.1em; -} -h4 { - margin-top: 0.5em; - font-size: 120%; - margin-bottom: 0.0em; -} - -/* Layout and Color stuff */ - -/* General page structure */ -html { - overflow-y: scroll; -} -body { /* This centers us in the page, and handles the "too wide" case */ - padding: 0; - margin: 0 auto; - background-color: $background-color; - max-width: calc(#{$medium-width + $navi-width} + 1px); /* add the right-hand "navi" space for centering - and the border... ;-) */ -} -#-frame { /* Add a frame, full height */ - margin: 0 $navi-width; - padding-top: $outer-margin; - border-left: solid $text-color 1px; - min-height: calc(100vh - #{$outer-margin}); -} - -/* The content of the frame */ -#-content { - margin-left: $intrusion-width; - padding: $outer-margin; - padding-top: 1px; /* If we use 0 here, some paddings add up things get ugly. What?!? */ -} - -/* Navigation menu */ -#-navi { - padding: 0; - margin: 0; - margin-left: -#{$navi-indent}; - width: #{$navi-width + $navi-indent}; - /* Put it into the right spot */ - float: left; - position: relative; - left: calc(-#{$navi-width} - 1px); - /* Make it not take space away from the main text */ - height: 0; - overflow: visible; - - ul { - margin: 0; - padding: 0; - list-style-type: none; - /* Indentation for nested nodes */ - margin-left: $navi-indent; - } - a { - display: block; - width: calc(100% - 2*0.25em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */ - padding: 0.08em 0.25em 0.02em; /* top left-right bottom */ - /* Always have *one* border, for the width to stay constant */ - border-left: solid transparent 1px; - - font-size:110%; - text-align: left; - } - a.current { - padding-top: 0.12em; - border: solid $text-color 1px; - border-right: none; /* solid $background-color 1px; */ - background-color: $background-color; - } - a.root { - margin-top: 0.7em; - border-bottom: solid $text-color 1px; - margin-bottom: 0.3em; - } -} - -/* Medium-size screens */ -@media screen and (max-width:#{ $medium-width + $navi-width } ) { - body { - margin-left: 0; - max-width: calc(#{ $medium-width} + 1px); /* add the left-hand *only* navi space for centering - and the border... ;-) */ - } - #-frame { - margin-right: 0; - } -} - -/* Small screens */ -@media screen and (max-width:#{ $small-width } ) { - html { - overflow-y: auto; - } - body, #-frame, #-content, #-navi { - margin: 0; - padding: 0; - height: auto; - width: auto; - max-width: none; - clear: both; - float: none; - position: static; - } - #-content { - padding: $outer-margin; - } - #-navi { - padding: $outer-margin; - border-bottom: solid $text-color 1px; - - ul { - display: inline; - padding: 0; - margin: 0; - } - li { - display: inline-block; - } - /* Display only parent and children, and decorate them appropriately */ - a { - display:inline-block; - margin: 0 0.3em !important; - padding: 0 !important; - border: none !important; - width: auto !important; - } - a.sibling { - display:none; - } - a.current { - text-decoration: underline; - } - li.parent::before, li.current:before { - content: "»"; - } - li.child::before { - content: "»"; - } - li.child + li.child::before { - content: "|"; - } - } -} - -/* Printing */ -@media print { - body, #-frame, #-content { - margin: 0; - padding: 0; - width: auto; - max-width: none; - border: none; - } - #-title h1 { - border: none; - } - #-navi { - display: none; - } -} - -/* Content styling */ -#-content { - .side { - float: right; - } - - .side, .comment { - color: $light-text-color; - - a { - color: $light-link-color; - } - } - - - .pretitle, .subtitle { - h1 { - display: inline-block; - font-size: 165%; - } - .side { - margin-left: 0.5em; - margin-top: 0.8em; - } - } - .pretitle { - margin-bottom: 1em; - } - .subtitle { - margin-top: 2em; - } - .title { - clear: both; - margin-bottom: 1em; - } - - pre, code { - background-color: $code-background-color; - font-family: monospace; - font-size: 82%; - } - code { - padding: 0.1em 0.2em; - } - pre { - padding: 0.6em; - } - pre code { - padding: 0; - font-size: 100%; - } - - p { - margin: 0.5em 0; - line-height: 1.3; - } - - .comment { - margin-top: 1.5em; - } -} +/* Include the actual styles */ +@import + "normalize", + "base", + "layout", + "syntax-highlighting" +; diff --git a/research/_sass b/research/_sass new file mode 120000 index 0000000..e788187 --- /dev/null +++ b/research/_sass @@ -0,0 +1 @@ +../personal/_sass \ No newline at end of file -- 2.30.2