fmouhart
/
fmouhart.epheme.re
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style changes 

- Larger fonts
- Flexbox nav
- 65ch textbox width
- box shadow
This commit is contained in:
Fabrice Mouhartem 2024-03-03 23:26:59 +01:00
parent 7c04faff56
commit eff9414b8e
Signed by: fmouhart
GPG Key ID: 2C5033B228CFE4E7
1 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
sass/_base.scss
View File

@ -1,7 +1,7 @@
$light-fonts: "Fira Sans Light", sans-serif; $light-fonts: "Fira Sans Light", sans-serif;
$normal-fonts: "Fira Sans", sans-serif; $normal-fonts: "Fira Sans", sans-serif;
$mono-fonts: "Fira Mono", monospace; $mono-fonts: "Fira Mono", monospace;
$page-width: 800px; $page-width: 65ch;
$primary-color: #333; $primary-color: #333;
$bg-color: #eee; $bg-color: #eee;
$page-color: #ddd; $page-color: #ddd;
@ -18,33 +18,35 @@ html {
background-color: $page-color; background-color: $page-color;
} }
@media only screen and (min-width: $page-width){ @media only screen and (min-width: $page-width){
html { html {
padding:10px; padding:10px;
} }
} }
@font-face { @font-face {
font-family: "Fira Sans Light"; font-family: "Fira Sans Light";
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
src: local("Fira Sans Light"), local("FiraSans-Light"), url("fonts/Fira Sans Light.woff2") format("woff2"); src: local("Fira Sans Light"), local("FiraSans-Light"), url("fonts/Fira Sans Light.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: "Fira Sans"; font-family: "Fira Sans";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local("Fira Sans"), local("FiraSans-Regular"), url("fonts/Fira Sans.woff2") format("woff2"); src: local("Fira Sans"), local("FiraSans-Regular"), url("fonts/Fira Sans.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: "Fira Mono"; font-family: "Fira Mono";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local("Fira Mono"), local("FiraMono-Regular"), url("fonts/FiraMono-Regular.woff2") format("woff2"); src: local("Fira Mono"), local("FiraMono-Regular"), url("fonts/FiraMono-Regular.woff2") format("woff2");
} }
body { body {
max-width: $page-width; font-size: 16pt;
margin: auto; max-width: $page-width;
font-family: $light-fonts; margin: auto;
background-color: $bg-color; font-family: $light-fonts;
background-color: $bg-color;
box-shadow: 0 1px 10px #888;
} }
header { header {
height: 150px; height: 150px;
@ -69,26 +71,25 @@ header {
background-position: bottom; background-position: bottom;
} }
h1 { h1 {
font-size: 28pt; font-size: 32pt;
} }
h2 { h2 {
font-size: 22pt; font-size: 26pt;
} }
h3 { h3 {
font-size: 18pt; font-size: 22pt;
} }
p, h1, h2, h3, pre { p, h1, h2, h3, pre {
padding: 0px 10px 3px 10px; padding: 0px 10px 3px 10px;
} }
p, ul { p, ul {
font-size: 14pt;
color: $primary-color; color: $primary-color;
} }
p { p {
text-align: justify; text-align: justify;
} }
footer { footer {
font-size: 8pt; font-size: 12pt;
text-align: center; text-align: center;
color: #555; color: #555;
padding: 10px; padding: 10px;
@ -113,12 +114,15 @@ li {
} }
nav { nav {
display: flex; display: flex;
flex-direction: column;
background-color: $menu-bg; background-color: $menu-bg;
menu { menu {
padding: 0px; padding: 0px;
display:block; display:block;
margin: 0px; margin: 0px;
width: 100%; width: 100%;
display: flex;
flex-direction: row;
} }
li { li {
a { a {
@ -141,7 +145,6 @@ nav {
margin: 0px; margin: 0px;
padding: $menu_btn-size 0px $menu_btn-size 0px; padding: $menu_btn-size 0px $menu_btn-size 0px;
list-style-type: none; list-style-type: none;
float: left;
} }
} }
strong { strong {