diff --git a/composer.json b/composer.json index 6352271..0b0dc00 100644 --- a/composer.json +++ b/composer.json @@ -17,7 +17,8 @@ "ext-dom": "*", "ext-libxml": "*", "donatello-za/rake-php-plus": "^1.0", - "phpmailer/phpmailer": "^6.9" + "phpmailer/phpmailer": "^6.9", + "onelogin/php-saml": "^4.1" }, "repositories": [ { diff --git a/composer.lock b/composer.lock index 02c0408..42bf5a2 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "f156a57e5e895727417d4274c8ad414c", + "content-hash": "a0850a84ff9d5a207b7b0724563015c7", "packages": [ { "name": "donatello-za/rake-php-plus", @@ -874,8 +874,64 @@ "time": "2023-11-08T09:30:43+00:00" }, { + "name": "onelogin/php-saml", + "version": "4.1.0", + "source": { + "type": "git", + "url": "https://github.com/onelogin/php-saml.git", + "reference": "b22a57ebd13e838b90df5d3346090bc37056409d" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/onelogin/php-saml/zipball/b22a57ebd13e838b90df5d3346090bc37056409d", + "reference": "b22a57ebd13e838b90df5d3346090bc37056409d", + "shasum": "" + }, + "require": { + "php": ">=7.3", + "robrichards/xmlseclibs": ">=3.1.1" + }, + "require-dev": { + "pdepend/pdepend": "^2.8.0", + "php-coveralls/php-coveralls": "^2.0", + "phploc/phploc": "^4.0 || ^5.0 || ^6.0 || ^7.0", + "phpunit/phpunit": "^9.5", + "sebastian/phpcpd": "^4.0 || ^5.0 || ^6.0 ", + "squizlabs/php_codesniffer": "^3.5.8" + }, + "suggest": { + "ext-curl": "Install curl lib to be able to use the IdPMetadataParser for parsing remote XMLs", + "ext-dom": "Install xml lib", + "ext-openssl": "Install openssl lib in order to handle with x509 certs (require to support sign and encryption)", + "ext-zlib": "Install zlib" + }, + "type": "library", + "autoload": { + "psr-4": { + "OneLogin\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "description": "OneLogin PHP SAML Toolkit", + "homepage": "https://developers.onelogin.com/saml/php", + "keywords": [ + "SAML2", + "onelogin", + "saml" + ], + "support": { + "email": "sixto.garcia@onelogin.com", + "issues": "https://github.com/onelogin/php-saml/issues", + "source": "https://github.com/onelogin/php-saml/" + }, + "time": "2022-07-15T20:44:36+00:00" + }, + { "name": "php-di/invoker", - "version": "2.3.4", + "version": "2.3.4", "source": { "type": "git", "url": "https://github.com/PHP-DI/Invoker.git", @@ -926,7 +982,7 @@ "type": "github" } ], - "time": "2023-09-08T09:24:21+00:00" + "time": "2023-09-08T09:24:21+00:00" }, { "name": "php-di/php-di", @@ -1615,6 +1671,48 @@ "time": "2021-07-12T10:12:22+00:00" }, { + "name": "robrichards/xmlseclibs", + "version": "3.1.1", + "source": { + "type": "git", + "url": "https://github.com/robrichards/xmlseclibs.git", + "reference": "f8f19e58f26cdb42c54b214ff8a820760292f8df" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/robrichards/xmlseclibs/zipball/f8f19e58f26cdb42c54b214ff8a820760292f8df", + "reference": "f8f19e58f26cdb42c54b214ff8a820760292f8df", + "shasum": "" + }, + "require": { + "ext-openssl": "*", + "php": ">= 5.4" + }, + "type": "library", + "autoload": { + "psr-4": { + "RobRichards\\XMLSecLibs\\": "src" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "BSD-3-Clause" + ], + "description": "A PHP library for XML Security", + "homepage": "https://github.com/robrichards/xmlseclibs", + "keywords": [ + "security", + "signature", + "xml", + "xmldsig" + ], + "support": { + "issues": "https://github.com/robrichards/xmlseclibs/issues", + "source": "https://github.com/robrichards/xmlseclibs/tree/3.1.1" + }, + "time": "2020-09-05T13:00:25+00:00" + }, + { "name": "selective/samesite-cookie", "version": "0.3.0", "source": { diff --git a/dist/api/user/userData.php b/dist/api/user/userData.php index 0e42372..9ca9c4b 100644 --- a/dist/api/user/userData.php +++ b/dist/api/user/userData.php @@ -5,6 +5,7 @@ namespace api\user; use Firebase\JWT\JWT; use PDO; use function api\utils\dbConn; +use function api\utils\getSAMLSettings; use function api\utils\getSecretKey; require_once __DIR__ . "/../utils/config.php"; @@ -138,5 +139,38 @@ class userData return false; } + /** + * Get the SAML settings + * @return array - SAML settings + */ + public function getSamlConf(): array + { + return getSAMLSettings(); + } + + /** + * Check if the SAML user exists + * @param string $username - Username + * @param string $email - Email + * @return bool - True if the user exists, false if not + */ + public function checkSAMLUser(string $username, string $email): bool + { + $conn = dbConn(); + $stmt = $conn->prepare("SELECT * FROM users WHERE username = :username AND email = :email"); + $stmt->bindParam(":username", $username); + $stmt->bindParam(":email", $email); + $stmt->execute(); + + // set the resulting array to associative + $result = $stmt->fetchAll(PDO::FETCH_ASSOC); + + if ($result) + { + return true; + } + return false; + } + } \ No newline at end of file diff --git a/dist/api/user/userRoutes.php b/dist/api/user/userRoutes.php index 3471929..993c209 100644 --- a/dist/api/user/userRoutes.php +++ b/dist/api/user/userRoutes.php @@ -5,6 +5,8 @@ require_once __DIR__ . "/../utils/routesInterface.php"; require_once "userData.php"; use api\utils\routesInterface; +use OneLogin\Saml2\Auth; +use OneLogin\Saml2\Error; use Psr\Http\Message\ResponseInterface as Response; use Psr\Http\Message\ServerRequestInterface as Request; use Slim\App; @@ -12,14 +14,17 @@ use Slim\App; class userRoutes implements routesInterface { private userData $user; + private Auth $samlAuth; /** * constructor used to instantiate a base user routes, to be used in the index.php file. * @param App $app - the slim app used to create the routes + * @throws Error */ public function __construct(App $app) { $this->user = new userData(); + $this->samlAuth = new Auth($this->user->getSamlConf()); $this->createRoutes($app); } @@ -30,31 +35,9 @@ class userRoutes implements routesInterface */ public function createRoutes(App $app): void { - $app->post("/user/login", function (Request $request, Response $response) + $app->get("/user/login", function (Request $request, Response $response) { - // get request data - $data = $request->getParsedBody(); - - if (empty($data["username"]) || empty($data["password"])) - { - // uh oh user sent empty data - return $response->withStatus(400); - } - - if ($this->user->checkUser($data["username"], $data["password"])) - { - // yay, user is logged in - $_SESSION["token"] = $this->user->createToken($data["username"]); - $_SESSION["username"] = $data["username"]; - - $inactive = 60 * 60 * 48; // 2 days - $_SESSION["timeout"] = time() + $inactive; - - $response->getBody()->write(json_encode(array("token" => $_SESSION["token"]))); - return $response; - } - $response->getBody()->write(json_encode(array("error" => "Unauthorised"))); - return $response->withStatus(401); + $this->samlAuth->login(); }); $app->get("/user/logout", function (Request $request, Response $response) @@ -92,6 +75,20 @@ class userRoutes implements routesInterface }); + $app->get("/user/metadata", function (Request $request, Response $response) + { + $settings = $this->samlAuth->getSettings(); + $metadata = $settings->getSPMetadata(); + $errors = $settings->validateMetadata($metadata); + if (empty($errors)) + { + $response->getBody()->write($metadata); + return $response->withHeader("Content-Type", "text/xml"); + } + $response->getBody()->write(json_encode(array("error" => $errors))); + return $response->withStatus(500); + }); + $app->get("/user/checkResetEmail/{email}", function (Request $request, Response $response, array $args) { if (empty($args["email"])) @@ -139,6 +136,58 @@ class userRoutes implements routesInterface return $response->withStatus(401); }); + $app->post("/user/login", function (Request $request, Response $response) + { + // get request data + $data = $request->getParsedBody(); + + if (empty($data["username"]) || empty($data["password"])) + { + // uh oh user sent empty data + return $response->withStatus(400); + } + + if ($this->user->checkUser($data["username"], $data["password"])) + { + // yay, user is logged in + $_SESSION["token"] = $this->user->createToken($data["username"]); + $_SESSION["username"] = $data["username"]; + + $inactive = 60 * 60 * 48; // 2 days + $_SESSION["timeout"] = time() + $inactive; + + $response->getBody()->write(json_encode(array("token" => $_SESSION["token"]))); + return $response; + } + $response->getBody()->write(json_encode(array("error" => "Unauthorised"))); + return $response->withStatus(401); + }); + + $app->post("/user/acs", function (Request $request, Response $response) + { + $this->samlAuth->processResponse(); + + $attributes = $this->samlAuth->getAttributes(); + $username = $attributes["username"][0]; + $email = $attributes["email"][0]; + + if ($this->user->checkSAMLUser($username, $email)) + { + // yay, user is logged in + $_SESSION["token"] = $this->user->createToken($username); + $_SESSION["username"] = $username; + $_SESSION["email"] = $email; + + $inactive = 60 * 60 * 48; // 2 days + $_SESSION["timeout"] = time() + $inactive; + + return $response->withHeader("Location", "https://rohitpai.co.uk/editor/editor.html")->withStatus(302); + } + + $response->getBody()->write(json_encode(array("error" => "Unauthorised"))); + return $response->withStatus(401); + }); + $app->post("/user/changePassword", function (Request $request, Response $response) { if (empty($_SESSION["resetToken"]) && empty($_SESSION["resetEmail"])) diff --git a/dist/blog/css/main.css b/dist/blog/css/main.css index cd04c27..b7095f5 100644 --- a/dist/blog/css/main.css +++ b/dist/blog/css/main.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%, 32%, 1);--mutedGrey:hsla(0, 0%, 75%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--mutedGreen:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) + 20%), 1);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,button.btn,div.form input[type=submit],form input[type=submit]{text-decoration:none;display:inline-flex;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center;align-items:center;max-height:4em}button.btn{padding:1.2em 2.2em}div.form input[type=submit],form input[type=submit]{padding:1.1em 2em}a.btn:hover,button.btn:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btn:hover::after,a.btn:hover::before{visibility:hidden}a.btnPrimary,button.btnPrimary,div.form input[type=submit],form input[type=submit]{background-color:var(--primaryDefault);cursor:pointer}a.btnOutline,button.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled],button.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover,button.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,button.btnPrimary:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{background:var(--primaryHover);border:.3215em solid var(--primaryHover)}a.btn:active,button.btn:active,div.form input[type=submit]:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,div.form .formControl textarea.invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl,form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start}div.form .formControl.passwordControl,form .formControl.passwordControl{display:block}div.form input[type=submit],form input[type=submit]{align-self:flex-start}div.form .formControl .ck.ck-editor__main .ck-content,div.form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,div.form .formControl input:not([type=submit]),div.menu input:not([type=submit]),form .formControl .ck.ck-editor__main .ck-content,form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:.3125em solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;padding:0 .5em}div.form .formControl textarea,form .formControl textarea{padding:.5em}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]):focus,div.form .formControl input:not([type=submit]):hover,div.menu input:not([type=submit]):focus,div.menu input:not([type=submit]):hover,form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:.3125em solid var(--primaryHover)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl i.fa-eye,form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}div.form .formControl .checkContainer,form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.form .formControl .checkContainer input,form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}div.form .formControl .checkContainer .checkmark,form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}div.form .formControl .checkContainer:hover input~.checkmark,form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}div.form .formControl .checkContainer input:checked~.checkmark,form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}div.form .formControl .checkContainer input:checked:hover~.checkmark,form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}div.form .formControl .checkContainer input:checked~.checkmark:after,form .formControl .checkContainer input:checked~.checkmark:after{display:block}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}a{color:#000;text-decoration:none;text-transform:lowercase}a.link{padding:0 .5em}a.link::after,a.link::before{visibility:visible;position:absolute;margin-top:1px}.nav a.link::after,.nav a.link::before,nav a.link::after,nav a.link::before{visibility:hidden}a.link::before{content:' <';margin-left:-.5em}a.link::after{content:'> '}a.link:hover{font-weight:700}.nav a.link:hover::after,.nav a.link:hover::before,nav a.link:hover::after,nav a.link:hover::before{visibility:visible}.nav a.link:hover,nav a.link:hover{font-weight:400}div.error,div.success{color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error{background:var(--errorDefault)}div.success{background-color:var(--primaryHover)}div.error button,div.success button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden,div.success.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover,div.success button:hover{text-shadow:-1px 2px var(--mutedBlack)}header{background:#6a6a6a url(../../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in;color:#fff;z-index:100000000000000000000000000}nav.scrolled{background-color:var(--navBack)}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav>h1{margin-left:.4em}nav ul{display:flex;flex-direction:row;gap:1em;margin:0 .5em 0 0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active::after,nav ul li .active::before{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:hsla(0,0%,67%,.58);font-size:3.75em;margin:1.5rem 0}div h1 span{visibility:visible;animation:caret 1s steps(1) infinite}@keyframes caret{50%{visibility:hidden}}@media screen and (max-width:75em){nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:0}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:.5em;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}}footer{background-color:var(--primaryDefault);margin-top:5em;padding:2em;display:flex;color:#fff}footer .spacer{width:100%;margin-right:auto}footer .nav{width:100%;margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center}footer .nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around}footer .nav ul a{color:#fff}footer p{margin:auto;width:100%;text-align:center}footer .button{margin-left:auto;width:100%;text-align:center}footer .button button{border:5px solid #fff;background:0 0;font-size:3em;padding:.5rem 1rem;width:2em;color:#fff;-webkit-border-radius:.25em;-moz-border-radius:.25em;border-radius:.25em;cursor:pointer}.profile{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;max-width:70%}svg{width:2em;fill:var(--primaryDefault);font-size:2em}footer{margin-top:0}section#individualPost{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch}div.byLine{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1em}div.byLine h3:last-child{border-left:2px solid var(--mutedBlack);padding-left:1em;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1em}div.byLine h3:last-child a{padding:0 1em}div.cover{width:100%;height:20rem;background-position:center;background-size:cover;border-radius:10px;box-shadow:0 4px 2px 0 var(--mutedBlack)}div.mainContent{border-right:5px solid var(--mutedGrey);min-height:100%;width:85%;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}article{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 2em}article a{padding:0 1em}article a::after,article a::before{visibility:visible;position:absolute;margin-top:1px}article a::before{content:' <';margin-left:-.5em}article a::after{content:'>'}article a:hover{font-weight:700}article h1{margin-bottom:.5em}article h3{margin-top:0}.otherPosts h3,article h3:not(div.byLine>h3){font-weight:700}aside.sideContent{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;width:15%;align-self:flex-start}div.authorInfo{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(4,auto);padding-left:1em;padding-top:.5em;border-bottom:5px solid var(--mutedGrey);width:100%}div.authorInfo .picture{display:flex;flex-direction:column;justify-content:center;align-items:center;grid-row:span 3}div.authorInfo h3{grid-column:span 2}div.feeds,div.newsletter,div.otherPosts{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 1em 1em;border-bottom:5px solid var(--mutedGrey);width:100%}div.feeds a,div.otherPosts a{padding:.5em 1em}div.newsletter div.form input[type=submit]{margin-top:1em;padding:.5em 1em}div.feeds .icons{display:flex;flex-direction:row;justify-content:space-around;align-items:flex-start;gap:.5em;flex-wrap:wrap-reverse}div.feeds h2{margin-bottom:0}div.feeds i.fa-solid.fa-rss{font-size:2em}div.feeds img.atom,div.feeds img.json{width:2em}div.categories{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 1em 1em;width:100%}.image img,.image_resized img{max-width:100%;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;box-shadow:0 4px 2px 0 var(--mutedBlack)}.image{justify-self:center;align-self:center}.image-style-side{justify-self:flex-end;align-self:flex-end}section.comments{padding:0 2em 2em}.banner{max-width:30%;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:.625rem;-moz-border-radius:.625rem;border-radius:.625rem;border:2px solid var(--mutedGrey)}h2{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--headingFS);line-height:2.5625rem;text-transform:lowercase}h3{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:2.1875rem}div.menu{width:100%;border-bottom:5px solid var(--mutedGrey)}div.menu input:not([type=submit]){width:auto;border-top-right-radius:0;border-bottom-right-radius:0}div.menu>ul{list-style:none;display:flex;flex-direction:row;justify-content:space-around}div.menu ul li{display:flex;flex-direction:row}div.menu ul li button.btn{padding:initial;border-radius:0 .5em .5em 0}div.menu ul li input:not([type=submit]):focus+button.btn,div.menu ul li:focus button.btn,div.menu ul li:hover button.btn{background:var(--primaryHover);border:.3215em solid var(--primaryHover)}div.menu ul li:focus input:not([type=submit]),div.menu ul li:hover input:not([type=submit]){border:.3215em solid var(--primaryHover)}section.largePost{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;gap:2em;width:100%;padding:0 5em 1em}section.largePost:not(:last-child){border-bottom:5px solid var(--mutedGrey)}section.largePost .outerContent{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:1em}section.largePost .outerContent>.content,section.largePost .outerContent>img{width:50%}section.largePost .outerContent .postContent{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start}section.largePost .outerContent .postContent h2{align-self:center}section.largePost .outerContent .postContent a{align-self:flex-end}#main .errorFof,#main .unsubscribe{display:table;width:100%;height:100dvh;text-align:center}#main .unsubscribe{height:50dvh}.centered{display:table-cell;vertical-align:middle}main>h1{padding-left:3em}section.catPosts .largePost{margin-bottom:3em}section.categories{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;margin-bottom:5em;row-gap:1em}section.categories .btnContainer{flex-basis:33.3333333%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.token a{color:inherit}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}.prism-previewer,.prism-previewer:after,.prism-previewer:before{position:absolute;pointer-events:none}.prism-previewer,.prism-previewer:after{left:50%}.prism-previewer{margin-top:-48px;width:32px;height:32px;margin-left:-16px;z-index:10;opacity:0;-webkit-transition:opacity .25s;-o-transition:opacity .25s;transition:opacity .25s}.prism-previewer.flipped{margin-top:0;margin-bottom:-48px}.prism-previewer:after,.prism-previewer:before{content:'';position:absolute;pointer-events:none}.prism-previewer:before{top:-5px;right:-5px;left:-5px;bottom:-5px;border-radius:10px;border:5px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.5) inset,0 0 10px rgba(0,0,0,.75)}.prism-previewer:after{top:100%;width:0;height:0;margin:5px 0 0 -7px;border:7px solid transparent;border-color:rgba(255,0,0,0);border-top-color:#fff}.prism-previewer.flipped:after{top:auto;bottom:100%;margin-top:0;margin-bottom:5px;border-top-color:rgba(255,0,0,0);border-bottom-color:#fff}.prism-previewer.active{opacity:1}.prism-previewer-angle:before{border-radius:50%;background:#fff}.prism-previewer-angle:after{margin-top:4px}.prism-previewer-angle svg{width:32px;height:32px;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.prism-previewer-angle[data-negative] svg{-webkit-transform:scaleX(-1) rotate(-90deg);-moz-transform:scaleX(-1) rotate(-90deg);-ms-transform:scaleX(-1) rotate(-90deg);-o-transform:scaleX(-1) rotate(-90deg);transform:scaleX(-1) rotate(-90deg)}.prism-previewer-angle circle{fill:transparent;stroke:#2d3438;stroke-opacity:.9;stroke-width:32;stroke-dasharray:0,500}.prism-previewer-gradient{background-image:linear-gradient(45deg,#bbb 25%,transparent 25%,transparent 75%,#bbb 75%,#bbb),linear-gradient(45deg,#bbb 25%,#eee 25%,#eee 75%,#bbb 75%,#bbb);background-size:10px 10px;background-position:0 0,5px 5px;width:64px;margin-left:-32px}.prism-previewer-gradient:before{content:none}.prism-previewer-gradient div{position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border-radius:10px;border:5px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.5) inset,0 0 10px rgba(0,0,0,.75)}.prism-previewer-color{background-image:linear-gradient(45deg,#bbb 25%,transparent 25%,transparent 75%,#bbb 75%,#bbb),linear-gradient(45deg,#bbb 25%,#eee 25%,#eee 75%,#bbb 75%,#bbb);background-size:10px 10px;background-position:0 0,5px 5px}.prism-previewer-color:before{background-color:inherit;background-clip:padding-box}.prism-previewer-easing{margin-top:-76px;margin-left:-30px;width:60px;height:60px;background:#333}.prism-previewer-easing.flipped{margin-bottom:-116px}.prism-previewer-easing svg{width:60px;height:60px}.prism-previewer-easing circle{fill:#2d3438;stroke:#fff}.prism-previewer-easing path{fill:none;stroke:#fff;stroke-linecap:round;stroke-width:4}.prism-previewer-easing line{stroke:#fff;stroke-opacity:.5;stroke-width:2}@-webkit-keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}@-o-keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}@-moz-keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}@keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}.prism-previewer-time:before{border-radius:50%;background:#fff}.prism-previewer-time:after{margin-top:4px}.prism-previewer-time svg{width:32px;height:32px;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.prism-previewer-time circle{fill:transparent;stroke:#2d3438;stroke-opacity:.9;stroke-width:32;stroke-dasharray:0,500;stroke-dashoffset:0;-webkit-animation:prism-previewer-time linear infinite 3s;-moz-animation:prism-previewer-time linear infinite 3s;-o-animation:prism-previewer-time linear infinite 3s;animation:prism-previewer-time linear infinite 3s}.token.punctuation.brace-hover,.token.punctuation.brace-selected{outline:solid 1px}.rainbow-braces .token.punctuation.brace-level-1,.rainbow-braces .token.punctuation.brace-level-5,.rainbow-braces .token.punctuation.brace-level-9{color:#e50;opacity:1}.rainbow-braces .token.punctuation.brace-level-10,.rainbow-braces .token.punctuation.brace-level-2,.rainbow-braces .token.punctuation.brace-level-6{color:#0b3;opacity:1}.rainbow-braces .token.punctuation.brace-level-11,.rainbow-braces .token.punctuation.brace-level-3,.rainbow-braces .token.punctuation.brace-level-7{color:#26f;opacity:1}.rainbow-braces .token.punctuation.brace-level-12,.rainbow-braces .token.punctuation.brace-level-4,.rainbow-braces .token.punctuation.brace-level-8{color:#e0e;opacity:1}pre.diff-highlight>code .token.deleted:not(.prefix),pre>code.diff-highlight .token.deleted:not(.prefix){background-color:rgba(255,0,0,.1);color:inherit;display:block}pre.diff-highlight>code .token.inserted:not(.prefix),pre>code.diff-highlight .token.inserted:not(.prefix){background-color:rgba(0,255,128,.1);color:inherit;display:block}.policy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:5em;padding-bottom:5em}.policy h3{font-weight:700}.modal-container{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);box-sizing:border-box;z-index:9999999}.modal-container.hidden{display:none}.modal{position:fixed;right:0;bottom:0;width:40%;height:auto;max-height:90dvh;overflow:auto;margin:1.25em;padding:1.25em;box-sizing:border-box}.modal-content{background-color:#ddd;margin:auto;padding:20px;border:5px solid var(--primaryHover);width:100%;box-shadow:0 6px 4px 0 var(--mutedBlack)}.modal-content .flexRow{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:1em;flex-wrap:wrap}@media screen and (max-width:90em){div.mainContent{width:80%}aside.sideContent{width:20%}}@media screen and (max-width:75em){div.menuBar .menu ul{flex-direction:column;align-items:center;padding-left:1.25em}div.menuBar .menu ul li input[type=search]{width:100%}.modal-content .flexRow{width:50%;flex-direction:column}section.largePost{padding:1em}section.largePost .outerContent{flex-direction:column;justify-content:center;align-items:center}.banner{max-width:50%}section.largePost .outerContent>.content,section.largePost .outerContent>img{width:90%}section#individualPost{flex-direction:column-reverse;justify-content:center;align-items:center}div.mainContent{width:100%;border-right:none}aside.sideContent{width:100%;flex-direction:row;align-items:stretch;justify-content:space-around;border-bottom:5px solid var(--mutedGrey);flex-wrap:wrap}aside.sideContent>div.authorInfo{grid-template-columns:4fr 1fr 1fr 1fr;flex-basis:100%}aside.sideContent>div.authorInfo .picture{grid-row:span 3}div.byLine{flex-direction:column;align-items:flex-start}div.byLine h3:last-child{border-left:none;padding-left:0}aside.sideContent>div.authorInfo h3{grid-column-start:2;grid-column-end:end;grid-row:3}aside.sideContent>div.categories{flex-basis:100%}aside.sideContent>div.otherPosts{border-bottom:5px solid var(--mutedGrey)}div.feeds,div.newsletter,div.otherPosts{justify-content:space-between;width:50%}aside.sideContent>div{border-right:5px solid var(--mutedGrey);flex-basis:50%}aside.sideContent>div:last-child{border-right:none}main>h1{padding-left:1em}}@media screen and (max-width:55em){.modal{width:90%}.modal-content{display:flex;flex-direction:column;justify-content:center;align-items:center}.banner{max-width:75%}aside.sideContent>div.authorInfo{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}aside.sideContent>div.authorInfo h3{grid-row:2}}@media screen and (max-height:38em) and (orientation:landscape){.modal{width:90%}.modal-content .flexRow{flex-direction:row;flex-wrap:nowrap}}@media screen and (max-width:30em){.profile{max-width:50%}section#individualPost{flex-direction:column}aside.sideContent{flex-direction:column;align-items:center;border-bottom:none}aside.sideContent>div.authorInfo{grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(3,auto);border-top:5px solid var(--mutedGrey)}aside.sideContent>div.authorInfo .picture{grid-row:1;grid-column:span 3}aside.sideContent>div.authorInfo h3{grid-column:span 3}div.feeds,div.newsletter,div.otherPosts{width:100%}} \ No newline at end of file +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%, 32%, 1);--mutedGrey:hsla(0, 0%, 75%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--mutedGreen:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) + 20%), 1);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,button.btn,div.form input[type=submit],form input[type=submit]{text-decoration:none;display:inline-flex;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center;align-items:center;max-height:4em}button.btn{padding:1.2em 2.2em}div.form input[type=submit],form input[type=submit]{padding:1.1em 2em}a.btn:hover,button.btn:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btn:hover::after,a.btn:hover::before{visibility:hidden}a.btnPrimary,button.btnPrimary,div.form input[type=submit],form input[type=submit]{background-color:var(--primaryDefault);cursor:pointer}a.btnOutline,button.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled],button.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover,button.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,button.btnPrimary:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{background:var(--primaryHover);border:.3215em solid var(--primaryHover)}a.btn:active,button.btn:active,div.form input[type=submit]:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,div.form .formControl textarea.invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl,form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start}div.form .formControl.passwordControl,form .formControl.passwordControl{display:block}div.form .formControl .ck.ck-editor__main .ck-content,div.form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,div.form .formControl input:not([type=submit]),div.menu input:not([type=submit]),form .formControl .ck.ck-editor__main .ck-content,form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:.3125em solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;padding:0 .5em}div.form .formControl textarea,form .formControl textarea{padding:.5em}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]):focus,div.form .formControl input:not([type=submit]):hover,div.menu input:not([type=submit]):focus,div.menu input:not([type=submit]):hover,form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:.3125em solid var(--primaryHover)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl i.fa-eye,form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}div.form .formControl .checkContainer,form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.form .formControl .checkContainer input,form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}div.form .formControl .checkContainer .checkmark,form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}div.form .formControl .checkContainer:hover input~.checkmark,form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}div.form .formControl .checkContainer input:checked~.checkmark,form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}div.form .formControl .checkContainer input:checked:hover~.checkmark,form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}div.form .formControl .checkContainer input:checked~.checkmark:after,form .formControl .checkContainer input:checked~.checkmark:after{display:block}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}a{color:#000;text-decoration:none;text-transform:lowercase}a.link{padding:0 .5em}a.link::after,a.link::before{visibility:visible;position:absolute;margin-top:1px}.nav a.link::after,.nav a.link::before,nav a.link::after,nav a.link::before{visibility:hidden}a.link::before{content:' <';margin-left:-.5em}a.link::after{content:'> '}a.link:hover{font-weight:700}.nav a.link:hover::after,.nav a.link:hover::before,nav a.link:hover::after,nav a.link:hover::before{visibility:visible}.nav a.link:hover,nav a.link:hover{font-weight:400}div.error,div.success{color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error{background:var(--errorDefault)}div.success{background-color:var(--primaryHover)}div.error button,div.success button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden,div.success.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover,div.success button:hover{text-shadow:-1px 2px var(--mutedBlack)}header{background:#6a6a6a url(../../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in;color:#fff;z-index:100000000000000000000000000}nav.scrolled{background-color:var(--navBack)}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav>h1{margin-left:.4em}nav ul{display:flex;flex-direction:row;gap:1em;margin:0 .5em 0 0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active::after,nav ul li .active::before{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:hsla(0,0%,67%,.58);font-size:3.75em;margin:1.5rem 0}div h1 span{visibility:visible;animation:caret 1s steps(1) infinite}@keyframes caret{50%{visibility:hidden}}@media screen and (max-width:75em){nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:0}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:.5em;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}}footer{background-color:var(--primaryDefault);margin-top:5em;padding:2em;display:flex;color:#fff}footer .spacer{width:100%;margin-right:auto}footer .nav{width:100%;margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center}footer .nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around}footer .nav ul a{color:#fff}footer p{margin:auto;width:100%;text-align:center}footer .button{margin-left:auto;width:100%;text-align:center}footer .button button{border:5px solid #fff;background:0 0;font-size:3em;padding:.5rem 1rem;width:2em;color:#fff;-webkit-border-radius:.25em;-moz-border-radius:.25em;border-radius:.25em;cursor:pointer}.profile{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;max-width:70%}svg{width:2em;fill:var(--primaryDefault);font-size:2em}footer{margin-top:0}section#individualPost{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch}div.byLine{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1em}div.byLine h3:last-child{border-left:2px solid var(--mutedBlack);padding-left:1em;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1em}div.byLine h3:last-child a{padding:0 1em}div.cover{width:100%;height:20rem;background-position:center;background-size:cover;border-radius:10px;box-shadow:0 4px 2px 0 var(--mutedBlack)}div.mainContent{border-right:5px solid var(--mutedGrey);min-height:100%;width:85%;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}article{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 2em}article a{padding:0 1em}article a::after,article a::before{visibility:visible;position:absolute;margin-top:1px}article a::before{content:' <';margin-left:-.5em}article a::after{content:'>'}article a:hover{font-weight:700}article h1{margin-bottom:.5em}article h3{margin-top:0}.otherPosts h3,article h3:not(div.byLine>h3){font-weight:700}aside.sideContent{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;width:15%;align-self:flex-start}div.authorInfo{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(4,auto);padding-left:1em;padding-top:.5em;border-bottom:5px solid var(--mutedGrey);width:100%}div.authorInfo .picture{display:flex;flex-direction:column;justify-content:center;align-items:center;grid-row:span 3}div.authorInfo h3{grid-column:span 2}div.feeds,div.newsletter,div.otherPosts{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 1em 1em;border-bottom:5px solid var(--mutedGrey);width:100%}div.feeds a,div.otherPosts a{padding:.5em 1em}div.newsletter div.form input[type=submit]{margin-top:1em;padding:.5em 1em}div.feeds .icons{display:flex;flex-direction:row;justify-content:space-around;align-items:flex-start;gap:.5em;flex-wrap:wrap-reverse}div.feeds h2{margin-bottom:0}div.feeds i.fa-solid.fa-rss{font-size:2em}div.feeds img.atom,div.feeds img.json{width:2em}div.categories{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 1em 1em;width:100%}div.form input[type=submit]{align-self:flex-start}.image img,.image_resized img{max-width:100%;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;box-shadow:0 4px 2px 0 var(--mutedBlack)}.image{justify-self:center;align-self:center}.image-style-side{justify-self:flex-end;align-self:flex-end}section.comments{padding:0 2em 2em}.banner{max-width:30%;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:.625rem;-moz-border-radius:.625rem;border-radius:.625rem;border:2px solid var(--mutedGrey)}h2{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--headingFS);line-height:2.5625rem;text-transform:lowercase}h3{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:2.1875rem}div.menu{width:100%;border-bottom:5px solid var(--mutedGrey)}div.menu input:not([type=submit]){width:auto;border-top-right-radius:0;border-bottom-right-radius:0}div.menu>ul{list-style:none;display:flex;flex-direction:row;justify-content:space-around}div.menu ul li{display:flex;flex-direction:row}div.menu ul li button.btn{padding:initial;border-radius:0 .5em .5em 0}div.menu ul li input:not([type=submit]):focus+button.btn,div.menu ul li:focus button.btn,div.menu ul li:hover button.btn{background:var(--primaryHover);border:.3215em solid var(--primaryHover)}div.menu ul li:focus input:not([type=submit]),div.menu ul li:hover input:not([type=submit]){border:.3215em solid var(--primaryHover)}section.largePost{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;gap:2em;width:100%;padding:0 5em 1em}section.largePost:not(:last-child){border-bottom:5px solid var(--mutedGrey)}section.largePost .outerContent{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:1em}section.largePost .outerContent>.content,section.largePost .outerContent>img{width:50%}section.largePost .outerContent .postContent{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start}section.largePost .outerContent .postContent h2{align-self:center}section.largePost .outerContent .postContent a{align-self:flex-end}#main .errorFof,#main .unsubscribe{display:table;width:100%;height:100dvh;text-align:center}#main .unsubscribe{height:50dvh}.centered{display:table-cell;vertical-align:middle}main>h1{padding-left:3em}section.catPosts .largePost{margin-bottom:3em}section.categories{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:100%;margin-bottom:5em;row-gap:1em}section.categories .btnContainer{flex-basis:33.3333333%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.token a{color:inherit}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}.prism-previewer,.prism-previewer:after,.prism-previewer:before{position:absolute;pointer-events:none}.prism-previewer,.prism-previewer:after{left:50%}.prism-previewer{margin-top:-48px;width:32px;height:32px;margin-left:-16px;z-index:10;opacity:0;-webkit-transition:opacity .25s;-o-transition:opacity .25s;transition:opacity .25s}.prism-previewer.flipped{margin-top:0;margin-bottom:-48px}.prism-previewer:after,.prism-previewer:before{content:'';position:absolute;pointer-events:none}.prism-previewer:before{top:-5px;right:-5px;left:-5px;bottom:-5px;border-radius:10px;border:5px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.5) inset,0 0 10px rgba(0,0,0,.75)}.prism-previewer:after{top:100%;width:0;height:0;margin:5px 0 0 -7px;border:7px solid transparent;border-color:rgba(255,0,0,0);border-top-color:#fff}.prism-previewer.flipped:after{top:auto;bottom:100%;margin-top:0;margin-bottom:5px;border-top-color:rgba(255,0,0,0);border-bottom-color:#fff}.prism-previewer.active{opacity:1}.prism-previewer-angle:before{border-radius:50%;background:#fff}.prism-previewer-angle:after{margin-top:4px}.prism-previewer-angle svg{width:32px;height:32px;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.prism-previewer-angle[data-negative] svg{-webkit-transform:scaleX(-1) rotate(-90deg);-moz-transform:scaleX(-1) rotate(-90deg);-ms-transform:scaleX(-1) rotate(-90deg);-o-transform:scaleX(-1) rotate(-90deg);transform:scaleX(-1) rotate(-90deg)}.prism-previewer-angle circle{fill:transparent;stroke:#2d3438;stroke-opacity:.9;stroke-width:32;stroke-dasharray:0,500}.prism-previewer-gradient{background-image:linear-gradient(45deg,#bbb 25%,transparent 25%,transparent 75%,#bbb 75%,#bbb),linear-gradient(45deg,#bbb 25%,#eee 25%,#eee 75%,#bbb 75%,#bbb);background-size:10px 10px;background-position:0 0,5px 5px;width:64px;margin-left:-32px}.prism-previewer-gradient:before{content:none}.prism-previewer-gradient div{position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border-radius:10px;border:5px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.5) inset,0 0 10px rgba(0,0,0,.75)}.prism-previewer-color{background-image:linear-gradient(45deg,#bbb 25%,transparent 25%,transparent 75%,#bbb 75%,#bbb),linear-gradient(45deg,#bbb 25%,#eee 25%,#eee 75%,#bbb 75%,#bbb);background-size:10px 10px;background-position:0 0,5px 5px}.prism-previewer-color:before{background-color:inherit;background-clip:padding-box}.prism-previewer-easing{margin-top:-76px;margin-left:-30px;width:60px;height:60px;background:#333}.prism-previewer-easing.flipped{margin-bottom:-116px}.prism-previewer-easing svg{width:60px;height:60px}.prism-previewer-easing circle{fill:#2d3438;stroke:#fff}.prism-previewer-easing path{fill:none;stroke:#fff;stroke-linecap:round;stroke-width:4}.prism-previewer-easing line{stroke:#fff;stroke-opacity:.5;stroke-width:2}@-webkit-keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}@-o-keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}@-moz-keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}@keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}.prism-previewer-time:before{border-radius:50%;background:#fff}.prism-previewer-time:after{margin-top:4px}.prism-previewer-time svg{width:32px;height:32px;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.prism-previewer-time circle{fill:transparent;stroke:#2d3438;stroke-opacity:.9;stroke-width:32;stroke-dasharray:0,500;stroke-dashoffset:0;-webkit-animation:prism-previewer-time linear infinite 3s;-moz-animation:prism-previewer-time linear infinite 3s;-o-animation:prism-previewer-time linear infinite 3s;animation:prism-previewer-time linear infinite 3s}.token.punctuation.brace-hover,.token.punctuation.brace-selected{outline:solid 1px}.rainbow-braces .token.punctuation.brace-level-1,.rainbow-braces .token.punctuation.brace-level-5,.rainbow-braces .token.punctuation.brace-level-9{color:#e50;opacity:1}.rainbow-braces .token.punctuation.brace-level-10,.rainbow-braces .token.punctuation.brace-level-2,.rainbow-braces .token.punctuation.brace-level-6{color:#0b3;opacity:1}.rainbow-braces .token.punctuation.brace-level-11,.rainbow-braces .token.punctuation.brace-level-3,.rainbow-braces .token.punctuation.brace-level-7{color:#26f;opacity:1}.rainbow-braces .token.punctuation.brace-level-12,.rainbow-braces .token.punctuation.brace-level-4,.rainbow-braces .token.punctuation.brace-level-8{color:#e0e;opacity:1}pre.diff-highlight>code .token.deleted:not(.prefix),pre>code.diff-highlight .token.deleted:not(.prefix){background-color:rgba(255,0,0,.1);color:inherit;display:block}pre.diff-highlight>code .token.inserted:not(.prefix),pre>code.diff-highlight .token.inserted:not(.prefix){background-color:rgba(0,255,128,.1);color:inherit;display:block}.policy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:5em;padding-bottom:5em}.policy h3{font-weight:700}.modal-container{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);box-sizing:border-box;z-index:9999999}.modal-container.hidden{display:none}.modal{position:fixed;right:0;bottom:0;width:40%;height:auto;max-height:90dvh;overflow:auto;margin:1.25em;padding:1.25em;box-sizing:border-box}.modal-content{background-color:#ddd;margin:auto;padding:20px;border:5px solid var(--primaryHover);width:100%;box-shadow:0 6px 4px 0 var(--mutedBlack)}.modal-content .flexRow{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:1em;flex-wrap:wrap}@media screen and (max-width:90em){div.mainContent{width:80%}aside.sideContent{width:20%}}@media screen and (max-width:75em){div.menuBar .menu ul{flex-direction:column;align-items:center;padding-left:1.25em}div.menuBar .menu ul li input[type=search]{width:100%}.modal-content .flexRow{width:50%;flex-direction:column}section.largePost{padding:1em}section.largePost .outerContent{flex-direction:column;justify-content:center;align-items:center}.banner{max-width:50%}section.largePost .outerContent>.content,section.largePost .outerContent>img{width:90%}section#individualPost{flex-direction:column-reverse;justify-content:center;align-items:center}div.mainContent{width:100%;border-right:none}aside.sideContent{width:100%;flex-direction:row;align-items:stretch;justify-content:space-around;border-bottom:5px solid var(--mutedGrey);flex-wrap:wrap}aside.sideContent>div.authorInfo{grid-template-columns:4fr 1fr 1fr 1fr;flex-basis:100%}aside.sideContent>div.authorInfo .picture{grid-row:span 3}div.byLine{flex-direction:column;align-items:flex-start}div.byLine h3:last-child{border-left:none;padding-left:0}aside.sideContent>div.authorInfo h3{grid-column-start:2;grid-column-end:end;grid-row:3}aside.sideContent>div.categories{flex-basis:100%}aside.sideContent>div.otherPosts{border-bottom:5px solid var(--mutedGrey)}div.feeds,div.newsletter,div.otherPosts{justify-content:space-between;width:50%}aside.sideContent>div{border-right:5px solid var(--mutedGrey);flex-basis:50%}aside.sideContent>div:last-child{border-right:none}main>h1{padding-left:1em}}@media screen and (max-width:55em){.modal{width:90%}.modal-content{display:flex;flex-direction:column;justify-content:center;align-items:center}.banner{max-width:75%}aside.sideContent>div.authorInfo{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}aside.sideContent>div.authorInfo h3{grid-row:2}}@media screen and (max-height:38em) and (orientation:landscape){.modal{width:90%}.modal-content .flexRow{flex-direction:row;flex-wrap:nowrap}}@media screen and (max-width:30em){.profile{max-width:50%}section#individualPost{flex-direction:column}aside.sideContent{flex-direction:column;align-items:center;border-bottom:none}aside.sideContent>div.authorInfo{grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(3,auto);border-top:5px solid var(--mutedGrey)}aside.sideContent>div.authorInfo .picture{grid-row:1;grid-column:span 3}aside.sideContent>div.authorInfo h3{grid-column:span 3}div.feeds,div.newsletter,div.otherPosts{width:100%}} \ No newline at end of file diff --git a/dist/css/main.css b/dist/css/main.css index 16cfd85..d9b7656 100644 --- a/dist/css/main.css +++ b/dist/css/main.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%, 32%, 1);--mutedGrey:hsla(0, 0%, 75%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--mutedGreen:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) + 20%), 1);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,button.btn,div.form input[type=submit],form input[type=submit]{text-decoration:none;display:inline-flex;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center;align-items:center;max-height:4em}button.btn{padding:1.2em 2.2em}div.form input[type=submit],form input[type=submit]{padding:1.1em 2em}a.btn:hover,button.btn:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btn:hover::after,a.btn:hover::before{visibility:hidden}a.btnPrimary,button.btnPrimary,div.form input[type=submit],form input[type=submit]{background-color:var(--primaryDefault);cursor:pointer}a.btnOutline,button.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled],button.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover,button.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,button.btnPrimary:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{background:var(--primaryHover);border:.3215em solid var(--primaryHover)}a.btn:active,button.btn:active,div.form input[type=submit]:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,div.form .formControl textarea.invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl,form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start}div.form .formControl.passwordControl,form .formControl.passwordControl{display:block}div.form input[type=submit],form input[type=submit]{align-self:flex-start}div.form .formControl .ck.ck-editor__main .ck-content,div.form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,div.form .formControl input:not([type=submit]),div.menu input:not([type=submit]),form .formControl .ck.ck-editor__main .ck-content,form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:.3125em solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;padding:0 .5em}div.form .formControl textarea,form .formControl textarea{padding:.5em}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]):focus,div.form .formControl input:not([type=submit]):hover,div.menu input:not([type=submit]):focus,div.menu input:not([type=submit]):hover,form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:.3125em solid var(--primaryHover)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl i.fa-eye,form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}div.form .formControl .checkContainer,form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.form .formControl .checkContainer input,form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}div.form .formControl .checkContainer .checkmark,form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}div.form .formControl .checkContainer:hover input~.checkmark,form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}div.form .formControl .checkContainer input:checked~.checkmark,form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}div.form .formControl .checkContainer input:checked:hover~.checkmark,form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}div.form .formControl .checkContainer input:checked~.checkmark:after,form .formControl .checkContainer input:checked~.checkmark:after{display:block}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}a{color:#000;text-decoration:none;text-transform:lowercase}a.link{padding:0 .5em}a.link::after,a.link::before{visibility:visible;position:absolute;margin-top:1px}.nav a.link::after,.nav a.link::before,nav a.link::after,nav a.link::before{visibility:hidden}a.link::before{content:' <';margin-left:-.5em}a.link::after{content:'> '}a.link:hover{font-weight:700}.nav a.link:hover::after,.nav a.link:hover::before,nav a.link:hover::after,nav a.link:hover::before{visibility:visible}.nav a.link:hover,nav a.link:hover{font-weight:400}div.error,div.success{color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error{background:var(--errorDefault)}div.success{background-color:var(--primaryHover)}div.error button,div.success button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden,div.success.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover,div.success button:hover{text-shadow:-1px 2px var(--mutedBlack)}header{background:#6a6a6a url(../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in;color:#fff;z-index:100000000000000000000000000}nav.scrolled{background-color:var(--navBack)}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav>h1{margin-left:.4em}nav ul{display:flex;flex-direction:row;gap:1em;margin:0 .5em 0 0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active::after,nav ul li .active::before{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:hsla(0,0%,67%,.58);font-size:3.75em;margin:1.5rem 0}div h1 span{visibility:visible;animation:caret 1s steps(1) infinite}@keyframes caret{50%{visibility:hidden}}@media screen and (max-width:75em){nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:0}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:.5em;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}}section#about{margin-bottom:5rem}section#about div{padding:.1em 5em}section#curriculumVitae{background-color:var(--primaryDefault);color:#fff;padding:2em 0}section#curriculumVitae .cvGrid{display:flex;flex-direction:row;padding:0 1.5rem;flex-wrap:wrap}section#curriculumVitae .cvGrid>div{width:45%;display:flex;flex-direction:column;min-height:100%}section#curriculumVitae .cvGrid h2{text-align:center}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae #work{margin:0 auto 0 8rem}section#curriculumVitae .timeline:before{content:"";position:absolute;height:100%;border:4px var(--timelineItemBrdr) solid;right:194px;top:0}section#curriculumVitae .timeline:after{content:"";display:table;clear:both}section#curriculumVitae .timelineItem{border:2px solid var(--timelineItemBrdr);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1rem;width:50%;position:relative;background-color:var(--primaryHover)}.timelineItem:after,section#curriculumVitae .timelineItem:before{content:'';position:absolute}section#curriculumVitae .timelineItem:before{content:'';right:-20px;top:calc(50% - 5px);border-style:solid;border-color:var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;border-width:20px;transform:rotate(45deg)}section#curriculumVitae .timelineItem:nth-child(2n){margin-left:21em}section#curriculumVitae .timelineItem:nth-child(2n):before{right:auto;left:-20px;border-color:transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr)}section#curriculumVitae .timelineItem h3{font-weight:400}section#curriculumVitae .timelineItem span{color:#e5e5e5}section#projects{display:flex;flex-direction:row;padding:0 2.5rem;border-bottom:2px solid var(--mutedGrey)}section#projects .mainProj,section#projects .otherProj{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}section#projects .mainProj{border-right:2px solid var(--mutedGrey);padding:0 2.5em 5em 0}section#allProjects img,section#projects img{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;display:block;margin:1em auto}section#projects .mainProj img{width:100%;max-width:40rem}section#projects .mainProj .flexRow{display:flex;flex-direction:row;gap:4em}section#projects .mainProj .flexCol{display:flex;flex-direction:column;gap:2.5em}section#projects .otherProj>a{margin:5rem 0}section#projects .otherProj>div{display:flex;flex-direction:column;gap:2em}section#allProjects #otherProj .oProjItem,section#projects .otherProj>div .oProjItem{display:flex;justify-content:center;align-items:center;flex-direction:row;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:.75em 1em}section#projects .otherProj>div .oProjItem{margin:0 auto}section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:row-reverse}section#projects .otherProj .oProjItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .oProjItem .flexCol div:nth-child(2){display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .flexCol div:nth-child(2) .btn{padding:.25em .5em}section#allProjects{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:5em}section#allProjects #mainProj{display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid var(--grey);box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:1.5em 2em;margin:3em 2.5rem 0;width:50%}section#allProjects #mainProj img{width:100%;max-width:30rem}section#allProjects #otherProj{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:wrap;gap:2rem;border-top:2px solid var(--grey);padding:5em 2.5rem 0}section#allProjects #otherProj .oProjItem{flex-direction:column;width:30%;height:auto}section#allProjects #otherProj img{width:100%;max-width:20rem}section#contact{display:flex;flex-direction:row;padding:0 2.5em}div#findMe,div#sayHello{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}div#findMe .findMeContainer{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:2em;width:100%;height:100%;margin:5em 0}div#findMe .findMeContainer .profile{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}div#findMe .socialIcons{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2em}div#findMe .socialIcons div{display:flex;flex-direction:column;gap:1.5em}div#findMe .socialIcons div svg{width:2.5em;fill:var(--primaryDefault);font-size:2em}div#findMe .socialIcons div a:hover svg{fill:var(--primaryHover)}div#sayHello #contactForm{display:flex;flex-direction:column;justify-content:center;align-items:center}#contactForm .flName{display:flex;flex-direction:row;gap:1em;width:100%}div.message{background:var(--primaryDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em;margin-bottom:1em}div.message.error{background:var(--errorDefault)}div.message button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.message.hidden{opacity:0;visibility:hidden;height:0}div.message button:hover{text-shadow:-1px 2px var(--mutedBlack)}footer{background-color:var(--primaryDefault);margin-top:5em;padding:2em;display:flex;color:#fff}footer .spacer{width:100%;margin-right:auto}footer .nav{width:100%;margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center}footer .nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around}footer .nav ul a{color:#fff}footer p{margin:auto;width:100%;text-align:center}footer .button{margin-left:auto;width:100%;text-align:center}footer .button button{border:5px solid #fff;background:0 0;font-size:3em;padding:.5rem 1rem;width:2em;color:#fff;-webkit-border-radius:.25em;-moz-border-radius:.25em;border-radius:.25em;cursor:pointer}@media screen and (max-width:90em){section#curriculumVitae .cvGrid{flex-direction:column;justify-content:center;align-items:center}section#curriculumVitae .cvGrid>div{width:100%}section#curriculumVitae .cvGrid>div:first-child{padding-bottom:2.5em;margin-bottom:2.5em;border-bottom:5px #fff solid}section#curriculumVitae .cvGrid h2{margin-left:5em}section#curriculumVitae .cvGrid .timeline{margin:0 auto}}@media screen and (max-width:75em){section#about,section#curriculumVitae h1{padding:0 1em}section#about div{padding:.1em 2.5em}section#curriculumVitae .cvGrid{padding:0}section#projects{flex-direction:column;justify-content:center;align-items:center}section#projects .mainProj{border-right:0;padding:0;width:100%;margin:0 5em}section#projects .mainProj img{padding:0 1em}section#projects .mainProj .flexRow{flex-direction:column;margin:0 2.5em}section#projects .mainProj .flexCol{flex-direction:row;justify-content:center;align-items:center}section#projects .otherProj{width:100%}section#projects .otherProj .btn{width:10em;text-align:center}section#projects .otherProj>div .oProjItem,section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){justify-content:center;margin-left:0;margin-bottom:1em}section#projects .otherProj>a{margin-left:3em;margin-right:3em;text-align:center}section#allProjects #otherProj .oProjItem{width:45%}section#contact{flex-direction:column;justify-content:center;align-items:center}div#findMe,div#sayHello{width:100%}div#findMe .findMeContainer{flex-direction:column;justify-content:center}div#findMe .socialIcons{flex-direction:row}div#findMe .socialIcons div{flex-direction:row}}@media screen and (max-width:55em){section#curriculumVitae .cvGrid .timeline,section#curriculumVitae .cvGrid .timeline#work{margin:0 auto;width:100%}section#curriculumVitae .timeline:before{border:none}section#curriculumVitae .timelineItem,section#curriculumVitae .timelineItem:nth-child(2n){width:95%;padding:0;margin:0 auto}section#curriculumVitae .timelineItem:before{right:unset;left:unset;border:none}section#allProjects #mainProj{width:auto}section#allProjects #otherProj{flex-direction:column;align-items:center}section#allProjects #otherProj .oProjItem{width:auto}div#findMe .socialIcons{flex-direction:column}#contactForm .flName{flex-direction:column;gap:0;width:100%}}@media screen and (max-width:31em){section#about,section#curriculumVitae h1{padding:0 1em}header div h1{text-align:center;height:5.125rem}section#about div{padding:.1em 1em}section#projects .mainProj .flexCol{flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){flex-direction:column;justify-content:center;align-items:center}} \ No newline at end of file +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%, 32%, 1);--mutedGrey:hsla(0, 0%, 75%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--mutedGreen:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) + 20%), 1);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,button.btn,div.form input[type=submit],form input[type=submit]{text-decoration:none;display:inline-flex;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center;align-items:center;max-height:4em}button.btn{padding:1.2em 2.2em}div.form input[type=submit],form input[type=submit]{padding:1.1em 2em}a.btn:hover,button.btn:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btn:hover::after,a.btn:hover::before{visibility:hidden}a.btnPrimary,button.btnPrimary,div.form input[type=submit],form input[type=submit]{background-color:var(--primaryDefault);cursor:pointer}a.btnOutline,button.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled],button.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover,button.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,button.btnPrimary:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{background:var(--primaryHover);border:.3215em solid var(--primaryHover)}a.btn:active,button.btn:active,div.form input[type=submit]:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,div.form .formControl textarea.invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl,form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start}div.form .formControl.passwordControl,form .formControl.passwordControl{display:block}div.form .formControl .ck.ck-editor__main .ck-content,div.form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,div.form .formControl input:not([type=submit]),div.menu input:not([type=submit]),form .formControl .ck.ck-editor__main .ck-content,form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:.3125em solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;padding:0 .5em}div.form .formControl textarea,form .formControl textarea{padding:.5em}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]):focus,div.form .formControl input:not([type=submit]):hover,div.menu input:not([type=submit]):focus,div.menu input:not([type=submit]):hover,form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:.3125em solid var(--primaryHover)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl i.fa-eye,form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}div.form .formControl .checkContainer,form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.form .formControl .checkContainer input,form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}div.form .formControl .checkContainer .checkmark,form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}div.form .formControl .checkContainer:hover input~.checkmark,form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}div.form .formControl .checkContainer input:checked~.checkmark,form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}div.form .formControl .checkContainer input:checked:hover~.checkmark,form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}div.form .formControl .checkContainer input:checked~.checkmark:after,form .formControl .checkContainer input:checked~.checkmark:after{display:block}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}a{color:#000;text-decoration:none;text-transform:lowercase}a.link{padding:0 .5em}a.link::after,a.link::before{visibility:visible;position:absolute;margin-top:1px}.nav a.link::after,.nav a.link::before,nav a.link::after,nav a.link::before{visibility:hidden}a.link::before{content:' <';margin-left:-.5em}a.link::after{content:'> '}a.link:hover{font-weight:700}.nav a.link:hover::after,.nav a.link:hover::before,nav a.link:hover::after,nav a.link:hover::before{visibility:visible}.nav a.link:hover,nav a.link:hover{font-weight:400}div.error,div.success{color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error{background:var(--errorDefault)}div.success{background-color:var(--primaryHover)}div.error button,div.success button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden,div.success.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover,div.success button:hover{text-shadow:-1px 2px var(--mutedBlack)}header{background:#6a6a6a url(../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in;color:#fff;z-index:100000000000000000000000000}nav.scrolled{background-color:var(--navBack)}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav>h1{margin-left:.4em}nav ul{display:flex;flex-direction:row;gap:1em;margin:0 .5em 0 0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active::after,nav ul li .active::before{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:hsla(0,0%,67%,.58);font-size:3.75em;margin:1.5rem 0}div h1 span{visibility:visible;animation:caret 1s steps(1) infinite}@keyframes caret{50%{visibility:hidden}}@media screen and (max-width:75em){nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:0}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:.5em;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}}section#about{margin-bottom:5rem}section#about div{padding:.1em 5em}section#curriculumVitae{background-color:var(--primaryDefault);color:#fff;padding:2em 0}section#curriculumVitae .cvGrid{display:flex;flex-direction:row;padding:0 1.5rem;flex-wrap:wrap}section#curriculumVitae .cvGrid>div{width:45%;display:flex;flex-direction:column;min-height:100%}section#curriculumVitae .cvGrid h2{text-align:center}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae #work{margin:0 auto 0 8rem}section#curriculumVitae .timeline:before{content:"";position:absolute;height:100%;border:4px var(--timelineItemBrdr) solid;right:194px;top:0}section#curriculumVitae .timeline:after{content:"";display:table;clear:both}section#curriculumVitae .timelineItem{border:2px solid var(--timelineItemBrdr);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1rem;width:50%;position:relative;background-color:var(--primaryHover)}.timelineItem:after,section#curriculumVitae .timelineItem:before{content:'';position:absolute}section#curriculumVitae .timelineItem:before{content:'';right:-20px;top:calc(50% - 5px);border-style:solid;border-color:var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;border-width:20px;transform:rotate(45deg)}section#curriculumVitae .timelineItem:nth-child(2n){margin-left:21em}section#curriculumVitae .timelineItem:nth-child(2n):before{right:auto;left:-20px;border-color:transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr)}section#curriculumVitae .timelineItem h3{font-weight:400}section#curriculumVitae .timelineItem span{color:#e5e5e5}section#projects{display:flex;flex-direction:row;padding:0 2.5rem;border-bottom:2px solid var(--mutedGrey)}section#projects .mainProj,section#projects .otherProj{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}section#projects .mainProj{border-right:2px solid var(--mutedGrey);padding:0 2.5em 5em 0}section#allProjects img,section#projects img{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;display:block;margin:1em auto}section#projects .mainProj img{width:100%;max-width:40rem}section#projects .mainProj .flexRow{display:flex;flex-direction:row;gap:4em}section#projects .mainProj .flexCol{display:flex;flex-direction:column;gap:2.5em}section#projects .otherProj>a{margin:5rem 0}section#projects .otherProj>div{display:flex;flex-direction:column;gap:2em}section#allProjects #otherProj .oProjItem,section#projects .otherProj>div .oProjItem{display:flex;justify-content:center;align-items:center;flex-direction:row;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:.75em 1em}section#projects .otherProj>div .oProjItem{margin:0 auto}section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:row-reverse}section#projects .otherProj .oProjItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .oProjItem .flexCol div:nth-child(2){display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .flexCol div:nth-child(2) .btn{padding:.25em .5em}section#allProjects{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:5em}section#allProjects #mainProj{display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid var(--grey);box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:1.5em 2em;margin:3em 2.5rem 0;width:50%}section#allProjects #mainProj img{width:100%;max-width:30rem}section#allProjects #otherProj{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:wrap;gap:2rem;border-top:2px solid var(--grey);padding:5em 2.5rem 0}section#allProjects #otherProj .oProjItem{flex-direction:column;width:30%;height:auto}section#allProjects #otherProj img{width:100%;max-width:20rem}section#contact{display:flex;flex-direction:row;padding:0 2.5em}div#findMe,div#sayHello{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}div#findMe .findMeContainer{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:2em;width:100%;height:100%;margin:5em 0}div#findMe .findMeContainer .profile{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}div#findMe .socialIcons{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2em}div#findMe .socialIcons div{display:flex;flex-direction:column;gap:1.5em}div#findMe .socialIcons div svg{width:2.5em;fill:var(--primaryDefault);font-size:2em}div#findMe .socialIcons div a:hover svg{fill:var(--primaryHover)}div#sayHello #contactForm{display:flex;flex-direction:column;justify-content:center;align-items:center}#contactForm .flName{display:flex;flex-direction:row;gap:1em;width:100%}div.message{background:var(--primaryDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em;margin-bottom:1em}div.message.error{background:var(--errorDefault)}div.message button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.message.hidden{opacity:0;visibility:hidden;height:0}div.message button:hover{text-shadow:-1px 2px var(--mutedBlack)}footer{background-color:var(--primaryDefault);margin-top:5em;padding:2em;display:flex;color:#fff}footer .spacer{width:100%;margin-right:auto}footer .nav{width:100%;margin-right:auto;display:flex;flex-direction:row;justify-content:center;align-items:center}footer .nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around}footer .nav ul a{color:#fff}footer p{margin:auto;width:100%;text-align:center}footer .button{margin-left:auto;width:100%;text-align:center}footer .button button{border:5px solid #fff;background:0 0;font-size:3em;padding:.5rem 1rem;width:2em;color:#fff;-webkit-border-radius:.25em;-moz-border-radius:.25em;border-radius:.25em;cursor:pointer}@media screen and (max-width:90em){section#curriculumVitae .cvGrid{flex-direction:column;justify-content:center;align-items:center}section#curriculumVitae .cvGrid>div{width:100%}section#curriculumVitae .cvGrid>div:first-child{padding-bottom:2.5em;margin-bottom:2.5em;border-bottom:5px #fff solid}section#curriculumVitae .cvGrid h2{margin-left:5em}section#curriculumVitae .cvGrid .timeline{margin:0 auto}}@media screen and (max-width:75em){section#about,section#curriculumVitae h1{padding:0 1em}section#about div{padding:.1em 2.5em}section#curriculumVitae .cvGrid{padding:0}section#projects{flex-direction:column;justify-content:center;align-items:center}section#projects .mainProj{border-right:0;padding:0;width:100%;margin:0 5em}section#projects .mainProj img{padding:0 1em}section#projects .mainProj .flexRow{flex-direction:column;margin:0 2.5em}section#projects .mainProj .flexCol{flex-direction:row;justify-content:center;align-items:center}section#projects .otherProj{width:100%}section#projects .otherProj .btn{width:10em;text-align:center}section#projects .otherProj>div .oProjItem,section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){justify-content:center;margin-left:0;margin-bottom:1em}section#projects .otherProj>a{margin-left:3em;margin-right:3em;text-align:center}section#allProjects #otherProj .oProjItem{width:45%}section#contact{flex-direction:column;justify-content:center;align-items:center}div#findMe,div#sayHello{width:100%}div#findMe .findMeContainer{flex-direction:column;justify-content:center}div#findMe .socialIcons{flex-direction:row}div#findMe .socialIcons div{flex-direction:row}}@media screen and (max-width:55em){section#curriculumVitae .cvGrid .timeline,section#curriculumVitae .cvGrid .timeline#work{margin:0 auto;width:100%}section#curriculumVitae .timeline:before{border:none}section#curriculumVitae .timelineItem,section#curriculumVitae .timelineItem:nth-child(2n){width:95%;padding:0;margin:0 auto}section#curriculumVitae .timelineItem:before{right:unset;left:unset;border:none}section#allProjects #mainProj{width:auto}section#allProjects #otherProj{flex-direction:column;align-items:center}section#allProjects #otherProj .oProjItem{width:auto}div#findMe .socialIcons{flex-direction:column}#contactForm .flName{flex-direction:column;gap:0;width:100%}}@media screen and (max-width:31em){section#about,section#curriculumVitae h1{padding:0 1em}header div h1{text-align:center;height:5.125rem}section#about div{padding:.1em 1em}section#projects .mainProj .flexCol{flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){flex-direction:column;justify-content:center;align-items:center}} \ No newline at end of file diff --git a/dist/editor/css/main.css b/dist/editor/css/main.css index ca59322..4062c0b 100644 --- a/dist/editor/css/main.css +++ b/dist/editor/css/main.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%, 32%, 1);--mutedGrey:hsla(0, 0%, 75%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--mutedGreen:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) + 20%), 1);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,button.btn,div.form input[type=submit],form input[type=submit]{text-decoration:none;display:inline-flex;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center;align-items:center;max-height:4em}button.btn{padding:1.2em 2.2em}div.form input[type=submit],form input[type=submit]{padding:1.1em 2em}a.btn:hover,button.btn:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btn:hover::after,a.btn:hover::before{visibility:hidden}a.btnPrimary,button.btnPrimary,div.form input[type=submit],form input[type=submit]{background-color:var(--primaryDefault);cursor:pointer}a.btnOutline,button.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled],button.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover,button.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,button.btnPrimary:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{background:var(--primaryHover);border:.3215em solid var(--primaryHover)}a.btn:active,button.btn:active,div.form input[type=submit]:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,div.form .formControl textarea.invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl,form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start}div.form .formControl.passwordControl,form .formControl.passwordControl{display:block}div.form input[type=submit],form input[type=submit]{align-self:flex-start}div.form .formControl .ck.ck-editor__main .ck-content,div.form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,div.form .formControl input:not([type=submit]),div.menu input:not([type=submit]),form .formControl .ck.ck-editor__main .ck-content,form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:.3125em solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;padding:0 .5em}div.form .formControl textarea,form .formControl textarea{padding:.5em}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]):focus,div.form .formControl input:not([type=submit]):hover,div.menu input:not([type=submit]):focus,div.menu input:not([type=submit]):hover,form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:.3125em solid var(--primaryHover)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl i.fa-eye,form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}div.form .formControl .checkContainer,form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.form .formControl .checkContainer input,form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}div.form .formControl .checkContainer .checkmark,form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}div.form .formControl .checkContainer:hover input~.checkmark,form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}div.form .formControl .checkContainer input:checked~.checkmark,form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}div.form .formControl .checkContainer input:checked:hover~.checkmark,form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}div.form .formControl .checkContainer input:checked~.checkmark:after,form .formControl .checkContainer input:checked~.checkmark:after{display:block}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}a{color:#000;text-decoration:none;text-transform:lowercase}a.link{padding:0 .5em}a.link::after,a.link::before{visibility:visible;position:absolute;margin-top:1px}.nav a.link::after,.nav a.link::before,nav a.link::after,nav a.link::before{visibility:hidden}a.link::before{content:' <';margin-left:-.5em}a.link::after{content:'> '}a.link:hover{font-weight:700}.nav a.link:hover::after,.nav a.link:hover::before,nav a.link:hover::after,nav a.link:hover::before{visibility:visible}.nav a.link:hover,nav a.link:hover{font-weight:400}div.error,div.success{color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error{background:var(--errorDefault)}div.success{background-color:var(--primaryHover)}div.error button,div.success button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden,div.success.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover,div.success button:hover{text-shadow:-1px 2px var(--mutedBlack)}h1{text-transform:none}body,html{height:100%}main.login{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-image:radial-gradient(var(--primaryDefault),#597226)}div.container{flex-direction:column;justify-content:center;align-items:center;background-color:#fff;padding:2em 5em;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-transform:translateX(-150vw);-moz-transform:translateX(-150vw);-ms-transform:translateX(-150vw);-o-transform:translateX(-150vw);transform:translateX(-150vw);-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;-ms-transition:transform .4s ease-in-out;-o-transition:transform .4s ease-in-out;transition:transform .4s ease-in-out;overflow:hidden}div.container.shown{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}div.container form{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}div#login #password{font-family:Verdana,serif;letter-spacing:.125em}div#login input[type=submit]{margin:0}div.btnContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}div.btnContainer a:not(.btn){color:#000}nav{font-size:var(--headingFS)}nav.sideNav{height:100%;width:250px;z-index:1;position:fixed;top:0;left:0;background-color:var(--primaryHover);overflow-x:hidden;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;padding-top:60px}nav.sideNav ul li{list-style:none}nav.sideNav a{padding:8px 8px 8px 0;text-decoration:none;color:#fff;display:block;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}nav.sideNav .closeBtn{position:absolute;top:0;right:25px;margin-left:50px;font-size:var(--titleFS);display:none}nav.sideNav ul li span{visibility:hidden}nav.sideNav ul li a.active span,nav.sideNav ul li a:hover span{visibility:visible}nav.sideNav ul li.dropdown ul{transition:max-height ease-out .4s;max-height:0;overflow:hidden}nav.sideNav ul li.dropdown ul.active{transition:max-height ease-in .4s;max-height:20rem}nav.sideNav ul li.dropdown ul li{margin-left:-1rem}span#navOpen{font-size:var(--titleFS);cursor:pointer}main.editor{margin-left:250px}.title{display:flex;flex-direction:column;justify-content:center;align-items:center}#navOpen{visibility:hidden;padding:.25em 0 0 .25em;align-self:flex-start}textarea{resize:none}main.editor section{margin:0 2em}input[type=submit]{margin-top:2em}.delete,.edit{border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;outline:0;background-color:var(--primaryDefault);color:#fff;cursor:pointer}.timelineHeader{font-weight:400}div.editorContainer,div.projectsGrid{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:2em;margin-bottom:.5em}div.editorContainer>*,div.projectsGrid>*{width:45%}main.editor section{display:none;flex-direction:column}section#curriculumVitae{display:flex}div.modifyBtnContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:.5em;width:100%}div.companyAreaContainer,div.dateContainer{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1em;margin-bottom:.5em}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae .timelineItem,section#projects .projItem{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:1rem;position:relative}section#curriculumVitae .timelineItem{border:2px solid var(--timelineItemBrdr);color:#fff;background-color:var(--primaryHover)}section#curriculumVitae .timelineItem.editing{color:#000;border:5px solid var(--primaryDefault);padding:.5em}section#curriculumVitae .timelineItem.editing{background-color:#fff}form div.gradeContainer.formControl{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}section#curriculumVitae form.timelineItem:not(.editing) .delete,section#curriculumVitae form.timelineItem:not(.editing) .edit{color:var(--primaryHover);background-color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.dateContainer{display:none}section#curriculumVitae form.timelineItem.editing .timelineHeader{display:none}section#curriculumVitae form.timelineItem.editing div.gradeContainer.formControl{gap:1em;margin-bottom:.5em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText,section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl input,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input,section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea,section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{outline:0;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl>*,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl>*{color:#e5e5e5}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText{color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input{padding:0 .25em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) div.formControl .courseText{padding:0}section#curriculumVitae form.timelineItem:not(.editing) input[type=submit]{display:none}.courseText{resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer input{width:30%}section#projects #projList .projItem{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:0 auto;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack)}section#projects #projList{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}section#projects #projList .projItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .projItem .linkContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .linkContainer .btn{padding:.25em .5em}section#projects #isMainProject{width:auto}section#projects form.projItem.editing div.linkContainer,section#projects form.projItem.editing img.displayedImage,section#projects form.projItem:not(.editing) div.formControl.gitContainer,section#projects form.projItem:not(.editing) div.formControl.imageContainer,section#projects form.projItem:not(.editing) div.formControl.isMainProject,section#projects form.projItem:not(.editing) div.formControl.viewProjContainer,section#projects form.projItem:not(.editing) input[type=submit]{display:none}section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{font-size:1.17em;font-weight:700}section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea,section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{color:#000}section#addPost form,section#editPost form{margin:auto 4rem 4rem}form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:2px solid var(--mutedGrey);box-shadow:0 3px 4px var(--mutedBlack)}form .formControl .ck.ck-editor__main .ck-content{border-top-right-radius:0;border-top-left-radius:0;border-top:inherit}form .formControl .ck-editor__editable{min-height:400px}section#editPost{justify-content:center}section#editPost h2{align-self:flex-start}section#editPost table{border-collapse:collapse;border-style:hidden;align-self:center;margin-bottom:5em}section#editPost table td,th{border:1px solid var(--mutedGrey);text-align:left;padding:8px;min-width:10rem}section#newsletter form{margin:0 5em}@media only screen and (max-width:75em){nav.sideNav .closeBtn{display:block}} \ No newline at end of file +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--mainHue:80;--mainSat:60%;--mainLight:50%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%, 32%, 1);--mutedGrey:hsla(0, 0%, 75%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--mutedGreen:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) + 20%), 1);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);line-height:2.1875rem}a.btn,button.btn,div.form input[type=submit],form input[type=submit]{text-decoration:none;display:inline-flex;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center;align-items:center;max-height:4em}button.btn{padding:1.2em 2.2em}div.form input[type=submit],form input[type=submit]{padding:1.1em 2em}a.btn:hover,button.btn:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{border:.3215em solid var(--primaryHover)}a.btn:hover::after,a.btn:hover::before{visibility:hidden}a.btnPrimary,button.btnPrimary,div.form input[type=submit],form input[type=submit]{background-color:var(--primaryDefault);cursor:pointer}a.btnOutline,button.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary[disabled],button.btnPrimary[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover,button.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}a.btnPrimary:hover,button.btnPrimary:hover,div.form input[type=submit]:hover,form input[type=submit]:hover{background:var(--primaryHover);border:.3215em solid var(--primaryHover)}a.btn:active,button.btn:active,div.form input[type=submit]:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,div.form .formControl textarea.invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl,form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start}div.form .formControl.passwordControl,form .formControl.passwordControl{display:block}div.form .formControl .ck.ck-editor__main .ck-content,div.form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,div.form .formControl input:not([type=submit]),div.menu input:not([type=submit]),form .formControl .ck.ck-editor__main .ck-content,form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:.3125em solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;padding:0 .5em}div.form .formControl textarea,form .formControl textarea{padding:.5em}div.form .formControl input:not([type=submit]).invalid:invalid,form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:.3125em solid var(--errorDefault)}div.form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:.3125em solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}div.form .formControl input:not([type=submit]):focus,div.form .formControl input:not([type=submit]):hover,div.menu input:not([type=submit]):focus,div.menu input:not([type=submit]):hover,form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:.3125em solid var(--primaryHover)}div.form .formControl input:not([type=submit]),form .formControl input:not([type=submit]){height:3em}div.form .formControl i.fa-eye,form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}div.form .formControl .checkContainer,form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.form .formControl .checkContainer input,form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}div.form .formControl .checkContainer .checkmark,form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}div.form .formControl .checkContainer:hover input~.checkmark,form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}div.form .formControl .checkContainer input:checked~.checkmark,form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}div.form .formControl .checkContainer input:checked:hover~.checkmark,form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}div.form .formControl .checkContainer input:checked~.checkmark:after,form .formControl .checkContainer input:checked~.checkmark:after{display:block}div.form .formControl .checkContainer .checkmark:after,form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}a{color:#000;text-decoration:none;text-transform:lowercase}a.link{padding:0 .5em}a.link::after,a.link::before{visibility:visible;position:absolute;margin-top:1px}.nav a.link::after,.nav a.link::before,nav a.link::after,nav a.link::before{visibility:hidden}a.link::before{content:' <';margin-left:-.5em}a.link::after{content:'> '}a.link:hover{font-weight:700}.nav a.link:hover::after,.nav a.link:hover::before,nav a.link:hover::after,nav a.link:hover::before{visibility:visible}.nav a.link:hover,nav a.link:hover{font-weight:400}div.error,div.success{color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error{background:var(--errorDefault)}div.success{background-color:var(--primaryHover)}div.error button,div.success button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden,div.success.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover,div.success button:hover{text-shadow:-1px 2px var(--mutedBlack)}h1{text-transform:none}body,html{height:100%}main.login{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-image:radial-gradient(var(--primaryDefault),#597226)}div.container{flex-direction:column;justify-content:center;align-items:center;background-color:#fff;padding:2em 5em;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-transform:translateX(-150vw);-moz-transform:translateX(-150vw);-ms-transform:translateX(-150vw);-o-transform:translateX(-150vw);transform:translateX(-150vw);-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;-ms-transition:transform .4s ease-in-out;-o-transition:transform .4s ease-in-out;transition:transform .4s ease-in-out;overflow:hidden}div.container.shown{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}div.container form{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}div#login #password{font-family:Verdana,serif;letter-spacing:.125em}div#login input[type=submit]{margin:0}div.btnContainer{width:60%;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:1em}div.btnContainer a{justify-content:center;text-transform:unset}form div.btnContainer input[type=submit]{align-self:stretch}div.btnContainer a:not(.btn){color:#000}nav{font-size:var(--headingFS)}nav.sideNav{height:100%;width:250px;z-index:1;position:fixed;top:0;left:0;background-color:var(--primaryHover);overflow-x:hidden;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;padding-top:60px}nav.sideNav ul li{list-style:none}nav.sideNav a{padding:8px 8px 8px 0;text-decoration:none;color:#fff;display:block;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}nav.sideNav .closeBtn{position:absolute;top:0;right:25px;margin-left:50px;font-size:var(--titleFS);display:none}nav.sideNav ul li span{visibility:hidden}nav.sideNav ul li a.active span,nav.sideNav ul li a:hover span{visibility:visible}nav.sideNav ul li.dropdown ul{transition:max-height ease-out .4s;max-height:0;overflow:hidden}nav.sideNav ul li.dropdown ul.active{transition:max-height ease-in .4s;max-height:20rem}nav.sideNav ul li.dropdown ul li{margin-left:-1rem}span#navOpen{font-size:var(--titleFS);cursor:pointer}main.editor{margin-left:250px}.title{display:flex;flex-direction:column;justify-content:center;align-items:center}#navOpen{visibility:hidden;padding:.25em 0 0 .25em;align-self:flex-start}textarea{resize:none}main.editor section{margin:0 2em}input[type=submit]{margin-top:2em}.delete,.edit{border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;outline:0;background-color:var(--primaryDefault);color:#fff;cursor:pointer}.timelineHeader{font-weight:400}div.editorContainer,div.projectsGrid{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:2em;margin-bottom:.5em}div.editorContainer>*,div.projectsGrid>*{width:45%}main.editor section{display:none;flex-direction:column}section#curriculumVitae{display:flex}div.modifyBtnContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:.5em;width:100%}div.companyAreaContainer,div.dateContainer{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1em;margin-bottom:.5em}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae .timelineItem,section#projects .projItem{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:1rem;position:relative}section#curriculumVitae .timelineItem{border:2px solid var(--timelineItemBrdr);color:#fff;background-color:var(--primaryHover)}section#curriculumVitae .timelineItem.editing{color:#000;border:5px solid var(--primaryDefault);padding:.5em}section#curriculumVitae .timelineItem.editing{background-color:#fff}form div.gradeContainer.formControl{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}section#curriculumVitae form.timelineItem:not(.editing) .delete,section#curriculumVitae form.timelineItem:not(.editing) .edit{color:var(--primaryHover);background-color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.dateContainer{display:none}section#curriculumVitae form.timelineItem.editing .timelineHeader{display:none}section#curriculumVitae form.timelineItem.editing div.gradeContainer.formControl{gap:1em;margin-bottom:.5em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText,section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl input,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input,section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea,section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{outline:0;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl>*,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl>*{color:#e5e5e5}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText{color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input{padding:0 .25em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) div.formControl .courseText{padding:0}section#curriculumVitae form.timelineItem:not(.editing) input[type=submit]{display:none}.courseText{resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer input{width:30%}section#projects #projList .projItem{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:0 auto;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack)}section#projects #projList{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}section#projects #projList .projItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .projItem .linkContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .linkContainer .btn{padding:.25em .5em}section#projects #isMainProject{width:auto}section#projects form.projItem.editing div.linkContainer,section#projects form.projItem.editing img.displayedImage,section#projects form.projItem:not(.editing) div.formControl.gitContainer,section#projects form.projItem:not(.editing) div.formControl.imageContainer,section#projects form.projItem:not(.editing) div.formControl.isMainProject,section#projects form.projItem:not(.editing) div.formControl.viewProjContainer,section#projects form.projItem:not(.editing) input[type=submit]{display:none}section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{font-size:1.17em;font-weight:700}section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea,section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{color:#000}section#addPost form,section#editPost form{margin:auto 4rem 4rem}form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:2px solid var(--mutedGrey);box-shadow:0 3px 4px var(--mutedBlack)}form .formControl .ck.ck-editor__main .ck-content{border-top-right-radius:0;border-top-left-radius:0;border-top:inherit}form .formControl .ck-editor__editable{min-height:400px}section#editPost{justify-content:center}section#editPost h2{align-self:flex-start}section#editPost table{border-collapse:collapse;border-style:hidden;align-self:center;margin-bottom:5em}section#editPost table td,th{border:1px solid var(--mutedGrey);text-align:left;padding:8px;min-width:10rem}section#newsletter form{margin:0 5em}@media only screen and (max-width:75em){nav.sideNav .closeBtn{display:block}} \ No newline at end of file diff --git a/dist/editor/index.html b/dist/editor/index.html index 55b4b5a..af25dca 100644 --- a/dist/editor/index.html +++ b/dist/editor/index.html @@ -1 +1 @@ -Editor

Login To Editor

\ No newline at end of file +Editor

Login To Editor

Login with Jump Cloud
\ No newline at end of file diff --git a/src/api/user/userData.php b/src/api/user/userData.php index 0e42372..9ca9c4b 100644 --- a/src/api/user/userData.php +++ b/src/api/user/userData.php @@ -5,6 +5,7 @@ namespace api\user; use Firebase\JWT\JWT; use PDO; use function api\utils\dbConn; +use function api\utils\getSAMLSettings; use function api\utils\getSecretKey; require_once __DIR__ . "/../utils/config.php"; @@ -138,5 +139,38 @@ class userData return false; } + /** + * Get the SAML settings + * @return array - SAML settings + */ + public function getSamlConf(): array + { + return getSAMLSettings(); + } + + /** + * Check if the SAML user exists + * @param string $username - Username + * @param string $email - Email + * @return bool - True if the user exists, false if not + */ + public function checkSAMLUser(string $username, string $email): bool + { + $conn = dbConn(); + $stmt = $conn->prepare("SELECT * FROM users WHERE username = :username AND email = :email"); + $stmt->bindParam(":username", $username); + $stmt->bindParam(":email", $email); + $stmt->execute(); + + // set the resulting array to associative + $result = $stmt->fetchAll(PDO::FETCH_ASSOC); + + if ($result) + { + return true; + } + return false; + } + } \ No newline at end of file diff --git a/src/api/user/userRoutes.php b/src/api/user/userRoutes.php index 3471929..009b813 100644 --- a/src/api/user/userRoutes.php +++ b/src/api/user/userRoutes.php @@ -5,6 +5,8 @@ require_once __DIR__ . "/../utils/routesInterface.php"; require_once "userData.php"; use api\utils\routesInterface; +use OneLogin\Saml2\Auth; +use OneLogin\Saml2\Error; use Psr\Http\Message\ResponseInterface as Response; use Psr\Http\Message\ServerRequestInterface as Request; use Slim\App; @@ -12,14 +14,17 @@ use Slim\App; class userRoutes implements routesInterface { private userData $user; + private Auth $samlAuth; /** * constructor used to instantiate a base user routes, to be used in the index.php file. * @param App $app - the slim app used to create the routes + * @throws Error */ public function __construct(App $app) { $this->user = new userData(); + $this->samlAuth = new Auth($this->user->getSamlConf()); $this->createRoutes($app); } @@ -30,31 +35,9 @@ class userRoutes implements routesInterface */ public function createRoutes(App $app): void { - $app->post("/user/login", function (Request $request, Response $response) + $app->get("/user/login", function (Request $request, Response $response) { - // get request data - $data = $request->getParsedBody(); - - if (empty($data["username"]) || empty($data["password"])) - { - // uh oh user sent empty data - return $response->withStatus(400); - } - - if ($this->user->checkUser($data["username"], $data["password"])) - { - // yay, user is logged in - $_SESSION["token"] = $this->user->createToken($data["username"]); - $_SESSION["username"] = $data["username"]; - - $inactive = 60 * 60 * 48; // 2 days - $_SESSION["timeout"] = time() + $inactive; - - $response->getBody()->write(json_encode(array("token" => $_SESSION["token"]))); - return $response; - } - $response->getBody()->write(json_encode(array("error" => "Unauthorised"))); - return $response->withStatus(401); + $this->samlAuth->login(); }); $app->get("/user/logout", function (Request $request, Response $response) @@ -92,6 +75,20 @@ class userRoutes implements routesInterface }); + $app->get("/user/metadata", function (Request $request, Response $response) + { + $settings = $this->samlAuth->getSettings(); + $metadata = $settings->getSPMetadata(); + $errors = $settings->validateMetadata($metadata); + if (empty($errors)) + { + $response->getBody()->write($metadata); + return $response->withHeader("Content-Type", "text/xml"); + } + $response->getBody()->write(json_encode(array("error" => $errors))); + return $response->withStatus(500); + }); + $app->get("/user/checkResetEmail/{email}", function (Request $request, Response $response, array $args) { if (empty($args["email"])) @@ -139,6 +136,61 @@ class userRoutes implements routesInterface return $response->withStatus(401); }); + $app->post("/user/login", function (Request $request, Response $response) + { + // get request data + $data = $request->getParsedBody(); + + if (empty($data["username"]) || empty($data["password"])) + { + // uh oh user sent empty data + return $response->withStatus(400); + } + + if ($this->user->checkUser($data["username"], $data["password"])) + { + // yay, user is logged in + $_SESSION["token"] = $this->user->createToken($data["username"]); + $_SESSION["username"] = $data["username"]; + + $inactive = 60 * 60 * 48; // 2 days + $_SESSION["timeout"] = time() + $inactive; + + $response->getBody()->write(json_encode(array("token" => $_SESSION["token"]))); + return $response; + } + $response->getBody()->write(json_encode(array("error" => "Unauthorised"))); + return $response->withStatus(401); + }); + + $app->post("/user/acs", function (Request $request, Response $response) + { + $this->samlAuth->processResponse(); + + $attributes = $this->samlAuth->getAttributes(); +// $username = $attributes["username"][0]; +// $email = $attributes["email"][0]; + + $response->getBody()->write(json_encode($attributes)); + return $response; + +// if ($this->user->checkSAMLUser($username, $email)) +// { +// // yay, user is logged in +// $_SESSION["token"] = $this->user->createToken($username); +// $_SESSION["username"] = $username; +// $_SESSION["email"] = $email; +// +// $inactive = 60 * 60 * 48; // 2 days +// $_SESSION["timeout"] = time() + $inactive; +// +// return $response->withHeader("Location", "https://rohitpai.co.uk/editor/editor.html")->withStatus(302); +// } +// +// $response->getBody()->write(json_encode(array("error" => "Unauthorised"))); +// return $response->withStatus(401); + }); + $app->post("/user/changePassword", function (Request $request, Response $response) { if (empty($_SESSION["resetToken"]) && empty($_SESSION["resetEmail"])) diff --git a/src/blog/css/blogPosts.css b/src/blog/css/blogPosts.css index 48af883..d094e1d 100644 --- a/src/blog/css/blogPosts.css +++ b/src/blog/css/blogPosts.css @@ -190,6 +190,10 @@ div.categories { width: 100%; } +div.form input[type="submit"] { + align-self: flex-start; +} + .image img, .image_resized img { max-width: 100%; -webkit-border-radius: 10px; diff --git a/src/css/templateStyles.css b/src/css/templateStyles.css index 902def3..c6265bc 100644 --- a/src/css/templateStyles.css +++ b/src/css/templateStyles.css @@ -162,11 +162,6 @@ div.form .formControl.passwordControl { display: block; } -form input[type="submit"], -div.form input[type="submit"] { - align-self: flex-start; -} - form .formControl input:not([type="submit"]), form .formControl textarea, form .formControl .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, form .formControl .ck.ck-editor__main .ck-content, div.menu input:not([type="submit"]), diff --git a/src/editor/css/login.css b/src/editor/css/login.css index 9010f1d..689328f 100644 --- a/src/editor/css/login.css +++ b/src/editor/css/login.css @@ -66,14 +66,22 @@ div#login input[type=submit]{ margin: 0; } - - div.btnContainer { - width: 100%; + width: 60%; display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; + flex-direction: column; + justify-content: center; + align-items: stretch; + gap: 1em; +} + +div.btnContainer a { + justify-content: center; + text-transform: unset; +} + +form div.btnContainer input[type="submit"] { + align-self: stretch; } div.btnContainer a:not(.btn) { diff --git a/src/editor/index.html b/src/editor/index.html index dbd1fe1..7a7b95e 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -32,8 +32,9 @@
- - Reset Password + Login with Jump Cloud +
@@ -54,7 +55,8 @@
- Login +
@@ -75,7 +77,9 @@
- Resend Email +
@@ -102,7 +106,7 @@
- Login +