Learned a fat lesson about sticky and floats

This commit is contained in:
2024-05-04 19:06:11 -05:00
parent c92cbf8abc
commit 391d5a1768
6 changed files with 69 additions and 100 deletions

View File

@@ -13,7 +13,7 @@ pages = json.load(open("./static/json/pages.json", "r"))
pages['about']['skillList'] = skillList pages['about']['skillList'] = skillList
pages['about']['timeline'] = timeline pages['about']['timeline'] = timeline
pages['projects']['projects'] = proj pages['projects']['projects'] = proj
pages['home']['books'] = books pages['about']['books'] = books
pages['books']['books'] = books pages['books']['books'] = books
app = flask.Flask(__name__) app = flask.Flask(__name__)

View File

@@ -79,17 +79,15 @@ body {
filter: brightness(50%); filter: brightness(50%);
} }
h1, h2 { h1 {
color: #ecebeb; color: #ecebeb;
} }
h2 { h2 {
font-size: 2rem; font-size: medium;
margin-top: 1rem;
margin-bottom: 2rem;
} }
h3, h4, h5 { h2, h3, h4, h5 {
color: #a8a8a8; color: #a8a8a8;
} }
@@ -134,7 +132,7 @@ a {
background-color: #1a1a1a; background-color: #1a1a1a;
width: 100vw; width: 100vw;
z-index: 99; z-index: 99;
position: fixed; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
transition: .4s; transition: .4s;
@@ -150,6 +148,7 @@ a {
#homeName { #homeName {
margin-top: .25em; margin-top: .25em;
margin-bottom: 0;
} }
#name-container { #name-container {
@@ -257,7 +256,6 @@ a {
} }
.foregroundContent { .foregroundContent {
padding-top: 4rem;
padding-left: 8rem; padding-left: 8rem;
max-width: calc(100%-8rem); max-width: calc(100%-8rem);
padding-bottom: 1rem; padding-bottom: 1rem;
@@ -273,7 +271,7 @@ a {
} }
.homegroundContent { .homegroundContent {
padding-top: 5em; padding-top: 1em;
padding-left: 0em; padding-left: 0em;
} }
@@ -313,12 +311,8 @@ a {
#nametag { #nametag {
padding: 2em 3em; padding: 2em 3em;
display: inline-block;
background-color: rgb(44, 44, 44, .75); background-color: rgb(44, 44, 44, .75);
border-radius: 1em;
border: solid black 4px;
text-align: center; text-align: center;
max-width: 30em;
} }
#nametag *:not(h1) { #nametag *:not(h1) {

View File

@@ -2,7 +2,7 @@
<div class="foreground"></div> <div class="foreground"></div>
<div class="foregroundContent"> <div class="foregroundContent">
<div class="relative"> <div class="relative">
<div id="aboutMe" class="col" data-aos="fade-up"> <div id="aboutMe" data-aos="fade-up">
<h2 class="concentratedHead">About Me</h2> <h2 class="concentratedHead">About Me</h2>
<p> <p>
I'm Andrew Simonson, a senior undergrad at I'm Andrew Simonson, a senior undergrad at
@@ -15,8 +15,23 @@
Ominous positivity is kinda my thing. Ominous positivity is kinda my thing.
</p> </p>
<br /> <br />
<div class="chess">
{% from 'partials/chess.html' import chess %} {{
chess('asimonson1125') }}
</div> </div>
<div class="col rightCol" data-aos="fade-up"> <br />
{% from 'partials/bookshelf.html' import bookshelf %} {{
bookshelf(var.books) }}
<br />
<div class="pointer" onClick="goto('duck')">
<img
alt="duck spinning"
src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
class="smallImg"
/>
</div>
</div>
<div data-aos="fade-up">
<div id="skills"> <div id="skills">
<h2 id="skillstag">Skills</h2> <h2 id="skillstag">Skills</h2>
{% from 'partials/skills.html' import skills %} {{ skills(var['skillList']) }} {% from 'partials/skills.html' import skills %} {{ skills(var['skillList']) }}

View File

@@ -7,6 +7,5 @@
src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}" src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
style="max-width: calc(100% - 2em);" style="max-width: calc(100% - 2em);"
/> />
<h3>Stop disturbing the duck, can't you see he's busy spinning?</h3>
</div> </div>
{% endblock %} {% endblock %}

View File

@@ -2,7 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="{{ url_for('static', filename='icons/withBackground.svg') }}" /> <link
rel="icon"
href="{{ url_for('static', filename='icons/withBackground.svg') }}"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="{{ var['description'] }}" /> <meta name="description" content="{{ var['description'] }}" />
@@ -62,7 +65,6 @@
<body onpopstate="backButton()"> <body onpopstate="backButton()">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<iframe src="/hotspots?legend=false" title="HotspotsRIT" id="map"></iframe> <iframe src="/hotspots?legend=false" title="HotspotsRIT" id="map"></iframe>
<div class="App">
<div class="header"> <div class="header">
<div id="name-container" onclick="goto('home', {toggle:false})"> <div id="name-container" onclick="goto('home', {toggle:false})">
<div class="glitch"> <div class="glitch">
@@ -96,12 +98,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> {% endblock %} {% block content%}
{% endblock %}
{% block content%}
<div id="root">{% include var['template'] %}</div> <div id="root">{% include var['template'] %}</div>
{% endblock %} {% endblock %} {% block footer %}
{% block footer %}
<div class="footer">{% include 'partials/socials.html' %}</div> <div class="footer">{% include 'partials/socials.html' %}</div>
{% endblock %} {% endblock %}
</body> </body>

View File

@@ -1,56 +1,18 @@
{% block content %} {% macro nameplate() %} {% block content %} {% macro nameplate() %}
<img <div>
<img
src="{{ url_for('static', filename='icons/neonfinal3.svg') }}" src="{{ url_for('static', filename='icons/neonfinal3.svg') }}"
id="homeIcon" id="homeIcon"
alt="logo" alt="logo"
/> />
<h1 id="homeName" class='textGrad'>Andrew Simonson</h1> <h1 id="homeName" class="textGrad">Andrew Simonson</h1>
<h3>Computer Science student at Rochester Institute of Technology</h3> <h2 class="textGrad">Digital Analysis Beyond Controlled Environments</h2>
<h5>End-to-End Services in Data Science and AI</h5> </div>
{% endmacro %} {% endmacro %}
<div class="foreground homeground"></div> <div class="foreground homeground"></div>
<div class="foregroundContent homegroundContent"> <div class="relative">
<div class="relative"> <div id="nametag" class="flex" data-aos="fade-up">{{ nameplate() }}</div>
<div id="homepage" class="flex">
<div id="HomeContent">
<div class="flex">
<div id="nametag" class="transparent unsetPos" data-aos="fade-up">
{{ nameplate() }}
</div>
<div id="nametagContainer">
<div id="nametag" data-aos="fade-up">{{ nameplate() }}</div>
</div>
</div>
</div>
<div class="onRight" data-aos="fade-up">
<div class="chess">
{% from 'partials/chess.html' import chess %} {{
chess('asimonson1125') }}
</div>
<br />
{% from 'partials/bookshelf.html' import bookshelf %} {{
bookshelf(var.books) }}
<br />
<div class="flex pointer" onclick="goto('duck')">
<img
alt="duck spinning"
src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
class="smallImg"
/>
<img
alt="duck spinning"
src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
class="smallImg"
/>
<img
alt="duck spinning"
src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
class="smallImg"
/>
</div>
</div>
</div>
</div>
</div> </div>
<INSERT SMALL BANNER HERE FOR PROJECT IMAGECARD CAROUSEL>
{% endblock %} {% endblock %}