aboutsummaryrefslogtreecommitdiff
path: root/public/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/main.css')
-rw-r--r--public/main.css263
1 files changed, 149 insertions, 114 deletions
diff --git a/public/main.css b/public/main.css
index a6a68e5..3a0d3f4 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,185 +1,220 @@
/* Constants */
:root {
- /* Colors */
--color-brown: #A56D35;
--color-dark-brown: #6A4115;
--color-blue: #515170;
--color-light-gray: #EEEEEE;
--color-dark-gray: #666666;
+
+ --size-bee: 0.2rem;
+ --size-mouse: 0.5rem;
+ --size-cat: 0.75rem;
+ --size-dog: 1rem;
+ --size-lion: 1.25rem;
+ --size-bear: 1.5rem;
+ --size-horse: 2rem;
+ --size-camel: 2.625rem;
+ --size-rhino: 3.375rem;
+ --size-elephant: 4.25rem;
+ --size-mammoth: 5.25rem;
}
/* Animation */
@keyframes appear {
- 0.0% {
- transform: translateX(0.8rem);
- opacity: 0;
- }
- 100.0% {
- transform: translateX(0);
- }
+ 0.0% {
+ transform: translateX(var(--size-cat));
+ opacity: 0;
+ }
+ 100.0% {
+ transform: translateX(0);
+ }
}
/* Media */
@media screen and (max-width: 500px) {
- html {
- font-size: 90%;
- }
+ html { font-size: 15px; }
}
@media screen and (min-width: 500px) and (max-width: 900px) {
- html {
- font-size: 100%;
- }
+ html { font-size: 16px; }
}
@media screen and (min-width: 900px) {
- html {
- font-size: 110%;
- }
+ html { font-size: 17px; }
}
-/* Style */
+/* Body */
body {
- overflow-x: hidden;
- margin: 0;
- line-height: 1.8rem;
+ margin: 0;
+ line-height: var(--size-bear);
}
-.g-Main {
- animation-name: appear;
- animation-duration: 0.2s;
- animation-timing-function: ease-in;
- animation-iteration-count: 1;
- width: 80%;
- margin: 0 auto;
+/* Header */
+
+header {
+ display: flex;
+ background-color: var(--color-brown);
+ margin-bottom: var(--size-camel);
}
-svg {
- width: inherit;
- height: inherit;
+header > a {
+ display: flex;
+ font-size: var(--size-bear);
+ font-weight: bold;
+ justify-content: center;
+ align-items: center;
+ flex-grow: 1;
+ flex-basis: 0;
+ height: var(--size-rhino);
+ text-decoration: none;
+ padding: 0;
+ text-align: center;
+ color: #ffffff;
}
-ul {
- list-style-type: none;
- padding-left: 0;
+header > a:hover,
+header > a:focus,
+header > a.current {
+ border-bottom: var(--color-dark-brown) solid var(--size-mouse);
+}
+
+/* Sections */
+
+ol.sections {
+ animation-name: appear;
+ animation-duration: 0.2s;
+ animation-timing-function: ease-in;
+ animation-iteration-count: 1;
+ width: 80%;
+ margin: 0 auto;
+ list-style-type: none;
+ padding-left: 0;
+}
+
+ol.sections > li {
+ margin-bottom: var(--size-camel);
}
-.g-Paragraph {
- margin-bottom: 1rem;
+/* Sub-sections */
+
+ol.sub-sections {
+ list-style-type: none;
+ padding-left: 0;
+}
+
+ol.sub-sections > li {
+ margin-bottom: var(--size-lion);
}
-.g-List {
- padding-left: 0;
- margin: 0.5rem 0 1rem 0.5rem;
+/* Images */
+
+img:not(.icon) {
+ border: solid 1px var(--color-dark-gray);
+ border-radius: var(--size-mouse);
+ margin-bottom: var(--size-dog);
+ width: 100%;
+ max-width: 800px;
}
-.g-List__Item::before {
- content: "•";
- color: var(--color-brown);
- display: inline-block;
- margin-right: 0.5rem;
+img.icon {
+ margin-right: var(--size-cat);
}
-.g-List__Item {
- padding: 0.2rem 0;
+/* Paragraphs */
+
+p {
+ margin-bottom: var(--size-bear);
}
-.g-Image {
- border: solid 1px var(--color-dark-gray);
- border-radius: 0.5rem;
- margin-bottom: 1rem;
- width: 100%;
- max-width: 900px;
+/* Title */
+
+h1 {
+ color: var(--color-brown);
+ font-size: var(--size-horse);
+ font-weight: lighter;
+ border-bottom: var(--size-bee) solid var(--color-brown);
+ margin-bottom: var(--size-horse);
+ padding-bottom: var(--size-mouse);
}
-.g-Header {
- background-color: var(--color-brown);
- display: flex;
+h2 {
+ font-size: var(--size-dog);
+ margin-top: 0;
+ margin-bottom: var(--size-lion);
+ font-weight: normal;
+ text-decoration: underline;
+ color: var(--color-brown);
}
-.g-Header__Link {
- display: flex;
- font-size: 1.5rem;
- font-weight: bold;
- 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;
+/* Lists */
+
+ul {
+ list-style-type: none;
+ padding-left: 0;
}
-.g-Header__Link:hover,
-.g-Header__Link:focus,
-.g-Header__Link--Current {
- border-bottom: var(--color-dark-brown) solid 0.6rem;
+ul.bullets {
+ margin-bottom: var(--size-dog);
}
-.g-IconLink__Link {
- text-decoration: none;
- color: var(--color-blue);
- transition: color 0.3s ease-out 0.0s;
- display: inline-flex;
- align-items: center;
+ul.bullets > li::before {
+ content: "•";
+ color: var(--color-brown);
+ display: inline-block;
+ margin-right: var(--size-mouse);
}
-.g-IconLink__Link:focus {
- outline: solid 0 #ffffff;
+ul.bullets > li {
+ padding: var(--size-bee) 0;
}
-.g-IconLink__Link:hover,
-.g-IconLink__Link:focus {
- text-decoration: underline;
+ul.technos {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: var(--size-dog);
+ padding-left: 0;
}
-.g-IconLink__Icon {
- margin-right: 1rem;
- height: 1.2rem;
+ul.technos > li {
+ margin-right: var(--size-dog);
+ margin-bottom: var(--size-mouse);
+ background-color: var(--color-light-gray);
+ border-radius: var(--size-bee);
+ padding: 0 var(--size-mouse);
+ font-size: 80%;
}
-.g-Resume__Title {
- margin: 2.5rem 0 0.5rem;
+ul.links {
+ margin-bottom: var(--size-lion);
}
-.g-Resume__Title > em {
- font-style: normal;
- border-bottom: solid 0.2rem var(--color-brown);
+ul.links > li {
+ display: flex;
+ align-items: center;
+ margin-bottom: var(--size-cat);
}
-.g-Section__Title {
- color: var(--color-brown);
- font-size: 1.8rem;
- font-weight: lighter;
- margin-bottom: 2rem;
- margin-top: 3.5rem;
- border-bottom: 0.2rem solid var(--color-brown);
- padding-bottom: 0.5rem;
- letter-spacing: 0.1rem;
+ul.links a {
+ text-decoration: none;
+ color: var(--color-blue);
+ transition: color 0.3s ease-out 0.0s;
+ align-items: center;
}
-.g-Section__Entries {
- padding-left: 0;
+ul.links a:focus {
+ outline: solid 0 #ffffff;
}
-.g-Skills {
- display: flex;
- flex-wrap: wrap;
- margin-bottom: 1rem;
- padding-left: 0;
+ul.links a:hover,
+ul.links a:focus {
+ text-decoration: underline;
}
-.g-Skills > li {
- font-size: 0.8rem;
- margin-right: 1rem;
- margin-bottom: 0.5rem;
- background-color: var(--color-light-gray);
- border-radius: 0.1rem;
- padding: 0 0.5rem;
+ul.links svg {
+ margin-right: var(--size-dog);
+ height: var(--size-lion);
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 05:22:16 +0000