diff --git a/style/main.css b/style/main.css index d0ec4c8..33e2656 100644 --- a/style/main.css +++ b/style/main.css @@ -3,7 +3,7 @@ html, body { } .mainContainer { - width: 85%; + width: 1024px; margin: auto; min-height: 100%; } @@ -200,13 +200,116 @@ img, iframe { max-width: 100%; } -@media only screen and (max-width : 640px) { +@media only screen and (max-width : 1024px) { nav { display: block; overflow: hidden; background-color: #93ff83; } + .mainContainer { + width: 968px; + } + + + .mainContainer > nav > a { + margin: 10px; + } + + .mainContainer > nav > a > div { + transform: initial; + top: 0; + position: static; + } + + .floatRight { + float: none; + } + + .mainContainer img, + .mainContainer iframe { + margin: 15px 0; + } +} + + + + +@media only screen and (max-width : 968px) { + nav { + display: block; + overflow: hidden; + background-color: #93ff83; + } + + .mainContainer { + width: 800px; + } + + + .mainContainer > nav > a { + margin: 10px; + } + + .mainContainer > nav > a > div { + transform: initial; + top: 0; + position: static; + } + + .floatRight { + float: none; + } + + .mainContainer img, + .mainContainer iframe { + margin: 15px 0; + } +} + +@media only screen and (max-width : 800px) { + nav { + display: block; + overflow: hidden; + background-color: #93ff83; + } + + .mainContainer { + width: 640px; + } + + + .mainContainer > nav > a { + margin: 10px; + } + + .mainContainer > nav > a > div { + transform: initial; + top: 0; + position: static; + } + + .floatRight { + float: none; + } + + .mainContainer img, + .mainContainer iframe { + margin: 15px 0; + } +} + + +@media only screen and (max-width : 640px) { + nav { + display: block; + overflow: hidden; + background-color: #93ff83; + } + + .mainContainer { + width: 600px; + } .mainContainer > nav > a { margin: 10px; }