an array of objects describing your spoken languages; each object should include a name (e.g. "English") and level (e.g. "fluent") property
100 |
optional
101 |
102 |
103 |
social
104 |
an array of objects for each social profile you want to link; each object should include a name (e.g. "Github"), user (e.g. "@maxboeck") and url (e.g. "https://github.com/maxboeck") property
105 |
optional
106 |
107 |
108 |
109 |
110 | ### 2. Introduction
111 |
112 | Open `entries/content/introduction.md` and edit the text content of the file with your personal short introduction summary. Limit it to 2-3 sentences and convey your motivation. You can edit the title of the section here as well.
113 |
114 | ### 3. Work Experience & Education
115 |
116 | The entries for the sections "work experience" and "education" are stored as markdown files in `src/entries/work` and `src/entries/education`.
117 |
118 | Delete the demo files in there and create your own. The text should describe your responsibilities, learnings or achievements. Include the following [frontmatter](https://www.11ty.dev/docs/data-frontmatter/) data:
119 |
120 |
121 |
122 |
123 |
Key
124 |
Description
125 |
Required
126 |
127 |
128 |
129 |
130 |
title
131 |
the title of the entry. in "work experience", this sould be your role/position, in "education" this should be the degree/certification earned.
132 |
required
133 |
134 |
135 |
start
136 |
ISO timestamp of when you started this job or education.
137 |
required
138 |
139 |
140 |
end
141 |
ISO timestamp of when you ended this job or education. If not defined, that entry will say "- Present"
142 |
optional
143 |
144 |
145 |
organization
146 |
name of your employer (when "work") or school (when "education")
147 |
optional
148 |
149 |
150 |
organizationUrl
151 |
link to website of your employer (when "work") or school (when "education")
152 |
optional
153 |
154 |
155 |
location
156 |
location of company or school
157 |
optional
158 |
159 |
160 |
161 |
162 | ### 4. Github Repositories
163 |
164 | If you want, you can include the five most starred repositories from your Github account. This will fetch the current data at build time, at most once a day. To do this, edit `src/data/repositories.js` and change the `YOUR_GITHUB_USERNAME` var to your Github username.
165 |
166 | ### 5. Custom Content
167 |
168 | Edit `entries/content/custom.md` if you want to edit freeform content to the end of the CV. This could be a legal disclaimer or an additional section. Delete the file if you don't want this section to show up.
169 |
170 | ### 6. Meta Data & Design
171 |
172 | Open `src/data/meta.json` and replace the `url` with the URL of your hosted résumé. You can also customize the language and color scheme here.
173 |
174 | Supported properties are:
175 |
176 |
177 |
178 |
179 |
Key
180 |
Description
181 |
Required
182 |
183 |
184 |
185 |
186 |
url
187 |
the URL of your hosted résumé, e.g. "https://my-resume.com". (no trailing slash)
188 |
required
189 |
190 |
191 |
lang
192 |
the 2-digit language identifier of your résumé, e.g. "en", "de", etc.
193 |
required
194 |
195 |
196 |
locale
197 |
the locale code of your résumé, e.g. "en_US", "de_DE", etc.
198 |
required
199 |
200 |
201 |
colors.primary
202 |
The HEX code of the primary brand color. defaults to blue #005b96
203 |
optional
204 |
205 |
206 |
colors.secondary
207 |
The HEX code of the secondary brand color. defaults to red #fc6767
208 |
optional
209 |
210 |
211 |
212 |
213 | ### 7. Internationalization
214 |
215 | There are a few hardcoded english strings used in the template, such as the section titles and some labels. If you want to change the default language from english to something else, you can translate these strings by changing the values in `data/strings.json`.
216 |
217 | ## Credits
218 |
219 | Thanks to [Eric Bailey](https://ericwbailey.design/) for his post ["How to not make a résumé in React"](https://ericwbailey.design/writing/how-to-not-make-a-resume-in-react.html), which gave me the idea.
220 |
221 | ## Colophon
222 |
223 | * "Butler" headline font by [Fabian de Smet](https://fabiandesmet.com/portfolio/butler-font/) (CC BY-SA 4.0 [License](https://github.com/maxboeck/resume/tree/master/src/assets/fonts/Butler_ButlerStencil_FontLicense_v1_0.pdf))
224 | * Avatar image generated by GAN at [thispersondoesnotexist.com](https://www.thispersondoesnotexist.com/).
225 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | command = "npm run build"
3 | publish = "dist"
4 |
5 | [context.production.environment]
6 | ELEVENTY_ENV = "production"
7 |
8 | [[plugins]]
9 | package = "netlify-plugin-cache"
10 | [plugins.inputs]
11 | # Optional (but highly recommended). Defaults to [".cache"].
12 | paths = [".cache"]
13 |
14 | [[headers]]
15 | for = "/*"
16 | [headers.values]
17 | X-Frame-Options = "DENY"
18 | X-XSS-Protection = "1; mode=block"
19 | X-Content-Type-Options = "nosniff"
20 | Referrer-Policy= "no-referrer-when-downgrade"
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "resume",
3 | "version": "1.1.0",
4 | "description": "An online resume",
5 | "scripts": {
6 | "start": "npm run dev",
7 | "dev": "run-s clean eleventy:dev",
8 | "build": "run-s clean eleventy:prod",
9 | "eleventy:dev": "cross-env ELEVENTY_ENV=development eleventy --serve",
10 | "eleventy:prod": "cross-env ELEVENTY_ENV=production eleventy",
11 | "clean": "del-cli dist",
12 | "test": "echo \"Error: no test specified\" && exit 1"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "https://github.com/maxboeck/resume"
17 | },
18 | "author": "Max Böck",
19 | "license": "MIT",
20 | "dependencies": {
21 | "@11ty/eleventy": "^0.12.1",
22 | "@11ty/eleventy-cache-assets": "^2.2.1",
23 | "@11ty/eleventy-plugin-rss": "^1.1.1",
24 | "@babel/core": "^7.13.0",
25 | "@babel/plugin-transform-runtime": "^7.13.10",
26 | "@babel/preset-env": "^7.13.12",
27 | "babel-loader": "^8.2.2",
28 | "clean-css": "^5.1.2",
29 | "critical": "^3.0.0",
30 | "cssesc": "^3.0.0",
31 | "del-cli": "^3.0.1",
32 | "focus-visible": "^5.2.0",
33 | "html-minifier": "^4.0.0",
34 | "lodash": "^4.17.21",
35 | "luxon": "^1.26.0",
36 | "markdown-it": "^12.0.4",
37 | "memfs": "^3.2.0",
38 | "mime": "^2.4.4",
39 | "netlify-plugin-cache": "^1.0.3",
40 | "node-sass": "^5.0.0",
41 | "npm-run-all": "^4.1.5",
42 | "svg-sprite": "^1.5.0",
43 | "webpack": "^5.28.0"
44 | },
45 | "devDependencies": {
46 | "cross-env": "^7.0.3"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/assets/fonts/Butler_ButlerStencil_FontLicense_v1_0.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxboeck/resume/9c177fcb8abc315514e57e2701152871a529e2be/src/assets/fonts/Butler_ButlerStencil_FontLicense_v1_0.pdf
--------------------------------------------------------------------------------
/src/assets/fonts/butler-medium.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxboeck/resume/9c177fcb8abc315514e57e2701152871a529e2be/src/assets/fonts/butler-medium.woff
--------------------------------------------------------------------------------
/src/assets/fonts/butler-medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxboeck/resume/9c177fcb8abc315514e57e2701152871a529e2be/src/assets/fonts/butler-medium.woff2
--------------------------------------------------------------------------------
/src/assets/icons/behance.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/dribbble.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/email.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/fork.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/github.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/laptop.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/linkedin.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/medium.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/print.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/reddit.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/icons/skype.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/slack.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/star.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/icons/telephone.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/twitter.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/icons/whatsapp.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/images/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxboeck/resume/9c177fcb8abc315514e57e2701152871a529e2be/src/assets/images/avatar.jpg
--------------------------------------------------------------------------------
/src/assets/images/demo/resume.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxboeck/resume/9c177fcb8abc315514e57e2701152871a529e2be/src/assets/images/demo/resume.png
--------------------------------------------------------------------------------
/src/assets/images/favicon/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxboeck/resume/9c177fcb8abc315514e57e2701152871a529e2be/src/assets/images/favicon/android-chrome-192x192.png
--------------------------------------------------------------------------------
/src/assets/images/favicon/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxboeck/resume/9c177fcb8abc315514e57e2701152871a529e2be/src/assets/images/favicon/android-chrome-512x512.png
--------------------------------------------------------------------------------
/src/assets/images/favicon/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxboeck/resume/9c177fcb8abc315514e57e2701152871a529e2be/src/assets/images/favicon/apple-touch-icon.png
--------------------------------------------------------------------------------
/src/assets/images/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxboeck/resume/9c177fcb8abc315514e57e2701152871a529e2be/src/assets/images/favicon/favicon-16x16.png
--------------------------------------------------------------------------------
/src/assets/images/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxboeck/resume/9c177fcb8abc315514e57e2701152871a529e2be/src/assets/images/favicon/favicon-32x32.png
--------------------------------------------------------------------------------
/src/assets/images/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxboeck/resume/9c177fcb8abc315514e57e2701152871a529e2be/src/assets/images/favicon/favicon.ico
--------------------------------------------------------------------------------
/src/assets/images/favicon/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
33 |
--------------------------------------------------------------------------------
/src/assets/scripts/main.js:
--------------------------------------------------------------------------------
1 | import 'focus-visible'
2 |
3 | document.documentElement.classList.remove('no-js')
4 |
5 | // Scroll State
6 | const onScroll = () => {
7 | const scrollClassName = 'js-scrolled'
8 | const scrollTreshold = 200
9 | const isOverTreshold = window.scrollY > scrollTreshold
10 |
11 | if (isOverTreshold) {
12 | document.documentElement.classList.add(scrollClassName)
13 | } else {
14 | document.documentElement.classList.remove(scrollClassName)
15 | }
16 | }
17 | window.addEventListener('scroll', onScroll, { passive: true })
18 |
19 | // Print Button
20 | const printButton = document.querySelector('.js-print')
21 | printButton.addEventListener('click', () => {
22 | window.print()
23 | })
24 |
--------------------------------------------------------------------------------
/src/assets/scripts/scripts.11ty.js:
--------------------------------------------------------------------------------
1 | // This file handles the JS build.
2 | // It will run webpack with babel over all JS defined in the main entry file.
3 |
4 | // main entry point name
5 | const ENTRY_FILE_NAME = 'main.js'
6 |
7 | const fs = require('fs')
8 | const path = require('path')
9 | const webpack = require('webpack')
10 | const { fs: mfs } = require('memfs')
11 |
12 | const isProd = process.env.ELEVENTY_ENV === 'production'
13 |
14 | module.exports = class {
15 | // Configure Webpack in Here
16 | async data() {
17 | const entryPath = path.join(__dirname, `/${ENTRY_FILE_NAME}`)
18 | const outputPath = path.resolve(__dirname, '../../memory-fs/js/')
19 |
20 | // Transform .js files, run through Babel
21 | const rules = [
22 | {
23 | test: /\.m?js$/,
24 | exclude: /(node_modules|bower_components)/,
25 | use: {
26 | loader: 'babel-loader',
27 | options: {
28 | presets: ['@babel/preset-env'],
29 | plugins: ['@babel/plugin-transform-runtime']
30 | }
31 | }
32 | }
33 | ]
34 |
35 | // pass environment down to scripts
36 | const envPlugin = new webpack.EnvironmentPlugin({
37 | ELEVENTY_ENV: process.env.ELEVENTY_ENV
38 | })
39 |
40 | // Main Config
41 | const webpackConfig = {
42 | mode: isProd ? 'production' : 'development',
43 | entry: entryPath,
44 | output: { path: outputPath },
45 | module: { rules },
46 | plugins: [envPlugin]
47 | }
48 |
49 | return {
50 | permalink: `/assets/scripts/${ENTRY_FILE_NAME}`,
51 | eleventyExcludeFromCollections: true,
52 | webpackConfig
53 | }
54 | }
55 |
56 | // Compile JS with Webpack, write the result to Memory Filesystem.
57 | // this brilliant idea is taken from Mike Riethmuller / Supermaya
58 | // @see https://github.com/MadeByMike/supermaya/blob/master/site/utils/compile-webpack.js
59 | compile(webpackConfig) {
60 | const compiler = webpack(webpackConfig)
61 | compiler.outputFileSystem = mfs
62 | compiler.inputFileSystem = fs
63 | compiler.intermediateFileSystem = mfs
64 |
65 | return new Promise((resolve, reject) => {
66 | compiler.run((err, stats) => {
67 | if (err || stats.hasErrors()) {
68 | const errors =
69 | err ||
70 | (stats.compilation ? stats.compilation.errors : null)
71 |
72 | reject(errors)
73 | return
74 | }
75 |
76 | mfs.readFile(
77 | webpackConfig.output.path + '/' + ENTRY_FILE_NAME,
78 | 'utf8',
79 | (err, data) => {
80 | if (err) reject(err)
81 | else resolve(data)
82 | }
83 | )
84 | })
85 | })
86 | }
87 |
88 | // render the JS file
89 | async render({ webpackConfig }) {
90 | try {
91 | const result = await this.compile(webpackConfig)
92 | return result
93 | } catch (err) {
94 | console.log(err)
95 | return null
96 | }
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/src/assets/styles/base/_animation.scss:
--------------------------------------------------------------------------------
1 | @media (prefers-reduced-motion: reduce) {
2 | * {
3 | animation-duration: 0.01s !important;
4 | transition-duration: 0.01s !important;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/assets/styles/base/_focus.scss:
--------------------------------------------------------------------------------
1 | // =================
2 | // DEFAULT FOCUS STYLES
3 | // =================
4 |
5 | a:focus,
6 | button:focus,
7 | input:focus {
8 | outline: 5px solid $secondary-color;
9 | outline: 5px solid var(--secondary-color, $secondary-color);
10 | }
11 |
12 | // =================
13 | // FOCUS-VISIBLE POLYFILL
14 | // =================
15 |
16 | .js-focus-visible :focus:not(.focus-visible) {
17 | outline: none;
18 | }
19 |
20 | // =================
21 | // EXCEPTIONS
22 | // =================
23 |
24 | // sections excluded from the tabindex
25 | [tabindex='-1']:focus {
26 | outline: none !important;
27 | }
28 |
29 | // the skip link is only visible on focus
30 | .sr-skip-link:focus {
31 | outline: none;
32 | }
33 |
34 | // links that are both focused AND hovered
35 | a:focus:hover {
36 | outline: none;
37 | }
38 |
--------------------------------------------------------------------------------
/src/assets/styles/base/_fonts.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Butler';
3 | font-style: normal;
4 | font-display: swap;
5 | font-weight: 500;
6 | src: url('/assets/fonts/butler-medium.woff2') format('woff2'),
7 | url('/assets/fonts/butler-medium.woff') format('woff');
8 | }
9 |
--------------------------------------------------------------------------------
/src/assets/styles/base/_layout.scss:
--------------------------------------------------------------------------------
1 | // Main Site Layout
2 |
3 | body {
4 | overflow-x: hidden;
5 | }
6 |
7 | .layout {
8 | min-height: 100%;
9 | min-height: 100vh;
10 | position: relative;
11 |
12 | .header {
13 | grid-area: header;
14 | padding: $spacing-y 0;
15 | }
16 | .main {
17 | grid-area: main;
18 | }
19 | .sidebar {
20 | grid-area: sidebar;
21 | background-color: $primary-color;
22 | background-color: var(--primary-color, $primary-color);
23 | }
24 | .footer {
25 | grid-area: footer;
26 | padding: $spacing-y 0;
27 | background-color: $gray-light;
28 | }
29 |
30 | @include mq(lg) {
31 | display: grid;
32 | grid-template-columns: 25% 1fr;
33 | grid-template-rows: auto 1fr auto;
34 | grid-template-areas:
35 | 'sidebar header'
36 | 'sidebar main'
37 | 'sidebar footer';
38 | }
39 | }
40 |
41 | .container {
42 | padding-left: 5%;
43 | padding-right: 5%;
44 | max-width: $container-max-width;
45 |
46 | @include mq(lg) {
47 | padding-left: 7%;
48 | padding-right: 7%;
49 | }
50 | }
51 |
52 | .grid {
53 | display: grid;
54 | column-gap: $spacing-x * 2;
55 | page-break-inside: avoid;
56 |
57 | &--2col {
58 | grid-template-columns: 1fr 1fr;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/assets/styles/base/_normalize.scss:
--------------------------------------------------------------------------------
1 | /* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
2 |
3 | //
4 | // 1. Set default font family to sans-serif.
5 | // 2. Prevent iOS and IE text size adjust after device orientation change,
6 | // without disabling user zoom.
7 | //
8 |
9 | html {
10 | font-family: sans-serif; // 1
11 | -ms-text-size-adjust: 100%; // 2
12 | -webkit-text-size-adjust: 100%; // 2
13 | }
14 |
15 | //
16 | // Remove default margin.
17 | //
18 |
19 | body {
20 | margin: 0;
21 | }
22 |
23 | // HTML5 display definitions
24 | // ==========================================================================
25 |
26 | //
27 | // Correct `block` display not defined for any HTML5 element in IE 8/9.
28 | // Correct `block` display not defined for `details` or `summary` in IE 10/11
29 | // and Firefox.
30 | // Correct `block` display not defined for `main` in IE 11.
31 | //
32 |
33 | article,
34 | aside,
35 | details,
36 | figcaption,
37 | figure,
38 | footer,
39 | header,
40 | hgroup,
41 | main,
42 | menu,
43 | nav,
44 | section,
45 | summary {
46 | display: block;
47 | }
48 |
49 | //
50 | // 1. Correct `inline-block` display not defined in IE 8/9.
51 | // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52 | //
53 |
54 | audio,
55 | canvas,
56 | progress,
57 | video {
58 | display: inline-block; // 1
59 | vertical-align: baseline; // 2
60 | }
61 |
62 | //
63 | // Prevent modern browsers from displaying `audio` without controls.
64 | // Remove excess height in iOS 5 devices.
65 | //
66 |
67 | audio:not([controls]) {
68 | display: none;
69 | height: 0;
70 | }
71 |
72 | //
73 | // Address `[hidden]` styling not present in IE 8/9/10.
74 | // Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
75 | //
76 |
77 | [hidden],
78 | template {
79 | display: none !important;
80 | }
81 |
82 | // Links
83 | // ==========================================================================
84 |
85 | //
86 | // Remove the gray background color from active links in IE 10.
87 | //
88 |
89 | a {
90 | background-color: transparent;
91 | }
92 |
93 | // Text-level semantics
94 | // ==========================================================================
95 |
96 | //
97 | // Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
98 | //
99 |
100 | b,
101 | strong {
102 | font-weight: bold;
103 | }
104 |
105 | //
106 | // Address styling not present in Safari and Chrome.
107 | //
108 |
109 | dfn {
110 | font-style: italic;
111 | }
112 |
113 | //
114 | // Address styling not present in IE 8/9.
115 | //
116 |
117 | mark {
118 | background: #ff0;
119 | color: #000;
120 | }
121 |
122 | //
123 | // Address inconsistent and variable font size in all browsers.
124 | //
125 |
126 | small {
127 | font-size: 80%;
128 | }
129 |
130 | //
131 | // Prevent `sub` and `sup` affecting `line-height` in all browsers.
132 | //
133 |
134 | sub,
135 | sup {
136 | font-size: 75%;
137 | line-height: 0;
138 | position: relative;
139 | vertical-align: baseline;
140 | }
141 |
142 | sup {
143 | top: -0.5em;
144 | }
145 |
146 | sub {
147 | bottom: -0.25em;
148 | }
149 |
150 | // Embedded content
151 | // ==========================================================================
152 |
153 | //
154 | // Remove border when inside `a` element in IE 8/9/10.
155 | //
156 |
157 | img {
158 | border: 0;
159 | }
160 |
161 | //
162 | // Correct overflow not hidden in IE 9/10/11.
163 | //
164 |
165 | svg:not(:root) {
166 | overflow: hidden;
167 | }
168 |
169 | // Grouping content
170 | // ==========================================================================
171 |
172 | //
173 | // Address margin not present in IE 8/9 and Safari.
174 | //
175 |
176 | figure {
177 | margin: 0;
178 | }
179 |
180 | //
181 | // Address differences between Firefox and other browsers.
182 | //
183 |
184 | hr {
185 | box-sizing: content-box;
186 | height: 0;
187 | }
188 |
189 | //
190 | // Contain overflow in all browsers.
191 | //
192 |
193 | pre {
194 | overflow: auto;
195 | }
196 |
197 | //
198 | // Address odd `em`-unit font size rendering in all browsers.
199 | //
200 |
201 | code,
202 | kbd,
203 | pre,
204 | samp {
205 | font-family: monospace, monospace;
206 | font-size: 1em;
207 | }
208 |
209 | // Forms
210 | // ==========================================================================
211 |
212 | //
213 | // Known limitation: by default, Chrome and Safari on OS X allow very limited
214 | // styling of `select`, unless a `border` property is set.
215 | //
216 |
217 | //
218 | // 1. Correct color not being inherited.
219 | // Known issue: affects color of disabled elements.
220 | // 2. Correct font properties not being inherited.
221 | // 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
222 | //
223 |
224 | button,
225 | input,
226 | optgroup,
227 | select,
228 | textarea {
229 | color: inherit; // 1
230 | font: inherit; // 2
231 | margin: 0; // 3
232 | }
233 |
234 | //
235 | // Address `overflow` set to `hidden` in IE 8/9/10/11.
236 | //
237 |
238 | button {
239 | overflow: visible;
240 | }
241 |
242 | //
243 | // Address inconsistent `text-transform` inheritance for `button` and `select`.
244 | // All other form control elements do not inherit `text-transform` values.
245 | // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
246 | // Correct `select` style inheritance in Firefox.
247 | //
248 |
249 | button,
250 | select {
251 | text-transform: none;
252 | }
253 |
254 | //
255 | // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
256 | // and `video` controls.
257 | // 2. Correct inability to style clickable `input` types in iOS.
258 | // 3. Improve usability and consistency of cursor style between image-type
259 | // `input` and others.
260 | //
261 |
262 | button,
263 | html input[type="button"],
264 | // 1
265 | input[type="reset"],
266 | input[type="submit"] {
267 | -webkit-appearance: button; // 2
268 | cursor: pointer; // 3
269 | }
270 |
271 | //
272 | // Re-set default cursor for disabled elements.
273 | //
274 |
275 | button[disabled],
276 | html input[disabled] {
277 | cursor: default;
278 | }
279 |
280 | //
281 | // Remove inner padding and border in Firefox 4+.
282 | //
283 |
284 | button::-moz-focus-inner,
285 | input::-moz-focus-inner {
286 | border: 0;
287 | padding: 0;
288 | }
289 |
290 | //
291 | // Address Firefox 4+ setting `line-height` on `input` using `!important` in
292 | // the UA stylesheet.
293 | //
294 |
295 | input {
296 | line-height: normal;
297 | }
298 |
299 | //
300 | // It's recommended that you don't attempt to style these elements.
301 | // Firefox's implementation doesn't respect box-sizing, padding, or width.
302 | //
303 | // 1. Address box sizing set to `content-box` in IE 8/9/10.
304 | // 2. Remove excess padding in IE 8/9/10.
305 | //
306 |
307 | input[type='checkbox'],
308 | input[type='radio'] {
309 | box-sizing: border-box; // 1
310 | padding: 0; // 2
311 | }
312 |
313 | //
314 | // Fix the cursor style for Chrome's increment/decrement buttons. For certain
315 | // `font-size` values of the `input`, it causes the cursor style of the
316 | // decrement button to change from `default` to `text`.
317 | //
318 |
319 | input[type='number']::-webkit-inner-spin-button,
320 | input[type='number']::-webkit-outer-spin-button {
321 | height: auto;
322 | }
323 |
324 | //
325 | // 1. Address `appearance` set to `searchfield` in Safari and Chrome.
326 | // 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
327 | //
328 |
329 | input[type='search'] {
330 | -webkit-appearance: textfield; // 1
331 | box-sizing: content-box; //2
332 | }
333 |
334 | //
335 | // Remove inner padding and search cancel button in Safari and Chrome on OS X.
336 | // Safari (but not Chrome) clips the cancel button when the search input has
337 | // padding (and `textfield` appearance).
338 | //
339 |
340 | input[type='search']::-webkit-search-cancel-button,
341 | input[type='search']::-webkit-search-decoration {
342 | -webkit-appearance: none;
343 | }
344 |
345 | //
346 | // Remove default vertical scrollbar in IE 8/9/10/11.
347 | //
348 |
349 | textarea {
350 | overflow: auto;
351 | }
352 |
353 | //
354 | // Don't inherit the `font-weight` (applied by a rule above).
355 | // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
356 | //
357 |
358 | optgroup {
359 | font-weight: bold;
360 | }
361 |
362 | // Tables
363 | // ==========================================================================
364 |
365 | //
366 | // Remove most spacing between table cells.
367 | //
368 |
369 | table {
370 | border-collapse: collapse;
371 | border-spacing: 0;
372 | }
373 |
374 | td,
375 | th {
376 | padding: 0;
377 | }
378 |
--------------------------------------------------------------------------------
/src/assets/styles/base/_reboot.scss:
--------------------------------------------------------------------------------
1 | // Reboot
2 | //
3 | // Global resets to common HTML elements and more for easier usage by Bootstrap.
4 | // Adds additional rules on top of Normalize.css, including several overrides.
5 |
6 | // Reset the box-sizing
7 | //
8 | // Change from `box-sizing: content-box` to `border-box` so that when you add
9 | // `padding` or `border`s to an element, the overall declared `width` does not
10 | // change. For example, `width: 100px;` will always be `100px` despite the
11 | // `border: 10px solid red;` and `padding: 20px;`.
12 | //
13 | // Heads up! This reset may cause conflicts with some third-party widgets. For
14 | // recommendations on resolving such conflicts, see
15 | // http://getbootstrap.com/getting-started/#third-box-sizing.
16 | //
17 | // Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
18 |
19 | html {
20 | box-sizing: border-box;
21 | overflow-y: scroll;
22 | }
23 |
24 | *,
25 | *::before,
26 | *::after {
27 | box-sizing: inherit;
28 | }
29 |
30 | // Make viewport responsive
31 | //
32 | // @viewport is needed because IE 10+ doesn't honor in
33 | // some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
34 | // Eventually @viewport will replace . It's been manually
35 | // prefixed for forward-compatibility.
36 | //
37 | // However, `device-width` is broken on IE 10 on Windows (Phone) 8,
38 | // (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
39 | // and the fix for that involves a snippet of JavaScript to sniff the user agent
40 | // and apply some conditional CSS.
41 | //
42 | // See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
43 | //
44 | // Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
45 | // `.class-name { @import "bootstrap"; }`).
46 | //
47 | // Includes future-proofed vendor prefixes as well.
48 | @at-root {
49 | @-moz-viewport {
50 | width: device-width;
51 | }
52 | @-ms-viewport {
53 | width: device-width;
54 | }
55 | @-o-viewport {
56 | width: device-width;
57 | }
58 | @-webkit-viewport {
59 | width: device-width;
60 | }
61 | @viewport {
62 | width: device-width;
63 | }
64 | }
65 |
66 | //
67 | // Reset HTML, body, and more
68 | //
69 |
70 | html {
71 | // Sets a specific default `font-size` for user with `rem` type scales.
72 | font-size: $font-size-root;
73 | // Changes the default tap highlight to be completely transparent in iOS.
74 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
75 | }
76 |
77 | body {
78 | // Make the `body` use the `font-size-root`
79 | font-family: $font-family-base;
80 | font-size: $font-size-base;
81 | line-height: $line-height;
82 |
83 | color: $text-color;
84 | color: var(--text-color, $text-color);
85 | background-color: $bg-color;
86 |
87 | -ms-text-size-adjust: 100%;
88 | -webkit-text-size-adjust: 100%;
89 | }
90 |
91 | //
92 | // Typography
93 | //
94 |
95 | // Remove top margins from headings
96 | //
97 | // By default, `