SowinskiBraeden/.profile
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

update about me page styles

Browse Source
This commit is contained in:
SowinskiBraeden committed 2025-02-01 15:35:02 -08:00
1 parent 276095ff49
commit 0ebcf0f67f
6 files changed
+180 -189
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+1 -1
View File
@@ -1,4 +1,4 @@
<h1 align="center">Hey there!<img src="https://github.com/wervlad/wervlad/assets/24524555/766d336d-b87d-44ba-807c-c51de2bc6b4d" width="28px" alt="👋"></h1> <h1 align="center">Hey there!<img src="https://github.com/wervlad/wervlad/assets/24524555/766d336d-b87d-44ba-807c-c51de2bc6b4d" width="28pt" alt="👋"></h1>
<p align="center"> <p align="center">
<br> <br>
about.html
+70 -69
View File
@@ -96,6 +96,7 @@
<li><a href="https://www.python.org/" target="_blank">Python 3+</a></li> <li><a href="https://www.python.org/" target="_blank">Python 3+</a></li>
<li><a href="https://nodejs.org/en" target="_blank">Node.js</a></li> <li><a href="https://nodejs.org/en" target="_blank">Node.js</a></li>
<li><a href="https://go.dev/" target="_blank">Go</a></li> <li><a href="https://go.dev/" target="_blank">Go</a></li>
<li>Java</li>
<li>C</li> <li>C</li>
<li>Markdown</li> <li>Markdown</li>
<li>System Administration</li> <li>System Administration</li>
@@ -104,77 +105,77 @@
<ul> <ul>
</section> </section>
</div> </div>
<div class="right-content"> <section class="about" id="about">
<section id="about"> <h3 class="title">About me</h3>
<h3 class="title">About me</h3> <p class="text">
<p class="text"> Hello there,
Hello there, I am Braeden Sowinski, you may also know me by my pseudonym McDazzzled. I am an avid software engineer, actively
I am Braeden Sowinski, you may also know me by my pseudonym McDazzzled. I am an avid software engineer, actively pursuing a Diploma in Computer System Technologies at <abbr title="British Columbia Institute of Technology">BCIT</abbr>. I am adaptable and driven with a strong work ethic;
pursuing a Diploma in Computer System Technologies at <abbr title="British Columbia Institute of Technology">BCIT</abbr>. I am adaptable and driven with a strong work ethic; possessing the ability to thrive in both a team-based or individualy motivated setting.
possessing the ability to thrive in both a team-based or individualy motivated setting. </p>
</p> <p class="text">
<p class="text"> I am eager to expand my knowledge in Software Engineering, IT, System Administration and related fields.
I am eager to expand my knowledge in Software Engineering, IT, System Administration and related fields. Approaching more than 5 years of continuous learning and programming, I have learned many valuable languages and
Approaching more than 5 years of continuous learning and programming, I have learned many valuable languages and frameworks such as C, Go, Node.js, and Python 3+. However, there is always more to learn and experience that I
frameworks such as C, Go, Node.js, and Python 3+. However, there is always more to learn and experience that I will accomplish by quickly adapting to a new setting.
will accomplish by quickly adapting to a new setting. </p>
</p> </section>
</section>
<section id="honors">
<h3 class="title">Honors & Awards</h3>
<dl> <section class="honors" id="honors">
<dt class="text"><b>Capstone Project Recognition</b></dt> <h3 class="title">Honors & Awards</h3>
<dd class="text">
Issued by
<abbr title="Sullivan Heights Secondary School">SHSS</abbr>
— Recognition award
for capstone project.
</dd>
<dt class="text"><b>Master Digital Crafter</b></dt> <dl>
<dd class="text"> <dt class="text"><b>Capstone Project Recognition</b></dt>
Issued by <dd class="text">
<abbr title="Sullivan Heights Secondary School">SHSS</abbr> Issued by
— Exceeding expectationg in Software Engineering 11/12</dd> <abbr title="Sullivan Heights Secondary School">SHSS</abbr>
</dl> — Recognition award
</section> for capstone project.
<footer class="footer flex-container"> </dd>
<p>Get in touch with me!</p>
<div class="social-icons"> <dt class="text"><b>Master Digital Crafter</b></dt>
<a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me" <dd class="text">
title=LinkedIn> Issued by
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" <abbr title="Sullivan Heights Secondary School">SHSS</abbr>
viewBox="0 0 16 16"> — Exceeding expectationg in Software Engineering 11/12</dd>
<path </dl>
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" /> </section>
</svg>
</a> <footer class="footer flex-container">
<a class="icon" href=https://github.com/SowinskiBraeden target=_blank rel="noopener noreferrer me" title=Github> <p>Get in touch with me!</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" <div class="social-icons">
stroke-linecap="round" stroke-linejoin="round"> <a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me"
<path title=LinkedIn>
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22" /> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
</svg> viewBox="0 0 16 16">
</a> <path
<a class="icon" href=https://twitter.com/braedensowinski target=_blank rel="noopener noreferrer me" title=Twitter> d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" </svg>
stroke-linecap="round" stroke-linejoin="round"> </a>
<path <a class="icon" href=https://github.com/SowinskiBraeden target=_blank rel="noopener noreferrer me" title=Github>
d="M23 3a10.9 10.9.0 01-3.14 1.53 4.48 4.48.0 00-7.86 3v1A10.66 10.66.0 013 4s-4 9 5 13a11.64 11.64.0 01-7 2c9 5 20 0 20-11.5a4.5 4.5.0 00-.08-.83A7.72 7.72.0 0023 3z" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2"
</svg> stroke-linecap="round" stroke-linejoin="round">
</a> <path
<a class="icon" href="mailto:braeden@sowinski.dev" target=_blank rel="noopener noreferrer me" title=Email> d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" </svg>
stroke-linecap="round" stroke-linejoin="round"> </a>
<path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z" /> <a class="icon" href=https://twitter.com/braedensowinski target=_blank rel="noopener noreferrer me" title=Twitter>
<polyline points="22,6 12,13 2,6" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2"
</svg> stroke-linecap="round" stroke-linejoin="round">
</a> <path
</div> d="M23 3a10.9 10.9.0 01-3.14 1.53 4.48 4.48.0 00-7.86 3v1A10.66 10.66.0 013 4s-4 9 5 13a11.64 11.64.0 01-7 2c9 5 20 0 20-11.5a4.5 4.5.0 00-.08-.83A7.72 7.72.0 0023 3z" />
</footer> </svg>
</div> </a>
<a class="icon" href="mailto:braeden@sowinski.dev" target=_blank rel="noopener noreferrer me" title=Email>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
<polyline points="22,6 12,13 2,6" />
</svg>
</a>
</div>
</footer>
</div> </div>
<!-- Import Mobile.js for mobile nav menu --> <!-- Import Mobile.js for mobile nav menu -->
index.html
+2 -2
View File
@@ -78,10 +78,10 @@
<div id="main-wrapper" class="svg-wrapper"> <div id="main-wrapper" class="svg-wrapper">
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" class="shape" height="60" width="320" /> <rect x="0" y="0" class="shape" height="60" width="320" />
<h2 style="margin-top: 2px;" class="name">Braeden Sowinski</h2> <h2 style="margin-top: 2pt;" class="name">Braeden Sowinski</h2>
</svg> </svg>
</div> </div>
<h2 style="margin-top: 2px;" class="mobile-name">Braeden Sowinski</h2> <h2 style="margin-top: 2pt;" class="mobile-name">Braeden Sowinski</h2>
<span class="des">Software Engineer & System Administrator</span> <span class="des">Software Engineer & System Administrator</span>
<div class="social-icons"> <div class="social-icons">
<a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me" <a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me"
public/css/about.css
+43 -53
View File
@@ -2,33 +2,44 @@
.container { .container {
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-areas:
gap: 24px; "pro about about about about about"
padding: 24px; "pro other other other other other"
padding-bottom: 0px; "footer footer footer footer footer footer";
/* border: 1px solid pink; */ gap: 24pt;
padding: 24pt;
}
.left-content {
grid-area: pro;
}
.about {
grid-area: about;
}
.honors {
grid-area: other;
}
.footer {
grid-area: footer;
} }
section { section {
transition: .8s; transition: .8s;
padding: 24px; padding: 24pt;
background-color: var(--menu-text-bg); background-color: var(--menu-text-bg);
border-radius: 12px; border-radius: 12pt;
margin-bottom: 24px;
} }
section h3 { section h3 {
margin-top: -5px; margin-top: -5pt;
}
.flex-container {
display: flex;
justify-content: space-between;
} }
.social-icons { .social-icons {
margin-top: 6px; margin-top: 6pt;
margin-right: 24px; margin-right: 24pt;
} }
#profile { #profile {
@@ -37,84 +48,63 @@ section h3 {
} }
#profile img { #profile img {
border: 6px solid var(--primary); border: 6pt solid var(--primary);
transition: .8s; transition: .8s;
} }
.profile-sub { .profile-sub {
background-color: rgba(0, 0, 0, .7); background-color: rgba(0, 0, 0, .7);
padding: 12px; padding: 12pt;
border-radius: 12px; border-radius: 12pt;
} }
dt { dt {
margin-top: 12px; margin-top: 12pt;
} }
.text { .text {
margin-right: 24px; margin-right: 24pt;
font-family: "Ubuntu", serif; font-family: "Ubuntu", serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
transition: .8s; transition: .8s;
} }
section ul {
margin-left: 20px;
}
footer { footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
transition: .8s; transition: .8s;
padding: 8px; padding: 8pt;
background-color: var(--menu-text-bg); background-color: var(--menu-text-bg);
border-radius: 12px; border-radius: 12pt;
} }
footer p { footer p {
margin-left: 12px; margin-left: 12pt;
font-family: "Ubuntu", serif; font-family: "Ubuntu", serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} margin-top: 20pt;
.social-icons {
margin-top: 6px;
margin-right: 24px;
}
#profile, #skills {
min-width: 275px;
} }
#profile { #profile {
border-bottom-right-radius: 0px; border-bottom-right-radius: 0pt;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0pt;
margin-bottom: 0px; margin-bottom: 0pt;
} }
#skills { #skills {
border-top-right-radius: 0px; border-top-left-radius: 0pt;
border-top-left-radius: 0px; border-top-right-radius: 0pt;
margin-top: 0px;
} }
#about { @media only screen and (max-width: 740pt) {
min-height: 300px;
}
#honors {
min-height: 218px;
}
@media only screen and (max-width: 740px) {
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
#skills { #skills {
margin-bottom: 0px; margin-bottom: 0pt;
} }
} }
public/css/projects.css
+29 -29
View File
@@ -13,33 +13,33 @@
transition: 0.8s; transition: 0.8s;
width: 54vh; width: 54vh;
height: auto; height: auto;
margin: 30px; margin: 30pt;
padding: 20px; padding: 20pt;
background-color: var(--menu-text-bg); background-color: var(--menu-text-bg);
border-radius: 24px; border-radius: 24pt;
display: flex; display: flex;
} }
.box { .box {
transition: 0.8s; transition: 0.8s;
background-color: var(--theme); background-color: var(--theme);
border-radius: 12px; border-radius: 12pt;
padding-top: 12px; padding-top: 12pt;
padding-left: 12px; padding-left: 12pt;
padding-right: 12px; padding-right: 12pt;
} }
.content { .content {
transition: 0.8s; transition: 0.8s;
margin-left: 18px; margin-left: 18pt;
margin-right: 18px; margin-right: 18pt;
align-items: stretch; align-items: stretch;
} }
.content h2 { .content h2 {
transition: 0.8s; transition: 0.8s;
font-size: 275%; font-size: 275%;
margin-top: 5px; margin-top: 5pt;
font-family: "Sixtyfour Convergence", serif; font-family: "Sixtyfour Convergence", serif;
font-optical-sizing: auto; font-optical-sizing: auto;
font-weight: 400; font-weight: 400;
@@ -49,8 +49,8 @@
"SCAN" 0, "SCAN" 0,
"XELA" 0, "XELA" 0,
"YELA" 0; "YELA" 0;
margin-bottom: 0px; margin-bottom: 0pt;
text-shadow: 1px 1px 2px red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary); text-shadow: 1pt 1pt 2pt red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
min-width: 2.75cm; min-width: 2.75cm;
} }
@@ -60,7 +60,7 @@
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
text-transform: uppercase; text-transform: uppercase;
margin-top: 20px; margin-top: 20pt;
margin-left: 0.75cm; margin-left: 0.75cm;
} }
@@ -75,11 +75,11 @@
.content a { .content a {
background-color: var(--secondary); background-color: var(--secondary);
padding: 8px; padding: 8pt;
border-radius: 8px; border-radius: 8pt;
position: relative; position: relative;
box-shadow: 1px 1px 2px red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary); box-shadow: 1pt 1pt 2pt red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
margin-bottom: 15px; margin-bottom: 15pt;
} }
.content-head { .content-head {
@@ -98,9 +98,9 @@
} }
.content-body a { .content-body a {
margin-bottom: 15px; margin-bottom: 15pt;
text-align: center; text-align: center;
max-width: 100px; max-width: 100pt;
} }
.content-body #links { .content-body #links {
@@ -109,9 +109,9 @@
} }
#links a { #links a {
margin-bottom: 15px; margin-bottom: 15pt;
text-align: center; text-align: center;
width: 100px; width: 100pt;
} }
/* prevents it changing color */ /* prevents it changing color */
@@ -123,10 +123,10 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
transition: .8s; transition: .8s;
padding: 8px; padding: 8pt;
background-color: var(--menu-text-bg); background-color: var(--menu-text-bg);
border-radius: 12px; border-radius: 12pt;
margin-bottom: 24px; margin-bottom: 24pt;
width: 80vw; width: 80vw;
} }
@@ -134,20 +134,20 @@
font-family: "Ubuntu", serif; font-family: "Ubuntu", serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
margin-left: 12px; margin-left: 12pt;
} }
.social-icons { .social-icons {
margin-top: 6px; margin-top: 6pt;
margin-right: 24px; margin-right: 24pt;
} }
.content-body a:hover { .content-body a:hover {
background-color: #e4a295; background-color: #e4a295;
} }
@media only screen and (max-width: 544px) { @media only screen and (max-width: 544pt) {
.content-head h2 { .content-head h2 {
margin-top: 24px; margin-top: 24pt;
} }
} }
public/css/style.css
+35 -35
View File
@@ -58,21 +58,21 @@ ul {
ul li::before { ul li::before {
content: ''; content: '';
position: absolute; position: absolute;
margin-top: 42px; margin-top: 42pt;
width: 0; width: 0;
background-color: var(--secondary); background-color: var(--secondary);
z-index: 9999; z-index: 9999;
height: 3px; height: 3pt;
transition: 0.8s all; transition: 0.8s all;
} }
ul li#home-link:hover::before, ul li#home-link:hover::before,
ul li#about-link:hover::before { ul li#about-link:hover::before {
width: 45px; width: 45pt;
} }
ul li#projects-link:hover::before { ul li#projects-link:hover::before {
width: 58px; width: 58pt;
} }
a { a {
@@ -97,10 +97,10 @@ ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
max-width: calc(1024px + 24px * 2); max-width: calc(1024pt + 24pt * 2);
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;
line-height: 60px; line-height: 60pt;
} }
.nav a { .nav a {
@@ -110,7 +110,7 @@ ul {
.logo, .logo,
#menu { #menu {
display: flex; display: flex;
margin: auto 24px; margin: auto 24pt;
} }
.logo { .logo {
@@ -127,8 +127,8 @@ ul {
vertical-align: middle; vertical-align: middle;
pointer-events: none; pointer-events: none;
transform: translate(0, -10%); transform: translate(0, -10%);
border-radius: 6px; border-radius: 6pt;
margin-inline-end: 8px margin-inline-end: 8pt
} }
#menu { #menu {
@@ -139,11 +139,11 @@ ul {
} }
#menu li+li { #menu li+li {
margin-inline-start: 24px; margin-inline-start: 24pt;
} }
#menu a { #menu a {
font-size: 16px font-size: 16px;
} }
#menu .active { #menu .active {
@@ -158,15 +158,15 @@ ul {
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 50%; width: 50%;
padding: 10px; padding: 10pt;
color: var(--primary); color: var(--primary);
} }
.svg-wrapper { .svg-wrapper {
margin: 0 auto; margin: 0 auto;
width: 320px; width: 320pt;
position: relative; position: relative;
height: 64px; height: 64pt;
overflow-y: hidden; overflow-y: hidden;
} }
@@ -174,14 +174,14 @@ ul {
z-index: 9999; z-index: 9999;
stroke-dasharray: 140 540; stroke-dasharray: 140 540;
stroke-dashoffset: -474; stroke-dashoffset: -474;
stroke-width: 8px; stroke-width: 8pt;
fill: transparent; fill: transparent;
stroke: var(--secondary); stroke: var(--secondary);
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
} }
.svg-wrapper:hover .shape { .svg-wrapper:hover .shape {
stroke-width: 2px; stroke-width: 2pt;
stroke-dashoffset: 0; stroke-dashoffset: 0;
stroke-dasharray: 760; stroke-dasharray: 760;
} }
@@ -190,8 +190,8 @@ ul {
transition: 0.8s; transition: 0.8s;
font-size: 30px; font-size: 30px;
font-weight: 900; font-weight: 900;
margin-bottom: 10px; margin-bottom: 10pt;
transform: translate(0, -64px); transform: translate(0, -64pt);
} }
.name:hover { .name:hover {
@@ -214,23 +214,23 @@ ul {
} }
.profile { .profile {
width: 190px; width: 190pt;
height: 190px; height: 190pt;
border-radius: 50%; border-radius: 50%;
transition: 0.8s; transition: 0.8s;
} }
.social-icons { .social-icons {
padding: 12px 0; padding: 12pt 0;
} }
.social-icons a:not(:last-of-type) { .social-icons a:not(:last-of-type) {
margin-inline-end: 12px; margin-inline-end: 12pt;
} }
.social-icons a svg { .social-icons a svg {
height: 26px; height: 26pt;
width: 26px; width: 26pt;
} }
.social-icons a { .social-icons a {
@@ -251,7 +251,7 @@ ul {
} }
#theme-toggle svg { #theme-toggle svg {
height: 18px; height: 18pt;
} }
button#theme-toggle { button#theme-toggle {
@@ -259,7 +259,7 @@ button#theme-toggle {
border: none; border: none;
color: var(--primary); color: var(--primary);
font-size: 26px; font-size: 26px;
margin: auto 4px; margin: auto 4pt;
transition: 0.8s; transition: 0.8s;
} }
@@ -319,7 +319,7 @@ body:not(.light) #sun {
.overlay a { .overlay a {
color: white; color: white;
text-decoration: none; text-decoration: none;
padding: 15px; padding: 15pt;
font-size: 36px; font-size: 36px;
display: block; display: block;
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
@@ -332,8 +332,8 @@ body:not(.light) #sun {
.overlay .close { .overlay .close {
position: absolute; position: absolute;
top: 20px; top: 20pt;
right: 45px; right: 45pt;
font-size: 60px; font-size: 60px;
color: #edf0f1; color: #edf0f1;
cursor: pointer; cursor: pointer;
@@ -351,18 +351,18 @@ body:not(.light) #sun {
cursor: default; cursor: default;
} }
@media screen and (max-width:768px) { @media screen and (max-width:768pt) {
.profile img { .profile img {
transform: scale(.85); transform: scale(.85);
} }
.profile { .profile {
width: 128px; width: 128pt;
height: auto; height: auto;
} }
.first-entry { .first-entry {
min-height: 260px; min-height: 260pt;
} }
.archive-month { .archive-month {
@@ -370,15 +370,15 @@ body:not(.light) #sun {
} }
.archive-year { .archive-year {
margin-top: 20px; margin-top: 20pt;
} }
.footer { .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, .nav__links li a,
.svg-wrapper#main-wrapper { .svg-wrapper#main-wrapper {