Skip to content

Commit

Permalink
Main blog page css and javascript changed
Browse files Browse the repository at this point in the history
  • Loading branch information
KaganCanSit committed Jul 20, 2024
1 parent 3278abd commit 56e6d38
Show file tree
Hide file tree
Showing 20 changed files with 186 additions and 369 deletions.
2 changes: 1 addition & 1 deletion css/bootstrap.min.css
Original file line number Diff line number Diff line change
Expand Up @@ -593,7 +593,7 @@ pre code {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
margin-left: auto;
}

@media (min-width:576px) {
Expand Down
92 changes: 29 additions & 63 deletions css/card.css
Original file line number Diff line number Diff line change
@@ -1,84 +1,50 @@
.card {
max-width: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
display: flex;
flex-direction: column;
border-radius: 3%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
margin-bottom: 24px;
border-radius: 15px;
overflow: hidden;
border: none;
border:none;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
.card__image-container {
position: relative;
overflow: hidden;
}

.card__image {
width: 100%;
max-height: 360px;
object-fit: cover;
border-radius: 3%;
margin-bottom: 2%;
overflow: hidden;
}

.card__title {
text-align: center;
color: #343a40 !important;
height: auto;
transition: filter 0.3s ease, transform 0.3s ease;
border: none;
}

.card__date::before {
content: "📅";
display: inline-block;
.card__image-container:hover .card__image {
filter: grayscale(100%) brightness(80%);
opacity: 0.7;
}

.card__date {
.card__overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
display: block;
font-size: 12px;
text-transform: uppercase;
color: #343a40;
margin: 2% 0;
}

.card__content {
color: #343a40;
padding: 4%;
flex-grow: 1;
}

.card a {
color: inherit;
text-decoration: none;
}

#blog_content_area {
display: flex;
flex-wrap: wrap;
}

#blog_content_area.page-updated {
transition: all 0.3s ease-in-out;
}

#blog_content_area.page-updated .card {
margin-bottom: 0 !important;
}

.fade-out {
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
opacity: 0;
transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease;
}

.fade-in {
.card__image-container:hover .card__overlay {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}

.card__title {
font-size: 18px;
color: white;
}

.col-lg-6 {
margin-bottom: 3%;
display: flex;
.card__date {
color: white;
}
13 changes: 4 additions & 9 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,26 @@
<html lang="tr">

<head>
<!-- Site Info -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="Kağan Can Şit'in portföy sitesi. Projeler, blog yazıları, tasarımlar ve daha fazlası...">
<meta name="author" content="Kağan Can Şit">

<!-- Tab Info -->
<title>Kağan Can Şit</title>
<link rel="icon" href="/images/base_site_images/designPng.webp" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">

<!-- Google Tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2BLQV2M3JL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-2BLQV2M3JL');
</script>

<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">
</head>

<body>
Expand Down
27 changes: 8 additions & 19 deletions js/blogPagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
const paginationDiv = document.getElementById('pagination');
const blogList = Array.from(blogsArea.getElementsByClassName('card'));

const blogDisplayOnePage = 6;
const blogDisplayOnePage = 10;
const totalPage = Math.ceil(blogList.length / blogDisplayOnePage);

for (let page = 1; page <= totalPage; page++) {
Expand All @@ -26,24 +26,13 @@ window.addEventListener('DOMContentLoaded', (event) => {
const firstIndex = (page - 1) * blogDisplayOnePage;
const lastIndex = firstIndex + blogDisplayOnePage;

blogsArea.classList.add('fade-out');
setTimeout(() => {
for (let i = 0; i < blogList.length; i++) {
const parentDiv = blogList[i].parentElement;
parentDiv.style.visibility = 'hidden';
parentDiv.style.position = 'absolute';
parentDiv.style.height = '0';
for (let i = 0; i < blogList.length; i++) {
const parentDiv = blogList[i].parentElement;
if (i >= firstIndex && i < lastIndex) {
parentDiv.style.display = 'block';
} else {
parentDiv.style.display = 'none';
}

for (let i = firstIndex; i < lastIndex && i < blogList.length; i++) {
const parentDiv = blogList[i].parentElement;
parentDiv.style.visibility = 'visible';
parentDiv.style.position = 'static';
parentDiv.style.height = 'auto';
}

blogsArea.classList.remove('fade-out');
blogsArea.classList.add('fade-in');
}, 300);
}
}
});
13 changes: 4 additions & 9 deletions pages/about_me.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,26 @@
<html lang="tr">

<head>
<!-- Site Info -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="Kağan Can Şit'in portföy sitesi. Projeler, blog yazıları, tasarımlar ve daha fazlası...">
<meta name="author" content="Kağan Can Şit">

<!-- Tab Info -->
<title>Kağan Can Şit | Hakkında</title>
<link rel="icon" href="/images/base_site_images/designPng.webp" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">

<!-- Google Tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2BLQV2M3JL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-2BLQV2M3JL');
</script>

<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">
</head>

<body>
Expand Down
15 changes: 5 additions & 10 deletions pages/blogs/00.youtube_kanal_onerileri.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,26 @@
<html lang="tr">

<head>
<!-- Site Info -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="Kağan Can Şit'in portföy sitesi. Projeler, blog yazıları, tasarımlar ve daha fazlası...">
<meta name="author" content="Kağan Can Şit">

<!-- Tab Info -->

<title>Kağan Can Şit</title>
<link rel="icon" href="/images/base_site_images/designPng.webp" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">

<!-- Google Tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2BLQV2M3JL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-2BLQV2M3JL');
</script>

<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">
</head>

<body>
Expand Down
13 changes: 4 additions & 9 deletions pages/blogs/01.idealler_ve_inanclar.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,26 @@
<html lang="tr">

<head>
<!-- Site Info -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="Kağan Can Şit'in portföy sitesi. Projeler, blog yazıları, tasarımlar ve daha fazlası...">
<meta name="author" content="Kağan Can Şit">

<!-- Tab Info -->
<title>Kağan Can Şit</title>
<link rel="icon" href="/images/base_site_images/designPng.webp" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">

<!-- Google Tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2BLQV2M3JL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-2BLQV2M3JL');
</script>

<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">
</head>

<body>
Expand Down
15 changes: 5 additions & 10 deletions pages/blogs/02.notion_ile_markdown_dosyasi_olusturmak.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,26 @@
<html lang="tr">

<head>
<!-- Site Info -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="Kağan Can Şit'in portföy sitesi. Projeler, blog yazıları, tasarımlar ve daha fazlası...">
<meta name="author" content="Kağan Can Şit">

<!-- Tab Info -->

<title>Kağan Can Şit</title>
<link rel="icon" href="/images/base_site_images/designPng.webp" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">

<!-- Google Tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2BLQV2M3JL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-2BLQV2M3JL');
</script>

<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">
</head>

<body>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,26 @@
<html lang="tr">

<head>
<!-- Site Info -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="Kağan Can Şit'in portföy sitesi. Projeler, blog yazıları, tasarımlar ve daha fazlası...">
<meta name="author" content="Kağan Can Şit">

<!-- Tab Info -->

<title>Kağan Can Şit</title>
<link rel="icon" href="/images/base_site_images/designPng.webp" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">

<!-- Google Tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2BLQV2M3JL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-2BLQV2M3JL');
</script>

<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/owl.theme.default.min.css">
<link rel="stylesheet" href="/css/tooplate-style.css">
</head>

<body>
Expand Down
Loading

0 comments on commit 56e6d38

Please sign in to comment.