Skip to content

Commit b991ddd

Browse files
steph1111steph1111
committed
updates with non-functioning search
1 parent 1954521 commit b991ddd

File tree

9 files changed

+188
-153
lines changed

9 files changed

+188
-153
lines changed

‎_includes/blog-card.html‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎_includes/blogpage-heading.html‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎_includes/search.html‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
<div class="field has-addons has-text-weight-medium has-text-grey" id="search">
2-
<p class="control">
3-
<input id="search-input" class="input is-shadowless is-uppercase has-text-grey has-text-weight-normal" type="text"
4-
placeholder="Search Here">
1+
<div class="field has-addons" id="search">
2+
<p class="control has-icons-right">
3+
<input class="input" type="text" placeholder="Search">
4+
5+
<!-- Remove icon until formatting actually works -->
6+
<!-- <span class="icon"><i class="fas fa-search"></i></span> -->
57
</p>
6-
<p class="control">
7-
<button class="button">
8-
<i class="fas fa-search has-text-grey"></i>
9-
</button>
10-
</p>
11-
</div>
8+
</div>

‎_includes/updates-card.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div id="updates-card">
2+
<div class="column">
3+
<a href="{{post.url | absolute_url}}">
4+
<div class="card">
5+
<!-- <figure class="image is-4by5" style="background-image: url({{post.post-image}});"></figure> -->
6+
<div class="card-content">
7+
<h1 class="title is-size-4-touch">{{post.title}}</h1>
8+
<div class="content">
9+
{{ post.content | truncate: 300 | strip_html | strip_newlines | strip | escape }}
10+
<!-- Horizontal rule -->
11+
<hr>
12+
13+
<!-- Information at the bottom of the card -->
14+
<span class="information">Published on <span class="has-text-weight-semibold">{{ post.date |
15+
date: "%-B %d, %Y" }}</span></span> | <i class="fas fa-clock"></i> <span
16+
class="has-text-weight-semibold">{% assign words = post.content | number_of_words %}{%-
17+
unless content.size == 0 -%}{{ words | divided_by:180 }} min{% endunless %}</span> read
18+
</div>
19+
</div>
20+
</div>
21+
</a>
22+
</div>
23+
</div>

‎_includes/updates-header.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<nav id="updates-header">
2+
<div class="header-left">
3+
<h2 class="title has-text-left is-size-2 has-text-weight-bold mgb-medium">
4+
Updates
5+
</h2>
6+
</div>
7+
<div class="header-right">
8+
<div class="search-bar">
9+
{% include search.html %}
10+
</div>
11+
</div>
12+
</nav>

‎_layouts/updates.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,22 @@
1010
<body>
1111
{% include navbar.html %}
1212

13-
<section class="hero is-fullheight" id="blog">
14-
<div class="hero-body">
15-
<div class="container">
16-
{% include blogpage-heading.html %}
13+
<section class="section" id="updates">
14+
<div class="container">
15+
{% include updates-header.html %}
16+
17+
<div id="results-container"></div>
18+
{% for post in site.posts %}
19+
{% include updates-card.html %}
20+
{% endfor %}
1721
</div>
1822
</div>
19-
<div id="results-container"></div>
20-
<!--Blog Cards Section-->
21-
{% for post in site.posts %}
22-
{% include blog-card.html %}
23-
{% endfor %}
24-
</div>
2523
</section>
2624
<br>
27-
<!--Footer begins here-->
25+
2826
{% include footer.html %}
27+
28+
<!-- Search script -->
2929
<script src="{{site.url}}{{site.baseurl}}/assets/js/simple-jekyll-search.js"></script>
3030

3131
<script>

‎_site/assets/css/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/assets/css/style.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/css/style.scss‎

Lines changed: 133 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -527,94 +527,157 @@ body { background-color: var(--background); }
527527

528528

529529

530-
#blog {
531-
.hero-body {
532-
padding: 3rem 0.25rem 1rem 0.25rem;
530+
#updates-card {
531+
.card {
532+
min-height: 25vh;
533+
align-items: center;
534+
display: flex;
535+
// align-items: flex-start;
536+
background-color: var(--secondary-bkg);
537+
border-radius: 10px;
538+
overflow: hidden;
539+
transition: all 0.25s ease;
533540
}
534541

535-
.container {
536-
margin: 1.5rem auto;
542+
.card-content {
543+
align-items: center;
537544
}
538545

539-
#blog-card {
540-
transition: all 0.25s ease;
541-
margin-bottom: 0.5vmax;
542-
transform: scale(0.85);
543-
margin-right: 2.5vmax;
544-
margin-left: 2.5vmax;
545-
line-height: normal;
546-
border-radius: 0.25rem;
547-
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
548-
-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
549-
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
550-
551-
&:hover {
552-
transform: scale(0.875);
553-
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
554-
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
555-
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
556-
}
557-
558-
@media (max-width: 768px) {
559-
transform: scale(1);
560-
margin-bottom: 5vmax !important;
561-
562-
&:hover {
563-
transform: scale(1.025);
564-
margin-bottom: 5vmax !important;
565-
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
566-
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
567-
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
568-
}
546+
.card-content {
547+
flex: 1;
548+
padding: 16px; /* Adjust padding as needed */
549+
}
569550

570-
.image {
571-
padding-top: 50% !important;
572-
}
573-
}
551+
.card:hover {
552+
transform: scale(1.05);
553+
}
574554

575-
.title {
576-
margin: 0.5rem !important;
577-
}
555+
hr {
556+
background-color: var(--text);
557+
}
578558

579-
.content {
580-
margin: 0.5rem;
581-
}
559+
.content {
560+
color: var(--text);
561+
}
582562

583-
.column {
584-
display: grid;
563+
.title {
564+
color: var(--header);
565+
}
585566

586-
.image {
587-
border-radius: 0.25rem;
588-
background-position: center;
589-
background-repeat: no-repeat;
590-
background-size: cover;
591-
}
592-
}
567+
.column {
568+
text-align: left;
593569
}
594570
}
595571

572+
573+
574+
// #updates {
575+
// // .container {
576+
// // margin: 1.5rem auto;
577+
// // }
578+
579+
// #updates-card {
580+
// transition: all 0.25s ease;
581+
// margin-bottom: 0.5vmax;
582+
// transform: scale(0.85);
583+
// margin-right: 2.5vmax;
584+
// margin-left: 2.5vmax;
585+
// line-height: normal;
586+
// border-radius: 0.25rem;
587+
// -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
588+
// -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
589+
// box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
590+
591+
// &:hover {
592+
// transform: scale(0.875);
593+
// -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
594+
// -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
595+
// box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
596+
// }
597+
598+
// @media (max-width: 768px) {
599+
// transform: scale(1);
600+
// margin-bottom: 5vmax !important;
601+
602+
// &:hover {
603+
// transform: scale(1.025);
604+
// margin-bottom: 5vmax !important;
605+
// -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
606+
// -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
607+
// box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
608+
// }
609+
610+
// .image {
611+
// padding-top: 50% !important;
612+
// }
613+
// }
614+
615+
// .title {
616+
// margin: 0.5rem !important;
617+
// }
618+
619+
// .content {
620+
// margin: 0.5rem;
621+
// }
622+
623+
// .column {
624+
// display: grid;
625+
626+
// .image {
627+
// border-radius: 0.25rem;
628+
// background-position: center;
629+
// background-repeat: no-repeat;
630+
// background-size: cover;
631+
// }
632+
// }
633+
// }
634+
// }
635+
636+
// TODO: Get the icon on the far right
596637
#search {
597-
border-bottom: 0.15rem solid;
638+
display: flex;
639+
align-items: center;
640+
width: 100%;
598641

599-
input {
600-
border: none;
601-
outline: none;
602-
font-weight: 500 !important;
642+
.input {
643+
text-align: left;
644+
background-color: var(--primary-bkg);
645+
border-color: var(--primary);
646+
display: flex;
647+
justify-content: space-between;
648+
width: 100%;
649+
align-items: center;
650+
padding-left: 20px;
651+
position: relative;
652+
border: 1px solid var(--primary);
653+
border-radius: 1.5rem;
654+
}
603655

604-
&::placeholder {
605-
font-weight: 500;
606-
color: grey;
607-
letter-spacing: 0.25rem;
608-
}
656+
input::placeholder {
657+
color: var(--header);
609658
}
610659

611-
.button {
612-
transition: all 0.25s ease;
613-
&:focus {
614-
outline: 0.25rem solid #ede5f2;
615-
}
660+
.input:focus {
661+
color: var(--header);
662+
}
616663

617-
border: none;
664+
// .icon {
665+
// position: absolute;
666+
// transform: translateY(-50%);
667+
// color: var(--header);
668+
// }
669+
}
670+
671+
#updates-header {
672+
display: flex;
673+
justify-content: space-between;
674+
align-items: center;
675+
margin-bottom: 10vh;
676+
margin-top: 5vh;
677+
678+
.header-right {
679+
display: flex;
680+
align-items: center;
618681
}
619682
}
620683

@@ -667,38 +730,6 @@ body { background-color: var(--background); }
667730
}
668731
}
669732

670-
#project {
671-
.columns {
672-
.column {
673-
border-radius: 0.5rem;
674-
.image {
675-
background-position: center;
676-
background-repeat: no-repeat;
677-
background-size: cover;
678-
}
679-
}
680-
}
681-
682-
#project-card {
683-
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
684-
-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
685-
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
686-
transform: scale(0.95);
687-
transition: all 0.5s ease;
688-
margin-bottom: 0.5rem !important;
689-
display: inline-table;
690-
&:hover {
691-
transform: scale(0.975);
692-
}
693-
}
694-
.card {
695-
transition: all 0.25s ease;
696-
&:hover {
697-
background-color: rgba($color: #111113, $alpha: 0.90)!important;
698-
}
699-
}
700-
}
701-
702733
#team-grid {
703734
display: grid;
704735
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

0 commit comments

Comments
 (0)