update about me page styles
This commit is contained in:
6 files changed
+180
-189
No files matched your search
+43
-53
@@ -2,33 +2,44 @@
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
padding-bottom: 0px;
|
||||
/* border: 1px solid pink; */
|
||||
grid-template-areas:
|
||||
"pro about about about about about"
|
||||
"pro other other other other other"
|
||||
"footer footer footer footer footer footer";
|
||||
gap: 24pt;
|
||||
padding: 24pt;
|
||||
}
|
||||
|
||||
.left-content {
|
||||
grid-area: pro;
|
||||
}
|
||||
|
||||
.about {
|
||||
grid-area: about;
|
||||
}
|
||||
|
||||
.honors {
|
||||
grid-area: other;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
section {
|
||||
transition: .8s;
|
||||
padding: 24px;
|
||||
padding: 24pt;
|
||||
background-color: var(--menu-text-bg);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 24px;
|
||||
border-radius: 12pt;
|
||||
}
|
||||
|
||||
section h3 {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: -5pt;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
margin-top: 6px;
|
||||
margin-right: 24px;
|
||||
margin-top: 6pt;
|
||||
margin-right: 24pt;
|
||||
}
|
||||
|
||||
#profile {
|
||||
@@ -37,84 +48,63 @@ section h3 {
|
||||
}
|
||||
|
||||
#profile img {
|
||||
border: 6px solid var(--primary);
|
||||
border: 6pt solid var(--primary);
|
||||
transition: .8s;
|
||||
}
|
||||
|
||||
.profile-sub {
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
padding: 12pt;
|
||||
border-radius: 12pt;
|
||||
}
|
||||
|
||||
dt {
|
||||
margin-top: 12px;
|
||||
margin-top: 12pt;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-right: 24px;
|
||||
margin-right: 24pt;
|
||||
font-family: "Ubuntu", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
transition: .8s;
|
||||
}
|
||||
|
||||
section ul {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transition: .8s;
|
||||
padding: 8px;
|
||||
padding: 8pt;
|
||||
background-color: var(--menu-text-bg);
|
||||
border-radius: 12px;
|
||||
border-radius: 12pt;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin-left: 12px;
|
||||
margin-left: 12pt;
|
||||
font-family: "Ubuntu", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
margin-top: 6px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
#profile, #skills {
|
||||
min-width: 275px;
|
||||
margin-top: 20pt;
|
||||
}
|
||||
|
||||
#profile {
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
margin-bottom: 0px;
|
||||
border-bottom-right-radius: 0pt;
|
||||
border-bottom-left-radius: 0pt;
|
||||
margin-bottom: 0pt;
|
||||
}
|
||||
|
||||
#skills {
|
||||
border-top-right-radius: 0px;
|
||||
border-top-left-radius: 0px;
|
||||
margin-top: 0px;
|
||||
border-top-left-radius: 0pt;
|
||||
border-top-right-radius: 0pt;
|
||||
}
|
||||
|
||||
#about {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
#honors {
|
||||
min-height: 218px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 740px) {
|
||||
@media only screen and (max-width: 740pt) {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#skills {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0pt;
|
||||
}
|
||||
}
|
||||
+29
-29
@@ -13,33 +13,33 @@
|
||||
transition: 0.8s;
|
||||
width: 54vh;
|
||||
height: auto;
|
||||
margin: 30px;
|
||||
padding: 20px;
|
||||
margin: 30pt;
|
||||
padding: 20pt;
|
||||
background-color: var(--menu-text-bg);
|
||||
border-radius: 24px;
|
||||
border-radius: 24pt;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.box {
|
||||
transition: 0.8s;
|
||||
background-color: var(--theme);
|
||||
border-radius: 12px;
|
||||
padding-top: 12px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-radius: 12pt;
|
||||
padding-top: 12pt;
|
||||
padding-left: 12pt;
|
||||
padding-right: 12pt;
|
||||
}
|
||||
|
||||
.content {
|
||||
transition: 0.8s;
|
||||
margin-left: 18px;
|
||||
margin-right: 18px;
|
||||
margin-left: 18pt;
|
||||
margin-right: 18pt;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
transition: 0.8s;
|
||||
font-size: 275%;
|
||||
margin-top: 5px;
|
||||
margin-top: 5pt;
|
||||
font-family: "Sixtyfour Convergence", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
@@ -49,8 +49,8 @@
|
||||
"SCAN" 0,
|
||||
"XELA" 0,
|
||||
"YELA" 0;
|
||||
margin-bottom: 0px;
|
||||
text-shadow: 1px 1px 2px red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
|
||||
margin-bottom: 0pt;
|
||||
text-shadow: 1pt 1pt 2pt red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
|
||||
min-width: 2.75cm;
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
text-transform: uppercase;
|
||||
margin-top: 20px;
|
||||
margin-top: 20pt;
|
||||
margin-left: 0.75cm;
|
||||
}
|
||||
|
||||
@@ -75,11 +75,11 @@
|
||||
|
||||
.content a {
|
||||
background-color: var(--secondary);
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
padding: 8pt;
|
||||
border-radius: 8pt;
|
||||
position: relative;
|
||||
box-shadow: 1px 1px 2px red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 1pt 1pt 2pt red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
|
||||
margin-bottom: 15pt;
|
||||
}
|
||||
|
||||
.content-head {
|
||||
@@ -98,9 +98,9 @@
|
||||
}
|
||||
|
||||
.content-body a {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 15pt;
|
||||
text-align: center;
|
||||
max-width: 100px;
|
||||
max-width: 100pt;
|
||||
}
|
||||
|
||||
.content-body #links {
|
||||
@@ -109,9 +109,9 @@
|
||||
}
|
||||
|
||||
#links a {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 15pt;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
width: 100pt;
|
||||
}
|
||||
|
||||
/* prevents it changing color */
|
||||
@@ -123,10 +123,10 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transition: .8s;
|
||||
padding: 8px;
|
||||
padding: 8pt;
|
||||
background-color: var(--menu-text-bg);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 24px;
|
||||
border-radius: 12pt;
|
||||
margin-bottom: 24pt;
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
@@ -134,20 +134,20 @@
|
||||
font-family: "Ubuntu", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
margin-left: 12px;
|
||||
margin-left: 12pt;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
margin-top: 6px;
|
||||
margin-right: 24px;
|
||||
margin-top: 6pt;
|
||||
margin-right: 24pt;
|
||||
}
|
||||
|
||||
.content-body a:hover {
|
||||
background-color: #e4a295;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 544px) {
|
||||
@media only screen and (max-width: 544pt) {
|
||||
.content-head h2 {
|
||||
margin-top: 24px;
|
||||
margin-top: 24pt;
|
||||
}
|
||||
}
|
||||
+35
-35
@@ -58,21 +58,21 @@ ul {
|
||||
ul li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin-top: 42px;
|
||||
margin-top: 42pt;
|
||||
width: 0;
|
||||
background-color: var(--secondary);
|
||||
z-index: 9999;
|
||||
height: 3px;
|
||||
height: 3pt;
|
||||
transition: 0.8s all;
|
||||
}
|
||||
|
||||
ul li#home-link:hover::before,
|
||||
ul li#about-link:hover::before {
|
||||
width: 45px;
|
||||
width: 45pt;
|
||||
}
|
||||
|
||||
ul li#projects-link:hover::before {
|
||||
width: 58px;
|
||||
width: 58pt;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -97,10 +97,10 @@ ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
max-width: calc(1024px + 24px * 2);
|
||||
max-width: calc(1024pt + 24pt * 2);
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
line-height: 60px;
|
||||
line-height: 60pt;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
@@ -110,7 +110,7 @@ ul {
|
||||
.logo,
|
||||
#menu {
|
||||
display: flex;
|
||||
margin: auto 24px;
|
||||
margin: auto 24pt;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -127,8 +127,8 @@ ul {
|
||||
vertical-align: middle;
|
||||
pointer-events: none;
|
||||
transform: translate(0, -10%);
|
||||
border-radius: 6px;
|
||||
margin-inline-end: 8px
|
||||
border-radius: 6pt;
|
||||
margin-inline-end: 8pt
|
||||
}
|
||||
|
||||
#menu {
|
||||
@@ -139,11 +139,11 @@ ul {
|
||||
}
|
||||
|
||||
#menu li+li {
|
||||
margin-inline-start: 24px;
|
||||
margin-inline-start: 24pt;
|
||||
}
|
||||
|
||||
#menu a {
|
||||
font-size: 16px
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#menu .active {
|
||||
@@ -158,15 +158,15 @@ ul {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
padding: 10pt;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.svg-wrapper {
|
||||
margin: 0 auto;
|
||||
width: 320px;
|
||||
width: 320pt;
|
||||
position: relative;
|
||||
height: 64px;
|
||||
height: 64pt;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
@@ -174,14 +174,14 @@ ul {
|
||||
z-index: 9999;
|
||||
stroke-dasharray: 140 540;
|
||||
stroke-dashoffset: -474;
|
||||
stroke-width: 8px;
|
||||
stroke-width: 8pt;
|
||||
fill: transparent;
|
||||
stroke: var(--secondary);
|
||||
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
|
||||
}
|
||||
|
||||
.svg-wrapper:hover .shape {
|
||||
stroke-width: 2px;
|
||||
stroke-width: 2pt;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-dasharray: 760;
|
||||
}
|
||||
@@ -190,8 +190,8 @@ ul {
|
||||
transition: 0.8s;
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 10px;
|
||||
transform: translate(0, -64px);
|
||||
margin-bottom: 10pt;
|
||||
transform: translate(0, -64pt);
|
||||
}
|
||||
|
||||
.name:hover {
|
||||
@@ -214,23 +214,23 @@ ul {
|
||||
}
|
||||
|
||||
.profile {
|
||||
width: 190px;
|
||||
height: 190px;
|
||||
width: 190pt;
|
||||
height: 190pt;
|
||||
border-radius: 50%;
|
||||
transition: 0.8s;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
padding: 12px 0;
|
||||
padding: 12pt 0;
|
||||
}
|
||||
|
||||
.social-icons a:not(:last-of-type) {
|
||||
margin-inline-end: 12px;
|
||||
margin-inline-end: 12pt;
|
||||
}
|
||||
|
||||
.social-icons a svg {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
height: 26pt;
|
||||
width: 26pt;
|
||||
}
|
||||
|
||||
.social-icons a {
|
||||
@@ -251,7 +251,7 @@ ul {
|
||||
}
|
||||
|
||||
#theme-toggle svg {
|
||||
height: 18px;
|
||||
height: 18pt;
|
||||
}
|
||||
|
||||
button#theme-toggle {
|
||||
@@ -259,7 +259,7 @@ button#theme-toggle {
|
||||
border: none;
|
||||
color: var(--primary);
|
||||
font-size: 26px;
|
||||
margin: auto 4px;
|
||||
margin: auto 4pt;
|
||||
transition: 0.8s;
|
||||
}
|
||||
|
||||
@@ -319,7 +319,7 @@ body:not(.light) #sun {
|
||||
.overlay a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
padding: 15pt;
|
||||
font-size: 36px;
|
||||
display: block;
|
||||
transition: all 0.3s ease 0s;
|
||||
@@ -332,8 +332,8 @@ body:not(.light) #sun {
|
||||
|
||||
.overlay .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 45px;
|
||||
top: 20pt;
|
||||
right: 45pt;
|
||||
font-size: 60px;
|
||||
color: #edf0f1;
|
||||
cursor: pointer;
|
||||
@@ -351,18 +351,18 @@ body:not(.light) #sun {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
@media screen and (max-width:768pt) {
|
||||
.profile img {
|
||||
transform: scale(.85);
|
||||
}
|
||||
|
||||
.profile {
|
||||
width: 128px;
|
||||
width: 128pt;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.first-entry {
|
||||
min-height: 260px;
|
||||
min-height: 260pt;
|
||||
}
|
||||
|
||||
.archive-month {
|
||||
@@ -370,15 +370,15 @@ body:not(.light) #sun {
|
||||
}
|
||||
|
||||
.archive-year {
|
||||
margin-top: 20px;
|
||||
margin-top: 20pt;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: calc((60 - 24px - 10px)/2)24px;
|
||||
padding: calc((60 - 24pt - 10pt)/2)24pt;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 740px) {
|
||||
@media only screen and (max-width: 740pt) {
|
||||
|
||||
.nav__links li a,
|
||||
.svg-wrapper#main-wrapper {
|
||||
|
||||
Reference in new issue
Block a user