TheThomaas/11ty-light-blog
1
0
Fork 0
Code Issues 2 Pull requests Packages Projects Releases Wiki Activity

Add header and footer styles

Browse source
This commit is contained in:
TheThomaas 2023-11-23 22:10:33 +01:00
parent dd58b802d9
commit 79f7a614d6
1 changed files with 100 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
src/assets/css/styles.scss
View file

@ -3,11 +3,12 @@
--light-2: #ddd; --light-2: #ddd;
--light-3: #fed; --light-3: #fed;
--dark-1: #333; --dark-1: #333;
--dark-2: #123; --dark-2: #212121;
--light-transparent-1: rgba(125,125,125, 0.75); --light-transparent-1: rgba(125,125,125, 0.75);
--dark-transparent-1: rgba(200,195,190,0.15); --dark-transparent-1: rgba(200,195,190,0.15);
--color-1: #5bf; --color-1: #5bf;
--color-2: #4396cd;
--background-color: var(--light-1); --background-color: var(--light-1);
--text-color: var(--dark-1); --text-color: var(--dark-1);
@ -21,7 +22,8 @@
--text-color: var(--light-2); --text-color: var(--light-2);
--link-color: var(--color-1); --link-color: var(--color-1);
--link-focus: var(--light-3); --link-focus: var(--light-3);
}
body {
a{color:var(--link-color);} a{color:var(--link-color);}
a:focus{outline-color:var(--link-focus);} a:focus{outline-color:var(--link-focus);}
} }
@ -32,15 +34,17 @@ body{
background-color: var(--background-color); background-color: var(--background-color);
font-size: 18px; font-size: 18px;
font: 1.2rem/1.5 Century Gothic, sans-serif; font: 1.2rem/1.5 Century Gothic, sans-serif;
max-width: 600px; margin: 0;
max-width: 55ch; padding: 0;
margin: 0 auto; // max-width: 600px;
padding: 2.5rem 1.75rem; // max-width: 55ch;
} // margin: 0 auto;
header{ // padding: 2.5rem 1.75rem;
outline: 2px solid var(--light-2);
outline-offset: 1rem;
} }
// header{
// outline: 2px solid var(--light-2);
// outline-offset: 1rem;
// }
h1,h2,h3,h4,h5,h6{ h1,h2,h3,h4,h5,h6{
line-height: 1.2; line-height: 1.2;
font-family: Arial, serif; font-family: Arial, serif;
@ -107,4 +111,90 @@ dt:target{
color: var(--text-color); color: var(--text-color);
padding: .2rem .4rem; padding: .2rem .4rem;
line-height: 1; line-height: 1;
}
/* Body */
body {
display: flex;
flex-direction: column;
}
/* Header */
header {
display: flex;
justify-content: space-between;
padding: .4rem 1rem;
nav {
padding: 0 1rem;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: .6rem;
li {
padding: .6rem .4rem;
}
a {
color: var(--text-color);
text-decoration: none;
border-bottom: 2px solid var(--link-color);
padding-bottom: .1rem;
&:focus, &:hover {
padding-bottom: 0;
}
}
}
}
footer {
display: flex;
justify-content: center;
padding: .4rem 1rem;
margin: 0;
nav {
padding: 0 1rem;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: inline-flex;
flex-wrap: wrap;
gap: .6rem;
li {
padding: .6rem .4rem;
}
a {
color: var(--text-color);
text-decoration: none;
border-bottom: 2px solid var(--link-color);
padding-bottom: .1rem;
&:focus, &:hover {
padding-bottom: 0;
}
}
}
}
/* Main */
main {
max-width: 600px;
max-width: 55ch;
margin: 0 auto;
padding: 2.5rem 1.75rem;
flex: auto;
} }