palo
/
tech-ingolf-wagner-de
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css font-size seems to work better but not really great

master
Ingolf Wagner 2021-09-01 20:48:48 +02:00
parent cd4bb29705
commit b288e10f1b
Signed by: palo
GPG Key ID: 76BF5F1928B9618B
7 changed files with 68 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/lessc/page/custom-iphone.less
View File

@ -3,16 +3,18 @@
&.box-size-third { &.box-size-third {
.flexitem { .flexitem {
position: relative; position: relative;
margin: 1%; @media @desktop{
flex: 0 0 31%; margin: 1%;
}
} }
} }
&.box-size-half { &.box-size-half {
.flexitem { .flexitem {
position: relative; position: relative;
margin: 1%; @media @desktop{
flex: 0 0 49%; margin: 1%;
}
} }
} }
@ -26,13 +28,19 @@
} }
img { img {
border-radius: 20px; @media @desktop{
border-radius: 20px;
}
border-radius: 10vw;
width: 100%; width: 100%;
} }
.label { .label {
color: white; color: white;
font-size: 0.8rem; @media @desktop{
font-size: 0.8rem;
}
font-size: 8vw;
position: absolute; position: absolute;
top: 25%; top: 25%;
left: 50%; left: 50%;
@ -41,7 +49,11 @@
.time { .time {
color: white; color: white;
font-size: 3rem; @media @desktop{
font-size: 3rem;
}
font-size: 20vw;
position: absolute; position: absolute;
top: 18%; top: 18%;
left: 50%; left: 50%;

2
src/lessc/page/font.less
View File

@ -8,7 +8,7 @@
@font-publishing-date: @font-code; @font-publishing-date: @font-code;
@font-size: 1rem; @font-size: 1rem;
@font-size-code: 1rem; @font-size-mobile: 2rem;
@font-sidebar: ~"'Abel', sans-serif"; @font-sidebar: ~"'Abel', sans-serif";

4
src/lessc/page/main-hack-code.less
View File

@ -37,12 +37,12 @@
font-weight: normal; font-weight: normal;
font-family: @font-code; font-family: @font-code;
line-height: @font-size-code; line-height: @font-size;
code { code {
font-weight: normal; font-weight: normal;
font-family: @font-code; font-family: @font-code;
line-height: @font-size-code; line-height: @font-size;
} }
} }

16
src/lessc/page/main-hack-flex.less
View File

@ -7,15 +7,23 @@
&.box-size-half { &.box-size-half {
.flexitem { .flexitem {
-ms-flex: 1 0 45%; @media @desktop {
flex: 1 0 45% -ms-flex: 1 0 45%;
flex: 1 0 45%
}
-ms-flex: 1 0 100%;
flex: 1 0 100%;
} }
} }
&.box-size-third { &.box-size-third {
.flexitem { .flexitem {
-ms-flex: 1 0 30%; @media @desktop {
flex: 1 0 30% -ms-flex: 1 0 30%;
flex: 1 0 30%
}
-ms-flex: 1 0 100%;
flex: 1 0 100%;
} }
} }

6
src/lessc/page/main-navigation.less
View File

@ -1,7 +1,9 @@
#main-navigation { #main-navigation {
background-color: @color-nav-background; background-color: @color-nav-background;
@media @desktop {
width: 800px; width: 800px;
}
width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;

41
src/lessc/page/main.less
View File

@ -1,5 +1,3 @@
@import "color.less"; @import "color.less";
@import "media-types.less"; @import "media-types.less";
@import "font.less"; @import "font.less";
@ -15,31 +13,46 @@
html { html {
font-family: @font-normal; font-family: @font-normal;
font-size: @font-size; @media @desktop{
font-size: @font-size;
}
font-size: @font-size-mobile;
background-color: @color-body-background; background-color: @color-body-background;
color: @color-body-font; color: @color-body-font;
} }
body {
margin: 0px;
header{
width: 800px; body {
header {
width: 100%;
@media @desktop {
width: 800px;
};
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.content { .content {
@media @desktop {
width: 800px; width: 800px;
margin-left: auto; };
margin-right: auto; width: 100%;
margin-left: auto;
margin-right: auto;
} }
.content-big { .content-big {
width: 1000px; @media @desktop {
width: 1000px;
};
width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
} }
h1,h2,h3,h4 { h1, h2, h3, h4 {
font-family: @font-header; font-family: @font-header;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -71,8 +84,8 @@ h1,h2,h3,h4 {
pre { pre {
margin-left: 0; margin-left: 0;
padding-left: @special-info-padding-side * 2 ; padding-left: @special-info-padding-side * 2;
padding-right: @special-info-padding-side * 2 ; padding-right: @special-info-padding-side * 2;
padding-top: .6em; padding-top: .6em;
padding-bottom: 0.4em; padding-bottom: 0.4em;
@ -95,10 +108,12 @@ table.comparison {
background: @color-comparison-good; background: @color-comparison-good;
text-align: center; text-align: center;
} }
.bad { .bad {
background: @color-comparison-bad; background: @color-comparison-bad;
text-align: center; text-align: center;
} }
.ok { .ok {
background: @color-comparison-ok; background: @color-comparison-ok;
text-align: center; text-align: center;

4
src/lessc/page/media-types.less
View File

@ -1,3 +1,3 @@
@desktop: ~"(min-width: 1180px)"; @desktop-min-width: 1180px;
@non-desktop: ~"(max-width: 1200px)"; @desktop: ~"only screen and (min-width: @{desktop-min-width})";