Herreweb_Family/herreweb_site
3
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases Wiki Activity

Slight updates to the front-end

Browse Source
This commit is contained in:
Jonathan Herrewijnen 2023-12-24 21:24:57 +00:00
parent 2fa6d822a2
commit 297f706d9c
2 changed files with 78 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
static/styles.css Normal file
View File

@ -0,0 +1,66 @@
body {
background-color: rgb(92, 41, 7);
color: white;
font-family: 'Arial', sans-serif;
}
.main-container {
text-align: center;
margin-top: 50px;
}
h1 {
font-family: 'Times New Roman', serif;
font-size: 36px;
margin-top: 20px;
}
.folder-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.document-button {
width: 150px;
height: 200px;
margin: 10px;
background-color: #8B4513; /* Dark SaddleBrown color */
border: 2px solid #8B4513;
border-radius: 10px;
position: relative;
overflow: hidden;
color: white;
}
/* Add a papyrus-like texture to the document buttons */
.document-button:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px),
repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px);
background-size: 30px 30px;
border-radius: 8px;
z-index: -1;
}
/* Add a subtle shadow for depth */
.document-button:hover {
width: 150px;
height: 200px;
margin: 10px;
background-color: #8B4513; /* Dark SaddleBrown color */
border: 2px solid #8B4513;
background:
repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px),
repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px);
border-radius: 10px;
position: relative;
overflow: hidden;
color: white;
}

17
templates/index.html
View File

@ -3,12 +3,19 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repository Folders</title>
<title>Herreweb Repository</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<h1>Repository Folders</h1>
{% for folder in repository_folders %}
<a href="{{ url_for('repository_page', folder=folder) }}"><button>{{ folder }}</button></a>
{% endfor %}
<div class="main-container">
<h1>Our Projects</h1>
<div class="folder-container">
{% for folder in repository_folders %}
<a href="{{ url_for('repository_page', folder=folder) }}">
<button class="document-button">{{ folder }}</button>
</a>
{% endfor %}
</div>
</div>
</body>
</html>