diff options
Diffstat (limited to 'public/style.css')
-rw-r--r-- | public/style.css | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..999fb7c --- /dev/null +++ b/public/style.css @@ -0,0 +1,170 @@ +@keyframes appear { + 0.0% { + transform: translateX(0.8rem); + opacity: 0; + } + 100.0% { + transform: translateX(0); + } +} + +@media screen and (max-width: 500px) { + html { + font-size: 90%; + } +} + +@media screen and (min-width: 500px) and (max-width: 900px) { + html { + font-size: 100%; + } +} + +@media screen and (min-width: 900px) { + html { + font-size: 110%; + } +} + +body { + overflow-x: hidden; + margin: 0; + line-height: 1.8rem; +} + +.g-Main { + animation-name: appear; + animation-duration: 0.2s; + animation-timing-function: ease-in; + animation-iteration-count: 1; + width: 80%; + margin: 0 auto; +} + +svg { + width: inherit; + height: inherit; +} + +ul { + list-style-type: none; + padding-left: 0; +} + +.g-Paragraph { + margin-bottom: 1rem; +} + +.g-List { + padding-left: 0; + margin: 0.5rem 0 1rem 0.5rem; +} + +.g-List__Item::before { + content: "•"; + color: #bf7f3f; + display: inline-block; + margin-right: 0.5rem; +} + +.g-List__Item { + padding: 0.2rem 0; +} + +.g-Image { + border: solid 1px #646464; + border-radius: 0.5rem; + margin-bottom: 1rem; + width: 100%; + max-width: 900px; +} + +.g-Header { + background-color: #bf7f3f; + font-size: 2.5rem; + display: flex; + font-variant: small-caps; +} + +.g-Header__Link { + display: flex; + font-size: 0.6em; + justify-content: center; + align-items: center; + flex-grow: 1; + flex-basis: 0; + height: 3.5rem; + text-decoration: none; + padding: 0; + text-align: center; + color: #ffffff; +} + +.g-Header__Link:hover, +.g-Header__Link:focus, +.g-Header__Link--Current { + border-bottom: #9a5f20 solid 0.6rem; +} + +.g-IconLink__Link { + text-decoration: none; + color: #515170; + transition: color 0.3s ease-out 0.0s; + display: inline-flex; + align-items: center; +} + +.g-IconLink__Link:focus { + outline: solid 0 #ffffff; +} + +.g-IconLink__Link:hover, +.g-IconLink__Link:focus { + text-decoration: underline; +} + +.g-IconLink__Icon { + margin-right: 1rem; + height: 1.2rem; +} + +.g-Resume__Title { + margin: 2.5rem 0 0.5rem; +} + +.g-Resume__Title > em { + font-style: normal; + border-bottom: solid 0.2rem #bf7f3f; +} + +.g-Section__Title { + color: #bf7f3f; + font-size: 1.8rem; + font-weight: lighter; + margin-bottom: 2rem; + margin-top: 3.5rem; + border-bottom: 0.1rem solid #bf7f3f; + padding-bottom: 0.5rem; + font-variant: small-caps; + letter-spacing: 0.1rem; +} + +.g-Section__Entries { + padding-left: 0; +} + +.g-Skills { + display: flex; + flex-wrap: wrap; + margin-bottom: 1rem; + padding-left: 0; +} + +.g-Skills__Item { + font-size: 0.8rem; + margin-right: 1rem; + margin-bottom: 0.5rem; + background-color: #EEEEEE; + border-radius: 0.1rem; + padding: 0 0.5rem; +} |