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

Use SCSS instead of Sass syntax, max-width for page initial development

parent dc2b6f15

makefile

+3 −3
Original line number Diff line number Diff line 
SASS=sass --style compressed

SASS=sass -s expanded



RSYNC_COPY=rsync -a --delete

RSYNC_DEPLOY=rsync -rzp --delete



SASS_SRC=$(wildcard src/style/*.sass) $(wildcard src/style/*.scss)

#SASS_SRC=$(wildcard src/style/*.scss)

#SASS_OUT=$(patsubst src/style/%,out/style/%,$(patsubst %.sass,%.css,$(SASS_SRC)))



HTML_SRC=$(wildcard src/*.xhtml)
@@ -29,7 +29,7 @@ out/res: src/res 
out/%.xhtml: src/%.xhtml

	cp src/*.xhtml out



out/style/stylesheet.css: $(SASS_SRC) | out/style

out/style/stylesheet.css: src/style/stylesheet.scss | out/style

	$(SASS) $< $@



out/style:

src/index.xhtml

+8 −6
Original line number Diff line number Diff line
@@ -25,6 +25,7 @@ 
        </div>



        <div id="navbar">

            <div id="navbar-inner">

                <div>

                    <!-- Links before the active one -->

                </div>
@@ -33,6 +34,7 @@ 
                    <!-- Links after the active one -->

                </div>

            </div>

        </div>



        <div id="main">

            <div class="box" id="welcome">

src/style/stylesheet.sass

deleted100644 → 0
+0 −235
Original line number Diff line number Diff line 
@import "font/metropolis/font.css"

@import "font/libertine/font.css"

@import "font/source-code-pro/font.css"



@import colors





// Root



\:root

    font-family: "Metropolis"

    font-size: 1.2rem



body

    margin: 0

    @extend .bg-background-very-dark





// Headers and text



.sans

    font-family: "Metropolis"



.serif

    font-family: "Linux Libertine"



.humanist

    font-family: "Linux Biolinum"



.monospace

    font-family: "Source Code Pro"



.small-caps

    font-variant: small-caps



.center

    text-align: center



h1

    font-weight: bold

    font-size: 1.7rem

    margin: 5px



h2

    font-weight: 600

    font-size: 1.5rem

    margin: 5px



    &.serif, &.humanist

        font-weight: bold

        font-size: 1.5rem

        margin: 5px



h3

    font-weight: 600

    font-size: 1.3rem

    margin: 5px



    &.serif, &.humanist

        font-weight: bold

        font-size: 1.3rem

        margin: 5px



p

    font-weight: 300

    font-size: 1.1rem

    margin: 5px



b

    font-weight: bold



i, emph

    font-style: italic



small

    font-size: 0.8rem



code

    @extend .monospace

    background-color: rgba(black, 20%)



// Lists



ul

    font-weight: 300

    font-size: 1.1rem

    margin: 5px

    padding-left: 20px

    list-style-type: square



li

    margin-top: 0.3rem

    margin-bottom: 0.3rem





// Links



a

    &:link

        @extend .fg-secondary-extreme-bright

    &:visited

        @extend .fg-secondary-bright



img

    margin: 5px

    &[src="res/nicolas.jpg"]

        float: left

        height: 240px

        margin-right: 15px

    &[src="res/nicolaslenz-qr.svg"]

        height: 180px





// Header



#header

    width: calc(100% - 50px)

    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

    background-size: cover



    color: #ffffff

    display: flex

    align-items: center

    text-shadow: 0 0 8px #000000

    z-index: 800



    h1

        font-weight: 900

        font-size: 4rem

        margin-bottom: 0

    p

        margin-top: 0

        font-size: 1.5rem





// Navbar



#navbar

    @extend .bg-primary-medium

    margin: 0

    display: flex

    color: #ffffff

    position: sticky

    position: -webkit-sticky

    top: 0

    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 #000000

        &:last-child

            height: 100%

            flex-grow: 1

            box-shadow: 0 0 5px 1px #000000

    a

        font-size: 1.5rem

        font-weight: 200

        color: #ffffff

        text-decoration: none

        text-align: center



        display: flex

        justify-content: center

        align-items: center

        float: left

        height: calc(100% - 3px)



        padding-top: 3px

        padding-left: 15px

        padding-right: 15px



        margin: 0

        text-shadow: 0 0 3px rgba(0, 0, 0, 0.9)

        transition: background-color 0.5s



        &.active

            z-index: -20



        &:hover

            @extend .bg-primary-dim



// Main part



#main

    margin: 0

    padding: 5px

    box-sizing: border-box

    display: flex

    flex-wrap: wrap

    width: 100%

    left: 0



.box

    margin: 5px

    padding: 10px

    flex-grow: 1

    @extend .bg-background-dim

    color: #ffffff



#welcome

    flex-basis: 32rem

#contact

    flex-basis: 21rem

#qr

    flex-basis: auto

#involvements

    flex-basis: 28rem

#projects

    flex-basis: 25rem

#interests

    flex-basis: 20rem

#footer

    flex-basis: 100%





// Palette



.colorbox

    width: 100%

    height: 50px

    text-align: center

    line-height: 50px

    font-weight: bold

    text-shadow: 0 0 2px black

src/style/stylesheet.scss

0 → 100644
+282 −0
Original line number Diff line number Diff line 
@import "font/metropolis/font.css";

@import "font/libertine/font.css";

@import "font/source-code-pro/font.css";



@import "colors";



// Root



:root {

    font-family: "Metropolis";

    font-size: 1.2rem;

}



body {

    margin: 0;

    @extend .bg-background-very-dark;

}



// Headers and text



.sans {

    font-family: "Metropolis";

}



.serif {

    font-family: "Linux Libertine";

}



.humanist {

  font-family: "Linux Biolinum";

}



.monospace {

  font-family: "Source Code Pro";

}



.small-caps {

  font-variant: small-caps;

}



.center {

  text-align: center;

}



h1 {

  font-weight: bold;

  font-size: 1.7rem;

  margin: 5px;

}



h2 {

    font-weight: 600;

    font-size: 1.5rem;

    margin: 5px;

    &.serif, &.humanist {

        font-weight: bold;

        font-size: 1.5rem;

        margin: 5px;

    }

}



h3 {

  font-weight: 600;

  font-size: 1.3rem;

  margin: 5px;

  &.serif, &.humanist {

    font-weight: bold;

    font-size: 1.3rem;

    margin: 5px;

  }

}



p {

  font-weight: 300;

  font-size: 1.1rem;

  margin: 5px;

}



b {

  font-weight: bold;

}



i, emph {

  font-style: italic;

}



small {

  font-size: 0.8rem;

}



code {

  @extend .monospace;

  background-color: rgba(black, 20%);

}



// Lists



ul {

  font-weight: 300;

  font-size: 1.1rem;

  margin: 5px;

  padding-left: 20px;

  list-style-type: square;

}



li {

  margin-top: 0.3rem;

  margin-bottom: 0.3rem;

}



// Links



a {

  &:link {

    @extend .fg-secondary-extreme-bright;

  }

  &:visited {

    @extend .fg-secondary-bright;

  }

}



img {

  margin: 5px;

  &[src="res/nicolas.jpg"] {

    float: left;

    height: 260px;

    margin: -10px 15px -10px -10px;

  }

  &[src="res/nicolaslenz-qr.svg"] {

    height: 180px;

  }

}



// Header



#header {

    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;

    background-size: cover;

    color: white;

    display: flex;

    align-items: center;

    text-shadow: 0 0 8px black;

    z-index: 800;

    div {

        max-width: 75rem;

        margin: auto auto;

        width: 100%;

    }

    h1 {

        font-weight: 900;

        font-size: 4rem;

        margin-bottom: 0;

    }

    p {

        margin-top: 0;

        font-size: 1.5rem;

    }

}



// Navbar



#navbar {

    @extend .bg-primary-medium;

    width: 100%;

}



#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;

          }

  }

    a {

        font-size: 1.5rem;

        font-weight: 200;

        color: white;

        text-decoration: none;

        text-align: center;

        display: flex;

        justify-content: center;

        align-items: center;

        float: left;

        height: calc(100% - 3px);

        padding-top: 3px;

        padding-left: 15px;

        padding-right: 15px;

        margin: 0;

        text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);

        transition: background-color 0.5s;

        &.active {

            z-index: -20;

        }

            &:hover {

                @extend .bg-primary-dim;

            }

    }

}



// Main part



#main {

    margin: auto auto;

    padding: 5px;

    box-sizing: border-box;

    display: flex;

    flex-wrap: wrap;

    max-width: 75rem;

    width: 100%;

    left: 0;

}



.box {

    margin: 5px;

    padding: 10px;

    flex-grow: 1;

    @extend .bg-background-dim;

    color: white;

}



#welcome {

    flex-basis: 32rem;

}



#contact {

    flex-basis: 21rem;

}



#qr {

    flex-basis: auto;

}



#involvements {

    flex-basis: 28rem;

}



#projects {

    flex-basis: 25rem;

}



#interests {

    flex-basis: 20rem;

}



#footer {

    flex-basis: 100%;

}



// Palette



.colorbox {

    width: 100%;

    height: 50px;

    text-align: center;

    line-height: 50px;

    font-weight: bold;

    text-shadow: 0 0 2px black;

}