diff --git a/.idea/csv-plugin.xml b/.idea/csv-plugin.xml new file mode 100644 index 0000000..482de61 --- /dev/null +++ b/.idea/csv-plugin.xml @@ -0,0 +1,23 @@ + + + + + + \ No newline at end of file diff --git a/src/App.js b/src/App.js index 733a026..3876028 100644 --- a/src/App.js +++ b/src/App.js @@ -14,8 +14,10 @@ class App extends Component {
+
+

✈️Hugos Lieblingsflugzeuge✈️

+
-

✈️Hugos Lieblingsflugzeuge✈️

@@ -44,10 +46,10 @@ class Navigation extends Component { Über Hugo
  • - Militärflugzeuge + Militär
    Erster Weltkrieg - Zwischenkriegszeit + Zwischenkriegs​zeit Zweiter Weltkrieg Kalter Krieg Moderne @@ -62,11 +64,11 @@ class Navigation extends Component {
  • - Sportflugzeuge + Sport
    Doppeldecker - Propellerflugzeuge - Segelflugzeuge + Propeller + Segel Andere
  • diff --git a/src/app.css b/src/app.css index e29a7c9..d96a7ec 100644 --- a/src/app.css +++ b/src/app.css @@ -10,34 +10,37 @@ body { color: white; } -#parent { - display: grid; - grid-template-rows: 100px auto; - grid-template-areas: "header" - "main"; -} - p { width: 1000px; } main { grid-area: main; + margin-top: 100px; } :root { - --nav-color: rgb(176, 194, 206); --nav-hover-color: darkgrey; } header { grid-area: header; + position: fixed; + top: 0; + width: 100%; + z-index: 1; + + display: grid; + grid-template-columns: 500px auto; + overflow: visible; + + margin-top: 10px; + margin-left: 10px; } header h1 { - margin-top: 50px; - margin-left: 10px; - margin-bottom: 0; + margin: 0; + width: 500px; } main { @@ -50,14 +53,8 @@ nav { margin: 0; padding: 0; overflow: visible; - background-color: var(--nav-color); - width: 100%; + display: inline-block; - position: fixed; - top: 0; - height: 50px; - - z-index: 1; } /*main ul*/ @@ -65,59 +62,52 @@ nav ul { height: 100%; margin: 0; padding: 0; + display: inline-block; } /*nav li item*/ nav ul li { float: left; - border-right: 1px solid gray; - height: 100%; - width: 15%; position: relative; display: inline-block; - + width: 200px; font-size: 1.8em; - background-color: var(--nav-color); cursor: pointer; margin: auto; } -/*nav li item on hover*/ -nav ul li:hover { - background-color: darkgray; - color: var(--nav-hover-color); - transition-duration: 0.4s; -} /*all nav a*/ nav ul li a { display: block; text-align: center; text-decoration: none; - color: black; - width: 100%; - height: 100%; - background-color: var(--nav-color); - border: none; - cursor: pointer; -} - -/*all nav a focus - remove outline so it looks like a normal link*/ -nav ul li a:focus { - outline: 0; + color: white; + transition-duration: 0.3s; } /*all nav a hover*/ nav ul li a:hover { background-color: var(--nav-hover-color); + transition-duration: 0.3s; +} + +/*Only on the top elements*/ +nav ul li > a { + border-right: 1px solid gray; +} + +/*don't show border on the right*/ +nav ul li:last-child > a { + border: none; } /*drop menu*/ nav ul li .content { display: none; - background-color: var(--nav-color); z-index: 1; width: 100%; + background-color: #282c34; } /*drop menu main hover*/