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

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

@ -2,10 +2,11 @@
/* 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;
@ -25,6 +26,7 @@
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') {

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

2
src/index.html
View File

@ -76,6 +76,7 @@
</nav> </nav>
<header id="header"> <header id="header">
<div id="logo-container">
<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> <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>
@ -87,6 +88,7 @@
<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> <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>
</div>
</header> </header>
<div id="main"> <div id="main">