collapsed navbar background color

behaviour of minimum screen size
This commit is contained in:
lukas-heiligenbrunner 2020-03-16 20:24:03 +01:00
parent 7c082e0176
commit c7facbd23b
2 changed files with 41 additions and 37 deletions

View File

@ -1,6 +1,6 @@
body, html { body, html {
height: 100%; height: 100%;
scroll-behavior: smooth;
/*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/ /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
} }
@ -15,57 +15,77 @@ body, html {
color: white; color: white;
} }
.lightOpacity{ .lightOpacity {
opacity: 0.6; opacity: 0.6;
} }
.bigText{ .bigText {
transition-delay: 200ms; transition-delay: 200ms;
font-family: 'Helvetica Neue', fantasy; font-family: 'Helvetica Neue', fantasy;
-webkit-font-smoothing: antialiased -webkit-font-smoothing: antialiased
/* todo here!*/ /* todo here!*/
} }
#preTitle{ #preTitle {
opacity: 0.8; opacity: 0.8;
color: #fffd80;
} }
/* screen larger than 600px -- desktop */ /* screen larger than 600px -- desktop */
@media screen and (min-width: 601px) { @media screen and (min-width: 601px) {
#section1{ .tile {
min-height: 500px;
}
#section1 {
padding-top: 200px; padding-top: 200px;
} }
#preTitle{ #preTitle {
font-size: 35px; font-size: 35px;
} }
#titleText { #titleText {
font-size: 80px; font-size: 80px;
} }
#subTitleText{
#subTitleText {
font-size: 50px; font-size: 50px;
} }
#meaningFullSentence{
#meaningFullSentence {
width: 40%; width: 40%;
} }
} }
/* Screen smaller than 600px -- mobile */ /* Screen smaller than 600px -- mobile */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
#section1{ /*background color of collapsed navbar*/
.navbar-nav {
background: #311E25;
}
.tile {
min-height: 300px;
}
#section1 {
padding-top: 100px; padding-top: 100px;
} }
#preTitle{ #preTitle {
font-size: 15px; font-size: 15px;
} }
#titleText { #titleText {
font-size: 30px; font-size: 30px;
} }
#subTitleText{
#subTitleText {
font-size: 20px; font-size: 20px;
} }
#meaningFullSentence{
#meaningFullSentence {
width: 100%; width: 100%;
font-size: 13px; font-size: 13px;
} }

View File

@ -40,14 +40,8 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#section3">Projects</a> <a class="nav-link" href="#section3">Projects</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> <a class="nav-link" href="#section4">Contact</a>
Contact
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</a>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -62,8 +56,8 @@
<div class="bigText" id="titleText">Lukas Heiligenbrunner</div> <div class="bigText" id="titleText">Lukas Heiligenbrunner</div>
<div class="bigText lightOpacity" id="subTitleText">A creative IT Student</div> <div class="bigText lightOpacity" id="subTitleText">A creative IT Student</div>
<p id="meaningFullSentence" class="lightOpacity"> <p id="meaningFullSentence" class="lightOpacity">
I'm a software engineer based in Austria who loves to I'm a software engineer based in Austria who loves code
develop code and is always open for new projects. development and is always open for new projects and ideas.
</p> </p>
</div> </div>
</div> </div>
@ -71,7 +65,7 @@
<div id="section2" class="bg-warning tile"> <div id="section2" class="bg-warning tile">
<div class="container"> <div class="container">
<h1>Section 2</h1> <h1>About me</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
look at look at
the navigation bar while scrolling!</p> the navigation bar while scrolling!</p>
@ -82,7 +76,7 @@
</div> </div>
<div id="section3" class="bg-secondary tile"> <div id="section3" class="bg-secondary tile">
<div class="container"> <div class="container">
<h1>Section 3</h1> <h1>Projects</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
look at look at
the navigation bar while scrolling!</p> the navigation bar while scrolling!</p>
@ -91,20 +85,10 @@
the navigation bar while scrolling!</p> the navigation bar while scrolling!</p>
</div> </div>
</div> </div>
<div id="section41" class="bg-danger tile"> <div id="section4" class="bg-danger tile">
<div class="container"> <div class="container">
<h1>Section 4 Submenu 1</h1> <h1>Contact</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and <h3>Stay in Contact!</h3>
look at
the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
look at
the navigation bar while scrolling!</p>
</div>
</div>
<div id="section42" class="bg-info tile">
<div class="container">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
look at look at
the navigation bar while scrolling!</p> the navigation bar while scrolling!</p>