Commit c312f09c authored by Nicolas Lenz's avatar Nicolas Lenz

Finish new width

parent 7a5dd1f6
......@@ -24,27 +24,20 @@
</div>
</div>
<div id="navbar">
<div id="navbar-inner">
<div>
<!-- Links before the active one -->
</div>
<a href="index.xhtml" class="active">HOME</a>
<div>
<!-- Links after the active one -->
</div>
</div>
</div>
<div id="navbar"><div id="navbar-inner">
<a href="index.xhtml" class="active">Home</a>
</div></div>
<div id="main">
<div class="box" id="welcome">
<div class="box" id="portrait">
<img src="res/nicolas.jpg" alt="Portrait"/>
</div>
<div class="box" id="welcome">
<h1>Welcome!</h1>
<p>
My name is <span class="small-caps">Nicolas Lenz</span>, I am 20 years old and I currently study computer science at Technical University Dortmund in Germany.
My name is <span class="small-caps">Nicolas Lenz</span>, I am 21 years old and I currently study computer science at Technical University Dortmund in Germany.
</p>
</div>
<div class="box" id="contact">
<h2>Contact</h2>
<ul>
......@@ -69,6 +62,7 @@
<div class="box" id="projects">
<h2>Projects</h2>
<ul>
<li><b><a href="https://git.eisfunke.com/web/online-lenz.de">online-lenz.de</a>:</b> The source code of this page.</li>
<li><b><a href="https://eisfunke.com">eisfunke.com</a>:</b> My blog about technology, science, politics and photography.</li>
<li><b><a href="https://git.eisfunke.com/research/katrin">katrin</a>:</b> The vague idea of a innovative, dependently-typed functional programming and markup language.</li>
</ul>
......
......@@ -16,6 +16,9 @@ body {
@extend .bg-background-very-dark;
}
$content-width: 65rem;
// Headers and text
.sans {
......@@ -93,6 +96,10 @@ code {
background-color: rgba(black, 20%);
}
div {
box-sizing: border-box;
}
// Lists
ul {
......@@ -121,11 +128,6 @@ a {
img {
margin: 5px;
&[src="res/nicolas.jpg"] {
float: left;
height: 260px;
margin: -10px 15px -10px -10px;
}
&[src="res/nicolaslenz-qr.svg"] {
height: 180px;
}
......@@ -137,7 +139,6 @@ img {
width: 100%;
height: 40vh;
// Sets the header image height to 40% of the viewport.
// padding-left: 50px
background-image: url("../res/header.jpg");
background-repeat: no-repeat;
background-position: center center;
......@@ -148,9 +149,10 @@ img {
text-shadow: 0 0 8px black;
z-index: 800;
div {
max-width: 75rem;
max-width: $content-width;
margin: auto auto;
width: 100%;
padding: 10px;
}
h1 {
font-weight: 900;
......@@ -171,33 +173,22 @@ img {
}
#navbar-inner {
margin: auto auto;
display: flex;
color: white;
position: sticky;
position: -webkit-sticky;
top: 0;
max-width: 75rem;
width: 100%;
height: 50px;
z-index: 1000;
div {
float: left;
height: 100%;
&:first-child {
padding-left: 50px;
height: 100%;
box-shadow: 0 0 5px 1px black;
}
&:last-child {
height: 100%;
flex-grow: 1;
box-shadow: 0 0 5px 1px black;
}
}
margin: auto auto;
padding-left: 10px;
padding-right: 10px;
display: flex;
color: white;
position: sticky;
position: -webkit-sticky;
top: 0;
max-width: $content-width;
width: 100%;
height: 50px;
//z-index: 1000;
a {
font-size: 1.5rem;
font-weight: 200;
text-transform: uppercase;
color: white;
text-decoration: none;
text-align: center;
......@@ -210,14 +201,14 @@ img {
padding-left: 15px;
padding-right: 15px;
margin: 0;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
text-shadow: 0 0 2.5px rgba(0, 0, 0, 0.95);
transition: background-color 0.5s;
&.active {
z-index: -20;
@extend .bg-primary-light;
}
&:hover {
@extend .bg-primary-dim;
}
&:hover {
@extend .bg-primary-dim;
}
}
}
......@@ -226,12 +217,16 @@ img {
#main {
margin: auto auto;
padding: 5px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
max-width: 75rem;
max-width: $content-width;
width: 100%;
left: 0;
& .breaker {
width: 100%;
height: 0;
margin: 0;
padding: 0;
}
}
.box {
......@@ -242,24 +237,32 @@ img {
color: white;
}
#welcome {
flex-basis: 32rem;
#portrait {
flex-basis: 0;
background-color: transparent;
max-width: 260px;
img[src="res/nicolas.jpg"] {
float: left;
max-height: 260px;
margin: -10px -10px -10px -10px;
}
}
#contact {
flex-basis: 21rem;
#welcome {
flex-basis: 13rem;
flex-grow: 100;
}
#qr {
flex-basis: auto;
#contact {
flex-basis: 23rem;
}
#involvements {
flex-basis: 28rem;
flex-basis: 30rem;
}
#projects {
flex-basis: 25rem;
flex-basis: 24rem;
}
#interests {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment