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

style changes

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