Commit c312f09c authored by Nicolas Lenz's avatar Nicolas Lenz ❄️
Browse files

Finish new width

parent 7a5dd1f6

src/index.xhtml

+8 −14
Original line number Diff line number Diff line
@@ -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>

src/style/stylesheet.scss

+50 −47
Original line number Diff line number Diff line
@@ -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;
@@ -172,32 +174,21 @@ img { 


#navbar-inner {

    margin: auto auto;

    padding-left: 10px;

    padding-right: 10px;

    display: flex;

    color: white;

    position: sticky;

    position: -webkit-sticky;

    top: 0;

  max-width: 75rem;

    max-width: $content-width;

    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;

          }

  }

    //z-index: 1000;

    a {

        font-size: 1.5rem;

        font-weight: 200;

        text-transform: uppercase;

        color: white;

        text-decoration: none;

        text-align: center;
@@ -210,10 +201,10 @@ 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;
@@ -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 {