tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor scss

Browse Source
This commit is contained in:
Tom Hodson 2022-07-04 16:24:13 +01:00
parent 38f42ba71c
commit 212347698a
3 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_sass/_vars.scss Normal file
View File

@ -0,0 +1,5 @@
$font_stack: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
$title_font_stack: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif", HelveticaNeue-CondensedBlack;
$horizontal_breakpoint: 700px;
$vertical_breakpoint: 500px;

10
_sass/header.scss
View File

@ -1,3 +1,4 @@
@import "vars";
// The header with info about me // The header with info about me
// gets displayed on the left in a wide layout and on the top in a narrow layout // gets displayed on the left in a wide layout and on the top in a narrow layout
@ -5,7 +6,7 @@ header {
border-right: 2px solid #eee; //make a nice dividing line border-right: 2px solid #eee; //make a nice dividing line
position: fixed; position: fixed;
width: 240px; width: 240px;
height: 100vw; height: 100vh;
padding-right: 30px; padding-right: 30px;
padding-left: 30px; padding-left: 30px;
@ -41,7 +42,7 @@ header h1 {
} }
header h1, header h2 { header h1, header h2 {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif", HelveticaNeue-CondensedBlack; font-family: $title_font_stack;
} }
header img.icon { header img.icon {
@ -63,7 +64,10 @@ header p.professional-links a {
justify-content: space-between; justify-content: space-between;
} }
@media only screen and (max-width: 700px) { @media
only screen and (max-width: $horizontal_breakpoint),
only screen and (max-height: $vertical_breakpoint)
{
header { header {
position: relative; position: relative;
width: 100%; width: 100%;

16
_sass/main.scss
View File

@ -1,3 +1,5 @@
@import "vars";
@import "nav"; @import "nav";
@import "header"; @import "header";
@import "article"; @import "article";
@ -5,7 +7,7 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; font-family: $font_stack;
text-rendering: geometricPrecision; text-rendering: geometricPrecision;
} }
@ -36,11 +38,11 @@ main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
}
main h1 { h1 {
font-size: 2em; font-size: 2em;
} }
}
a { a {
text-decoration: underline; text-decoration: underline;
@ -55,7 +57,10 @@ img {
width: 100%; width: 100%;
} }
@media only screen and (max-width: 700px) { @media
only screen and (max-width: $horizontal_breakpoint),
only screen and (max-height: $vertical_breakpoint)
{
main { main {
padding-top: 10px; padding-top: 10px;
padding-left: 20px; padding-left: 20px;
@ -64,4 +69,5 @@ img {
} }
article { article {
margin-left: 0px; } } margin-left: 0px; }
}