xtaodada/Homepage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update header layout, vertically align left and right panes

Browse Source
This commit is contained in:
amphineko 2020-03-26 01:17:24 +08:00
parent 1768654322
commit 2bbb1d2e54
No known key found for this signature in database
GPG Key ID: 4582E6587852EF42
1 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/stylesheets/header.css
View File

@ -1,21 +1,18 @@
.section.header {
padding-top: 1.6em;
padding-bottom: 1.4em;
align-items: center;
display: flex;
}
@media (max-width: 768px) {
.section.header {
flex-direction: column;
}
}
.section.header .split {
padding: 0 1em;
}
.section.header .splitter {
display: block;
border-left: 1em solid rgba(0, 0, 0, 0.15);
width: 1em;
/* this should be calculated from right panel height */
height: 24em;
}
.section.header .name {
color: #f5f5f5;
display: inline-block;
@ -52,11 +49,17 @@
.section.header .picture {
background: white;
border: 0.5em solid white;
border-radius: 50%;
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.15);
display: block;
overflow: hidden;
}
.section.header .picture img {
box-sizing: content-box;
padding: 3%;
width: 94%;
height: 100%;
width: 100%;
}
.section.header .picture-container {