andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Fix compatibility and sizing

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-26 23:09:40 +02:00
parent b388498e8f
commit aa9047c0d8
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
9 changed files with 107 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

118
src/page/header/header.scss
View file

@ -2,53 +2,23 @@
@use '../../style/mixins' as *;
#about {
text-align: center;
box-shadow: var(--shadow);
padding: var(--normal-margin);
background-color: var(--accent-color);
font-size: 0;
::selection {
background-color: var(--very-light-text-color);
color: var(--accent-color);
}
h1,
.placeholder {
@include title-font();
}
$img-size: 125px;
.image {
@include square($img-size);
border-radius: 100%;
box-shadow: var(--shadow);
margin: auto;
}
p {
text-align: justify;
}
h1,
p,
a {
color: var(--very-light-text-color);
margin-top: var(--line-height);
:focus:not(:hover) {
outline: var(--very-light-text-color) solid var(--line-width);
}
}
a {
border-bottom: 2px solid var(--very-light-text-color);
}
@include on-small-screen {
:focus:not(:hover) {
outline: var(--very-light-text-color) solid var(--line-width);
}
$img-size: 125px;
> .photo-container > .image {
@include square($img-size);
}
> h1 {
text-align: center;
}
}
@include on-large-screen {
@ -57,27 +27,65 @@
width: var(--body-width);
margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto var(--large-margin)
auto;
position: relative;
border-radius: var(--border-radius);
.image {
@include square($img-size);
position: absolute;
left: 0;
top: 0;
transform: translateY(math.div(-$img-size, 3)) translateX(math.div(-$img-size, 3));
> .photo-container {
position: relative;
> .image {
@include square($img-size);
position: absolute;
left: calc(#{math.div(-$img-size, 3)} - var(--normal-margin));
top: calc(#{math.div(-$img-size, 3)} - var(--normal-margin));
}
> .placeholder {
@include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)}));
box-sizing: content-box;
float: left;
margin: 0 0.75ex 0.5ex 0;
}
}
.placeholder {
@include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)}));
box-sizing: content-box;
float: left;
margin: 0 0.75ex 0.5ex 0;
}
h1 {
text-align: left;
> h1 {
margin-top: 0;
}
}
::selection {
background-color: var(--very-light-text-color);
color: var(--accent-color);
}
> h1,
> .photo-container > .placeholder {
@include title-font();
}
> .photo-container {
> .image {
border-radius: 100%;
box-shadow: var(--shadow);
margin: auto;
}
}
> h1,
> p,
a {
color: var(--very-light-text-color);
margin-top: var(--line-height);
:focus:not(:hover) {
outline: var(--very-light-text-color) solid var(--line-width);
}
}
> p {
text-align: justify;
}
a {
border-bottom: 2px solid var(--very-light-text-color);
}
}