diff --git a/README.md b/README.md index df540cd..6783622 100755 --- a/README.md +++ b/README.md @@ -192,7 +192,7 @@ Solutions: - [ ] Allows switching themes in Editor - [ ] Allows customizing primary color for the current theme - [ ] Export PDF directly -- [ ] Supports responsive style for themes, so that the CV site is friendly to view on mobile devices. +- [x] Supports responsive style for themes, so that the CV site is friendly to view on mobile devices. - [ ] Add more themes. diff --git a/src/themes/reorx/index.scss b/src/themes/reorx/index.scss index 53a1efe..92811f7 100644 --- a/src/themes/reorx/index.scss +++ b/src/themes/reorx/index.scss @@ -91,6 +91,11 @@ section { .subtitle { font-size: $fz-4; // font-weight: 300; + + @media screen and (max-width: 500px) { + display: flex; + align-items: center; + } } .space-between { @@ -122,6 +127,10 @@ section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5em; + + @media screen and (max-width: 500px) { + grid-template-columns: 1fr; + } } /* helpers */ @@ -155,8 +164,13 @@ section { } .contact { color: $color-text-dim; - display: flex; + + @media screen and (max-width: 500px) { + flex-direction: column; + gap: .4em; + } + .item { margin-right: 1em; a { @@ -166,6 +180,18 @@ section { } } +.education-section { + @media screen and (max-width: 800px) { + .space-between:nth-of-type(2) { + flex-wrap: wrap; + gap: 0.4em; + } + .study { + width: 100%; + } + } +} + .work-section { .section-item { break-inside: auto; @@ -173,6 +199,14 @@ section { } } +.projects-section { + .space-between { + @media screen and (max-width: 500px) { + flex-wrap: wrap; + } + } +} + .sideprojects-section { .description p:last-of-type { margin-bottom: 0;