schulze/schulzestudio
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add logo container to header, fix centering issues. add section css

Browse Source
This commit is contained in:
Felix Schulze
2020-02-26 13:06:52 +01:00
parent 7e06a21606
commit 4d31366eba
5 changed files with 44 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/css/layout/_header.scss
View File

@@ -2,28 +2,30 @@
/* Header */
#header {
top: 80px;
position: absolute;
left: 50%;
transform: translate(-50%, 70px);
margin-top: 80px;
> #logo-container {
width: max-content;
margin: auto;
padding: 2em 1em;
> h1 {
font-size: 60pt;
display: inline-block;
color: _palette(accent1);
margin: 0 0 0 40px;
> h1 {
font-size: 60pt;
display: inline-block;
color: _palette(accent1);
margin: 0 0 0 40px;
&:first-child {
color: _palette(accent2);
margin: 0 0 0 10px;
&:first-child {
color: _palette(accent2);
margin: 0 0 0 10px;
}
}
}
> #logo > img {
height: 140pt;
width: auto;
display: inline-block;
float: left;
> #logo > img {
height: 140pt;
width: auto;
display: inline-block;
float: left;
}
}
/*
@include breakpoint('<=xlarge') {
@@ -35,7 +37,7 @@
}
*/
@include breakpoint('<=medium') {
top: 60px;
margin-top: 60px;
}
/*
@include breakpoint('<=small') {

9
src/css/layout/_main.scss
View File

@@ -2,7 +2,14 @@
/* Main */
#main {
width: 100%;
> section {
height: 400px;
width: 100%;
max-width: 600px;
margin: 8em auto 4em;
}
/*
@include breakpoint('<=xlarge') {

1
src/css/layout/_nav.scss
View File

@@ -6,6 +6,7 @@
'height #{_duration(transition)} ease',
'background #{_duration(transition)} ease',
));
top: 0;
height: 80px;
position: fixed;
width: 100%;

1
src/css/main.scss
View File

@@ -45,6 +45,7 @@
@import 'layout/header';
@import 'layout/nav';
@import 'layout/footer';
@import 'layout/main';
body {
background: #f2f2f2;

24
src/index.html
View File

@@ -76,17 +76,19 @@
</nav>
<header id="header">
<h1>
<span style="color:#e3201b;">S</span><span style="color:#e2241a;">c</span><span style="color:#e0281a;">h</span><span style="color:#df2c19;">u</span><span style="color:#dd3118;">l</span><span style="color:#dc3518;">z</span><span style="color:#da3917;">e</span>
</h1>
<picture id="logo">
<source srcset="/img/logo/logo@0.25x.webp" type="image/webp">
<source srcset="/img/logo/logo@0.25x.png" type="image/png">
<img src="/img/logo/logo@0.25x.png" alt="Schulze Studio logo">
</picture><br>
<h1>
<span style="color:#f79923;">S</span><span style="color:#f9a023;">t</span><span style="color:#faa623;">u</span><span style="color:#fcad24;">d</span><span style="color:#fdb324;">i</span><span style="color:#ffba24;">o</span>
</h1>
<div id="logo-container">
<h1>
<span style="color:#e3201b;">S</span><span style="color:#e2241a;">c</span><span style="color:#e0281a;">h</span><span style="color:#df2c19;">u</span><span style="color:#dd3118;">l</span><span style="color:#dc3518;">z</span><span style="color:#da3917;">e</span>
</h1>
<picture id="logo">
<source srcset="/img/logo/logo@0.25x.webp" type="image/webp">
<source srcset="/img/logo/logo@0.25x.png" type="image/png">
<img src="/img/logo/logo@0.25x.png" alt="Schulze Studio logo">
</picture><br>
<h1>
<span style="color:#f79923;">S</span><span style="color:#f9a023;">t</span><span style="color:#faa623;">u</span><span style="color:#fcad24;">d</span><span style="color:#fdb324;">i</span><span style="color:#ffba24;">o</span>
</h1>
</div>
</header>
<div id="main">