Skip to content

online-lenz.de
online-lenz.de
Commit 7a5dd1f6 authored by Nicolas Lenz's avatar Nicolas Lenz ❄
Browse files
Options

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

parent dc2b6f15
Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 244 deletions
makefile
View file @ 7a5dd1f6
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
View file @ 7a5dd1f6
......@@ -25,12 +25,14 @@
</div>
<div id="navbar">
<div>
<!-- Links before the active one -->
</div>
<a href="index.xhtml" class="active">HOME</a>
<div>
<!-- Links after the active one -->
<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>
......
src/style/stylesheet.sass deleted 100644 → 0
View file @ dc2b6f15
@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
View file @ 7a5dd1f6
@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;
}
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