change to jekyll page engine
This commit is contained in:
parent
ba8b789f12
commit
74cfbc1488
19 changed files with 353 additions and 258 deletions
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
|
@ -0,0 +1,7 @@
|
|||
_site/
|
||||
.sass-cache/
|
||||
.jekyll-cache/
|
||||
.jekyll-metadata
|
||||
# Ignore folders generated by Bundler
|
||||
.bundle/
|
||||
vendor/
|
17
Gemfile
Normal file
17
Gemfile
Normal file
|
@ -0,0 +1,17 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
source "https://rubygems.org"
|
||||
gem "jekyll"
|
||||
|
||||
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
|
||||
# and associated library.
|
||||
platforms :mingw, :x64_mingw, :mswin, :jruby do
|
||||
gem "tzinfo", "~> 1.2"
|
||||
gem "tzinfo-data"
|
||||
end
|
||||
|
||||
# Performance-booster for watching directories on Windows
|
||||
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
|
||||
|
||||
|
||||
gem "webrick", "~> 1.7"
|
78
Gemfile.lock
Normal file
78
Gemfile.lock
Normal file
|
@ -0,0 +1,78 @@
|
|||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
addressable (2.8.0)
|
||||
public_suffix (>= 2.0.2, < 5.0)
|
||||
colorator (1.1.0)
|
||||
concurrent-ruby (1.1.9)
|
||||
em-websocket (0.5.3)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0)
|
||||
eventmachine (1.2.7-x64-mingw32)
|
||||
ffi (1.15.5-x64-mingw32)
|
||||
forwardable-extended (2.6.0)
|
||||
http_parser.rb (0.8.0)
|
||||
i18n (1.8.11)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (4.2.1)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (~> 1.0)
|
||||
jekyll-sass-converter (~> 2.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (~> 2.3)
|
||||
kramdown-parser-gfm (~> 1.0)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.4.0)
|
||||
pathutil (~> 0.9)
|
||||
rouge (~> 3.0)
|
||||
safe_yaml (~> 1.0)
|
||||
terminal-table (~> 2.0)
|
||||
jekyll-sass-converter (2.1.0)
|
||||
sassc (> 2.0.1, < 3.0)
|
||||
jekyll-watch (2.2.1)
|
||||
listen (~> 3.0)
|
||||
kramdown (2.3.1)
|
||||
rexml
|
||||
kramdown-parser-gfm (1.1.0)
|
||||
kramdown (~> 2.0)
|
||||
liquid (4.0.3)
|
||||
listen (3.7.1)
|
||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||
rb-inotify (~> 0.9, >= 0.9.10)
|
||||
mercenary (0.4.0)
|
||||
pathutil (0.16.2)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (4.0.6)
|
||||
rb-fsevent (0.11.0)
|
||||
rb-inotify (0.10.1)
|
||||
ffi (~> 1.0)
|
||||
rexml (3.2.5)
|
||||
rouge (3.27.0)
|
||||
safe_yaml (1.0.5)
|
||||
sassc (2.4.0-x64-mingw32)
|
||||
ffi (~> 1.9)
|
||||
terminal-table (2.0.0)
|
||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||
thread_safe (0.3.6)
|
||||
tzinfo (1.2.9)
|
||||
thread_safe (~> 0.1)
|
||||
tzinfo-data (1.2021.5)
|
||||
tzinfo (>= 1.0.0)
|
||||
unicode-display_width (1.8.0)
|
||||
wdm (0.1.1)
|
||||
webrick (1.7.0)
|
||||
|
||||
PLATFORMS
|
||||
x64-mingw32
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll
|
||||
tzinfo (~> 1.2)
|
||||
tzinfo-data
|
||||
wdm (~> 0.1.1)
|
||||
webrick (~> 1.7)
|
||||
|
||||
BUNDLED WITH
|
||||
2.3.5
|
10
_data/navigation.yml
Normal file
10
_data/navigation.yml
Normal file
|
@ -0,0 +1,10 @@
|
|||
- name: Home
|
||||
link: /
|
||||
- name: Services
|
||||
link: /services.html
|
||||
- name: Kontakt
|
||||
link: /kontakt.html
|
||||
- name: Social
|
||||
link: /social.html
|
||||
- name: DO NOT CLICK!
|
||||
link: https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1
|
9
_includes/navigation.html
Normal file
9
_includes/navigation.html
Normal file
|
@ -0,0 +1,9 @@
|
|||
<div class="col-3 col-s-3 menu">
|
||||
<ul>
|
||||
{% for item in site.data.navigation %}
|
||||
<a href="{{ item.link }}">
|
||||
<li {% if page.url == item.link %}class="current"{% endif %}>{{ item.name }}</li>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
31
_layouts/defaults.html
Normal file
31
_layouts/defaults.html
Normal file
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/assets/css/styles.css">
|
||||
<title>Hiajen - {{ page.title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-container">
|
||||
<div class="header">
|
||||
<h1>>> Hiajen</h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
{% include navigation.html %}
|
||||
|
||||
<div class="col-9 col-s-9">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p>{{ content | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
|
||||
<p>made with <a href="https://jekyllrb.com/">Jekyll</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
7
_sass/colours_drakula.scss
Normal file
7
_sass/colours_drakula.scss
Normal file
|
@ -0,0 +1,7 @@
|
|||
:root {
|
||||
--gray0: #282a36; /*background, font-colour*/
|
||||
--gray1: #282a36; /*current menu*/
|
||||
--gray2: #44475a; /*header, footer, menu*/
|
||||
--gray3: #6272a4; /*hover, links*/
|
||||
--background: #f8f8f2 /*container background, font-colour on dark*/
|
||||
}
|
7
_sass/colours_solarized.scss
Normal file
7
_sass/colours_solarized.scss
Normal file
|
@ -0,0 +1,7 @@
|
|||
:root {
|
||||
--gray0: #002b36; /*background, font-colour*/
|
||||
--gray1: #073642; /*current menu*/
|
||||
--gray2: #586e75; /*header, footer, menu*/
|
||||
--gray3: #93a1a1; /*hover*/
|
||||
--background: #eee8d5 /*container background, font-colour on dark*/
|
||||
}
|
126
_sass/main.scss
Normal file
126
_sass/main.scss
Normal file
|
@ -0,0 +1,126 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
color: var(--gray0);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--gray3);
|
||||
}
|
||||
|
||||
div {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.row::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
[class*="col-"] {
|
||||
float: left;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "Lucida Sans", sans-serif;
|
||||
background-color: var(--gray0);
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: var(--gray2);
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.header * {
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu ul a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu a li {
|
||||
padding: 8px;
|
||||
margin-bottom: 7px;
|
||||
background-color: var(--gray2);
|
||||
color: var(--background);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.menu a li:hover {
|
||||
background-color: var(--gray3);
|
||||
}
|
||||
|
||||
.menu a li.current {
|
||||
background-color: var(--gray1);
|
||||
}
|
||||
|
||||
.aside {
|
||||
background-color: #33b5e5;
|
||||
padding: 15px;
|
||||
color: var(--background);
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--gray2);
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.footer * {
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
/* For mobile phones: */
|
||||
[class*="col-"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
/* For tablets: */
|
||||
.col-s-1 {width: 8.33%;}
|
||||
.col-s-2 {width: 16.66%;}
|
||||
.col-s-3 {width: 25%;}
|
||||
.col-s-4 {width: 33.33%;}
|
||||
.col-s-5 {width: 41.66%;}
|
||||
.col-s-6 {width: 50%;}
|
||||
.col-s-7 {width: 58.33%;}
|
||||
.col-s-8 {width: 66.66%;}
|
||||
.col-s-9 {width: 75%;}
|
||||
.col-s-10 {width: 83.33%;}
|
||||
.col-s-11 {width: 91.66%;}
|
||||
.col-s-12 {width: 100%;}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
/* For desktop: */
|
||||
.col-1 {width: 8.33%;}
|
||||
.col-2 {width: 16.66%;}
|
||||
.col-3 {width: 25%;}
|
||||
.col-4 {width: 33.33%;}
|
||||
.col-5 {width: 41.66%;}
|
||||
.col-6 {width: 50%;}
|
||||
.col-7 {width: 58.33%;}
|
||||
.col-8 {width: 66.66%;}
|
||||
.col-9 {width: 75%;}
|
||||
.col-10 {width: 83.33%;}
|
||||
.col-11 {width: 91.66%;}
|
||||
.col-12 {width: 100%;}
|
||||
.main-container {
|
||||
width: 768px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
clear: both;
|
||||
}
|
||||
}
|
5
assets/css/styles.scss
Normal file
5
assets/css/styles.scss
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
---
|
||||
@import "colours_drakula";
|
||||
@import "main";
|
||||
|
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 166 KiB |
4
home.md
Normal file
4
home.md
Normal file
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
layout: defaults
|
||||
title: Home
|
||||
---
|
44
index.html
44
index.html
|
@ -1,35 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
<title>Hiajens Infrastructure</title>
|
||||
</head>
|
||||
<body style="background-color: #002b36">
|
||||
---
|
||||
layout: defaults
|
||||
title: Home
|
||||
---
|
||||
|
||||
<div id="main-container">
|
||||
<div id="head-container">
|
||||
<h1>Hiajens Infrastructure</h1>
|
||||
<h2>>> Start <<</h2>
|
||||
</div>
|
||||
<div class="clearfix" id="wrapper-container">
|
||||
<div id="left-container">
|
||||
<ul class="menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="https://www.hiajen.de" target="_blank">Hiajen</a></li>
|
||||
<li><a href="https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1" target="_blank"> do not click</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="right-container" >
|
||||
<p>Hier sollte eigentlich irgend ein Text stehen, ich bin aber zu faul.<br>Also hier mein Avatar.</p>
|
||||
<img src="img/avatar.png" height="480" width="480" alt="avatar Image from Hiajen"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer-container">
|
||||
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Halloa, Ansgar oder im Neuland auch Hiajen hier. Wer sich beides nicht merken kann, einfach Meep.
|
||||
|
||||
Hier sollte eigentlich irgend ein Text stehen, ich bin aber zu faul mir was sinnvolles auszudenken.
|
||||
Also hier mein Avatar.
|
||||
|
||||
![Avatar of Hiajen](assets/images/avatar.png "Avatar of Hiajen")
|
39
kontakt.html
39
kontakt.html
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
<title>Hiajens Infrastructure</title>
|
||||
</head>
|
||||
<body style="background-color: #002b36">
|
||||
|
||||
<div id="main-container">
|
||||
<div id="head-container">
|
||||
<h1>Hiajens Infrastructure</h1>
|
||||
<h2>>> Kontakt <<</h2>
|
||||
</div>
|
||||
<div class="clearfix" id="wrapper-container">
|
||||
<div id="left-container">
|
||||
<ul class="menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="https://www.hiajen.de" target="_blank">Hiajen</a></li>
|
||||
<li><a href="https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1" target="_blank"> do not click</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="right-container" >
|
||||
<p>Du findest mich fast überall unter dem Nutzername <i>Hiajen</i> hier sind trotzdem noch einmal ein paar Kontaktmöglichkeiten:</p>
|
||||
<ul>
|
||||
<li>Matrix: <a href="https://matrix.to/#/@hiajen:matrix.hiajen.de" target="_blank"> @hiajen:matrix.hiajen.de </a></li>
|
||||
<li>E-Mail: <a href="https://keyserver.ubuntu.com/pks/lookup?search=info%40hiajen.de&fingerprint=on&op=index" target="_blank"> info (at) hiajen (dot) de </a>
|
||||
<br>Fingerprint: F81D 5DA5 B1D3 6D7D 863B 6EE0 D2F7 7DED D818 7A01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer-container">
|
||||
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
9
kontakt.md
Normal file
9
kontakt.md
Normal file
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: defaults
|
||||
title: Kontakt
|
||||
---
|
||||
Du findest mich fast überall unter dem Nutzername `Hiajen` hier sind trotzdem noch einmal ein paar Kontaktmöglichkeiten:
|
||||
* Matrix: [@hiajen:matrix.hiajen.de](https://matrix.to/#/@hiajen:matrix.hiajen.de){:target="_blank"}
|
||||
* E-Mail: [info (at) hiajen (dot) de](https://keyserver.ubuntu.com/pks/lookup?search=info%40hiajen.de&fingerprint=on&op=index){:target="_blank"}
|
||||
* Fingerprint: `F81D 5DA5 B1D3 6D7D 863B 6EE0 D2F7 7DED D818 7A01`
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
<title>Hiajens Infrastructure</title>
|
||||
</head>
|
||||
<body style="background-color: #002b36">
|
||||
|
||||
<div id="main-container">
|
||||
<div id="head-container">
|
||||
<h1>Hiajens Infrastructure</h1>
|
||||
<h2>>> Services <<</h2>
|
||||
</div>
|
||||
<div class="clearfix" id="wrapper-container">
|
||||
<div id="left-container">
|
||||
<ul class="menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="https://www.hiajen.de" target="_blank">Hiajen</a></li>
|
||||
<li><a href="https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1" target="_blank"> do not click</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="right-container" >
|
||||
<p>
|
||||
Hier eine Liste der Anwendungen die ich hoste. Wenn du Zugriff auf eine dieser haben möchtest, komm bitte auf mich zu!
|
||||
</p>
|
||||
<hr style="margin-top: 35px; color: #002b36">
|
||||
<p>
|
||||
<b><del>Accountverwaltung (LDAP):</del></b>
|
||||
Ich habe mein LDAP kaputt gemacht und entschieden es nicht mehr zu nutzen
|
||||
</p>
|
||||
<p>
|
||||
<b><del>Jenkins:</del></b>
|
||||
Ich habe aktuell keinen nutzen hierfür und mir fehlt die Server Power
|
||||
</p>
|
||||
<p>
|
||||
<b><a href="https://bbb.hiajen.de" target="_blank">BigBlueButton:</a></b>
|
||||
OpenSource Videokonferenz-Tool
|
||||
</p>
|
||||
<p>
|
||||
<b><a href="https://git.hiajen.de" target="_blank">GIT (Gitea):</a></b>
|
||||
OpenSource Versionsverwaltungstool für deinen Quellcode
|
||||
</p>
|
||||
<p>
|
||||
<b>Matrix:</b>
|
||||
OpenSource Messenging-Protokoll, zur Nutzung empfehle ich den Client <a href="https://element.io/" target="_blank">Element</a>. Die Home-Server URL lautet: <i>matrix.hiajen.de</i>
|
||||
</p>
|
||||
<p>Matrix-Bots via: <a href="https://matrix.hiajen.de/_maubot/maubot" target="_blank">MauBot</a></p>
|
||||
<p>
|
||||
<b><a href="https://cryptpad.hiajen.de/" target="_blank">CryptPad:</a></b>
|
||||
OpenSource online Tool zur kollaborativen Zusammenarbeit
|
||||
</p>
|
||||
<p>
|
||||
<b><a href="https://cloud.hiajen.de" target="_blank">Cloud (NextCloud):</a></b>
|
||||
OpenSource Cloud-Speicher
|
||||
</p>
|
||||
<p>
|
||||
<b><a href="https://push.hiajen.de" target="_blank">UnifiedPush / Gothify:</a></b>
|
||||
OpenSource PUSH service
|
||||
</p>
|
||||
<p>
|
||||
<b><a href="https://wiki.hiajen.de" target="_blank">Knowledgebase / Wiki:</a></b>
|
||||
OpenSource Knowledgebase oder wiki für alles mögliche an Informationen und wissen
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer-container">
|
||||
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
25
services.md
Normal file
25
services.md
Normal file
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
layout: defaults
|
||||
title: Services
|
||||
---
|
||||
|
||||
Hier eine Liste der Anwendungen die ich hoste. Wenn du Zugriff auf eine dieser haben möchtest, komm bitte auf mich zu!
|
||||
|
||||
* ~~Accountverwaltung (LDAP):~~ Ich habe mein LDAP kaputt gemacht und entschieden es nicht mehr zu nutzen
|
||||
|
||||
* ~~Jenkins:~~ Ich habe aktuell keinen nutzen hierfür und mir fehlt die Server Power
|
||||
|
||||
* **[BigBlueButton](https://bbb.hiajen.de){:target="_blank"}:** OpenSource Videokonferenz-Tool
|
||||
|
||||
* **[GIT (Gitea)](https://git.hiajen.de){:target="_blank"}:** OpenSource Versionsverwaltungstool für deinen Quellcode
|
||||
|
||||
* **Matrix:** OpenSource Messenging-Protokoll, zur Nutzung empfehle ich den Client Element. Die Home-Server URL lautet: `matrix.hiajen.de`
|
||||
* Matrix-Bots via: [MauBot](https://github.com/maubot/maubot){:target="_blank"}
|
||||
|
||||
* **[CryptPad](https://cryptpad.hiajen.de){:target="_blank"}:** OpenSource online Tool zur kollaborativen Zusammenarbeit
|
||||
|
||||
* **[Cloud (NextCloud)](https://cloud.hiajen.de){:target="_blank"}:** OpenSource Cloud-Speicher
|
||||
|
||||
* ~~UnifiedPush / Gothify:~~ OpenSource PUSH service
|
||||
|
||||
* **[Knowledgebase / Wiki](https://wiki.hiajen.de){:target="_blank"}:** OpenSource Knowledgebase oder wiki für alles mögliche an Informationen und wissen
|
8
social.md
Normal file
8
social.md
Normal file
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
layout: defaults
|
||||
title: Social
|
||||
---
|
||||
|
||||
Ich betreibe folgende Social-Media Kanäle:
|
||||
* Mastodon: [@Hiajen@chaos.social](https://chaos.social/@Hiajen){:target="_blank"}
|
||||
* Pixelfed: [@hiajen](https://pixelfed.de/Hiajen){:target="_blank"}
|
111
style/main.css
111
style/main.css
|
@ -1,111 +0,0 @@
|
|||
* {
|
||||
font-family: Arial, serif;
|
||||
color: #002b36;
|
||||
}
|
||||
|
||||
div {
|
||||
background-color: #eee8d5;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
#main-container h1, h2{
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
ul.menu {
|
||||
padding-inline: 20px;
|
||||
#display: block;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
|
||||
#display: inline-block;
|
||||
|
||||
padding: 8px;
|
||||
margin-bottom: 8px;
|
||||
background-color: #586e75;
|
||||
color: #eee8d5;
|
||||
}
|
||||
|
||||
.menu li:hover {
|
||||
background-color: #93a1a1;
|
||||
|
||||
}
|
||||
|
||||
.menu li a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
width: 800px;
|
||||
#height: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
#background-color: aqua;
|
||||
clear: both;
|
||||
#box-shadow: 1px 1px 10px 5px #eee8d5;
|
||||
|
||||
}
|
||||
|
||||
#head-container{
|
||||
background-color: #586e75;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#wrapper-container {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
#left-container{
|
||||
#background-color: blueviolet;
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#right-container{
|
||||
#background-color: brown;
|
||||
height: 100%;
|
||||
width: 75%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#right-container p {
|
||||
margin: 0;
|
||||
padding: 25px 0 0 0;
|
||||
}
|
||||
|
||||
#right-container a {
|
||||
text-decoration: #859900;
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
#footer-container{
|
||||
background-color: #586e75;
|
||||
padding-top: 20px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
Loading…
Reference in a new issue