Code refactoring

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;
   }

assets/css/baseof.css

@@ -13,21 +13,14 @@
 }
 
 :root {
-  /* Colors */
   --black: #131314;
   --white: white;
-  --crimson: #BD1839;
+  --crimson: #bd1839;
-  --light-gray: #E7E7E7;
+  --light-gray: #e7e7e7;
-
-  /* Background colors */
   --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 {
+a, button {
-  border-left: 1px solid var(--text);
+  cursor: pointer;
-  height: 24px;
-  opacity: 0.25;
 }
 
-hr {
+@media only screen and (max-width: 1024px) {
-  color: var(--text);
+  main h1 {
-  opacity: 0.25;
+    font-size: 2.5rem;
+  }
+
+  main h2 {
+    font-size: 1.75rem;
+  }
+
+  main h3 {
+    font-size: 1rem;
+  }
 }

assets/css/contact.css

@@ -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;
-  }
-}
-

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-dark-background: #F3F3F3;
-  --second-action-light-background: #ececec;
+  --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 {
+main section {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-}
-
-main p {
-  margin-bottom: 3rem;
-}
-
-section {
   margin-bottom: 5rem;
 }
 
@@ -72,19 +61,7 @@ main #blog > div:first-of-type {
 }
 
 @media only screen and (max-width: 1024px) {
-  main h1 {
+  main section {
-    font-size: 2rem;
-  }
-
-  main h2 {
-    font-size: 1.75rem;
-  }
-
-  main p {
-    margin-bottom: 1rem;
-  }
-
-  section {
     margin-bottom: 2rem;
   }
 

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;
-  }
-}

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;
+  }
+}

assets/css/partials/about-card.css

@@ -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;
-  }
-}

assets/css/partials/breadcrumb.css

@@ -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;
-}

assets/css/partials/card.css

@@ -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;
-  }
-}

assets/css/partials/contact-form.css

@@ -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;
-}

assets/css/partials/footer.css

@@ -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;
-  }
-}

assets/css/partials/header.css

@@ -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;
-  }
-}

assets/css/partials/pagination.css

@@ -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;
-  }
-}

assets/css/partials/table-of-contents.css

@@ -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;
-}

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 {

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" >}}
+![Project screenshot](react-weather-app-screenshot.png)

layouts/_default/baseof.html

@@ -1,5 +1,8 @@
-{{ $styles := resources.Get "css/baseof.css" | toCSS | minify }}
+{{ $baseStyles := resources.Get "css/baseof.css" | toCSS | minify }}
-{{ $scripts := resources.Get "js/baseof.js" | js.Build | 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 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{{ $favIcon16.Permalink }}">
     <link rel="icon" type="image/x-icon" href="{{ $favIcon.Permalink }}">
 
-    <link rel="stylesheet" href="{{ $styles.Permalink }}">
+    <link rel="stylesheet" href="{{ $baseStyles.Permalink }}">
+    <link rel="stylesheet" href="{{ $partialsStyles.Permalink }}">
     {{ block "styles" . }}{{ end }}
 
     <title>
@@ -33,11 +37,13 @@
       {{ end }}
     </title>
 
-    <script defer src="{{ $scripts.Permalink }}"></script>
+    <script defer src="{{ $baseScripts.Permalink }}"></script>
-    {{ block "scripts" . }}{{ end }}
+    <script defer src="{{ $mobileNavigationScripts.Permalink }}"></script>
+    <script defer src="{{ $contactFormScripts.Permalink }}"></script>
   </head>
   <body>
     {{ partial "header.html" . }}
+    {{ partial "mobile-navigation.html" . }}
     
     <main>
       {{ block "main" . }}{{ end }}

layouts/_default/contact.html

@@ -1,9 +1,3 @@
-{{ define "styles" }}
-    {{ $styles := resources.Get "css/contact.css" | toCSS | minify }}
-
-    <link rel="stylesheet" href="{{ $styles.Permalink }}" />
-{{ end }}
-
 {{ define "main" }}
     {{ partial "breadcrumb.html" . }}
 

layouts/partials/about-card.html

@@ -1,7 +1,3 @@
-{{ $styles := resources.Get "css/partials/about-card.css" | toCSS | minify }}
-
-<link rel="stylesheet" href="{{ $styles.Permalink }}" />
-
 {{ $cv := resources.Get "cv.pdf" }}
 {{ $faceImage := resources.Get "images/borded-face.png" }}
 

layouts/partials/breadcrumb.html

@@ -1,7 +1,3 @@
-{{ $styles := resources.Get "css/partials/breadcrumb.css" | toCSS | minify }}
-
-<link rel="stylesheet" href="{{ $styles.Permalink }}" />
-
 <nav aria-label="breadcrumb" class="breadcrumb">
   <ol>
     {{ range .Ancestors.Reverse }}

layouts/partials/card.html

@@ -1,7 +1,3 @@
-{{ $styles := resources.Get "css/partials/card.css" | toCSS | minify }}
-
-<link rel="stylesheet" href="{{ $styles.Permalink }}" />
-
 <article class="card">
   <div>
     <h3>{{ .Title }}</h3>

layouts/partials/contact-form.html

@@ -1,9 +1,3 @@
-{{ $styles := resources.Get "css/partials/contact-form.css" | toCSS | minify }}
-{{ $scripts := resources.Get "js/partials/contact-form.js" | js.Build | minify }}
-
-<link rel="stylesheet" href="{{ $styles.Permalink }}" />
-<script defer src="{{ $scripts.Permalink }}"></script>
-
 <form
   action="{{ .Site.Params.formSpreeURL }}"
   method="POST"

layouts/partials/footer.html

@@ -1,14 +1,10 @@
-{{ $styles := resources.Get "css/partials/footer.css" | toCSS | minify }}
-
-<link rel="stylesheet" href="{{ $styles.Permalink }}" />
-
 {{ $faceImage := resources.Get "images/small-face.png" }}
 {{ $cv :=resources.Get "cv.pdf" }}
 
 <footer>
   <div id="footer-face">
     <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi" />
-    <h4>Hazem Krimi</h4>
+    <span>Hazem Krimi</span>
   </div>
   <div id="links">
     <a href="https://www.linkedin.com/in/hazemkrimi" target="_blank">

layouts/partials/header.html

@@ -1,16 +1,10 @@
-{{ $styles := resources.Get "css/partials/header.css" | toCSS | minify }}
-{{ $scripts := resources.Get "js/partials/header.js" | js.Build | minify }}
-
-<link rel="stylesheet" href="{{ $styles.Permalink }}">
-<script defer src="{{ $scripts.Permalink }}"></script>
-
 {{ $faceImage := resources.Get "images/small-face.png" }}
 {{ $cv := resources.Get "cv.pdf" }}
 
 <header>
   <div id="header-face">
     <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face" />
-    <h3>Hazem Krimi</h3>
+    <span>Hazem Krimi</span>
   </div>
   <div id="menus">
     {{ range site.Menus.main.Sort.ByWeight }}
@@ -39,26 +33,3 @@
     {{ readFile "assets/icons/close.svg" | safeHTML }}
   </span>
 </header>
-
-<nav id="mobile-navigation">
-  <div id="menus">
-    {{ range site.Menus.main.Sort.ByWeight }}
-      <a {{ printf "href=%q" .URL | safeHTMLAttr }}>{{ .Name }}</a>
-    {{ end }}
-  </div>
-  <hr>
-  <div id="links">
-    <span
-      class="theme-toggler"
-    >
-      {{ readFile "assets/icons/moon.svg" | safeHTML }}
-      {{ readFile "assets/icons/sun.svg" | safeHTML }}
-    </span>
-    <a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a>
-    <a href="mailto:me@hazemkrimi.tech" target="_blank"> {{ readFile "assets/icons/mail.svg" | safeHTML }} </a>
-    <a href="{{ urls.JoinPath .Site.BaseURL "index.xml" }}" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a>
-    <a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a>
-    <a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a>
-    <a href="https://www.linkedin.com/in/hazemkrimi" target="_blank"> {{ readFile "assets/icons/linkedin.svg" | safeHTML }} </a>
-  </div>
-</nav>

layouts/partials/mobile-navigation.html

@@ -0,0 +1,24 @@
+{{ $cv := resources.Get "cv.pdf" }}
+
+<nav id="mobile-navigation">
+    <div id="menus">
+      {{ range site.Menus.main.Sort.ByWeight }}
+        <a {{ printf "href=%q" .URL | safeHTMLAttr }}>{{ .Name }}</a>
+      {{ end }}
+    </div>
+    <hr>
+    <div id="links">
+      <span
+        class="theme-toggler"
+      >
+        {{ readFile "assets/icons/moon.svg" | safeHTML }}
+        {{ readFile "assets/icons/sun.svg" | safeHTML }}
+      </span>
+      <a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a>
+      <a href="mailto:me@hazemkrimi.tech" target="_blank"> {{ readFile "assets/icons/mail.svg" | safeHTML }} </a>
+      <a href="{{ urls.JoinPath .Site.BaseURL "index.xml" }}" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a>
+      <a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a>
+      <a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a>
+      <a href="https://www.linkedin.com/in/hazemkrimi" target="_blank"> {{ readFile "assets/icons/linkedin.svg" | safeHTML }} </a>
+  </div>
+</nav>

layouts/partials/pagination.html

@@ -1,8 +1,5 @@
-{{ $styles := resources.Get "css/partials/pagination.css" | toCSS | minify }}
-
-<link rel="stylesheet" href="{{ $styles.Permalink }}" />
-
 {{ $paginator := .Paginator }}
+
 {{ if gt $paginator.TotalPages 1 }}
     <div class="pagination">
         <a class="first {{ if eq $paginator.PageNumber $paginator.First.PageNumber }} active {{ end }}" href="{{ $paginator.First.URL }}">

layouts/partials/table-of-contents.html

@@ -1,7 +1,3 @@
-{{ $styles := resources.Get "css/partials/table-of-contents.css" | toCSS | minify }}
-
-<link rel="stylesheet" href="{{ $styles.Permalink }}" />
-
 {{ with .TableOfContents }}
     <aside id="table-of-contents">
         <h3>Table of contents</h3>