diff --git a/.vscode/settings.json b/.vscode/settings.json index 7a40dec..a353aad 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { - "[html]": { + "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" - }, -} \ No newline at end of file + } +} diff --git a/css/awsm_theme_black.min.css b/css/awsm_theme_black.min.css deleted file mode 100644 index 7310de7..0000000 --- a/css/awsm_theme_black.min.css +++ /dev/null @@ -1,7 +0,0 @@ -@charset "UTF-8"; -/*! - * awsm.css v3.0.7 (https://igoradamenko.github.io/awsm.css/) - * Copyright 2015 Igor Adamenko (https://igoradamenko.com) - * Licensed under MIT (https://github.com/igoradamenko/awsm.css/blob/master/LICENSE.md) - */ -html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"PT Sans","Open Sans","Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:100%;line-height:1.4;background:#000;color:#fff;-webkit-overflow-scrolling:touch}body{margin:1.2em;font-size:1rem}@media (min-width:20rem){body{font-size:calc(1rem + .00625*(100vw - 20rem))}}@media (min-width:40rem){body{font-size:1.125rem}}body article,body footer,body header,body main{position:relative;max-width:40rem;margin:0 auto}body>header{margin-bottom:3.5em}body>header h1{margin:0;font-size:1.5em}body>header p{margin:0;font-size:.85em}body>footer{margin-top:6em;padding-bottom:1.5em;text-align:center;font-size:.8rem;color:#444}details,nav{margin:1em 0}nav ul{list-style:none;margin:0;padding:0}nav li{display:inline-block;margin-right:1em;margin-bottom:.25em}nav li:last-child{margin-right:0}a,nav a:visited{color:#4050ff}article header h1 a:visited:hover,article header h2 a:visited:hover,nav a:hover{color:#75c53c}ol,ul{margin-top:0;padding-top:0;padding-left:2.5em}article header h1+p,article header h2+p,ol li+li,ul li+li{margin-top:.25em}ol li>details,ul li>details{margin:0}p{margin:1em 0;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}aside:first-child,form legend:first-child+label,p:first-child{margin-top:0}aside:last-child,p:last-child{margin-bottom:0}p+ol,p+ul{margin-top:-.75em}p img,p picture{float:right;margin-bottom:.5em;margin-left:.5em}p picture img{float:none;margin:0}blockquote,dd{padding-left:2.5em}dd{margin-bottom:1em;margin-left:0}dt{font-weight:700}blockquote{margin:0}aside{margin:.5em 0;font-style:italic;color:#444}@media (min-width:65rem){aside{position:absolute;right:-12.5rem;width:9.375rem;max-width:9.375rem;margin:0;padding-left:.5em;font-size:.8em;border-left:1px solid #222}}section+section{margin-top:2em}h1,h2,h3,h4,h5,h6{margin:1.25em 0 0;line-height:1.2}h1:focus>a[href^="#"][id]:empty,h1:hover>a[href^="#"][id]:empty,h2:focus>a[href^="#"][id]:empty,h2:hover>a[href^="#"][id]:empty,h3:focus>a[href^="#"][id]:empty,h3:hover>a[href^="#"][id]:empty,h4:focus>a[href^="#"][id]:empty,h4:hover>a[href^="#"][id]:empty,h5:focus>a[href^="#"][id]:empty,h5:hover>a[href^="#"][id]:empty,h6:focus>a[href^="#"][id]:empty,h6:hover>a[href^="#"][id]:empty{opacity:1}figure+p,h1+details,h1+p,h2+details,h2+p,h3+details,h3+p,h4+details,h4+p,h5+details,h5+p,h6+details,h6+p{margin-top:.5em}h1>a[href^="#"][id]:empty,h2>a[href^="#"][id]:empty,h3>a[href^="#"][id]:empty,h4>a[href^="#"][id]:empty,h5>a[href^="#"][id]:empty,h6>a[href^="#"][id]:empty{position:absolute;left:-.65em;opacity:0;text-decoration:none;font-weight:400;line-height:1;color:#444}@media (min-width:40rem){h1>a[href^="#"][id]:empty,h2>a[href^="#"][id]:empty,h3>a[href^="#"][id]:empty,h4>a[href^="#"][id]:empty,h5>a[href^="#"][id]:empty,h6>a[href^="#"][id]:empty{left:-.8em}}h1>a[href^="#"][id]:empty:focus,h1>a[href^="#"][id]:empty:hover,h1>a[href^="#"][id]:empty:target,h2>a[href^="#"][id]:empty:focus,h2>a[href^="#"][id]:empty:hover,h2>a[href^="#"][id]:empty:target,h3>a[href^="#"][id]:empty:focus,h3>a[href^="#"][id]:empty:hover,h3>a[href^="#"][id]:empty:target,h4>a[href^="#"][id]:empty:focus,h4>a[href^="#"][id]:empty:hover,h4>a[href^="#"][id]:empty:target,h5>a[href^="#"][id]:empty:focus,h5>a[href^="#"][id]:empty:hover,h5>a[href^="#"][id]:empty:target,h6>a[href^="#"][id]:empty:focus,h6>a[href^="#"][id]:empty:hover,h6>a[href^="#"][id]:empty:target{opacity:1;box-shadow:none;color:#fff}h1>a[href^="#"][id]:empty:target:focus,h2>a[href^="#"][id]:empty:target:focus,h3>a[href^="#"][id]:empty:target:focus,h4>a[href^="#"][id]:empty:target:focus,h5>a[href^="#"][id]:empty:target:focus,h6>a[href^="#"][id]:empty:target:focus{outline:0}h1>a[href^="#"][id]:empty::before,h2>a[href^="#"][id]:empty::before,h3>a[href^="#"][id]:empty::before,h4>a[href^="#"][id]:empty::before,h5>a[href^="#"][id]:empty::before,h6>a[href^="#"][id]:empty::before{content:"§ "}h1{font-size:2.5em}h2{font-size:1.75em}h3{font-size:1.25em}h4{font-size:1.15em}a abbr,h5,h6{font-size:1em}h6{margin-top:1em}article+article{margin-top:4em}article header p{font-size:.6em;color:#444}article header p+h1,article header p+h2{margin-top:-.25em}article header h1 a,article header h2 a{color:#fff}article header h1 a:visited,article header h2 a:visited,h6,legend{color:#444}article>footer{margin-top:1.5em;font-size:.85em}a:visited{color:#5853e9}a:active,a:hover{outline-width:0}a:hover{color:#75c53c}abbr{margin-right:-.075em;text-decoration:none;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;letter-spacing:.075em;font-size:.9em}img,picture{display:block;max-width:100%;margin:0 auto}audio,video{width:100%;max-width:100%}figure{margin:1em 0 .5em;padding:0}figure figcaption{opacity:.65;font-size:.85em}table{display:inline-block;border-spacing:0;border-collapse:collapse;overflow-x:auto;max-width:100%;text-align:left;vertical-align:top;background:linear-gradient(rgba(255,255,255,.15) 0%,rgba(255,255,255,.15) 100%) 0 0,linear-gradient(rgba(255,255,255,.15) 0%,rgba(255,255,255,.15) 100%) 100% 0;background-attachment:scroll,scroll;background-size:1px 100%,1px 100%;background-repeat:no-repeat,no-repeat}table caption{font-size:.9em;background:#000}table td,table th{padding:.35em .75em;vertical-align:top;font-size:.9em;border:1px solid #222;border-top:0;border-left:0}table td:first-child,table th:first-child{padding-left:0;background-image:linear-gradient(to right,#000 50%,transparent 100%);background-size:2px 100%;background-repeat:no-repeat}table td:last-child,table th:last-child{padding-right:0;border-right:0;background-image:linear-gradient(to left,#000 50%,transparent 100%);background-position:100% 0;background-size:2px 100%;background-repeat:no-repeat}table td:only-child,table th:only-child{background-image:linear-gradient(to right,#000 50%,transparent 100%),linear-gradient(to left,#000 50%,transparent 100%);background-position:0 0,100% 0;background-size:2px 100%,2px 100%;background-repeat:no-repeat,no-repeat}table th{line-height:1.2}form{margin-right:auto;margin-left:auto}@media (min-width:40rem){form{max-width:80%}}form label,form select,output{display:block}form label:not(:first-child){margin-top:1em}form p label{display:inline}form p label+label{margin-left:1em}form input[type],form select,form textarea{margin-bottom:1em}form input[type=checkbox],form input[type=radio]{margin-bottom:0}button,fieldset{margin:0;border:1px solid #444}fieldset{padding:.5em 1em}button{outline:0;box-sizing:border-box;height:2em;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border-radius:2px;background:#000;display:inline-block;width:auto;background:#222;color:#fff;cursor:pointer}button:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,input[type^=date]:focus,select:focus{border:1px solid #fff}button:not([disabled]):hover,input[type=button]:not([disabled]):hover,input[type=file]:not([disabled]):hover,input[type=reset]:not([disabled]):hover,input[type=submit]:not([disabled]):hover,select:not([disabled]):hover{border:1px solid #fff}button:active,select:active{background-color:#444}button[disabled],select[disabled]{color:#444;cursor:not-allowed}select{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #444;border-radius:2px;background:#000;display:inline-block;width:auto;background:#222;color:#fff;cursor:pointer;padding-right:1.2em;background-position:top 55% right .35em;background-size:.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='rgb(68, 68, 68)' fill-rule='nonzero' d='M1.5 2L3 0H0z'/%3E%3C/svg%3E")}select:not([disabled]):focus,select:not([disabled]):hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='rgb(255, 255, 255)' fill-rule='nonzero' d='M1.5 2L3 0H0z'/%3E%3C/svg%3E")}input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],input[type^=date]{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #444;border-radius:2px;background:#000;color:#fff;display:block;width:100%;line-height:calc(2em - 1px*2 - (.25em - 1px)*2);-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=email]::-moz-placeholder,input[type=month]::-moz-placeholder,input[type=number]::-moz-placeholder,input[type=password]::-moz-placeholder,input[type=search]::-moz-placeholder,input[type=tel]::-moz-placeholder,input[type=text]::-moz-placeholder,input[type=time]::-moz-placeholder,input[type=url]::-moz-placeholder,input[type=week]::-moz-placeholder,input[type^=date]::-moz-placeholder{color:#444}input[type=email]::-webkit-input-placeholder,input[type=month]::-webkit-input-placeholder,input[type=number]::-webkit-input-placeholder,input[type=password]::-webkit-input-placeholder,input[type=search]::-webkit-input-placeholder,input[type=tel]::-webkit-input-placeholder,input[type=text]::-webkit-input-placeholder,input[type=time]::-webkit-input-placeholder,input[type=url]::-webkit-input-placeholder,input[type=week]::-webkit-input-placeholder,input[type^=date]::-webkit-input-placeholder{color:#444}input[type=email]:-ms-input-placeholder,input[type=month]:-ms-input-placeholder,input[type=number]:-ms-input-placeholder,input[type=password]:-ms-input-placeholder,input[type=search]:-ms-input-placeholder,input[type=tel]:-ms-input-placeholder,input[type=text]:-ms-input-placeholder,input[type=time]:-ms-input-placeholder,input[type=url]:-ms-input-placeholder,input[type=week]:-ms-input-placeholder,input[type^=date]:-ms-input-placeholder{color:#444}input[type=button],input[type=reset],input[type=submit]{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #444;border-radius:2px;background:#000;display:inline-block;width:auto;background:#222;color:#fff;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{border:1px solid #fff}input[type=button]:active,input[type=reset]:active,input[type=submit]:active{background-color:#444}input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{color:#444;cursor:not-allowed}input[type=color]{outline:0;box-sizing:border-box;height:2em;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #444;border-radius:2px;background:#000;color:#fff;display:block;line-height:calc(2em - 1px*2 - (.25em - 1px)*2);-webkit-appearance:none;-moz-appearance:none;appearance:none;width:6em}input[type=color]:focus{border:1px solid #fff}input[type=color]::-moz-placeholder,textarea::-moz-placeholder{color:#444}input[type=color]::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#444}input[type=color]:-ms-input-placeholder{color:#444}input[type=color]:hover{border:1px solid #fff}input[type=file]{outline:0;box-sizing:border-box;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;border:1px solid #444;border-radius:2px;background:#000;background:#222;color:#fff;cursor:pointer;display:block;width:100%;height:auto;padding:.75em .5em;font-size:12px;line-height:1}input[type=file]:focus,textarea:focus{border:1px solid #fff}input[type=file]:active{background-color:#444}input[type=file][disabled]{color:#444;cursor:not-allowed}input[type=checkbox],input[type=radio]{margin:-.2em .75em 0 0;vertical-align:middle}textarea{outline:0;box-sizing:border-box;margin:0;padding:calc(.25em - 1px) .5em;font-family:inherit;font-size:1em;border:1px solid #444;border-radius:2px;background:#000;color:#fff;display:block;width:100%;line-height:calc(2em - 1px*2 - (.25em - 1px)*2);-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4.5em;resize:vertical;padding-top:.5em;padding-bottom:.5em}textarea:-ms-input-placeholder{color:#444}code,kbd,samp,var{font-family:Consolas,"Lucida Console",Monaco,monospace;font-style:normal}pre{overflow-x:auto;font-size:.8em;background:linear-gradient(rgba(255,255,255,.15) 0%,rgba(255,255,255,.15) 100%) 0 0,linear-gradient(rgba(255,255,255,.15) 0%,rgba(255,255,255,.15) 100%) 100% 0;background-attachment:scroll,scroll;background-size:1px 100%,1px 100%;background-repeat:no-repeat,no-repeat}pre>code,summary{display:inline-block}pre>code{overflow-x:visible;box-sizing:border-box;min-width:100%;border-right:3px solid #000;border-left:1px solid #000}hr{height:1px;margin:2em 0;border:0;background:#222}details[open]{padding-bottom:.5em;border-bottom:1px solid #222}summary{font-weight:700;border-bottom:1px dashed;cursor:pointer}summary::-webkit-details-marker{display:none}noscript{color:#5afffe}::selection{background:rgba(253,154,73,.25)} \ No newline at end of file diff --git a/css/magick.css b/css/magick.css new file mode 100644 index 0000000..67f8f57 --- /dev/null +++ b/css/magick.css @@ -0,0 +1,885 @@ +/* + * Magick CSS + * by: winterveil (https://github.com/wintermute-cell/) + * license: MIT + * version: 1.0.5 +*/ + +@charset "UTF-8"; + +/* Importing the fonts. */ +@import url('https://fonts.googleapis.com/css2?family=Averia+Libre:ital,wght@0,400;0,700;1,400;1,700&family=Averia+Serif+Libre:ital,wght@0,300;0,700;1,300;1,700&family=Caveat&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Spectral:ital,wght@0,300;0,600;1,300;1,600&display=swap&family=Noto+Sans+Symbols+2&display=swap'); + +/* Simple CSS Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + /* Theme colors */ + --fg: #0e0e0e; + --bg: #fefefe; + --form-bg: #fbfbfb; + --form-fg: #00004d; + --form-fg-placeholder: #00004d9a; +} + +@media (prefers-color-scheme: dark) { + :root { + --fg: #fefefe; + --bg: #0e0e0e; + --form-bg: #1a1a1a; + --form-fg: #fefefe; + --form-fg-placeholder: #fefefe9a; + } +} + +/* + 1) Modify the base font-size to 62.5% so that 1.6rem = 16px. + 2) Set box-sizing globally to handle padding and border widths. +*/ +html { + font-size: 62.5%; + /* 1 */ + box-sizing: border-box; + /* 2 */ +} + +/* Use smaller sizes on mobile devices. */ +@media (max-width: 600px) { + html { + font-size: 56%; + } +} + +/* + 1) Set the base font-size to 18px with a normal weight. + 2) Set the text and background colors to match the theme. + 3) Use the 'Averia Serif Libre' font for the body text. + 4) Reset the counter for sidenotes. +*/ +body { + font-size: 1.8rem; + /* 1 */ + background-color: var(--bg); + /* 2 */ + color: var(--fg); + /* 2 */ + font-family: "Averia Serif Libre", serif; + /* 3 */ + font-style: normal; + /* 3 */ + line-height: 2.2rem; + /* 3 */ + font-weight: 300; + /* 3 */ + + counter-reset: sidenote-counter; + /* 4 */ +} + +/* + 1) Center the main content. + 2) Set the width of the element to 760px, with lower padding on mobile devices. + 3) Relative position as the default allows for absolute positioning of child elements. +*/ +article, +main { + margin: auto; + /* 1 */ + max-width: 76rem; + /* 2 */ + padding: 0 1rem; + /* 2 */ + width: 100%; + /* 2 */ + position: relative; + /* 3 */ +} + +@media (max-width: 600px) { + + article, + main { + padding: 0 0.2rem; + /* 2 */ + } +} + +/* ========================================================================================================================= */ +/* Structure & Layout ===================================================================================================== */ +/* ========================================================================================================================= */ + +/* Display the header, main, and footer sections as distinctly separate blocks. */ +header, +section, +footer { + margin: 0.7rem; + padding: 0.7rem; +} + +/* On mobile devices, a smaller margin looks more fitting due to the smaller view. */ +@media (max-width: 600px) { + + header, + section, + footer { + margin-top: 0.2rem; + margin-bottom: 0.2rem; + } +} + +/* Avoid double margin on the last child of each section */ +header>*:last-child, +section>*:last-child, +footer>*:last-child { + margin-bottom: 0; +} + +/* Add large margins to the header to visually separate it from the main content. */ +header { + margin-top: 12rem; + margin-bottom: 8rem; +} + +/* On mobile devices, reduce the margin around the header to save space. */ +@media (max-width: 600px) { + header { + margin: 0; + padding: 1.2rem; + } +} + +/* + 1) Center align the text in the footer. + 2) Add a margin to the top of the footer to visually separate it from the main content. + 3) Add a margin to the bottom of the footer to not have it stuck to the bottom of the page. +*/ +footer { + text-align: center; + /* 1 */ + margin-top: 5rem; + /* 2 */ + margin-bottom: 2rem; + /* 3 */ +} + +/* ========================================================================================================================= */ +/* Typography & Links ===================================================================================================== */ +/* ========================================================================================================================= */ + +/* Add some space between paragraphs. */ +p { + margin: 1.6rem 0; + /* 1 */ +} + +/* Remove link color. */ +a { + color: var(--fg); +} + +/* Make string a little more bold, to adjust for the font. */ +b, +strong { + font-weight: 600; +} + +/* Make emphasized text a little larger, to adjust for the font. */ +i, +em { + font-size: calc(1em + 0.1rem); +} + +/* + 1) Set the font-family, color, and font-style for the headings. + 2) Add a margin to the top and bottom of the headings. +*/ +h1, +h2, +h3, +h4 { + font-family: "Averia Libre", cursive; + /* 1 */ + color: var(--fg); + /* 1 */ + font-style: normal; + /* 1 */ + font-weight: 600; + /* 1 */ + margin: 1.6rem 0 1.6rem 0; + /* 2 */ +} + +/* h1 headings are uppercase and 2x the size of the base font. */ +h1 { + text-transform: uppercase; + font-size: 3.6rem; + line-height: 3.3rem; +} + +/* h2 headings are uppercase and 1.250x (major third) the size of the base font. */ +h2 { + font-size: 2.25rem; + text-transform: uppercase; + margin: 1.2rem 0 1.2rem 0; +} + +/* h3 headings are 1.125x (major second) the size of the base font. */ +h3 { + font-size: 2.025rem; +} + +/* Add a decorative element before h3 headings. */ +h3:before { + font-family: "Noto Sans Symbols 2", sans-serif; + content: "🙛 "; +} + +/* h4 headings are the same size as h3 headings, but italic and without the decorative element. */ +h4 { + font-style: italic; + font-size: 2.025rem; +} + +/* A uniquely styled h1 for the header */ +header h1 { + font-size: 4rem; + color: var(--fg); + text-align: center; + padding: 4rem 0 1.2rem 0; + margin-bottom: 1rem; +} + +/* Additional decorations for the header h1 */ +header h1:before, +header h1:after { + content: "✦"; + color: var(--fg); + font-size: 1.5rem; + vertical-align: middle; + padding: 0 0.5rem; +} + +/* + 1) Remove any list symbols. + 2) Center align the nav links. + 3) Add a margin to the top of the nav links. + 4) Remove the default padding from the list. +*/ +header nav ul { + list-style-type: none; + /* 1 */ + text-align: center; + /* 2 */ + margin-top: 1.0rem; + /* 3 */ + padding-inline-start: 0; + /* 4 */ +} + +/* Display the navigation links as a centered, horizontal list. */ +header nav ul li { + display: inline; + margin: 0 1.2rem; +} + +/* Remove default link styles. */ +header nav ul li a { + text-decoration: none; + color: var(--fg); +} + +/* Add a hover effect to the navigation links. */ +header nav ul li a::before { + content: "❯ "; + /* 1 */ + opacity: 0; + /* 1 */ +} + +header nav ul li a:hover::before { + opacity: 1; + /* 1 */ +} + +/* ===================================================================================================================== */ +/* Lists ===================================================================================================== */ +/* ===================================================================================================================== */ + +/* + 1) Add some indentation to the list items. + 2) Add a margin to the top and bottom of the list. +*/ +:where(main ol, main ul) { + margin-inline-start: 0; + /* 1 */ + padding-inline-start: 3rem; + /* 1 */ + margin: 0.8rem 0; + /* 2 */ +} + +/* Add some vertical space around a definition list. */ +dl { + margin: 0.8rem 0; +} + +/* Add an indent to the definition term. */ +dd { + margin: 0 1.6rem; +} + +/* ===================================================================================================================== */ +/* Media ===================================================================================================== */ +/* ===================================================================================================================== */ + +/* + 1) Set the maximum width of the image to 100% so they don't overflow the main column. + 2) Set the height in respect to the width to prevent the image from stretching. + 3) Add some margin to standalone images. +*/ +img { + max-width: 100%; + /* 1 */ + height: auto; + /* 2 */ + margin: 0.8rem 0; + /* 3 */ +} + +/* Images in figures should not have their own margins */ +figure img { + margin: 0; + padding: 0; +} + +/* + 1) Set margins and padding for figures. + 2) Center align any text inside figures. +*/ +figure { + margin: 2rem 0; + /* 1 */ + padding: 0; + /* 1 */ + text-align: center; + /* 2 */ +} + +/* Center align any element that is part of a figure */ +figure * { + margin-left: auto; + margin-right: auto; +} + +/* We don't want to center prealigned text or code in figures */ +figure code, +figure pre { + text-align: left; +} + +/* Set the typography for the figure captions */ +figcaption { + margin: 0.8rem 0; + font-size: 1.8rem; +} + +/* ===================================================================================================================== */ +/* Forms & Inputs ===================================================================================================== */ +/* ===================================================================================================================== */ + + +/* + 1) Display the form elements in a grid layout, two columns wide. + 2) Add some space between the form elements. + 3) Set padding and margin for the form. + 4) Give the form a pop out paper note look. +*/ +form { + display: grid; + /* 1 */ + grid-template-columns: 1fr 1fr; + /* 1 */ + gap: 10px; + /* 2 */ + padding: 1rem; + /* 3 */ + margin: 0.8rem 0; + /* 3 */ + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); + /* 4 */ + background-color: var(--form-bg); + /* 4 */ +} + +/* Make form inputs and labels span two columns. (They get their own line) */ +form input[type="email"], +form input[type="number"], +form input[type="password"], +form input[type="search"], +form input[type="tel"], +form input[type="text"], +form input[type="url"], +form label, +form fieldset, +form textarea { + grid-column: span 2; +} + +/* + 1) Adjust the elements to take up full width of their grid cell. + 2) Prevent textarea from being resized horizontally and overflowing the main column. +*/ +form input, +form button, +form textarea { + width: 100%; + /* 1 */ + resize: vertical; + /* 2 */ +} + +/* + 1) Prevent radio and checkbox from taking up full width, so they can be put next to each other. + 2) Add space between radio and checkbox options. +*/ +input[type="radio"], +input[type="checkbox"] { + width: auto; + /* 1 */ + margin-right: 0.5rem; + /* 2 */ +} + +input[type="radio"]+label, +input[type="checkbox"]+label { + margin-right: 2rem; + /* 2 */ +} + +/* Add a disabled variant for radio and checkbox inputs */ +input[type="radio"]:disabled+label, +input[type="checkbox"]:disabled+label { + text-decoration: line-through; + opacity: 0.5; +} + +/* + 1) Remove the default appearance of the input. + 2) Set padding and margin for the input. + 3) Apply some custom styles in place of the default ones. + 4) Give the input a handwritten look. +*/ +input[type="email"], +input[type="number"], +input[type="password"], +input[type="search"], +input[type="tel"], +input[type="text"], +input[type="url"], +textarea, +select { + -webkit-appearance: none; + /* 1 */ + -moz-appearance: none; + /* 1 */ + appearance: none; + /* 1 */ + box-shadow: none; + /* 1 */ + box-sizing: inherit; + /* 1 */ + border: none; + /* 1 */ + + padding: .4rem 1rem; + /* 2 */ + margin-bottom: 1.6rem; + /* 2 */ + + font-size: 2rem; + /* 3 */ + color: var(--fg); + /* 3 */ + background-color: transparent; + /* 3 */ + border-bottom: 1px solid var(--fg); + /* 3 */ + border-radius: 0; + /* 3 */ + font-size: 1.8rem; + /* 3 */ + + font-family: "Caveat", cursive; + /* 4 */ + font-size: 2.6rem; + /* 4 */ + color: var(--form-fg); + /* 4 */ + caret-color: var(--form-fg); + /* 4 */ +} + +/* Add disabled variant for input fields */ +input[type="email"]:disabled, +input[type="number"]:disabled, +input[type="password"]:disabled, +input[type="search"]:disabled, +input[type="tel"]:disabled, +input[type="text"]:disabled, +input[type="url"]:disabled, +textarea:disabled, +select:disabled { + border-bottom: 1px dashed var(--fg); + /* 3 */ + text-decoration: line-through; +} + +/* A slightly more transparent color for the placeholder text. */ +input::placeholder, +textarea::placeholder { + color: var(--form-fg-placeholder); +} + +/* + 1) Remove the default focus outline. + 2) Add a thicker bottom border to the input when focused, reducing margin to prevent layout shifting. +*/ +input[type="email"]:focus, +input[type="number"]:focus, +input[type="password"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="text"]:focus, +input[type="url"]:focus, +textarea:focus, +select:focus { + outline: none; + /* 1 */ + border-bottom: 2px solid var(--fg); + /* 2 */ + margin-bottom: calc(1.6rem - 1px); + /* 2 */ +} + + +/* + 1) Match the theme colors. + 2) Add padding. + 3) Add a top margin to visually separate the buttons for the rest of the form. + 4) Add a thin border. + 5) Add a pointer cursor on hover. +*/ +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + background-color: transparent; + /* 1 */ + color: var(--fg); + /* 1 */ + padding: 10px; + /* 2 */ + margin-top: 1.6rem; + /* 3 */ + border: 1px solid var(--fg); + /* 4 */ + cursor: pointer; + /* 5 */ +} + +/* + 1) A thin border around the fieldset. + 2) Set the width of the fieldset to fit around the content. +*/ +fieldset { + border: 1px solid var(--fg); + /* 1 */ + width: fit-content; + /* 2 */ +} + +/* In a form, the fieldset takes up 100% of the width. */ +form fieldset { + width: 100%; +} + +/* + 1) Set the border of a disabled button to be dashed. + 2) Add the not-allowed cursor when hovering a disabled button. +*/ +button:disabled, +input[type="button"]:disabled, +input[type="reset"]:disabled, +input[type="submit"]:disabled { + opacity: 0.5; + border-style: dashed; + /* 1 */ + cursor: not-allowed; + /* 2 */ + text-decoration: line-through; +} + +/* ===================================================================================================================== */ +/* Tables ========================================================================================================== */ +/* ===================================================================================================================== */ + +/* Remove the distance between adjacent cells, since we don't have vertical border lines. */ +table { + border-spacing: 0; +} + +/* Add some padding around table cells. */ +td, +th { + padding: 0.4rem 1.0rem; +} + +/* Remove left padding for first cell in a row. */ +td:first-child, +th:first-child { + padding-left: 0; +} + +/* Remove right padding for last cell in a row. */ +td:last-child, +th:last-child { + padding-right: 0; +} + +/* + 1) Add a border under the table header. + 2) Align the text to the left in the table header. +*/ +th { + border-bottom: 2px solid var(--fg); + /* 1 */ + text-align: left; + /* 2 */ +} + +/* ============================================================================================================================ */ +/* Preformatting, Quotes & Code ============================================================================================ */ +/* ============================================================================================================================ */ + +/* + 1) Set custom padding and margins. + 2) Hide the vertical scroll bar. + 3) Set the width to fit just around the content, but limit it to 80% of the main column. + 4) Center the blockquote horizontally and add some vertical margins. +*/ +blockquote { + padding: 1rem 1.6rem; + /* 1 */ + overflow-y: hidden; + /* 2 */ + width: fit-content; + /* 3 */ + max-width: 80%; + /* 3 */ + margin: 2rem auto; + /* 4 */ +} + +/* + 1) Set a custom font for blockquote text paragraphs. + 2) Add some space between the paragraphs. +*/ +blockquote p { + font-family: "Spectral", serif; + /* 1 */ + font-style: italic; + /* 1 */ + font-size: 2.1rem; + /* 1 */ + font-weight: 300; + /* 1 */ + line-height: 2.4rem; + /* 1 */ + margin: 2.1rem 0; + /* 2 */ +} + +/* Add a footer to the blockquote for citations. */ +/* + 1) Reset any margins and padding from the main footer. + 2) Set the footer to float and align to the right. + 3) Limit the width of the footer to 55% of the main column. + 4) Set a custom font for the footer. +*/ +blockquote footer { + margin: 0; + /* 1 */ + padding: 0; + /* 1 */ + float: right; + /* 2 */ + text-align: right; + /* 2 */ + width: 55%; + /* 3 */ + font-family: "Spectral", serif; + /* 4 */ + font-style: normal; + /* 4 */ + font-size: 1.4rem; + /* 4 */ +} + +/* Make the actual citation italic */ +blockquote footer cite { + font-style: italic; +} + +/* + 1) Set custom padding. + 2) Hide the vertical scroll bar. + 3) Set a custom monospace font. + 4) Add a top and bottom border line. +*/ +pre:has(code) { + padding: 1rem 1.6rem; + /* 1 */ + margin: 1.6rem 0; + /* 1 */ + overflow-y: hidden; + /* 2 */ + font-family: "Courier Prime", monospace; + /* 3 */ + font-size: 1.6rem; + /* 3 */ + border-top: 2px solid var(--fg); + /* 4 */ + border-bottom: 2px solid var(--fg); + /* 4 */ +} + +/* Set a custom monospace font */ +code { + font-family: "Courier Prime", monospace; + font-size: 1.6rem; +} + +/* + 1) Float the line numbers to the left, next to the code. + 2) Make some distance between the line numbers and the code, and pull it all to the left with a negative margin. + 3) Add a vertical line to separate the line numbers from the code. + 4) Align the line numbers against the separator. +*/ +pre .line-number { + float: left; + /* 1 */ + margin: 0 1.5rem 0 -1.5rem; + /* 2 */ + border-right: 1px solid; + /* 3 */ + text-align: right; + /* 4 */ +} + +/* + 1) Display as block, so we get a new line for each line number. + 2) Add some padding to the line numbers. +*/ +pre .line-number span { + display: block; + /* 1 */ + padding: 0 0.8rem 0 1.6rem; + /* 2 */ +} + +/* ============================================================================================================================ */ +/* Sidenotes & Asides ====================================================================================================== */ +/* ============================================================================================================================ */ + +/* + 1) On mobile devices, sidenotes behave the same as asides. + 2) Float the sidenotes to the right. + 3) Make sure the sidenotes don't clash. + 4) Set the width of the sidenotes to 40% of the main column. + 5) Add padding, margins and a border for better visual separation. + 6) Adjust typography to be more compact. +*/ +.sidenote, +/* 1 */ +aside { + float: right; + /* 2 */ + clear: right; + /* 3 */ + width: 40%; + /* 4 */ + margin: 1rem 1rem 1rem 3rem; + /* 5 */ + padding: 0.5rem 0.5rem 0.5rem 2rem; + /* 5 */ + border-left: 3px solid var(--fg); + /* 5 */ + font-size: 1.4rem; + /* 6 */ + line-height: 1.3; + /* 6 */ +} + +/* Prevent double top margins */ +aside h1, +aside h2, +aside h3, +aside h4 { + margin-top: 0; +} + +/* + 1) Set the distance from the main column. + 2) Set the width of the element to a little less than the remaining space on one side, limited to 40% of the main column. + 3) Remove any values set for the mobile version of the sidenotes. + 4) Set the width to the variable defined above. + 5) Set a negative right margin to (self-width + distance-from-main) to pull the sidenote to the right. +*/ +/* Sadly, CSS does not support var() and rem in media queries, so we have to hardcode pixels. */ +/* This will break if the main column width is changed without adjusting this media query. */ +@media (min-width: calc(760px + 400px)) { + .sidenote { + --distance-from-main: 3rem; + /* 1 */ + --self-width: min(calc((100vw - 760px)/2 - (var(--distance-from-main))), 40%); + /* 2 */ + margin: 0; + /* 3 */ + padding: 0; + /* 3 */ + border: none; + /* 3 */ + width: var(--self-width); + margin-right: calc(calc(var(--self-width) + var(--distance-from-main)) * -1); + } +} + +/* Each time a sidenote anchor is encountered, increment the counter */ +.sidenote-anchor { + counter-increment: sidenote-counter; +} + +/* Use a custom font for the sidenote numbers */ +.sidenote-anchor:after, +.sidenote:before { + font-size: 1.3rem; + position: relative; + font-family: "Spectral", serif; +} + +/* Fine-adjust the number position for the sidenote anchor */ +.sidenote-anchor:after { + content: counter(sidenote-counter); + top: -0.5rem; + left: 0.1rem; +} + +/* Fine-adjust the number position for the sidenote */ +.sidenote:before { + content: counter(sidenote-counter) " "; + top: -0.5rem; +} \ No newline at end of file diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..3591806 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,379 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { + /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { + /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} \ No newline at end of file diff --git a/index.html b/index.html index 0e6261d..cac44c2 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,8 @@ name="description" content="Anson Biggs is an Aerospace / Software Engineer working on simulation and modeling of next generation rocket flight systems." /> - - + + - -

Hi, I'm Anson.

-

- I'm a Software Engineer working on modeling and simulating flight systems - at Blue Origin. -

-
+
+
+

Hi, I'm Anson

+

+ I'm a Software Engineer working on modeling and simulating lunar + systems at Blue Origin. +

+
-

Discover My Work

-

- Explore my recent endeavors on my - Gitlab profile and - projects website. -

-

Connect

-

- I'm available on various platforms: - Telegram, - Twitter, - Mastodon. - Alternatively, you can - email me directly. -

-

- For a comprehensive look at my professional journey, view my - resume. -

+
+

Personal Work

+

+ Explore my recent endeavors on my + Blog, see what I'm building + in public on my + GitLab profile, and see + technical breakdowns on my + projects website. +

+
+ +
+

Connect

+

+ For communications about a specific project of mine I would prefer you + reach out to me using the issues for that project. +

+

+ Feel free to reach out or contact me on any of the following + platforms: +

+ + +
+ +
+

+ For a comprehensive look at my professional journey, view my + resume. +

+
+
- diff --git a/css/awsm.min.css b/resume/css/awsm.min.css similarity index 100% rename from css/awsm.min.css rename to resume/css/awsm.min.css diff --git a/resume/print.css b/resume/css/print.css similarity index 100% rename from resume/print.css rename to resume/css/print.css diff --git a/resume/style.css b/resume/css/style.css similarity index 100% rename from resume/style.css rename to resume/css/style.css diff --git a/resume/index.html b/resume/index.html index 8010e29..63ea61b 100644 --- a/resume/index.html +++ b/resume/index.html @@ -1,16 +1,21 @@ - Anson Biggs Resume + Anson Biggs | Resume + + + - - - linkedin.com/in/ansonbiggs - | + gitlab.com/MisterBiggs @@ -67,20 +72,20 @@

PROFILE

Experienced Software Engineer specializing in simulation and modeling of - advanced flight systems for space exploration. Combines a robust - background in Aerospace Engineering with hands-on experience at multiple - space companies, contributing to the development of cutting-edge space - technologies. + advanced space flight systems. Combines a robust background in Aerospace + Engineering with hands-on experience at multiple space companies, + contributing to the development of cutting-edge space technologies.

ENGINEERING EXPERIENCE

- Software Engineer | Blue Origin | Denver, CO | June 2023 - Current + Aerospace Software Engineer | Blue Origin | Denver, CO | June 2023 - + Current
    -
  • Simulating stuff.
    • +
  • Building simulation software for the Lunar Permanence team.
  • Technologies used: C++, Python, Docker, CI/CD, NASA Trick
@@ -115,14 +120,15 @@ @@ -136,9 +142,10 @@ Utilized machine learning techniques on high-resolution 3D scans of high-velocity impact debris to create an Orbital Debris environmental model. Collaborated with the Dean of Engineering, - faculty, and peers to conduct comprehensive research. Additionally, - undertook a directed study focusing on machine learning strategies - for 3D model characterization and high-dimensional data reduction. + University Faculty, and peers to conduct comprehensive research. + Additionally, undertook a directed study focusing on machine + learning strategies for 3D model characterization and + high-dimensional data reduction.
  • Technologies Used: Rust, Julia, Matlab, LaTeX
    • @@ -149,8 +156,8 @@
  • Developed a stock market bot that delivers information and analysis to group chats with tens of thousands of monthly active users. - Utilized a custom developed abstracted asset API to manage multiple - types of assets from various data sources. + Developed an abstracted asset API to manage multiple types of assets + from various data sources.
  • Programmed in purely Python. Used CI/CD to automatically build, diff --git a/style.css b/style.css deleted file mode 100644 index 29b53a3..0000000 --- a/style.css +++ /dev/null @@ -1,41 +0,0 @@ -body { - /* max-width: 1000px; */ - margin: auto; - padding-top: 20vh; - padding-left: 15vw; - padding-right: 15vw; - /* padding-bottom: 5em; */ - } - -p { - line-height: 1.4; -} - -a { - outline: none; - text-decoration: none; - padding: 2px 1px 0; -} - -a:link { - color: #70e2f1; -} - -a:visited { - color: #0db0c5; -} - -a:focus { - border-bottom: 1px solid; - background: #bae498; -} - -a:hover { - border-bottom: 1px solid; - background: #1984fd; -} - -a:active { - background: #0004ff; - color: #70e2f1; -} \ No newline at end of file