Skip to content

Commit

Permalink
updated project page and style changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@amickks
amickks committed Dec 29, 2023
1 parent 75ad0f9 commit 9cadb63
Show file tree
Hide file tree
Showing 29 changed files with 148 additions and 107 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion _includes/navbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@

<div class = "navbar mobile-only">
<div id="title"><a href="/" >Amick Sollenberger</a></div>
<a href="javascript:void(0)" id="openbtn" class="mobile-only" onclick="openNav()">&#11057;</a>
<a href="javascript:void(0)" id="openbtn" class="mobile-only" onclick="openNav()">☰</a>
</div>
2 changes: 1 addition & 1 deletion _includes/sidebar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

<div id="nav-js" class="sidebar">
<div id="title" class="large-only"><a href="/">Amick Sollenberger</a></div>
<a href="javascript:void(0)" id="closebtn" class="mobile-only" onclick="closeNav()">&#8694;</a>
<a href="javascript:void(0)" id="closebtn" class="mobile-only" onclick="closeNav()">⏎</a>
<br>
<nav>
<div class="menu">
Expand Down
2 changes: 1 addition & 1 deletion _layouts/gallery.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h3>{{page.title}}</h3>
<div class ="card">
<a href="{{ post.url }}"><img src = "{{post.image}}"></a>
<div class = "desc">
<span>{{ post.date | date_to_string }}</span> <br><b> <a href="{{ post.url }}">{{ post.title }}</a></b> <br> <i>{{post.location}}</i> <br> {{post.medium}} <br><br> {{post.shortdesc}}
<span>{{ post.date | date_to_string }}</span> <br><h3> <b><a href="{{ post.url }}">{{ post.title }}</a></b></h3> <br> <i>{{post.location}}</i> <br> {{post.medium}} <br><br> {{post.shortdesc}}
</div>
</div>

Expand Down
102 changes: 71 additions & 31 deletions _sass/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,25 @@ $bg-color: white;
$accent: orangered;
$icon-size: 18px;
$navbar-height:60px;
$border: lightskyblue;
$border: black;
$borderrad: 3px;
$borderwid: 1px;

body {
font-family:monospace;
// text-transform: lowercase;
// letter-spacing: 1px;
background-color: $bg-color;
padding:0px;
margin: 0px;
color:$text-color;
a {
color:$text-color;
}


}
h1 {
text-transform: uppercase;
font-size: 18px;
font-size: 19px;
}
h2 {
// text-transform: uppercase;
Expand Down Expand Up @@ -53,7 +57,7 @@ body {
overflow:hidden;
background-color: $bg-color;
a {
text-transform: lowercase;
text-transform: uppercase;
color:$text-color;
text-decoration: none;
padding:20px;
Expand All @@ -63,6 +67,7 @@ body {
#title a{
float:left;
font-style: normal;
font-weight: 600;
text-transform: uppercase;
font-size:18px;
text-decoration: none;
Expand All @@ -76,12 +81,12 @@ body {
font-size: $icon-size;
}
&:hover {
font-style: normal;
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: $accent;
text-underline-position:below;
text-decoration-thickness: 1.5px;
// font-style: normal;
// text-decoration: underline;
// text-decoration-style: wavy;
// text-decoration-color: $accent;
// text-underline-position:below;
// text-decoration-thickness: 1.5px;
// color:$text-color;

// @media (max-width: 600px) {
Expand All @@ -98,16 +103,17 @@ body {
}

.sidebar {
height:100%;
height:250px;
font-size: 15px;
float:left;

box-sizing: border-box;

.menu {
a{
line-height: 1.75;
font-size: inherit;
text-decoration: none;
text-transform: uppercase;

&:hover {
font-style: italic;
Expand All @@ -131,6 +137,12 @@ body {
position:absolute;
width:200px;
padding: 20px;
margin-left:10px;
margin-top:10px;
border-style:solid;
border-width:$borderwid;
border-color: $border;
border-radius: $borderrad;
}
.content {
position:absolute;
Expand All @@ -153,6 +165,11 @@ body {
padding-left: 40px;
transition: 0.2s;
overflow:auto;

border-left-style:solid;
border-left-width:$borderwid;
border-left-color: $border;

background-color:$accent;
a{
color:white;
Expand Down Expand Up @@ -205,8 +222,9 @@ body {
// padding-bottom: 100%;
box-sizing: border-box;
border-style:solid;
border-width:0px;
border-width:$borderwid;
border-color: $border;
border-radius: $borderrad;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
Expand Down Expand Up @@ -242,8 +260,9 @@ body {
}
box-sizing: border-box;
border-style:solid;
border-width:1px;
border-width:$borderwid;
border-color: $border;
border-radius: $borderrad;
margin-bottom: 8px;
margin-right: 8px;
flex:1 1 10px;
Expand All @@ -254,41 +273,54 @@ body {
img {
width:70%;
border-style:solid;
border-width:1px;
border-width:$borderwid;
border-color: $border;
box-sizing: border-box;
border-radius: $borderrad;
margin-bottom:10px;
}
}

.project {
display: grid;
gap:20px;

gap: 20px;
width:90%;
// Removed fixed height

img {
height: 100%;
border-style:solid;
border-width:1px;
object-fit: contain;
max-width: 100%;
border-style: solid;
border-width: $borderwid;
border-color: $border;
box-sizing: border-box;
cursor: pointer;
border-radius: $borderrad;
}

.main {
grid-row-end: span 4;
grid-row-end: span 4;
border-style: none;
// Use aspect-ratio
aspect-ratio: 4 / 3; // Change this ratio as needed
}

@media (min-width: 1000px) {
@media (min-width: 1200px) {
grid-template-columns: auto 150px;
}
@media (min-width: 600px) and (max-width: 1000px){
@media (min-width: 800px) and (max-width: 1200px){
grid-template-columns: auto 100px;
}
@media (max-width: 600px) {
@media (max-width: 800px) {
grid-template-columns: auto auto auto auto;
.main {
grid-column-start: 1;
grid-column-end: 5;
}
max-height: none;
}
img {
max-height: 100px;
}
}
}

Expand All @@ -299,19 +331,20 @@ body {
min-height: 152px;
height: auto;
border-style:solid;
border-width:1px;
border-width:$borderwid;
border-color: $border;
box-sizing: border-box;
border-radius: $borderrad;
margin-top: 10px;
display:block;

img {
height:150px;
width:auto;
border-style:solid;
border-width:1px;
border-color: $border;
box-sizing: border-box;
border-bottom-style:solid;
border-bottom-width: $borderwid;
border-bottom-color: $border;
}
.desc {
box-sizing: border-box;
Expand All @@ -324,9 +357,16 @@ body {
float:left;
clear:left;
margin-right: 10px;
border-right-style:solid;
border-right-width: $borderwid;
border-right-color: $border;
}
.pagelist .card:nth-child(even) img {
float:right;
clear:right;
border-left-style:solid;
border-left-width: $borderwid;
border-left-color: $border;

}

4 changes: 2 additions & 2 deletions _site/3D-display/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<div class = "navbar mobile-only">
<div id="title"><a href="/" >Amick Sollenberger</a></div>
<a href="javascript:void(0)" id="openbtn" class="mobile-only" onclick="openNav()">&#11057;</a>
<a href="javascript:void(0)" id="openbtn" class="mobile-only" onclick="openNav()">☰</a>
</div>
<div class="container">
<script>
Expand All @@ -28,7 +28,7 @@

<div id="nav-js" class="sidebar">
<div id="title" class="large-only"><a href="/">Amick Sollenberger</a></div>
<a href="javascript:void(0)" id="closebtn" class="mobile-only" onclick="closeNav()">&#8694;</a>
<a href="javascript:void(0)" id="closebtn" class="mobile-only" onclick="closeNav()">⏎</a>
<br>
<nav>
<div class="menu">
Expand Down
6 changes: 3 additions & 3 deletions _site/about/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<div class = "navbar mobile-only">
<div id="title"><a href="/" >Amick Sollenberger</a></div>
<a href="javascript:void(0)" id="openbtn" class="mobile-only" onclick="openNav()">&#11057;</a>
<a href="javascript:void(0)" id="openbtn" class="mobile-only" onclick="openNav()">☰</a>
</div>
<div class="container">
<script>
Expand All @@ -28,7 +28,7 @@

<div id="nav-js" class="sidebar">
<div id="title" class="large-only"><a href="/">Amick Sollenberger</a></div>
<a href="javascript:void(0)" id="closebtn" class="mobile-only" onclick="closeNav()">&#8694;</a>
<a href="javascript:void(0)" id="closebtn" class="mobile-only" onclick="closeNav()">⏎</a>
<br>
<nav>
<div class="menu">
Expand All @@ -47,7 +47,7 @@
<h3>About</h3>
<p><img src="/assets/images/about/me.jpg" alt="Image" />
<br />
Amick is a mechanical engineering student living in Providence, Rhode Island. They love fixing things and a good egg sandwich</p>
Amick is a mechanical engineering student living in Providence, Rhode Island. They love screws and egg sandwiches.</p>

</div>

Expand Down
47 changes: 24 additions & 23 deletions _site/assets/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
body { font-family: monospace; background-color: white; padding: 0px; margin: 0px; }
body { font-family: monospace; background-color: white; padding: 0px; margin: 0px; color: black; }
body a { color: black; }

h1 { text-transform: uppercase; font-size: 18px; }
h1 { text-transform: uppercase; font-size: 19px; }

h2 { font-weight: normal; font-size: 18px; }

Expand All @@ -11,23 +12,22 @@ p { font-size: 15px; text-transform: none; text-align: justify; }
@media (min-width: 600px) { .mobile-only { display: none; } }
@media (max-width: 600px) { .large-only { display: none; } }
.navbar { top: 0; overflow: hidden; background-color: white; }
.navbar a { text-transform: lowercase; color: black; text-decoration: none; padding: 20px; }
.navbar a { text-transform: uppercase; color: black; text-decoration: none; padding: 20px; }

#title a { float: left; font-style: normal; text-transform: uppercase; font-size: 18px; text-decoration: none; color: black; }
#title a { float: left; font-style: normal; font-weight: 600; text-transform: uppercase; font-size: 18px; text-decoration: none; color: black; }
@media (max-width: 600px) { #title a { font-size: 18px; } }
#title a:hover { font-style: normal; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: orangered; text-underline-position: below; text-decoration-thickness: 1.5px; }
@media (min-width: 600px) { #title a { padding-bottom: 60px; } }

.container { width: 100vw; }

.sidebar { height: 100%; font-size: 15px; float: left; }
.sidebar .menu a { line-height: 1.75; font-size: inherit; text-decoration: none; }
.sidebar { height: 250px; font-size: 15px; float: left; box-sizing: border-box; }
.sidebar .menu a { line-height: 1.75; font-size: inherit; text-decoration: none; text-transform: uppercase; }
.sidebar .menu a:hover { font-style: italic; text-decoration: none; }

@media (min-width: 600px) { .sidebar { position: absolute; width: 200px; padding: 20px; }
@media (min-width: 600px) { .sidebar { position: absolute; width: 200px; padding: 20px; margin-left: 10px; margin-top: 10px; border-style: solid; border-width: 1px; border-color: black; border-radius: 3px; }
.sidebar a { color: black; }
.content { position: absolute; left: 240px; margin: inherit; margin: 10px; width: calc(95% - 260px); } }
@media (max-width: 600px) { .sidebar { position: fixed; width: 0%; height: 100%; z-index: 1; top: 0; right: -40px; margin-left: 60px; padding-left: 40px; transition: 0.2s; overflow: auto; background-color: orangered; }
@media (max-width: 600px) { .sidebar { position: fixed; width: 0%; height: 100%; z-index: 1; top: 0; right: -40px; margin-left: 60px; padding-left: 40px; transition: 0.2s; overflow: auto; border-left-style: solid; border-left-width: 1px; border-left-color: black; background-color: orangered; }
.sidebar a { color: white; }
.content { width: calc(100% - 40px); margin: 0 20px; } }
.sidebar #closebtn { font-size: 30px; line-height: 2em; padding-bottom: 20px; text-decoration: none; color: white; font-weight: normal; }
Expand All @@ -38,31 +38,32 @@ p { font-size: 15px; text-transform: none; text-align: justify; }
@media (min-width: 1000px) { .gallery1 { grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media (min-width: 600px) and (max-width: 1000px) { .gallery1 { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 600px) { .gallery1 { grid-template-columns: 1fr 1fr; } }
.gallery1 .imgbox { display: flex; width: 100%; height: auto; box-sizing: border-box; border-style: solid; border-width: 0px; border-color: lightskyblue; background-position: center center; background-repeat: no-repeat; overflow: hidden; background-size: cover; }
.gallery1 .imgbox { display: flex; width: 100%; height: auto; box-sizing: border-box; border-style: solid; border-width: 1px; border-color: black; border-radius: 3px; background-position: center center; background-repeat: no-repeat; overflow: hidden; background-size: cover; }
.gallery1 .imgbox img { width: 100%; height: auto; margin: 0; }
.gallery1 .imgbox:hover { opacity: 80%; }

.gallery { z-index: -1; font-size: 0; display: flex; flex-flow: column wrap; }
@media (min-width: 1000px) { .gallery { width: calc(25%); height: 62vw; } }
@media (min-width: 600px) and (max-width: 1000px) { .gallery { width: calc(33% + 2px); height: 100vw; } }
@media (max-width: 600px) { .gallery { width: calc(50% + 4px); height: 280vw; } }
.gallery .imgbox { box-sizing: border-box; border-style: solid; border-width: 1px; border-color: lightskyblue; margin-bottom: 8px; margin-right: 8px; flex: 1 1 10px; }
.gallery .imgbox { box-sizing: border-box; border-style: solid; border-width: 1px; border-color: black; border-radius: 3px; margin-bottom: 8px; margin-right: 8px; flex: 1 1 10px; }
.gallery .imgbox img { width: 100%; height: auto; margin: 0; }

.page img { width: 70%; border-style: solid; border-width: 1px; border-color: lightskyblue; box-sizing: border-box; margin-bottom: 10px; }
.page img { width: 70%; border-style: solid; border-width: 1px; border-color: black; box-sizing: border-box; border-radius: 3px; margin-bottom: 10px; }

.project { display: grid; gap: 20px; }
.project img { width: 100%; border-style: solid; border-width: 1px; border-color: lightskyblue; box-sizing: border-box; cursor: pointer; }
.project .main { grid-row-end: span 4; }
@media (min-width: 1000px) { .project { grid-template-columns: auto 150px; } }
@media (min-width: 600px) and (max-width: 1000px) { .project { grid-template-columns: auto 100px; } }
@media (max-width: 600px) { .project { grid-template-columns: auto auto auto auto; }
.project .main { grid-column-start: 1; grid-column-end: 5; } }
.project { display: grid; gap: 20px; width: 90%; }
.project img { object-fit: contain; max-width: 100%; border-style: solid; border-width: 1px; border-color: black; box-sizing: border-box; cursor: pointer; border-radius: 3px; }
.project .main { grid-row-end: span 4; border-style: none; aspect-ratio: 4 / 3; }
@media (min-width: 1200px) { .project { grid-template-columns: auto 150px; } }
@media (min-width: 800px) and (max-width: 1200px) { .project { grid-template-columns: auto 100px; } }
@media (max-width: 800px) { .project { grid-template-columns: auto auto auto auto; }
.project .main { grid-column-start: 1; grid-column-end: 5; max-height: none; }
.project img { max-height: 100px; } }

.pagelist .card { width: 100%; min-height: 152px; height: auto; border-style: solid; border-width: 1px; border-color: lightskyblue; box-sizing: border-box; margin-top: 10px; display: block; }
.pagelist .card img { height: 150px; width: auto; border-style: solid; border-width: 1px; border-color: lightskyblue; box-sizing: border-box; }
.pagelist .card { width: 100%; min-height: 152px; height: auto; border-style: solid; border-width: 1px; border-color: black; box-sizing: border-box; border-radius: 3px; margin-top: 10px; display: block; }
.pagelist .card img { height: 150px; width: auto; box-sizing: border-box; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: black; }
.pagelist .card .desc { box-sizing: border-box; display: block; margin: 10px; }

.pagelist .card:nth-child(odd) img { float: left; clear: left; margin-right: 10px; }
.pagelist .card:nth-child(odd) img { float: left; clear: left; margin-right: 10px; border-right-style: solid; border-right-width: 1px; border-right-color: black; }

.pagelist .card:nth-child(even) img { float: right; clear: right; }
.pagelist .card:nth-child(even) img { float: right; clear: right; border-left-style: solid; border-left-width: 1px; border-left-color: black; }
Binary file modified _site/assets/images/icons/light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified _site/assets/images/icons/necklace.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified _site/assets/images/icons/ring3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified _site/assets/images/icons/structure.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 9cadb63

Please sign in to comment.