Change the header css

2 years ago · 38a093a083
parent 3a084d6c50
commit 38a093a083
5 changed files with 78 additions and 292 deletions
--- a/sandkasten/src/app/app.component.css
+++ b/sandkasten/src/app/app.component.css
@ -0,0 +1 @@
+
--- a/sandkasten/src/app/editor/editor.component.css
+++ b/sandkasten/src/app/editor/editor.component.css
@ -1,5 +1,9 @@
+.code_input {
+  padding: 2rem;
+}
+
 .code_input .code_input_textarea {
    background-color: #cccccc;
    min-height: 80vh;
    width: 100%;
-}
+}
--- a/sandkasten/src/app/header/header.component.css
+++ b/sandkasten/src/app/header/header.component.css
@ -1,308 +1,74 @@
-.sandkasten-logo {
-  width: 3%;
-}
-
-.gitea-logo {
-  width: 10%;
-}
-a {
-    margin: 0 10px;
-    color: #333;
-    text-decoration: none;
-
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-.active {
-    color: #666;
-    text-decoration: underline;
-}
-
-:host {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 14px;
-  color: #333;
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+.header-card {

-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 8px 0;
-}
-
-p {
-  margin: 0;
-}
-
-.spacer {
-  flex: 1;
 }

 .toolbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  background-color: #1976d2;
-  color: white;
-  font-weight: 600;
-}
-
-.toolbar img {
-  margin: 0 16px;
-}
+  background-color: #1976D2;
+  padding:  .5rem 1rem;

-.toolbar #gitea-logo {
-  height: 40px;
-  margin: 0 16px;
-}
-
-.toolbar #gitea-logo:hover {
-  opacity: 0.8;
-}
-
-.content {
  display: flex;
-  margin: 82px auto 32px;
-  padding: 0 16px;
-  max-width: 960px;
-  flex-direction: column;
+  flex-direction: row;
  align-items: center;
+  justify-content: space-between;
+  gap: 4rem;
 }

-svg.material-icons {
-  height: 24px;
-  width: auto;
-}
-
-svg.material-icons:not(:last-child) {
-  margin-right: 8px;
-}
-
-.card svg.material-icons path {
-  fill: #888;
-}
-
-.card-container {
+.right_part {
  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-top: 16px;
+  flex-direction: row;
+  gap: 4rem;
 }

-.card {
-  all: unset;
-  border-radius: 4px;
-  border: 1px solid #eee;
-  background-color: #fafafa;
-  height: 40px;
-  width: 200px;
-  margin: 0 8px 16px;
-  padding: 16px;
+.right_part .logo_container {
  display: flex;
  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.2s ease-in-out;
-  line-height: 24px;
-}
-
-.card-container .card:not(:last-child) {
-  margin-right: 0;
+  gap: 2rem;
 }

-.card.card-small {
-  height: 16px;
-  width: 168px;
-}
-
-.card-container .card:not(.highlight-card) {
-  cursor: pointer;
-}
-
-.card-container .card:not(.highlight-card):hover {
-  transform: translateY(-3px);
-  box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
-}
+.right_part .menu {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;

-.card-container .card:not(.highlight-card):hover .material-icons path {
-  fill: rgb(105, 103, 103);
+  align-items: center;
 }

-.card.highlight-card {
-  background-color: #1976d2;
+.right_part .menu a {
  color: white;
-  font-weight: 600;
-  border: none;
-  width: auto;
-  min-width: 30%;
-  position: relative;
-}
-
-.card.card.highlight-card span {
-  margin-left: 60px;
-}
-
-svg#rocket {
-  width: 80px;
-  position: absolute;
-  left: -10px;
-  top: -24px;
-}
-
-svg#rocket-smoke {
-  height: calc(100vh - 95px);
-  position: absolute;
-  top: 10px;
-  right: 180px;
-  z-index: -10;
-}
-
-a,
-a:visited,
-a:hover {
-  color: #1976d2;
  text-decoration: none;
 }

-a:hover {
-  color: #125699;
-}
-
-.terminal {
-  position: relative;
-  width: 80%;
-  max-width: 600px;
-  border-radius: 6px;
-  padding-top: 45px;
-  margin-top: 8px;
-  overflow: hidden;
-  background-color: rgb(15, 15, 16);
-}
-
-.terminal::before {
-  content: "\2022 \2022 \2022";
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 4px;
-  background: rgb(58, 58, 58);
-  color: #c2c3c4;
-  width: 100%;
-  font-size: 2rem;
-  line-height: 0;
-  padding: 14px 0;
-  text-indent: 4px;
+.sandkasten-logo {
+  width: 4rem;
+  height: auto;
+  aspect-ratio: 1;
 }

-.terminal pre {
-  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+.logo_title {
+  font-size: 1.5rem;
+  font-weight: 500;
  color: white;
-  padding: 0 1rem 1rem;
-  margin: 0;
-}
-
-.circle-link {
-  height: 40px;
-  width: 40px;
-  border-radius: 40px;
-  margin: 8px;
-  background-color: white;
-  border: 1px solid #eeeeee;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  transition: 1s ease-out;
 }

-.circle-link:hover {
-  transform: translateY(-0.25rem);
-  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-}
-
-footer {
-  margin-top: 8px;
-  display: flex;
-  align-items: center;
-  line-height: 20px;
-}
-
-footer a {
+.menu {
  display: flex;
-  align-items: center;
+  flex-direction: row;
+  gap: 2rem;
+  color: white;
 }

-.github-star-badge {
-  color: #24292e;
+.left_part {
  display: flex;
+  flex-direction: row;
  align-items: center;
-  font-size: 12px;
-  padding: 3px 10px;
-  border: 1px solid rgba(27,31,35,.2);
-  border-radius: 3px;
-  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
-  margin-left: 4px;
-  font-weight: 600;
-}
-
-.github-star-badge:hover {
-  background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
-  border-color: rgba(27,31,35,.35);
-  background-position: -.5em;
-}
-
-.github-star-badge .material-icons {
-  height: 16px;
-  width: 16px;
-  margin-right: 4px;
-}
-
-svg#clouds {
-  position: fixed;
-  bottom: -160px;
-  left: -230px;
-  z-index: -10;
-  width: 1920px;
+  gap: 2rem;
+  color: white;
 }

-/* Responsive Styles */
-@media screen and (max-width: 767px) {
-  .card-container > *:not(.circle-link) ,
-  .terminal {
-    width: 100%;
-  }
-
-  .card:not(.highlight-card) {
-    height: 16px;
-    margin: 8px 0;
-  }

-  .card.highlight-card span {
-    margin-left: 72px;
-  }
-
-  svg#rocket-smoke {
-    right: 120px;
-    transform: rotate(-5deg);
-  }
+.gitea_logo_container .gitea-logo {
+  width: 4rem;
+  height: auto;
+  aspect-ratio: 1;
 }

-@media screen and (max-width: 575px) {
-  svg#rocket-smoke {
-    display: none;
-    visibility: hidden;
-  }
-}
--- a/sandkasten/src/app/header/header.component.html
+++ b/sandkasten/src/app/header/header.component.html
@ -1,28 +1,39 @@
 <div class="header-card">
  <div class="toolbar" role="banner">

-    <img class="sandkasten-logo"
-        routerLink=""
-        routerLinkActive="active"
-        [routerLinkActiveOptions]="{ exact: true }"
-        [src]="sandkasten_logo" alt="Logo-Sandkasten" />
-    <h2>{{ title }}</h2>
+    <div class="right_part">
+      <div class="logo_container">
+        <img class="sandkasten-logo"
+            routerLink=""
+            routerLinkActive="active"
+            [routerLinkActiveOptions]="{ exact: true }"
+            [src]="sandkasten_logo" alt="Logo-Sandkasten" />
+        <h2 class="logo_title">{{ title }}</h2>
+      </div>

-    <div class="spacer"></div>

-    <a href="https://codefirst.iut.uca.fr/git/sandkasten">
-      <img class="gitea-logo"
-         [src]="gitea_logo" alt="Logo-Gitea" />
-    </a>
-    <p>Version : {{ version }}</p>
+      <nav class="menu">
+        <a
+          routerLink=""
+          routerLinkActive="active"
+          [routerLinkActiveOptions]="{ exact: true }"
+        >Accueil</a>

-    <nav>
-      <a
-        routerLink="editor"
-        routerLinkActive="active"
-        [routerLinkActiveOptions]="{ exact: true }"
-        >Éditeur</a
-      >
-    </nav>
+        <a
+          routerLink="editor"
+          routerLinkActive="active"
+          [routerLinkActiveOptions]="{ exact: true }"
+        >Editeur</a>
+      </nav>
+    </div>
+
+    <div class="left_part">
+      <a href="https://codefirst.iut.uca.fr/git/sandkasten"
+          class="gitea_logo_container">
+        <img class="gitea-logo"
+             [src]="gitea_logo" alt="Logo-Gitea" />
+      </a>
+      <p>Version : {{ version }}</p>
+    </div>
  </div>
 </div>
--- a/sandkasten/src/styles.css
+++ b/sandkasten/src/styles.css
@ -2,6 +2,10 @@
    font-family: Roboto, Helvetica, sans-serif;
 }

+body {
+  margin: 0;
+}
+
 button {
    background-color: transparent;
    box-sizing: border-box;
@ -17,4 +21,4 @@ button {
        transform: translate(1px, 1px);
        box-shadow: lightgray 0 0 5px;
    }
-}
+}