Change color scheme and borders #3
3 changed files with 33 additions and 148 deletions
Change color scheme and borders
commit
c36dec0632
66
index.css
66
index.css
|
|
@ -1,7 +1,7 @@
|
|||
:root {
|
||||
font-family: "FreeSans", sans-serif;
|
||||
/* CS turquoise */
|
||||
--primary: #2dc2bf;
|
||||
--primary: #acaeae;
|
||||
/* TF blue */
|
||||
--secondary: #003d86;
|
||||
/* CAU purple */
|
||||
|
|
@ -15,7 +15,10 @@
|
|||
--dark-blue: #1c5287;
|
||||
--light-yellow: #f7deb6;
|
||||
--dark-yellow: #a66d11;
|
||||
--default-padding: calc((5 / 16) * 1rem)
|
||||
--border-radius-default: .5rem;
|
||||
--default-padding: calc((5 / 16) * 1rem);
|
||||
--box-border-color: lch(35.5% 23.9 194.33deg);
|
||||
--box-background-color: color-mix(in lab, lch(71.16% 40.5 194.33deg) 40%, lch(100% 0 0deg) 60%);
|
||||
}
|
||||
|
||||
.header, .header-inner {
|
||||
|
|
@ -99,8 +102,8 @@ h3 {
|
|||
}
|
||||
|
||||
.header-top img {
|
||||
max-height: 5rem;
|
||||
max-width: 10rem;
|
||||
height: 5rem;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.header-element, .menu-item {
|
||||
|
|
@ -170,16 +173,15 @@ body main {
|
|||
.infobox, form {
|
||||
width: clamp(370px, 66.66vw, 680px);
|
||||
margin: var(--default-padding);
|
||||
/* padding: var(--default-padding); */
|
||||
border-style: solid;
|
||||
border-color: var(--tertiary);
|
||||
border-width: var(--default-padding);
|
||||
border-radius: var(--default-padding);
|
||||
-webkit-border-radius: var(--default-padding);
|
||||
-moz-border-radius: var(--default-padding);
|
||||
-ms-border-radius: var(--default-padding);
|
||||
-o-border-radius: var(--default-padding);
|
||||
background-color: white;
|
||||
/*padding: var(--default-padding);
|
||||
*/
|
||||
border: 1px solid var(--box-border-color);
|
||||
border-radius: var(--border-radius-default);
|
||||
-webkit-border-radius: var(--border-radius-default);
|
||||
-moz-border-radius: var(--border-radius-default);
|
||||
-ms-border-radius: var(--border-radius-default);
|
||||
-o-border-radius: var(--border-radius-default);
|
||||
background-color: var(--box-background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -201,10 +203,6 @@ body main {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
form {
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
|
||||
form>* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -219,18 +217,18 @@ form>* {
|
|||
padding: var(--default-padding);
|
||||
text-decoration: none;
|
||||
background-color: var(--secondary);
|
||||
border-color: var(--primary);
|
||||
border-width: calc(var(--default-padding) * 0.6);
|
||||
border-radius: var(--default-padding);
|
||||
-webkit-border-radius: var(--default-padding);
|
||||
-moz-border-radius: var(--default-padding);
|
||||
-ms-border-radius: var(--default-padding);
|
||||
-o-border-radius: var(--default-padding);
|
||||
/* border: 1px solid var(--primary); */
|
||||
border-radius: var(--border-radius-default);
|
||||
-webkit-border-radius: var(--border-radius-default);
|
||||
-moz-border-radius: var(--border-radius-default);
|
||||
-ms-border-radius: var(--border-radius-default);
|
||||
-o-border-radius: var(--border-radius-default);
|
||||
padding: var(--border-radius-default);
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
border-color: var(--green);
|
||||
background-color: var(--light-green);
|
||||
border: none;
|
||||
background-color: var(--green);
|
||||
color: black;
|
||||
align-self: center;
|
||||
}
|
||||
|
|
@ -239,12 +237,10 @@ textarea, input[type="text"] {
|
|||
font-family: "FreeSans", sans-serif;
|
||||
font-size: 1rem;
|
||||
padding: var(--default-padding);
|
||||
border-radius: var(--default-padding);
|
||||
-webkit-border-radius: var(--default-padding);
|
||||
-moz-border-radius: var(--default-padding);
|
||||
-ms-border-radius: var(--default-padding);
|
||||
-o-border-radius: var(--default-padding);
|
||||
border: solid;
|
||||
border-width: calc(var(--default-padding) * 0.4);
|
||||
border-color: var(--primary);
|
||||
border-radius: var(--border-radius-default);
|
||||
-webkit-border-radius: var(--border-radius-default);
|
||||
-moz-border-radius: var(--border-radius-default);
|
||||
-ms-border-radius: var(--border-radius-default);
|
||||
-o-border-radius: var(--border-radius-default);
|
||||
border: 1px solid var(--box-border-color);
|
||||
}
|
||||
|
|
@ -38,7 +38,7 @@ if (isset($_POST["submit"])) {
|
|||
<header class="header">
|
||||
<nav class="header-inner">
|
||||
<div class="header-top">
|
||||
<a class="header-element" href="https://www.fs-infmath.uni-kiel.de/wiki/Hauptseite">
|
||||
<a class="header-element" href="https://fs-informatik.uni-kiel.de/">
|
||||
<img src="logo.svg">
|
||||
</a>
|
||||
<a class="header-element" href="https://www.fs-infmath.uni-kiel.de/kummerkasten/">
|
||||
|
|
|
|||
113
logo.svg
113
logo.svg
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 6.3 KiB |
Loading…
Add table
Add a link
Reference in a new issue