Nest media queries into CSS
This commit is contained in:
parent
76b9d66ae7
commit
09f8eda192
GPG key ID:
B67D7410F33A0F61
6 changed files with 219 additions and 111 deletions
17
src/components/link/instagram.html
Normal file
17
src/components/link/instagram.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script props>
|
||||
module.exports = {
|
||||
href: props.href,
|
||||
}
|
||||
</script>
|
||||
<a href="https://instagram.com/{{href}}" target="_blank" aria-label="{{href}} on GitHub">
|
||||
<svg width="16pt" height="16pt" version="1.1" viewBox="0 0 16 16" xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="#fff" stroke-width=".66667">
|
||||
<path
|
||||
d="m8 1.4413c2.136 0 2.3893 8e-3 3.2327 0.046667 0.872 0.04 1.77 0.23867 2.4053 0.874 0.64133 0.64133 0.834 1.5307 0.874 2.4053 0.038666 0.84333 0.046666 1.0967 0.046666 3.2327 0 2.136-8e-3 2.3893-0.046666 3.2327-0.039334 0.86733-0.24267 1.774-0.874 2.4053-0.64133 0.64133-1.53 0.834-2.4053 0.874-0.84333 0.038666-1.0967 0.046666-3.2327 0.046666-2.136 0-2.3893-8e-3 -3.2327-0.046666-0.86067-0.039334-1.7793-0.24733-2.4053-0.874-0.638-0.638-0.834-1.536-0.874-2.4053-0.038667-0.84333-0.046667-1.0967-0.046667-3.2327 0-2.136 8e-3 -2.3893 0.046667-3.2327 0.039333-0.864 0.24467-1.776 0.874-2.4053 0.64-0.64 1.5327-0.834 2.4053-0.874 0.84333-0.038667 1.0967-0.046667 3.2327-0.046667m0-1.4413c-2.1727 0-2.4453 0.0093333-3.2987 0.048-1.2367 0.056667-2.4647 0.40067-3.3587 1.2947-0.89733 0.89733-1.238 2.1227-1.2947 3.3587-0.038667 0.85333-0.048 1.126-0.048 3.2987 0 2.1727 0.0093333 2.4453 0.048 3.2987 0.056667 1.2353 0.402 2.4667 1.2947 3.3587 0.89667 0.89667 2.124 1.238 3.3587 1.2947 0.85333 0.038666 1.126 0.048 3.2987 0.048 2.1727 0 2.4453-0.009334 3.2987-0.048 1.236-0.056667 2.4653-0.40133 3.3587-1.2947 0.898-0.898 1.238-2.1227 1.2947-3.3587 0.038666-0.85333 0.048-1.126 0.048-3.2987 0-2.1727-0.009334-2.4453-0.048-3.2987-0.056667-1.2367-0.40133-2.4653-1.2947-3.3587-0.89533-0.89533-2.126-1.2387-3.3587-1.2947-0.85333-0.038667-1.126-0.048-3.2987-0.048z" />
|
||||
<path
|
||||
d="m8 3.892c-2.2687 0-4.108 1.8393-4.108 4.108 0 2.2687 1.8393 4.108 4.108 4.108 2.2687 0 4.108-1.8393 4.108-4.108 0-2.2687-1.8393-4.108-4.108-4.108zm0 6.7747c-1.4727 0-2.6667-1.194-2.6667-2.6667s1.194-2.6667 2.6667-2.6667 2.6667 1.194 2.6667 2.6667-1.194 2.6667-2.6667 2.6667z" />
|
||||
<circle cx="12.271" cy="3.7293" r=".96" />
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
|
|
@ -65,48 +65,52 @@
|
|||
Step on it, Richard!
|
||||
</x-blockquote>
|
||||
</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
I love everything from making distributed systems, to physically building them. I'm in my element when I'm
|
||||
making software with Python, and deploying it via Docker.
|
||||
</markdown>
|
||||
</fill:description>
|
||||
<!-- <fill:description> -->
|
||||
<!-- <markdown> -->
|
||||
<!-- I love everything from making distributed systems, to physically building them. I'm in my element when I'm -->
|
||||
<!-- making software with Python, and deploying it via Docker. -->
|
||||
<!-- </markdown> -->
|
||||
<!-- </fill:description> -->
|
||||
</x-project>
|
||||
<!-- <x-project id="gunnar"> -->
|
||||
<!-- <fill:img> -->
|
||||
<!-- <img src="/assets/gunnar.jpg" class="person"> -->
|
||||
<!-- </fill:img> -->
|
||||
<!-- <fill:title> -->
|
||||
<!-- <markdown> -->
|
||||
<!-- # Gunnar Huscroft -->
|
||||
<!-- </markdown> -->
|
||||
<!-- <x-link href="projects.html" show="c0re"> -->
|
||||
<!-- <markdown> -->
|
||||
<!-- #### CEO of c0re (same thing) -->
|
||||
<!-- </markdown> -->
|
||||
<!-- </x-link> -->
|
||||
<!-- </fill:title> -->
|
||||
<!-- <fill:links> -->
|
||||
<!-- <x-link.github href="Ghussy"></x-link.github> -->
|
||||
<!-- <x-link.website href="https://churchofjesuschrist.org/" referencing="Gunnar"></x-link.website> -->
|
||||
<!-- <x-link.youtube href="UCApj2bfCQRDWym4684z2TXQ"></x-link.youtube> -->
|
||||
<!-- <x-link.linkedin href="gunnarhuscroft"></x-link.linkedin> -->
|
||||
<!-- <x-link.x href="ChEEEky_SCRUB"></x-link.x> -->
|
||||
<!-- </fill:links> -->
|
||||
<!-- <fill:subtitle> -->
|
||||
<!-- <x-blockquote cite="C.S. Lewis"> -->
|
||||
<!-- Nothing but the courage and unselfishness of individuals is ever going to make any system work properly -->
|
||||
<!-- </x-blockquote> -->
|
||||
<!-- </fill:subtitle> -->
|
||||
<!-- <fill:description> -->
|
||||
<!-- <markdown> -->
|
||||
<!-- Some people believe in test-driven development, or compiler-driven development. But I believe in values-driven -->
|
||||
<!-- development. My passion lies in using my skills to help lift other people up, and leave the world better than I -->
|
||||
<!-- found it. -->
|
||||
<!-- </markdown> -->
|
||||
<!-- </fill:description> -->
|
||||
<!-- </x-project> -->
|
||||
<x-project id="khayden">
|
||||
<x-project id="gunnar">
|
||||
<fill:img>
|
||||
<img src="/assets/gunnar.jpg" class="person">
|
||||
</fill:img>
|
||||
<fill:title>
|
||||
<markdown>
|
||||
# Gunnar Huscroft
|
||||
</markdown>
|
||||
<x-link href="projects.html" show="c0re">
|
||||
<markdown>
|
||||
#### CEO of c0re (same thing)
|
||||
</markdown>
|
||||
</x-link>
|
||||
</fill:title>
|
||||
<fill:links>
|
||||
<x-link.github href="Ghussy"></x-link.github>
|
||||
<!-- <x-link.website href="https://churchofjesuschrist.org/" referencing="Gunnar"></x-link.website> -->
|
||||
<x-link.youtube href="UCApj2bfCQRDWym4684z2TXQ"></x-link.youtube>
|
||||
<x-link.linkedin href="gunnarhuscroft"></x-link.linkedin>
|
||||
<x-link.x href="ChEEEky_SCRUB"></x-link.x>
|
||||
<x-link.instagram href=""></x-link.instagram>
|
||||
</fill:links>
|
||||
<fill:subtitle>
|
||||
<x-blockquote cite="C.S. Lewis">
|
||||
Nothing but the courage and unselfishness of individuals is ever going to make any system work properly
|
||||
</x-blockquote>
|
||||
<!-- <x-blockquote cite="Gunnar"> -->
|
||||
<!-- Placeholder -->
|
||||
<!-- </x-blockquote> -->
|
||||
</fill:subtitle>
|
||||
<!-- <fill:description> -->
|
||||
<!-- <markdown> -->
|
||||
<!-- Some people believe in test-driven development, or compiler-driven development. But I believe in values-driven -->
|
||||
<!-- development. My passion lies in using my skills to help lift other people up, and leave the world better than I -->
|
||||
<!-- found it. -->
|
||||
<!-- </markdown> -->
|
||||
<!-- </fill:description> -->
|
||||
</x-project>
|
||||
<x-project class="project-alt" id="khayden">
|
||||
<fill:img>
|
||||
<img src="/assets/khayden.jpg" class="person">
|
||||
</fill:img>
|
||||
|
|
@ -130,13 +134,13 @@
|
|||
You only live once, die trying
|
||||
</x-blockquote>
|
||||
</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
Just a guy making cool stuff for the love of the game. Like fast beep boops too 🎶⚡️
|
||||
</markdown>
|
||||
</fill:description>
|
||||
<!-- <fill:description> -->
|
||||
<!-- <markdown> -->
|
||||
<!-- Just a guy making cool stuff for the love of the game. Like fast beep boops too 🎶⚡️ -->
|
||||
<!-- </markdown> -->
|
||||
<!-- </fill:description> -->
|
||||
</x-project>
|
||||
<x-project class="project-alt" id="isaac">
|
||||
<x-project id="isaac">
|
||||
<fill:img>
|
||||
<img src="/assets/isaac.jpg" class="person">
|
||||
</fill:img>
|
||||
|
|
@ -161,12 +165,12 @@
|
|||
Pog
|
||||
</x-blockquote>
|
||||
</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
I'm a software engineer and computer scientist who loves harnessing the power of technology to solve problems!
|
||||
Ever since I was 7, my specialization has always been in looking for problems to solve, and working with people
|
||||
to solve them.
|
||||
</markdown>
|
||||
</fill:description>
|
||||
<!-- <fill:description> -->
|
||||
<!-- <markdown> -->
|
||||
<!-- I'm a software engineer and computer scientist who loves harnessing the power of technology to solve problems! -->
|
||||
<!-- Ever since I was 7, my specialization has always been in looking for problems to solve, and working with people -->
|
||||
<!-- to solve them. -->
|
||||
<!-- </markdown> -->
|
||||
<!-- </fill:description> -->
|
||||
</x-project>
|
||||
</x-tab.content>
|
||||
111
src/style.css
111
src/style.css
|
|
@ -1,9 +1,18 @@
|
|||
@custom-media --tablet only screen and (max-width: 1200px);
|
||||
@custom-media --phone only screen and (max-width: 700px);
|
||||
@custom-media --smaller-phone only screen and (max-width: 500px);
|
||||
|
||||
:root {
|
||||
--energy: 0px;
|
||||
--page-width: min(100%, 1024px);
|
||||
color: white;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
font-family: system-ui;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: min(10vw, 36pt);
|
||||
margin-bottom: 48px;
|
||||
|
|
@ -18,6 +27,12 @@
|
|||
h1 {
|
||||
font-size: 48pt;
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
center:has(> blockquote) {
|
||||
|
|
@ -43,11 +58,10 @@ blockquote {
|
|||
&+p {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
font-family: system-ui;
|
||||
@media (--phone) {
|
||||
margin: 0px auto;
|
||||
}
|
||||
}
|
||||
|
||||
#page-content {
|
||||
|
|
@ -87,6 +101,20 @@ html {
|
|||
&>div {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media (--phone) {
|
||||
flex-direction: column;
|
||||
padding: 18px;
|
||||
|
||||
&>div {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-title {
|
||||
|
|
@ -100,6 +128,10 @@ html {
|
|||
|
||||
.description {
|
||||
width: 100%;
|
||||
|
||||
@media (--phone) {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
|
|
@ -127,6 +159,24 @@ html {
|
|||
font-weight: bold;
|
||||
border-bottom: solid 6px #eee;
|
||||
}
|
||||
|
||||
@media (--smaller-phone) {
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
border: solid 3px #999;
|
||||
font-size: 16pt;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
a[aria-selected=true] {
|
||||
background-color: #eee;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
border: solid 12px #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.figure {
|
||||
|
|
@ -193,57 +243,4 @@ a {
|
|||
color: inherit;
|
||||
/* no underline */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.section-header {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.description {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.project {
|
||||
flex-direction: column;
|
||||
padding: 18px;
|
||||
|
||||
&>div {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14pt;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0px auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.tab-list {
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
border: solid 3px #999;
|
||||
font-size: 16pt;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
a[aria-selected=true] {
|
||||
background-color: #eee;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
border: solid 12px #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue