jason/Jnf.me
jason/Jnf.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added splash image for Jason

Browse Source
This commit is contained in:
Jason Williams 2022-11-19 12:42:14 -07:00
parent a2421fad12
commit 7233356524
6 changed files with 49 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
www/css/main.css
View File

@ -87,7 +87,10 @@ textarea {
Author's custom styles Author's custom styles
========================================================================== */ ========================================================================== */
body { overflow-x: hidden; } :root {
--jason-bg-color: #F2EDEA;
--flo-bg-color: #601F22;
}
#view { #view {
width: 100vw; width: 100vw;
@ -96,10 +99,11 @@ body { overflow-x: hidden; }
#container { #container {
min-height: 100vh; min-height: 100vh;
width: 100vw; width: 100vw;
position: relative; /* position: relative; */
} }
.main { .main {
position: relative;
float: left; float: left;
overflow: hidden; overflow: hidden;
} }
@ -111,11 +115,34 @@ body { overflow-x: hidden; }
overflow: hidden; overflow: hidden;
} }
@media (orientation: landscape) { .splash .splash-container {
body { height: 100%;
background-color: #FF0000; width: 100%;
padding: 1rem;
} }
.splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; }
.banner {
position: absolute;
width: 100%;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.banner img {max-width: 20vw; max-height: 20vh; }
.jason {
background-color: var(--jason-bg-color);
}
.flo {
background-color: var(--flo-bg-color);
}
@media (orientation: landscape) {
.main { .main {
width: 50vw; width: 50vw;
min-height: 100vh; min-height: 100vh;
@ -123,15 +150,6 @@ body { overflow-x: hidden; }
} }
@media (orientation: portrait) { @media (orientation: portrait) {
body {
background-color: #00FF00;
}
#container {
width: 100vw;
left: 0;
}
.main { .main {
width: 100vw; width: 100vw;
min-height: 50vh; min-height: 50vh;

4
www/css/normalize.css vendored
View File

@ -24,6 +24,10 @@ body {
margin: 0; margin: 0;
} }
div {
box-sizing: border-box;
}
/** /**
* Render the `main` element consistently in IE. * Render the `main` element consistently in IE.
*/ */

BIN
www/img/profile-jason.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
www/img/profile-jason.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
www/img/splash-jason.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 301 KiB

17
www/index.html
View File

@ -19,22 +19,29 @@
</head> </head>
<body> <body>
<div id="view"> <!-- <div id="view"> -->
<div id="container"> <div id="container">
<div id="splash-jason" class="splash jason notflo">Jason Splash</div> <div id="splash-jason" class="splash jason notflo">
<div class="splash-container">
<img src="/img/splash-jason.jpg">
</div>
</div>
<div id="main-jason" class="main jason notflo"> <div id="main-jason" class="main jason notflo">
<div id="banner-jason" class="banner jason notflo" data-person="jason"> <div id="banner-jason" class="banner jason notflo" data-person="jason">
<a href="/jason" class="openlink">Jason Banner</a> <a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="/img/profile-jason.png"></a>
<h1><a href="/jason" class="openlink">Jason Williams</a></h1>
</div> </div>
<div id="links-jason" class="links jason notflo"></div> <div id="links-jason" class="links jason notflo"></div>
</div> </div>
<div id="main-flo" class="main flo notjason"> <div id="main-flo" class="main flo notjason">
<div id="banner-flo" class="banner flo notjason" data-person="flo">Flo Banner</div> <div id="banner-flo" class="banner flo notjason" data-person="flo">
<a href="/flo" class="openlink">Flo Banner</a>
</div>
<div id="links-flo" class="links flo notjason"></div> <div id="links-flo" class="links flo notjason"></div>
</div> </div>
<div id="splash-flo" class="splash flo notjason">Flo Splash</div> <div id="splash-flo" class="splash flo notjason">Flo Splash</div>
</div> </div>
</div> <!-- </div> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/vendor/modernizr-3.11.2.min.js"></script> <script src="js/vendor/modernizr-3.11.2.min.js"></script>