Improved cv 2.0.0

css/cv.css

@@ -0,0 +1,292 @@
+
+/* Override default styles */
+:root {
+  --bgPage: #18181b;
+  --teal: #006d85;
+  --lightTeal: #00b6d0;
+
+  --streamYellow: #ffa044;
+  --streamYellow2: #ebac56;
+  --streamDarkestTeal: #002736;
+  --streamDarkTeal: #004f59;
+}
+
+:root * {
+  font-family: 'Noto Sans', sans-serif;
+}
+
+:root *::selection {
+  background-color: var(--teal);
+}
+
+body {
+  padding: 8px!important;
+  box-sizing: border-box;
+  line-height: normal;
+  background-color: var(--bgPage);
+}
+
+h1, h2, h3 {
+  color: white;
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+h2 {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+h3 {
+  font-size: larger;
+  font-weight: bold;
+}
+
+h1, h2, h3 {
+  line-height: normal;
+  margin: 0px;
+  border: 0px;
+  padding: 0px;
+}
+
+ul {
+  list-style: inside;
+  line-height: 2.5em;
+  margin: 0px;
+  border: 0px;
+  padding: 0px;
+}
+
+/* Custom styles (mobile-first) */
+.my-nav {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  grid-area: top;
+  padding: 0.5em!important;
+  align-items: center;
+  background-color: var(--streamDarkTeal);
+}
+
+.my-container {
+  display: grid;
+  grid-auto-rows: min-content;
+  grid-gap: 0.5em;
+}
+
+.my-grid {
+  display: grid;
+  grid-auto-rows: min-content;
+  grid-gap: 0.5em;
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.my-button, p {
+  margin: 0px;
+  border: 0px;
+  padding: 0px;
+}
+
+.my-flag {
+  height: 1em;
+  width: 1.5em;
+  align-self: center;
+}
+
+.my-logo {
+  height: 2em;
+  width: 2em;
+  align-self: center;
+  background-color: rgba(0, 0, 0, 0)!important;
+}
+
+.my-logo-big {
+  height: 4em;
+  width: 4em;
+  align-self: center;
+  background-color: rgba(0, 0, 0, 0)!important;
+}
+
+.mu {
+  height: 5em;
+  width: auto;
+  float: inline-end;
+}
+
+.imgLi {
+  float: left;
+  list-style-position: inside;
+  width: fit-content;
+  clear: left;
+}
+
+.imgLi::marker {
+  color: var(--lightTeal);
+}
+
+.imgDiv { 
+  display: flex;
+  float: right;
+  gap: 0.5em;
+}
+
+.langOption {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: center;
+  gap: 0.5em;
+  border-radius: 2px;
+  padding: 1em;
+  font-size: 1em;
+  background-color: var(--lightTeal);
+}
+
+.langOption:hover, .langSelected {
+  background-color: var(--streamYellow);
+}
+
+.undecoratedLink {
+  text-decoration: none;
+  color: black;
+}
+
+#inspiration {
+  color: var(--lightTeal);
+}
+
+.my-main {
+  display: flex;
+  flex-direction: column;
+  padding: 2em;
+  background-color: var(--streamDarkestTeal);
+  grid-area: main;
+}
+
+.my-header {
+  color: white;
+  background-color: rgba(255, 255, 255, 0.01);
+  grid-column: 1/-1;
+  margin-bottom: 0.5em!important;
+  border-left: 2px solid white!important;
+  padding: 0.5em!important;
+}
+
+.my-section {
+  background-color: rgba(255, 255, 255, 0.01);
+  border-left: 2px solid white!important;
+  padding: 0.5em!important;
+}
+
+.my-card {
+  color: white;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  border-radius: 0.25rem;
+  padding: 1em;
+  background-color: rgba(255, 255, 255, 0.05);
+  font-size: large;
+  grid-column: 1/-1;
+}
+
+.my-card:hover {
+  box-shadow: 0px 0px 5px 1px var(--streamYellow);
+}
+
+.my-card a {
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.05);
+  color: var(--lightTeal);
+}
+
+.my-card a:hover {
+  background-color: var(--streamYellow2);
+  color: black;
+}
+
+.progressBar {
+  display: grid;
+  gap: 0.5em;
+  float: right;
+  grid-template-columns: repeat(5, 1fr);
+  height: 1em;
+  width: 100%;
+  padding: 0.2em;
+  box-sizing: border-box;
+}
+
+.progressBlock {
+  background-color: var(--lightTeal);
+}
+
+.linkImg:hover {
+  height: 2.1em;
+  width: 2.1em;
+  background-color: var(--streamYellow)!important;
+  border: 2px solid var(--streamYellow);
+  box-shadow: 0px 0px 5px 1px var(--streamYellow);
+}
+
+.my-color-black {
+  color: black;
+}
+
+@media (min-width: 1225px) {
+  body {
+    display: grid;
+    grid-template-areas: 
+      "top top"
+      "main main";
+    grid-template-rows: min-content 1fr;
+  }
+
+  .my-nav {
+    grid-area: top;
+    flex-direction: row;
+  }
+
+  .langOption {
+    display: flex;
+    width: auto;
+  }
+
+  #inspiration {
+    margin-left: auto;
+  }
+
+  #goals {
+    grid-row: 1;
+    grid-column: 1/3!important;
+  }
+
+  #languages {
+    grid-row: 1;
+    grid-column: 3/4!important;
+  }
+
+  #contact {
+    grid-row: 1;
+    grid-column: 4/6!important;
+  }
+
+  #experience {
+    grid-row: 2;
+    grid-column: 1/2!important;
+  }
+
+  #competences {
+    grid-row: 2;
+    grid-column: 2/4!important;
+  }
+
+  #other {
+    grid-row: 2;
+    grid-column: 4/6!important;
+  }
+
+}