1
0
Fork 0
my personal website https://hemk.es/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
nico.hemk.es/sass/page.scss

417 lines
8.9 KiB

$screen-mobile: 540px;
$color-background: #3d3d3d;
$color-text: #e5e9f0;
@mixin mobile {
@media screen and (max-width:$screen-mobile) {
@content;
}
}
@mixin schemelight {
@media (prefers-color-scheme:light) {
@content;
}
}
/**
* Fonts
*/
@font-face {
font-family: 'Athiti Regular';
font-style: normal;
font-weight: normal;
src: local('Athiti Regular'), url('/font/Athiti-Regular.woff') format('woff');
}
@font-face {
font-family: 'Athiti ExtraLight';
font-style: normal;
font-weight: normal;
src: local('Athiti ExtraLight'), url('/font/Athiti-ExtraLight.woff') format('woff');
}
@font-face {
font-family: 'Athiti Light';
font-style: normal;
font-weight: normal;
src: local('Athiti Light'), url('/font/Athiti-Light.woff') format('woff');
}
@font-face {
font-family: 'Athiti Medium';
font-style: normal;
font-weight: normal;
src: local('Athiti Medium'), url('/font/Athiti-Medium.woff') format('woff');
}
@font-face {
font-family: 'Athiti SemiBold';
font-style: normal;
font-weight: normal;
src: local('Athiti SemiBold'), url('/font/Athiti-SemiBold.woff') format('woff');
}
@font-face {
font-family: 'Athiti Bold';
font-style: normal;
font-weight: normal;
src: local('Athiti Bold'), url('/font/Athiti-Bold.woff') format('woff');
}
/**
* Copyright by Nico Hemkes <www.hemk.es>
* CSS & Design: made by myself
*/
* {
-webkit-font-smoothing: optimizeLegibility;
-moz-osx-font-smoothing: optimizeLegibility;
text-rendering: optimizeLegibility;
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
min-width: 220px;
> body {
color: $color-text;
font: 14px 'Athiti Regular', Verdana, Arial, sans-serif;
font-size: 1.26rem;
height: 100%;
background-color: $color-background;
@include schemelight {
color: $color-background;
background-color: $color-text;
}
> .outer {
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
height: calc(100% - 50px);
@include mobile {
height: auto;
}
> .container {
margin: 0 auto;
padding: 1.25rem;
max-width: $screen-mobile * 1.35;
@include mobile {
height: auto;
border-radius: 0;
padding: 1rem;
}
> .media {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
> figure {
img {
border-radius: 50%;
max-height: 100%;
width: 169px;
box-shadow: 8px 8px 50px 5px rgba(0, 0, 0, 0.05);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
-webkit-transition: all 140ms ease-in-out;
-moz-transition: all 140ms ease-in-out;
-o-transition: all 140ms ease-in-out;
transition: all 140ms ease-in-out;
@include schemelight {
box-shadow: inherit;
}
&:hover {
-moz-transform: rotate(363deg);
-webkit-transform: rotate(363deg);
-o-transform: rotate(363deg);
-ms-transform: rotate(363deg);
transform: rotate(363deg);
}
}
}
> .title {
display: block;
margin-bottom: .05rem;
font-size: 1.435rem;
font-weight: 600;
font-family: 'Athiti Medium';
@media screen and (max-width:$screen-mobile) {
text-align: center;
}
}
}
> .content {
display: block;
margin: 1.85rem 0;
&.is-centered {
text-align: center;
}
@include mobile {
display: block;
margin: 1.85rem auto;
}
> article {
line-height: 1.80rem;
@include mobile {
text-align: center;
}
address {
display: inline;
}
}
a {
cursor: pointer;
color: $color-text;
text-decoration: underline;
opacity: 0.85;
@include schemelight {
color: $color-background;
}
&:hover {
opacity: 1;
text-decoration: none;
}
}
div.external {
margin-top: 1.85rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1.4rem;
@include mobile {
flex-direction: column;
justify-content: start;
}
a {
display: inline-block;
padding: 0.1rem 0.75rem;
background: #e9e9e9;
margin: 0 0.3rem;
border-radius: 2px;
transition: 180ms all linear;
cursor: pointer;
color: $color-text;
text-decoration: none;
opacity: 0.90;
@include mobile {
display: block;
width: 100%;
padding: 0.35rem 0;
border-radius: 0;
margin: 0 0 0.6rem;
}
&:first-child {
margin-left: 0;
}
&.is-codeberg {
background: #2185d0;
color: #f5f5f5;
border: 1px solid transparent;
&:hover {
border-color: lighten(#333, 6%);
}
}
&.is-xing {
background: #026466;
border: 1px solid transparent;
color: #dbe819;
&:hover {
border-color: lighten(#026466, 6%);
}
}
&.is-keybase {
background: #4c8eff;
border: 1px solid transparent;
color: #fff;
&:hover {
border-color: lighten(#4c8eff, 6%);
}
}
&.is-matrix {
background: #000;
border: 1px solid transparent;
color: #fff;
&:hover {
border-color: lighten(#000, 9%);
}
}
&.is-netzware {
background: #f46f09;
border: 1px solid transparent;
color: #fff;
&:hover {
border-color: lighten(#f46f09, 6%);
}
}
&.is-nokes {
background: #354065;
border: 1px solid transparent;
color: $color-text;
&:hover {
border-color: lighten(#354065, 6%);
}
}
&.is-codeberg, &.is-xing, &.is-keybase, &.is-netzware, &.is-nokes {
&:hover {
@include mobile {
-moz-transform: translateX(3px);
-webkit-transform: translateX(3px);
-o-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
}
}
}
}
}
}
}
> .container {
justify-content: end;
flex-direction: column;
line-height: 2rem;
> h1, > h2 {
margin: 0;
padding: 0;
}
> h1 {
font-size: 8rem;
margin-bottom: 3rem;
}
> h2 {
font-size: 2rem;
margin-bottom: 2rem;
}
> a {
display: inline-block;
padding: 0.1rem 1.75rem;
background: #eee;
margin: 0 0.3rem;
border-radius: 4px;
font-size: 0.8rem;
cursor: pointer;
color: $color-background;
font-weight: bold;
text-decoration: none;
}
strong, b {
font-family: 'Athiti Medium';
}
ul{
list-style: outside;
li{
margin-left: 1.255rem;
}
}
}
}
> footer {
margin: 0 auto 0.2rem;
text-align: center;
font-size: .75rem;
color: #fff;
letter-spacing: 0.006rem;
opacity: 0.54;
@include schemelight {
color: $color-background;
}
@include mobile {
font-size: .55rem;
opacity: 1;
}
> a {
color: #fff;
text-decoration: none;
@include schemelight {
color: $color-background;
}
}
}
}
}