Sara/saragerretsen.nl
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

tweaks to styling to make for a better user experience

Browse source
This commit is contained in:
SG101 2022-10-09 22:46:18 +02:00
parent 6f6dfabbe8
commit 742b9575ad
1 changed files with 46 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
shared/style.css
View file

@ -7,26 +7,37 @@ body {
max-width: 1040px; max-width: 1040px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-right: 30px; padding-right: auto;
padding-bottom: 50px;
} }
h1 { h1 {
font-size: 300%; font-size: 3.5em;
} }
h2 { h2 {
font-size: 200%; font-size: 2.5em;
margin-bottom: 1px;
margin-top: 50px;
} }
h2.inline { h2.inline {
margin: 0px; margin: 0px;
} }
h3 {
margin-top: 50px;
}
a.internal { a.internal {
text-decoration: none; text-decoration: none;
color: black; color: black;
} }
a:hover {
color: #99FF;
}
section { section {
display: block; display: block;
padding-top: 10px; padding-top: 10px;
@ -35,6 +46,11 @@ section {
padding-right: 20px; padding-right: 20px;
} }
p.intro-paragraph {
color: #999F;
font-size: 1.25em;
}
div { div {
display: block; display: block;
} }
@ -44,15 +60,6 @@ div.info {
color: #222F; color: #222F;
font-style: italic; font-style: italic;
} }
div.info-old {
background-color: #0000000C;
margin-bottom: 10px;
border-radius: 10px;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 40px;
padding-right: 40px;
}
.embed { .embed {
background-color: #000F; background-color: #000F;
@ -74,8 +81,8 @@ div.info-old {
color: white; color: white;
grid-template-columns: 125px auto; grid-template-columns: 125px auto;
vertical-align: center; vertical-align: center;
max-width: 650px; max-width: 660px;
width: 100%; width: 94%;
margin-left: 0px; margin-left: 0px;
background-color: #445F; background-color: #445F;
border-color: #111F; border-color: #111F;
@ -84,6 +91,11 @@ div.info-old {
padding: 20px; padding: 20px;
} }
.github-block > h2 {
margin-top: auto;
margin-bottom: auto;
}
div.github-logo { div.github-logo {
background-color: #0000; background-color: #0000;
background-image: url("../assets/octicon.png"); background-image: url("../assets/octicon.png");
@ -114,15 +126,21 @@ div.github-logo {
margin-left: 30px; margin-left: 30px;
} }
.project-grid { .site-header > ul > li > a > h2 {
display: grid; text-decoration: underline;
grid-gap: 20px; font-size: 175%;
grid-template-columns: 50% 50%; padding: 5px 25px;
}
.site-header > ul > li > a > h2:hover {
background: #DDF8;
color: #334F;
border-radius: 10px;
} }
.personal-info-grid { .personal-info-grid {
display: grid; display: grid;
grid-gap: 20px; gap: 20px;
grid-template-columns: 80% auto; grid-template-columns: 80% auto;
} }
@ -133,10 +151,14 @@ div.github-logo {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.experience-grid > div { .experience-grid {
display: inline-block; display: grid;
margin-left: 10px; grid-template-columns: auto auto;
margin-right: 10px; gap: 40px;
}
p.experience-grid-time {
color: #999F;
} }
*[indented] { *[indented] {
@ -145,7 +167,6 @@ div.github-logo {
.code-box { .code-box {
background-color: #2C2C3CFF; background-color: #2C2C3CFF;
padding: 10px;
border-radius: 10px; border-radius: 10px;
overflow: visible; overflow: visible;
margin-bottom: 3px; margin-bottom: 3px;
@ -154,4 +175,5 @@ div.github-logo {
.code-content { .code-content {
overflow-y: hidden; overflow-y: hidden;
overflow-x: scroll; overflow-x: scroll;
padding: 10px;
} }