diff --git a/assets/css/about.css b/assets/css/about.css index 99a6386..d71dd95 100644 --- a/assets/css/about.css +++ b/assets/css/about.css @@ -1,21 +1,8 @@ -main h2 { - font-size: 3rem; - margin-bottom: 1rem; -} - -main p { - margin-bottom: 3rem; -} - section img { float: right; } @media only screen and (max-width: 1024px) { - main h2 { - font-size: 1.75rem; - } - section img { display: none; } diff --git a/assets/css/baseof.css b/assets/css/baseof.css index 4349ea1..4bda437 100644 --- a/assets/css/baseof.css +++ b/assets/css/baseof.css @@ -13,21 +13,14 @@ } :root { - /* Colors */ --black: #131314; --white: white; - --crimson: #BD1839; - --light-gray: #E7E7E7; - - /* Background colors */ + --crimson: #bd1839; + --light-gray: #e7e7e7; --dark-background: #1d1b1b; --light-background: #fbfbfb; - - /* Radiuses */ --card-radius: 1.875rem; --form-radius: 0.563rem; - - /* Shadows */ --shadow: 0px 4px 8px rgba(0, 0, 0, 0.04); } @@ -51,6 +44,12 @@ body { color: var(--text); isolation: isolate; + user-select: text; +} + +::selection { + background: var(--text); + color: var(--background); } #links .linkedin, @@ -104,17 +103,46 @@ h6 { overflow-wrap: break-word; } +main h1, +main h2, +main h3 { + margin-bottom: 1rem; +} + +main p { + margin-bottom: 2rem; +} + +main h1 { + font-size: 4rem; +} + +main h2 { + font-size: 3rem; +} + +main h3 { + font-size: 2rem; +} + a { color: var(--text); } -.vertical-separator { - border-left: 1px solid var(--text); - height: 24px; - opacity: 0.25; +a, button { + cursor: pointer; } -hr { - color: var(--text); - opacity: 0.25; +@media only screen and (max-width: 1024px) { + main h1 { + font-size: 2.5rem; + } + + main h2 { + font-size: 1.75rem; + } + + main h3 { + font-size: 1rem; + } } diff --git a/assets/css/contact.css b/assets/css/contact.css deleted file mode 100644 index 66031f3..0000000 --- a/assets/css/contact.css +++ /dev/null @@ -1,15 +0,0 @@ -main h2 { - font-size: 3rem; - margin-bottom: 1rem; -} - -main p { - margin-bottom: 3rem; -} - -@media only screen and (max-width: 1024px) { - main h2 { - font-size: 1.75rem; - } -} - diff --git a/assets/css/index.css b/assets/css/index.css index 92826f5..97aeea4 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1,14 +1,12 @@ :root { --first-action-dark-background: #353535; --first-action-light-background: var(--black); - --second-action-dark-background: #f3f3f3; - --second-action-light-background: #ececec; + --second-action-dark-background: #F3F3F3; + --second-action-light-background: #ECECEC; } main h1 { - font-size: 4rem; text-transform: capitalize; - margin-bottom: 1rem; } main h1 span, @@ -51,16 +49,7 @@ main #intro #action-buttons a:last-of-type { color: var(--black); } -main h2 { - font-size: 3rem; - margin-bottom: 1rem; -} - -main p { - margin-bottom: 3rem; -} - -section { +main section { margin-bottom: 5rem; } @@ -72,19 +61,7 @@ main #blog > div:first-of-type { } @media only screen and (max-width: 1024px) { - main h1 { - font-size: 2rem; - } - - main h2 { - font-size: 1.75rem; - } - - main p { - margin-bottom: 1rem; - } - - section { + main section { margin-bottom: 2rem; } diff --git a/assets/css/list.css b/assets/css/list.css index 4c9c414..8ceb2c3 100644 --- a/assets/css/list.css +++ b/assets/css/list.css @@ -1,16 +1,8 @@ -main section { - margin-top: 2rem; -} - -main h2 { - font-size: 3rem; - margin-bottom: 1rem; -} - main #tags { display: flex; align-items: center; column-gap: 1rem; + margin-bottom: 2rem; } main #tags a { @@ -24,9 +16,3 @@ main #tags a { main #tags .selected { background-color: var(--crimson); } - -@media only screen and (max-width: 1024px) { - main h2 { - font-size: 1.75rem; - } -} diff --git a/assets/css/partials.css b/assets/css/partials.css new file mode 100644 index 0000000..279f978 --- /dev/null +++ b/assets/css/partials.css @@ -0,0 +1,407 @@ +:root { + --about-card-light-background: #ececec; + --about-card-dark-background: var(--black); + --button-light-background: var(--black); + --button-dark-background: #353535; + --card-light-background: #ececec; + --card-dark-background: var(--black); + --input-light-background: #ececec; + --input-dark-background: #2d2d2d; + --footer-light-background: #ececec; + --footer-dark-background: var(--black); + --header-light-background: #ececec; + --header-dark-background: #676666; + --nav-light-background: #ececec; + --nav-dark-background: var(--black); + --toc-light-background: #f2f2f2; + --toc-dark-background: var(--black); +} + +#about-card { + background-color: var(--about-card-background); + color: var(--text); + border-radius: 1.875rem; + padding: 3.5rem 2.5rem; + margin-bottom: 2rem; + display: flex; + column-gap: 2rem; +} + +#about-card img { + width: 8.9375rem; + height: 8.9375rem; +} + +#about-card h3 { + margin-bottom: 1.75rem; + text-transform: capitalize; +} + +#about-card p { + margin-bottom: 4rem; +} + +#about-card #links { + display: flex; + align-items: center; + justify-content: space-between; +} + +.breadcrumb { + margin-bottom: 1.5rem; +} + +.breadcrumb ol { + padding-left: 0; +} + +.breadcrumb li { + display: inline; +} + +.breadcrumb li:not(:last-child)::after { + content: '›'; + margin: 0rem 0.5rem; +} + +.breadcrumb a { + text-transform: capitalize; +} + +.breadcrumb .tag { + text-transform: lowercase; +} + +.card { + background-color: var(--card-background); + color: var(--text); + border-radius: 1.875rem; + padding: 3.5rem 2.5rem; + margin-bottom: 2rem; +} + +.card h3 { + margin-bottom: 1.75rem; + text-transform: capitalize; +} + +.card .date { + font-weight: bold; +} + +.card p { + margin-top: 1rem; +} + +.card #links { + display: flex; + align-items: center; + justify-content: space-between; +} + +.card .read-more, +.card .demo { + display: inline-flex; + align-items: center; + column-gap: 0.25rem; +} + +.card .demo { + background-color: #353535; + color: var(--white); + border-radius: 0.4375rem; + text-decoration: none; + padding: 0.5rem 1rem; +} + +.card .demo .eye { + stroke: var(--white); +} + +input, +textarea, +button, +#submission-status { + border: none; + border-radius: 0.5625rem; + color: var(--text); +} + +input, +textarea { + padding: 1.2rem 1.9rem; + background-color: var(--input-background); +} + +textarea { + resize: none; +} + +form { + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; + row-gap: 1.7rem; +} + +form input, +form textarea { + width: 100%; +} + +form div { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + row-gap: 1.7rem; +} + +form button, +form #submission-status { + padding: 1rem 2.8rem; + background-color: var(--button-background); + color: var(--white); +} + +form #submission-status { + width: auto; + display: none; +} + +footer #links, +header #links, +#mobile-navigation #links { + display: flex; + align-items: center; + column-gap: 1.5rem; +} + +footer #links a, +header #links a, +header #menus a, +#mobile-navigation #links a { + display: inline-flex; + align-items: center; + justify-content: center; +} + +footer { + width: 100%; + padding: 3rem 8rem; + margin-top: 2.5rem; + display: flex; + align-items: center; + flex-direction: column; + row-gap: 5rem; + background-color: var(--footer-background); + color: var(--text); +} + +footer #footer-face { + display: flex; + align-items: center; + column-gap: 0.625rem; +} + +footer #copyright { + font-size: 0.875rem; +} + +header, +#mobile-navigation { + width: 85%; + border-radius: 0.75rem; + text-transform: uppercase; + color: var(--text); +} + +header { + margin: 2.5rem auto; + padding: 0.938rem 2.188rem; + background-color: var(--header-background); + display: flex; + align-items: center; + justify-content: space-between; +} + +#mobile-navigation { + background-color: var(--nav-background); + display: none; + position: fixed; + flex-direction: column; +} + +header #header-face { + display: flex; + align-items: center; + column-gap: 0.625rem; +} + +header #header-face span, +footer #footer-face span { + font-size: 1.17rem; + font-weight: 600; +} + +header #menus a, +#mobile-navigation #menus a { + text-decoration: none; + font-weight: 600; + font-size: 15px; +} + +header #menus { + display: flex; + align-items: center; + column-gap: 1.563rem; +} + +#mobile-navigation #menus { + display: flex; + flex-direction: column; + align-items: end; + justify-content: center; + row-gap: 3.125rem; +} + +#mobile-navigation hr { + margin-top: 3.125rem; + margin-bottom: 1.25rem; +} + +#mobile-navigation #links { + display: flex; + justify-content: end; + column-gap: 1.5rem; +} + +#mobile-navigation #links .theme-toggler { + margin-right: auto; +} + +header #nav-toggler { + display: none; +} + +.theme-toggler, +#nav-toggler { + cursor: pointer; +} + +.pagination { + display: flex; + justify-content: end; + align-items: center; +} + +.pagination { + display: flex; + column-gap: 1rem; +} + +.pagination .pagination ul, +.pagination li { + list-style: none; +} + +.pagination a { + border-radius: 0.5625rem; + background-color: #8b8b8b; + color: var(--white); + padding: 0.25rem 0.75rem; + display: inline-flex; + justify-content: center; + align-items: center; + text-decoration: none; +} + +.pagination a.first, +.pagination a.last { + background-color: #606060; +} + +.pagination a.active { + background-color: #232323; +} + +#table-of-contents { + margin-top: 3rem; + height: 30rem; + max-height: 20rem; + padding: 1.2rem 1.6rem; + border-radius: 0.75rem; + background-color: var(--toc-background); +} + +#table-of-contents nav ul { + list-style-type: none; + padding-inline-start: 2rem; + margin-bottom: 0rem; +} + +#table-of-contents nav > ul:first-of-type { + padding: 0rem; +} + +.vertical-separator { + border-left: 1px solid var(--text); + height: 24px; + opacity: 0.25; +} + +hr { + color: var(--text); + opacity: 0.25; +} + +@media only screen and (max-width: 768px) { + .pagination { + justify-content: center; + } +} + +@media only screen and (max-width: 1024px) { + #about-card { + flex-direction: column; + row-gap: 2rem; + } + + #about-card img { + align-self: center; + } + + .card { + padding: 2.5rem 1.5rem; + } + + .card h3 { + margin-bottom: 1.25rem; + } + + .card p { + margin-bottom: 1.75rem; + } + + footer { + padding: 3rem 5rem; + row-gap: 3rem; + } + + header, + #mobile-navigation { + margin: 1.5rem auto; + padding: 0.938rem 1.25rem; + } + + header #menus, + header #links { + display: none; + } + + header #nav-toggler { + display: initial; + } +} diff --git a/assets/css/partials/about-card.css b/assets/css/partials/about-card.css deleted file mode 100644 index 806818e..0000000 --- a/assets/css/partials/about-card.css +++ /dev/null @@ -1,46 +0,0 @@ -:root { - --about-card-light-background: #f2f2f2; - --about-card-dark-background: #131212; -} - -#about-card { - background-color: var(--about-card-background); - color: var(--text); - border-radius: 1.875rem; - padding: 3.5rem 2.5rem; - margin-bottom: 2rem; - display: flex; - column-gap: 2rem; -} - -#about-card img { - width: 8.9375rem; - height: 8.9375rem; -} - -#about-card h3 { - font-size: 2rem; - margin-bottom: 1.75rem; - text-transform: capitalize; -} - -#about-card p { - margin-bottom: 4rem; -} - -#about-card #links { - display: flex; - align-items: center; - justify-content: space-between; -} - -@media only screen and (max-width: 1024px) { - #about-card { - flex-direction: column; - row-gap: 2rem; - } - - #about-card img { - align-self: center; - } -} diff --git a/assets/css/partials/breadcrumb.css b/assets/css/partials/breadcrumb.css deleted file mode 100644 index 83903ca..0000000 --- a/assets/css/partials/breadcrumb.css +++ /dev/null @@ -1,24 +0,0 @@ -.breadcrumb { - margin-bottom: 1.5rem; -} - -.breadcrumb ol { - padding-left: 0; -} - -.breadcrumb li { - display: inline; -} - -.breadcrumb li:not(:last-child)::after { - content: '›'; - margin: 0rem .5rem; -} - -.breadcrumb a { - text-transform: capitalize; -} - -.breadcrumb .tag { - text-transform: lowercase; -} diff --git a/assets/css/partials/card.css b/assets/css/partials/card.css deleted file mode 100644 index de1c110..0000000 --- a/assets/css/partials/card.css +++ /dev/null @@ -1,67 +0,0 @@ -:root { - --card-light-background: #F2F2F2; - --card-dark-background: #131212; -} - -.card { - background-color: var(--card-background); - color: var(--text); - border-radius: 1.875rem; - padding: 3.5rem 2.5rem; - margin-bottom: 2rem; -} - -.card h3 { - font-size: 2rem; - margin-bottom: 1.75rem; - text-transform: capitalize; -} - -.card .date { - font-weight: bold; -} - -.card p { - margin-top: 1rem; - margin-bottom: 3rem; -} - -.card #links { - display: flex; - align-items: center; - justify-content: space-between; -} - -.card .read-more, -.card .demo { - display: inline-flex; - align-items: center; - column-gap: 0.25rem; -} - -.card .demo { - background-color: #353535; - color: var(--white); - border-radius: 0.4375rem; - text-decoration: none; - padding: 0.5rem 1rem; -} - -.card .demo .eye { - stroke: var(--white); -} - -@media only screen and (max-width: 1024px) { - .card { - padding: 2.5rem 1.5rem; - } - - .card h3 { - font-size: 1.5rem; - margin-bottom: 1.25rem; - } - - .card p { - margin-bottom: 1.75rem; - } -} diff --git a/assets/css/partials/contact-form.css b/assets/css/partials/contact-form.css deleted file mode 100644 index a4499db..0000000 --- a/assets/css/partials/contact-form.css +++ /dev/null @@ -1,62 +0,0 @@ -:root { - --input-light-background: #f3f3f3; - --input-dark-background: #2d2d2d; - --button-light-background: #131212; - --button-dark-background: #353535; -} - -input, -textarea, -button, -#submission-status { - border: none; - border-radius: 0.5625rem; - color: var(--text); -} - -input, -textarea { - padding: 1.2rem 1.9rem; - background-color: var(--input-background); -} - -textarea { - resize: none; -} - -form { - display: flex; - flex-direction: column; - align-items: start; - justify-content: center; - row-gap: 1.7rem; -} - -form input, -form textarea { - width: 100%; -} - -form div { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - row-gap: 1.7rem; -} - -form button, form #submission-status { - padding: 1rem 2.8rem; - background-color: var(--button-background); - color: var(--white); -} - -form #submission-status { - width: auto; - display: none; -} - -form button { - cursor: pointer; -} diff --git a/assets/css/partials/footer.css b/assets/css/partials/footer.css deleted file mode 100644 index 92d1f54..0000000 --- a/assets/css/partials/footer.css +++ /dev/null @@ -1,42 +0,0 @@ -:root { - --footer-light-background: #ECECEC; - --footer-dark-background: #131212; -} - -footer { - width: 100%; - padding: 3rem 8rem; - margin-top: 2.5rem; - - display: flex; - align-items: center; - flex-direction: column; - row-gap: 5rem; - - background-color: var(--footer-background); - color: var(--text); -} - -footer #footer-face { - display: flex; - align-items: center; - column-gap: 0.625rem; -} - -footer #links { - display: flex; - align-items: center; - column-gap: 1.5rem; -} - -footer #copyright { - font-size: 0.875rem; -} - -@media only screen and (max-width: 1024px) { - footer { - padding: 3rem 5rem; - - row-gap: 3rem; - } -} diff --git a/assets/css/partials/header.css b/assets/css/partials/header.css deleted file mode 100644 index 28df93d..0000000 --- a/assets/css/partials/header.css +++ /dev/null @@ -1,105 +0,0 @@ -:root { - --header-light-background: #ECECEC; - --header-dark-background: #676666; - --nav-light-background: #ECECEC; - --nav-dark-background: #121212; -} - -header, #mobile-navigation { - width: 85%; - border-radius: 0.75rem; - text-transform: uppercase; - color: var(--text); -} - -header { - margin: 2.5rem auto; - padding: 0.938rem 2.188rem; - - background-color: var(--header-background); - - display: flex; - align-items: center; - justify-content: space-between; -} - -#mobile-navigation { - background-color: var(--nav-background); - display: none; - position: fixed; - flex-direction: column; -} - -header #header-face { - display: flex; - align-items: center; - column-gap: 0.625rem; -} - -header #header-face h3 { - font-weight: 600; -} - -header #menus a, #mobile-navigation #menus a { - text-decoration: none; - font-weight: 600; - font-size: 15px; -} - -header #menus { - display: flex; - align-items: center; - column-gap: 1.563rem; -} - -#mobile-navigation #menus { - display: flex; - flex-direction: column; - align-items: end; - justify-content: center; - row-gap: 3.125rem; -} - -#mobile-navigation hr { - margin-top: 3.125rem; - margin-bottom: 1.25rem; -} - -header #links { - display: flex; - align-items: center; - column-gap: 1.5rem; -} - -#mobile-navigation #links { - display: flex; - justify-content: end; - column-gap: 1.5rem; -} - -#mobile-navigation #links .theme-toggler { - margin-right: auto; -} - -header #nav-toggler { - display: none; -} - -.theme-toggler, #nav-toggler { - cursor: pointer; -} - -@media only screen and (max-width: 1024px) { - header, #mobile-navigation { - margin: 1.5rem auto; - padding: 0.938rem 1.25rem; - } - - header #menus, header #links { - display: none; - } - - header #nav-toggler { - display: initial; - } -} \ No newline at end of file diff --git a/assets/css/partials/pagination.css b/assets/css/partials/pagination.css deleted file mode 100644 index 6641826..0000000 --- a/assets/css/partials/pagination.css +++ /dev/null @@ -1,41 +0,0 @@ -.pagination { - display: flex; - justify-content: end; - align-items: center; -} - -.pagination { - display: flex; - column-gap: 1rem; -} - -.pagination .pagination ul, -.pagination li { - list-style: none; -} - -.pagination a { - border-radius: 0.5625rem; - background-color: #8b8b8b; - color: var(--white); - padding: 0.25rem 0.75rem; - display: inline-flex; - justify-content: center; - align-items: center; - text-decoration: none; -} - -.pagination a.first, -.pagination a.last { - background-color: #606060; -} - -.pagination a.active { - background-color: #232323; -} - -@media only screen and (max-width: 768px) { - .pagination { - justify-content: center; - } -} diff --git a/assets/css/partials/table-of-contents.css b/assets/css/partials/table-of-contents.css deleted file mode 100644 index 20f7fe5..0000000 --- a/assets/css/partials/table-of-contents.css +++ /dev/null @@ -1,27 +0,0 @@ -:root { - --toc-light-background: #f2f2f2; - --toc-dark-background: #131212; -} - -#table-of-contents { - margin-top: 3rem; - height: 30rem; - max-height: 20rem; - padding: 1.2rem 1.6rem; - border-radius: 1.875rem; - background-color: var(--toc-background); -} - -#table-of-contents h3 { - margin-bottom: 1rem; -} - -#table-of-contents nav ul { - list-style-type: none; - padding-inline-start: 2rem; - margin-bottom: 0rem; -} - -#table-of-contents nav > ul:first-of-type { - padding: 0rem; -} diff --git a/assets/css/single.css b/assets/css/single.css index b41bb7d..69bcf79 100644 --- a/assets/css/single.css +++ b/assets/css/single.css @@ -8,11 +8,6 @@ main #metadata { margin-bottom: 2rem; } -main #metadata h1 { - font-size: 3rem; - margin-bottom: 1rem; -} - main #metadata div { min-width: 100%; display: flex; @@ -33,17 +28,8 @@ main #metadata #share { cursor: pointer; } -main #content h2, -main #content h3, -main #content h4 { - margin-bottom: 1rem; -} - -main #content p, main #content ul, main #content ol, -main #content img, -main #content figure, main #content .highlight { margin-bottom: 2rem; } @@ -66,10 +52,6 @@ main #content .highlight pre { } @media only screen and (max-width: 1024px) { - main #metadata h1 { - font-size: 2.5rem; - } - main #container { display: block; } @@ -79,7 +61,7 @@ main #content .highlight pre { } main #metadata div { - column-gap: 1rem; + column-gap: 0.75rem; } main #metadata div #share { diff --git a/assets/js/partials/contact-form.js b/assets/js/contact-form.js similarity index 100% rename from assets/js/partials/contact-form.js rename to assets/js/contact-form.js diff --git a/assets/js/partials/header.js b/assets/js/mobile-navigation.js similarity index 100% rename from assets/js/partials/header.js rename to assets/js/mobile-navigation.js diff --git a/content/projects/react-weather-app/index.md b/content/projects/react-weather-app/index.md index 7cba253..69514bc 100644 --- a/content/projects/react-weather-app/index.md +++ b/content/projects/react-weather-app/index.md @@ -18,4 +18,4 @@ This is a project that I made as a step in the interview process for my final ye ## Screenshots -{{< figure src="react-weather-app-screenshot.png" >}} \ No newline at end of file +![Project screenshot](react-weather-app-screenshot.png) \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4293e8c..4815bc7 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,8 @@ -{{ $styles := resources.Get "css/baseof.css" | toCSS | minify }} -{{ $scripts := resources.Get "js/baseof.js" | js.Build | minify }} +{{ $baseStyles := resources.Get "css/baseof.css" | toCSS | minify }} +{{ $partialsStyles := resources.Get "css/partials.css" | toCSS | minify }} +{{ $baseScripts := resources.Get "js/baseof.js" | js.Build | minify }} +{{ $mobileNavigationScripts := resources.Get "js/mobile-navigation.js" | js.Build | minify }} +{{ $contactFormScripts := resources.Get "js/contact-form.js" | js.Build | minify }} {{ $androidChromeIcon := resources.Get "android-chrome-192x192.png" }} {{ $appleTouchIcon := resources.Get "apple-touch-icon.png" }} @@ -24,7 +27,8 @@ - + + {{ block "styles" . }}{{ end }} @@ -33,11 +37,13 @@ {{ end }} - - {{ block "scripts" . }}{{ end }} + + + {{ partial "header.html" . }} + {{ partial "mobile-navigation.html" . }}
{{ block "main" . }}{{ end }} diff --git a/layouts/_default/contact.html b/layouts/_default/contact.html index d39d611..0f56bb2 100644 --- a/layouts/_default/contact.html +++ b/layouts/_default/contact.html @@ -1,9 +1,3 @@ -{{ define "styles" }} - {{ $styles := resources.Get "css/contact.css" | toCSS | minify }} - - -{{ end }} - {{ define "main" }} {{ partial "breadcrumb.html" . }} diff --git a/layouts/partials/about-card.html b/layouts/partials/about-card.html index aecd5a0..c3605f5 100644 --- a/layouts/partials/about-card.html +++ b/layouts/partials/about-card.html @@ -1,7 +1,3 @@ -{{ $styles := resources.Get "css/partials/about-card.css" | toCSS | minify }} - - - {{ $cv := resources.Get "cv.pdf" }} {{ $faceImage := resources.Get "images/borded-face.png" }} diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html index 961a5a5..910482b 100644 --- a/layouts/partials/breadcrumb.html +++ b/layouts/partials/breadcrumb.html @@ -1,7 +1,3 @@ -{{ $styles := resources.Get "css/partials/breadcrumb.css" | toCSS | minify }} - - -