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

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

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

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

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

1
src/css/main.scss
View File

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

24
src/index.html
View File

@ -76,17 +76,19 @@
</nav> </nav>
<header id="header"> <header id="header">
<h1> <div id="logo-container">
<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>
</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>
<picture id="logo"> </h1>
<source srcset="/img/logo/logo@0.25x.webp" type="image/webp"> <picture id="logo">
<source srcset="/img/logo/logo@0.25x.png" type="image/png"> <source srcset="/img/logo/logo@0.25x.webp" type="image/webp">
<img src="/img/logo/logo@0.25x.png" alt="Schulze Studio logo"> <source srcset="/img/logo/logo@0.25x.png" type="image/png">
</picture><br> <img src="/img/logo/logo@0.25x.png" alt="Schulze Studio logo">
<h1> </picture><br>
<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>
</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> </header>
<div id="main"> <div id="main">