From 38a093a08323556b4c43fb62462a7a6a595c7fdd Mon Sep 17 00:00:00 2001 From: cofrizot Date: Thu, 21 Sep 2023 11:45:20 +0200 Subject: [PATCH] Change the header css --- sandkasten/src/app/app.component.css | 1 + .../src/app/editor/editor.component.css | 6 +- .../src/app/header/header.component.css | 306 +++--------------- .../src/app/header/header.component.html | 51 +-- sandkasten/src/styles.css | 6 +- 5 files changed, 78 insertions(+), 292 deletions(-) diff --git a/sandkasten/src/app/app.component.css b/sandkasten/src/app/app.component.css index e69de29..8b13789 100644 --- a/sandkasten/src/app/app.component.css +++ b/sandkasten/src/app/app.component.css @@ -0,0 +1 @@ + diff --git a/sandkasten/src/app/editor/editor.component.css b/sandkasten/src/app/editor/editor.component.css index ca8f153..0f3be89 100644 --- 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%; -} \ No newline at end of file +} diff --git a/sandkasten/src/app/header/header.component.css b/sandkasten/src/app/header/header.component.css index eb97749..67d2bd2 100644 --- 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; - } -} diff --git a/sandkasten/src/app/header/header.component.html b/sandkasten/src/app/header/header.component.html index 1468a9e..1e88440 100644 --- a/sandkasten/src/app/header/header.component.html +++ b/sandkasten/src/app/header/header.component.html @@ -1,28 +1,39 @@
diff --git a/sandkasten/src/styles.css b/sandkasten/src/styles.css index cd925f9..73b28b1 100644 --- 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; } -} \ No newline at end of file +}