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
// 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
position: fixed;
width: 240px;
height: 100vw;
height: 100vh;
padding-right: 30px;
padding-left: 30px;
@ -41,7 +42,7 @@ header h1 {
}
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 {
@ -63,7 +64,10 @@ header p.professional-links a {
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 {
position: relative;
width: 100%;

34
_sass/main.scss
View File

@ -1,3 +1,5 @@
@import "vars";
@import "nav";
@import "header";
@import "article";
@ -5,7 +7,7 @@
* {
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;
}
@ -36,10 +38,10 @@ main {
display: flex;
flex-direction: column;
justify-content: center;
}
main h1 {
font-size: 2em;
h1 {
font-size: 2em;
}
}
a {
@ -55,13 +57,17 @@ img {
width: 100%;
}
@media only screen and (max-width: 700px) {
main {
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
margin: 0px;
}
article {
margin-left: 0px; } }
@media
only screen and (max-width: $horizontal_breakpoint),
only screen and (max-height: $vertical_breakpoint)
{
main {
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
margin: 0px;
}
article {
margin-left: 0px; }
}