Header
This commit is contained in:
parent
c9ed8ef573
commit
3568718f99
78
css/main.css
78
css/main.css
|
|
@ -487,15 +487,19 @@ textarea {
|
|||
/* @import 'font-awesome'; */
|
||||
/* Content
|
||||
--------------------------*/
|
||||
html {
|
||||
font-size: 62.5%; }
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
font-family: Open Sans, Helvetica, Arial, sans-serif;
|
||||
font-size: 12pt;
|
||||
font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 1.4rem;
|
||||
/* =14px */
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: auto; }
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: Open Sans, Helvetica, Arial, sans-serif;
|
||||
font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 1.2em;
|
||||
margin: 0.4em 0em; }
|
||||
|
|
@ -510,31 +514,6 @@ h2 {
|
|||
h3 {
|
||||
font-size: 1.25em; }
|
||||
|
||||
p {
|
||||
line-height: 1.45em;
|
||||
padding: 0.5em 0; }
|
||||
|
||||
ul li {
|
||||
margin: 0.3em 0em 0.3em 0.5em;
|
||||
list-style-position: inside;
|
||||
list-style-type: square;
|
||||
font-size: 1em; }
|
||||
ul li p {
|
||||
padding-left: 1em; }
|
||||
|
||||
a {
|
||||
color: #660000;
|
||||
-webkit-transition: color 0.2s ease;
|
||||
transition: color 0.2s ease; }
|
||||
a:hover, a:active, a:focus {
|
||||
color: #b30000; }
|
||||
a:active {
|
||||
position: relative;
|
||||
top: 1px; }
|
||||
|
||||
a.notdown:active {
|
||||
position: inherit; }
|
||||
|
||||
@media screen {
|
||||
a.external:after {
|
||||
content: "\00A0" "[" "\2197" "]"; } }
|
||||
|
|
@ -545,6 +524,49 @@ a.notdown:active {
|
|||
|
||||
/* Header
|
||||
--------------------------*/
|
||||
.oben {
|
||||
background-color: #f4f4f4;
|
||||
border-bottom: #8ec6f0 3px solid; }
|
||||
|
||||
.oben--logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 10px 0; }
|
||||
|
||||
.oben--menu {
|
||||
margin: 0 auto;
|
||||
padding-bottom: 16px;
|
||||
list-style: none;
|
||||
letter-spacing: -0.31em;
|
||||
text-align: center; }
|
||||
|
||||
.oben--menu--item {
|
||||
display: inline-block;
|
||||
letter-spacing: normal;
|
||||
background-color: #fff;
|
||||
border: 1px solid #3498e4;
|
||||
font-size: 1.2rem; }
|
||||
.oben--menu--item a {
|
||||
display: inline-block;
|
||||
color: #3498e4;
|
||||
padding: 4px 20px;
|
||||
text-decoration: none; }
|
||||
.oben--menu--item a:hover {
|
||||
background-color: #e8f3fc;
|
||||
border-radius: inherit; }
|
||||
.oben--menu--item:first-child {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px; }
|
||||
.oben--menu--item:last-child {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px; }
|
||||
|
||||
.oben--menu--item__active a {
|
||||
background-color: #3498e4;
|
||||
color: #fff; }
|
||||
.oben--menu--item__active a:hover {
|
||||
background-color: #3498e4; }
|
||||
|
||||
/* Content
|
||||
--------------------------*/
|
||||
.fa {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */body,mark{color:#000}img,legend{border:0}.column.full,.video>*{width:100%}body,h1,h2,h3{font-family:Open Sans,Helvetica,Arial,sans-serif}b,h1,h2,h3,optgroup,strong{font-weight:700}html{font-family:sans-serif;height:100%;box-sizing:border-box;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;font-size:12pt;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;color:#600;-webkit-transition:color .2s ease;transition:color .2s ease}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}dfn{font-style:italic}mark{background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{padding:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,:after,:before{box-sizing:inherit;padding:0;margin:0}.container,.row{margin:0 auto}@-ms-viewport{width:device-width}.clearfix::after,.clearfix::before{content:" ";display:table}.clearfix::after{clear:both}canvas,iframe,img,select,svg,textarea,video{max-width:100%}.overflow-container{overflow-y:scroll}.aspect-ratio{height:0;padding-top:56.25%;position:relative}.aspect-ratio--object{height:100%;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;z-index:100}.video{position:relative;height:0;padding-bottom:56.25%}.video>*{position:absolute;top:0;left:0;height:100%}.row{overflow:hidden;max-width:10in}.fullrow{max-width:100%}.column{float:left;margin-left:5%}.column:first-child{margin-left:0}.column.three-fourth{width:63.75%}.column.two-thirds{width:65%}.column.half{width:47.5%}.column.one-third{width:30%}.column.one-fourth{width:21.25%}h1,h2,h3{line-height:1.2em;margin:.4em 0}h1{font-size:2em;word-break:break-all}h2{font-size:1.5em}h3{font-size:1.25em}p{line-height:1.45em;padding:.5em 0}ul li{margin:.3em 0 .3em .5em;list-style-position:inside;list-style-type:square;font-size:1em}ul li p{padding-left:1em}a:active,a:focus,a:hover{color:#b30000}a:active{position:relative;top:1px}a.notdown:active{position:inherit}@media screen{a.external:after{content:"\00A0" "[" "\2197" "]"}}@media print{a[href]:after{content:" (" attr(href) ")"}}.fa{margin-right:.3em;speak:none}.button{text-overflow:ellipsis}@media screen and (max-width:768px){.column.full,.column.half,.column.three-fourth,.column.two-thirds{float:none;margin:0;width:100%}.column.one-fourth,.column.one-third{float:left;margin:0;width:50%;padding:.4em}}@media screen and (max-width:568px){.column.one-third,.column.two-third{float:none;margin:0;width:100%}}@media screen and (max-width:480px){.column.full,.column.half,.column.one-fourth,.column.one-third,.column.three-fourth,.column.two-thirds{float:left;margin:0;width:100%}}
|
||||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */body,mark{color:#000}img,legend{border:0}.column.full,.video>*{width:100%}body,h1,h2,h3{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif}b,h1,h2,h3,optgroup,strong{font-weight:700}html{font-family:sans-serif;height:100%;box-sizing:border-box;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;font-size:62.5%}body{margin:0;font-size:1.4rem;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}dfn{font-style:italic}mark{background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{padding:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,:after,:before{box-sizing:inherit;padding:0;margin:0}.container,.row{margin:0 auto}@-ms-viewport{width:device-width}.clearfix::after,.clearfix::before{content:" ";display:table}.clearfix::after{clear:both}canvas,iframe,img,select,svg,textarea,video{max-width:100%}.overflow-container{overflow-y:scroll}.aspect-ratio{height:0;padding-top:56.25%;position:relative}.aspect-ratio--object{height:100%;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;z-index:100}.video{position:relative;height:0;padding-bottom:56.25%}.video>*{position:absolute;top:0;left:0;height:100%}.row{overflow:hidden;max-width:10in}.fullrow{max-width:100%}.column{float:left;margin-left:5%}.column:first-child{margin-left:0}.column.three-fourth{width:63.75%}.column.two-thirds{width:65%}.column.half{width:47.5%}.column.one-third{width:30%}.column.one-fourth{width:21.25%}h1,h2,h3{line-height:1.2em;margin:.4em 0}h1{font-size:2em;word-break:break-all}h2{font-size:1.5em}h3{font-size:1.25em}@media screen{a.external:after{content:"\00A0" "[" "\2197" "]"}}@media print{a[href]:after{content:" (" attr(href) ")"}}.oben{background-color:#f4f4f4;border-bottom:#8ec6f0 3px solid}.oben--logo{display:block;margin:0 auto;padding:10px 0}.oben--menu{margin:0 auto;padding-bottom:1pc;list-style:none;letter-spacing:-.31em;text-align:center}.oben--menu--item{display:inline-block;letter-spacing:normal;background-color:#fff;border:1px solid #3498e4;font-size:1.2rem}.oben--menu--item a{display:inline-block;color:#3498e4;padding:4px 20px;text-decoration:none}.oben--menu--item a:hover{background-color:#e8f3fc;border-radius:inherit}.oben--menu--item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.oben--menu--item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.oben--menu--item__active a{background-color:#3498e4;color:#fff}.oben--menu--item__active a:hover{background-color:#3498e4}.fa{margin-right:.3em;speak:none}.button{text-overflow:ellipsis}@media screen and (max-width:768px){.column.full,.column.half,.column.three-fourth,.column.two-thirds{float:none;margin:0;width:100%}.column.one-fourth,.column.one-third{float:left;margin:0;width:50%;padding:.4em}}@media screen and (max-width:568px){.column.one-third,.column.two-third{float:none;margin:0;width:100%}}@media screen and (max-width:480px){.column.full,.column.half,.column.one-fourth,.column.one-third,.column.three-fourth,.column.two-thirds{float:left;margin:0;width:100%}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
21
index.html
21
index.html
|
|
@ -2,8 +2,8 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Title goes here</title>
|
||||
<meta name="description" content="description goes here" />
|
||||
<title>👤 Jastrow.me</title>
|
||||
<meta name="description" content="Private webpage of Jan Jastrow." />
|
||||
<meta name="author" content="Jan Jastrow" />
|
||||
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
|
||||
<link rel="dns-prefetch" href="//fonts.gstatic.com" />
|
||||
|
|
@ -15,14 +15,14 @@
|
|||
<link rel="icon" sizes="192x192" href="favicon_chrome.png" type="image/png" />
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon" />
|
||||
<link rel="apple-touch-icon" href="apple-touch-icon.png" type="image/png" />
|
||||
<meta property="og:title" content="Malerei Pohlmann" />
|
||||
<meta property="og:description" content="description goes here" />
|
||||
<meta property="og:title" content="Jan Jastrow" />
|
||||
<meta property="og:description" content="Private webpage of Jan Jastrow." />
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:image" content="x.png" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<link rel="canonical" href="http://projecturl.de/" />
|
||||
<link rel="shortlink" href="http://j.mp/x" />
|
||||
<link rel="canonical" href="http://jastrow.me/" />
|
||||
<link rel="shortlink" href="http://j.mp/jastrow" />
|
||||
<link type="text/plain" rel="author" href="humans.txt" />
|
||||
<!-- for development only
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
|
|
@ -32,8 +32,13 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<h1>Headline</h1>
|
||||
<header class="oben">
|
||||
<img class="oben--logo" src="img/circle-of-brain.png" alt="Logo" />
|
||||
<ul class="oben--menu">
|
||||
<li class="oben--menu--item"><a href="#">projects</a></li>
|
||||
<li class="oben--menu--item oben--menu--item__active"><a href="#">about</a></li>
|
||||
<li class="oben--menu--item"><a href="#">contact</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
<main>
|
||||
<article class="">
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
/* Vars
|
||||
--------------------------*/
|
||||
|
||||
$font-sans-serif: Open Sans, Helvetica, Arial, sans-serif;
|
||||
$font-sans-serif: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
$font-serif: Droid Serif, Georgia, serif;
|
||||
$font-mono: Courier, monospace;
|
||||
|
||||
|
|
|
|||
|
|
@ -13,12 +13,14 @@
|
|||
/* Content
|
||||
--------------------------*/
|
||||
|
||||
html { font-size: 62.5%; }
|
||||
|
||||
$linkcolor: #660000;
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
font-family: $font-sans-serif;
|
||||
font-size: 12pt;
|
||||
font-size: 1.4rem; /* =14px */
|
||||
@include font-smoothing(off);
|
||||
}
|
||||
h1, h2, h3 {
|
||||
|
|
@ -37,38 +39,7 @@ h2 {
|
|||
h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
p {
|
||||
line-height: 1.45em;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
margin: 0.3em 0em 0.3em 0.5em;
|
||||
list-style-position: inside;
|
||||
list-style-type: square;
|
||||
font-size: 1em;
|
||||
|
||||
p {
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $linkcolor;
|
||||
transition: color 0.2s ease;
|
||||
&:hover, &:active, &:focus{
|
||||
color: lighten($linkcolor, 15%);
|
||||
}
|
||||
&:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
a.notdown {
|
||||
&:active {
|
||||
position: inherit;
|
||||
}
|
||||
}
|
||||
@media screen {
|
||||
a.external:after {
|
||||
content: "\00A0" "[" "\2197" "]";
|
||||
|
|
@ -83,6 +54,57 @@ a.notdown {
|
|||
/* Header
|
||||
--------------------------*/
|
||||
|
||||
.oben {
|
||||
background-color: #f4f4f4;
|
||||
border-bottom: lighten(#3498e4, 20%) 3px solid;
|
||||
}
|
||||
.oben--logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.oben--menu {
|
||||
margin: 0 auto;
|
||||
padding-bottom: 16px;
|
||||
list-style: none;
|
||||
letter-spacing: -0.31em;
|
||||
text-align: center;
|
||||
}
|
||||
.oben--menu--item {
|
||||
display: inline-block;
|
||||
letter-spacing: normal;
|
||||
background-color: #fff;
|
||||
border: 1px solid #3498e4;
|
||||
font-size: 1.2rem;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: #3498e4;
|
||||
padding: 4px 20px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#3498e4, 40%);
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
&:last-child{
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
}
|
||||
.oben--menu--item__active a {
|
||||
background-color: #3498e4;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: #3498e4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue