douwe/douwco_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored css and html file.

Browse Source
This commit is contained in:
douwe
2025-08-06 19:03:31 +02:00
parent 2479809316
commit 1d1e348085
5 changed files with 199 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
static/css/douwco_styling.css
View File

@@ -13,13 +13,6 @@
src: url(../font/Montserrat-Bold.ttf); src: url(../font/Montserrat-Bold.ttf);
} }
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
body { body {
font-family: monsterrat_regular; font-family: monsterrat_regular;
@@ -28,34 +21,147 @@ body {
color: white; color: white;
} }
div .root_div{
.app_panel {
display: flex; display: flex;
flex-direction: column;
}
.root_div > .side_panel_div{
width: 100%;
}
.title_div{
margin-left: 50px;
display: flex;
align-items: center;
flex-direction: row; flex-direction: row;
align-content: center;
}
.title_div > img {
width:150px;
height: 150px;
margin-right: 50px;
}
.title_div > h1 {
font-family: righteous;
font-size: 120px;
}
.apps_title_div {
margin-top: 100px;
}
.apps_title_div > h2 {
font-family: monsterrat_bold;
font-size: 48px;
text-align: center;
}
.apps_title_div > hr {
height: 6px;
width:75%;
background-color: white;
border-width: 0px;
border-radius: 3px;
align-self: center;
}
.app_option_div {
position: relative;
display: flex;
flex-direction: row;
margin: 25px;
border-radius: 25px; border-radius: 25px;
background-color: #304b4bFF; background-color: #304b4bFF;
} }
.app_option_div > img {
button { height: 200px;
width: 200px;
margin: 25px;
}
.app_option_div > div > h3 {
font-family: monsterrat_bold; font-family: monsterrat_bold;
color: white; font-size: 36px;
cursor: pointer;
display: flex;
align-items: center;
} }
.menu_button { .app_option_div > div > p {
font-size: 48px; font-family: monsterrat_regular;
border: none; font-size: 24px;
background-color: transparent;
} }
.menu_button:hover { .app_option_div > div > p > a {
border-radius: 20px; color: #6dde99;
background-color: #304b4bFF;; font-family: monsterrat_bold;
} }
.app_selection_button { .app_option_div > a {
position: absolute;
height: 50px; height: 50px;
width: 150px; width: 125px;
background-color: #6dde99; bottom: 25px;
right: 25px;
align-self: flex-end;
display: flex;
align-items: center;
border-radius: 10px; border-radius: 10px;
border: none; border: none;
background-color: #6dde99;
}
.app_option_div > a > p {
font-family: monsterrat_bold;
font-size: 18px;
width: 100%;
color: white;
text-align: center;
}
a {
font-family: monsterrat_regular;
color: white;
text-decoration:none;
cursor: pointer;
}
.menu_option_a {
font-family: monsterrat_bold;
font-size: 48px;
border: none;
border-radius: 20px;
background-color: transparent;
display: flex;
align-items: center;
margin-left: 50px;
padding-left: 50px;
padding-right: 50px;
}
.menu_option_a:hover{
background-color: #304b4bFF;;
}
.menu_option_a > img {
width:100px;
height:75px;
margin-right: 50px;
}
.menu_option_a > p > span {
color: #88d4d4;
}
@media (min-width: 1300px) {
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.root_div{
display: flex;
flex-direction: row;
}
.root_div > .side_panel_div{
width: 50%;
}
.apps_selection_div {
max-height: 75vh;
overflow-y: auto;
}
} }

21
templates/about_douwco.html
View File

@@ -6,23 +6,10 @@
<html> <html>
<body> <body>
<div style=" <div class="title_div">
margin-left: 50px; <img src="../static/img/douwco_logo.png" alt="douwco_logo">
display: flex; <h1>douwco</h1>
align-items: center; </div>
flex-direction: row;
align-content: center;">
<img src="../static/img/douwco_logo.png" alt="douwco_logo" style="
width:150px;
height: 150px;
margin-right: 50px;">
<h1 style="
font-family: righteous;
font-size: 120px;">
douwco</h1>
</div>
</body> </body>
</html> </html>

21
templates/about_me.html
View File

@@ -6,23 +6,10 @@
<html> <html>
<body> <body>
<div style=" <div class="title_div">
margin-left: 50px; <img src="../static/img/douwco_logo.png" alt="douwco_logo">
display: flex; <h1>douwco</h1>
align-items: center; </div>
flex-direction: row;
align-content: center;">
<img src="../static/img/douwco_logo.png" alt="douwco_logo" style="
width:150px;
height: 150px;
margin-right: 50px;">
<h1 style="
font-family: righteous;
font-size: 120px;">
douwco</h1>
</div>
</body> </body>
</html> </html>

21
templates/games.html
View File

@@ -6,23 +6,10 @@
<html> <html>
<body> <body>
<div style=" <div class="title_div">
margin-left: 50px; <img src="../static/img/douwco_logo.png" alt="douwco_logo">
display: flex; <h1>douwco</h1>
align-items: center; </div>
flex-direction: row;
align-content: center;">
<img src="../static/img/douwco_logo.png" alt="douwco_logo" style="
width:150px;
height: 150px;
margin-right: 50px;">
<h1 style="
font-family: righteous;
font-size: 120px;">
douwco</h1>
</div>
</body> </body>
</html> </html>

190
templates/home.html
View File

@@ -6,151 +6,73 @@
<html> <html>
<body> <body>
<div style=" <!-- <p id="demo"></p>
display: flex; <script>
flex-direction: row;"> var w = window.innerWidth;
<div style=" var h = window.innerHeight;
width: 50%;">
<div style="
margin-left: 50px;
display: flex;
align-items: center;
flex-direction: row;
align-content: center;">
<img src="../static/img/douwco_logo.png" alt="douwco_logo" style=" var x = document.getElementById("demo");
width:150px; x.innerHTML = "Browser width: " + w + ", height: " + h + ".";
height: 150px; </script> -->
margin-right: 50px;">
<h1 style=" <div class="root_div">
font-family: righteous; <div class="side_panel_div">
font-size: 120px;"> <div class="title_div">
douwco</h1> <img src="../static/img/douwco_logo.png" alt="douwco_logo">
<h1>douwco</h1>
</div> </div>
<div> <div>
<button class="menu_button" s <a class="menu_option_a" href="/games">
onclick="location.href='/games'" <img src="../static/img/device-gamepad.png" alt="gamepad icon">
style=" <p>Play <span>My Games</span></p>
margin-left: 50px; </a>
padding-left: 50px; <a class="menu_option_a" href="/about_me">
padding-right: 50px;">
<img src="../static/img/device-gamepad.png" alt="gamepad icon" style="
width:100px;
height:75px;
margin-right: 50px;">
<p>
Play
<span style="color: #88d4d4;">My Games</span>
</p>
</button>
<button class="menu_button"
onclick="location.href='/about_me'"
style="
margin-left: 50px;
padding-left: 50px;
padding-right: 50px;">
<img src="../static/img/user.png" alt="user icon" style=" <img src="../static/img/user.png" alt="user icon" style="
width:5Opx; width:60px;
height:75px; margin-left: 20px;
margin-left: 25px; margin-right:70px;">
margin-right: 75px;"> <p>About <span>Douwe Ravers</span></p>
<p> </a>
About <a class="menu_option_a" href="/about_douwco">
<span style="color: #88d4d4;">Douwe Ravers</span> <img src="../static/img/info-hexagon.png" alt="info icon" style="
</p> width:75px;
</button> margin-left: 12px;
margin-right:62px;">
<button class="menu_button" <p>About <span>Douwco</span></p>
onclick="location.href='/about_douwco'" </a>
style="
margin-left: 50px;
padding-left: 50px;
padding-right: 50px;">
<img src="../static/img/info-hexagon.png" alt="gamepad icon" style="
width:70px;
height:75px;
margin-left: 15px;
margin-right: 65px;">
<p>
About
<span style="color: #88d4d4;">Douwco</span>
</p>
</button>
</div> </div>
</div> </div>
<div style=" <div class="side_panel_div">
width: 50%; <div class="apps_title_div">
margin-top: 100px;"> <h2>Locally Hosted Apps</h2>
<h2 style=" <hr>
font-size: 48px; </div>
text-align: center;"> <div class="apps_selection_div">
Locally Hosted Apps</h2> <div class="app_option_div">
<hr style=" <img src="../static/img/cloud_img.png" alt="cloud icon">
height: 6px;
width:75%;
background-color: white;
border-width: 0px;
border-radius: 3px;
align-self: center;">
<div style="
max-height: 75vh;
overflow-y: auto;">
<div class="app_panel" style="margin: 25px;">
<img src="../static/img/cloud_img.png" alt="cloud icon" style="
height: 200px;
width: 200px;
margin: 25px;
">
<div> <div>
<h3 style="font-size: 36px;">Douwco Cloud</h3> <h3>Douwco Cloud</h3>
<p style="font-size: 24px;"> <p>
Access the cloud hosted on my local server.</br></br> Access the cloud hosted on my local server.</br></br>
Made possible with <a href="https://nextcloud.com/home-users/" Made possible with <a href="https://nextcloud.com/home-users/">Nextcloud AIO</a>.
style="color: #6dde99; font-weight: bolder;">Nextcloud AIO</a>.</p> </p>
</div> </div>
<button class="app_selection_button" <a href="https://cloud.douwco.be">
onclick="location.href='https\:\/\/cloud.douwco.be'" <p>Go to Cloud</p>
style=" </a>
margin-right: 25px;
margin-bottom: 25px;
align-self: flex-end;">
<p style="
font-size: 18px;
width: 100%;
color: white;
text-align: center;
">Go to Cloud</p>
</button>
</div> </div>
<div class="app_panel" style="margin: 25px;"> <div class="app_option_div">
<img src="../static/img/penpot_img.png" alt="penpot icon" style=" <img src="../static/img/penpot_img.png" alt="penpot icon">
height: 200px;
width: 200px;
margin: 25px;
">
<div> <div>
<h3 style="font-size: 36px;">Douwco Designer</h3> <h3>Douwco Designer</h3>
<p style="font-size: 24px;"> <p>
Create UI designs for websites and software locally hosted on my server. </br></br> Create UI designs for websites and software locally hosted on my server. </br></br>
Made possible with <a href="https://penpot.app/self-host" Made possible with <a href="https://penpot.app/self-host">PenPot</a>
style="color: #6dde99; font-weight: bolder;">PenPot</a>.</p> </p>
</div> </div>
<button class="app_selection_button" <a href="https://designer.douwco.be">
onclick="location.href='https\:\/\/designer.douwco.be'" <p>Go to Designer</p>
style=" </a>
width: 250px;
margin-right: 25px;
margin-bottom: 25px;
align-self: flex-end;">
<p style="
font-size: 18px;
width: 100%;
color: white;
text-align: center;
">Go to Designer</p>
</button>
</div> </div>
</div> </div>
</div> </div>