updating css
This commit is contained in:
parent
0db09fc6f5
commit
8048142c1d
2 changed files with 89 additions and 101 deletions
|
|
@ -12,9 +12,9 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<style>
|
<style>
|
||||||
html {
|
|
||||||
height: 100%;
|
* {
|
||||||
overflow: hidden;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
|
|
@ -23,55 +23,63 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
overflow-y: scroll;
|
background-image: url("{% static 'img/bg.png' %}");
|
||||||
-ms-overflow-style: none;
|
|
||||||
scrollbar-width: none;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #868F69;
|
background-color: #868F69;
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
color: #000000;
|
|
||||||
font-family: "Cormorant Garamond", serif;
|
font-family: "Cormorant Garamond", serif;
|
||||||
line-height: 1.5em;
|
color: #000000;
|
||||||
font-size: 1.1em;
|
|
||||||
background-image: url("{% static 'img/bg.png' %}");
|
line-height: 1.5em;
|
||||||
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
h1.header {
|
h1.header {
|
||||||
text-align: center;
|
color: #603814;
|
||||||
margin: 30px 0;
|
text-shadow: 1px 1px 0px #868F69, 2px 2px 0px #254117;
|
||||||
color: #603814;
|
text-align: center;
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
font-family: "Girassol", serif;
|
||||||
font-size: 70px;
|
font-weight: 400;
|
||||||
text-shadow: 1px 1px 0px #868F69, 2px 2px 0px #254117;
|
font-style: normal;
|
||||||
font-family: "Girassol", serif;
|
font-size: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
color: #3C241B;
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
box-shadow: inset 0 -8px 4px 4px rgba(255, 255, 255, 0), inset 0 2px 4px 0px #603814;
|
||||||
|
border-left-style: ridge;
|
||||||
|
border-right-style: ridge;
|
||||||
|
border-bottom-style:ridge;
|
||||||
|
border-color: #603814;
|
||||||
|
|
||||||
width: 70%;
|
width: 70%;
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
padding: 20px;
|
|
||||||
margin: auto;
|
margin: -10px auto 0px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
.avatar {}
|
padding: 10px 20px 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
box-sizing: border-box;
|
width: 100%;
|
||||||
background-color: rgba(96,56,20, .9);
|
max-width: 1400px;
|
||||||
|
margin: -10px auto 0px auto;
|
||||||
|
|
||||||
|
background-color: rgba(96,56,20);
|
||||||
color: white;
|
color: white;
|
||||||
margin-bottom: 0px;
|
|
||||||
box-shadow: 0 5px 5px -2px #603814;
|
box-shadow: 0 5px 5px -2px #603814;
|
||||||
border-top-style: ridge;
|
border-top-style: ridge;
|
||||||
border-left-style: ridge;
|
|
||||||
border-right-style: ridge;
|
|
||||||
border-color: #603814;
|
border-color: #603814;
|
||||||
padding: 1px;
|
|
||||||
|
margin-bottom: 0px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
@ -84,47 +92,26 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav a:hover {
|
.nav a:hover, .nav a:active {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav a:active {
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main {
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-color: #fff;
|
|
||||||
color: #3C241B;
|
|
||||||
padding: 15px;
|
|
||||||
text-align: justify;
|
|
||||||
/* HOW TO MAKE BOX SHADOW FOR TOP BORDER - A BIT JANKY BUT WORKS. Note how the one for the sides has completely transparent opacity. */
|
|
||||||
box-shadow: inset 0 -8px 4px 4px rgba(255, 255, 255, 0), inset 0 2px 4px 0px #603814;
|
|
||||||
border-left-style: ridge;
|
|
||||||
border-right-style: ridge;
|
|
||||||
border-bottom-style:ridge;
|
|
||||||
border-color: #603814;
|
|
||||||
margin-top: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-category {
|
.forum-category {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
background-color: #603814;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
height: 40px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 40px;
|
padding: 6px 0px 3px 10px;
|
||||||
background-color: #603814;
|
|
||||||
color: white;
|
|
||||||
padding-top: 6px;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
padding-left: 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum-thread {
|
.forum-thread {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: solid #657346 1px;
|
border: solid #AEBDB6 1px;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -136,11 +123,17 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
td,
|
.row-spacing {
|
||||||
th {
|
border-collapse: separate;
|
||||||
border: 1px solid #657346;
|
border-spacing: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
border: 1px solid #AEBDB6;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide {
|
.hide {
|
||||||
|
|
@ -157,12 +150,6 @@
|
||||||
border-left: solid 8px #16A085;
|
border-left: solid 8px #16A085;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* blockquote:before { */
|
|
||||||
/* position: relative; */
|
|
||||||
/* content: "> "; */
|
|
||||||
/* margin-left: -1em; */
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
.messages {
|
.messages {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
@ -216,7 +203,6 @@
|
||||||
|
|
||||||
h1.header {
|
h1.header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 30px 0;
|
|
||||||
color: #603814;
|
color: #603814;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
@ -226,8 +212,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function toggleDisplay(elemId) {
|
||||||
|
let elem = document.getElementById(elemId);
|
||||||
|
if (elem.style.display === "none" || elem.style.display === "") {
|
||||||
|
elem.style.display = "block";
|
||||||
|
} else {
|
||||||
|
elem.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<h1 class="header">Christians of the Internet</h1>
|
<h1 class="header">Christians of the Internet</h1>
|
||||||
<div class="container nav">
|
<div class="container">
|
||||||
|
<div class="nav">
|
||||||
<center>
|
<center>
|
||||||
<a href="https://christian-webring.nekoweb.org/">Home</a>
|
<a href="https://christian-webring.nekoweb.org/">Home</a>
|
||||||
<a href="https://christian-webring.nekoweb.org/widget.html">Widget</a>
|
<a href="https://christian-webring.nekoweb.org/widget.html">Widget</a>
|
||||||
|
|
@ -238,7 +237,7 @@
|
||||||
<a href="{% url 'signup' %}">Join</a>
|
<a href="{% url 'signup' %}">Join</a>
|
||||||
</center>
|
</center>
|
||||||
</div>
|
</div>
|
||||||
<div class="container nav" style="margin-top:-10px;">
|
<div class="nav">
|
||||||
<center>
|
<center>
|
||||||
<a href="{% url 'forum_threads' %}">Forum</a>
|
<a href="{% url 'forum_threads' %}">Forum</a>
|
||||||
<a href="{% url 'profile' %}">Profile</a>
|
<a href="{% url 'profile' %}">Profile</a>
|
||||||
|
|
@ -246,17 +245,6 @@
|
||||||
<a href="{% url 'custom_logout' %}">Logout</a>
|
<a href="{% url 'custom_logout' %}">Logout</a>
|
||||||
</center>
|
</center>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
|
||||||
function toggleDisplay(elemId) {
|
|
||||||
let elem = document.getElementById(elemId);
|
|
||||||
if (elem.style.display === "none" || elem.style.display === "") {
|
|
||||||
elem.style.display = "block";
|
|
||||||
} else {
|
|
||||||
elem.style.display = "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<div id="main" class="container">
|
|
||||||
{% if messages %}
|
{% if messages %}
|
||||||
<ul class="messages">
|
<ul class="messages">
|
||||||
{% for message in messages %}
|
{% for message in messages %}
|
||||||
|
|
@ -264,10 +252,12 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% block content %}{% endblock %}
|
<div class="content">
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
<div style="float:right"><small>v1.0.3</small></div>
|
||||||
|
<div style="clear:both;"></div>
|
||||||
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<div style="float:right"><small>v1.0.1</small></div>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -32,25 +32,23 @@
|
||||||
<div style="clear:both;"></div>
|
<div style="clear:both;"></div>
|
||||||
|
|
||||||
<h2>{{ thread_category }} > {{ thread_name }}</h2>
|
<h2>{{ thread_category }} > {{ thread_name }}</h2>
|
||||||
<table>
|
<table class="row-spacing">
|
||||||
<colgroup>
|
<colgroup>
|
||||||
<col span="1" style="width: 15%;">
|
<col span="1" style="width: 15%;">
|
||||||
<col span="1" style="width: 70%;">
|
<col span="1" style="width: 70%;">
|
||||||
</colgroup>
|
</colgroup>
|
||||||
{% for post in posts %}
|
{% for post in posts %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td style="border-right: 0px; text-align: center;">
|
||||||
<img src="{{ post.created_by.avatar }}" alt="" class="avatar"><br>
|
<small>
|
||||||
<small>
|
<a href="{% url 'user' post.created_by.id %}"><b>{{ post.created_by }}</b></a> {% if post.created_by.flair %}({{ post.created_by.flair }}) {% endif %}
|
||||||
<a href="{% url 'user' post.created_by.id %}"><b>{{ post.created_by }}</b></a> {% if post.created_by.flair %}({{ post.created_by.flair }}) {% endif %}
|
<img src="{{ post.created_by.avatar }}" alt="" class="avatar" style="margin-top: 5px;"><br>
|
||||||
<br>
|
joined {{ post.created_by.date_joined|naturaltime }}
|
||||||
joined {{ post.created_by.date_joined|naturaltime }}
|
|
||||||
</small>
|
</small>
|
||||||
</td>
|
</td>
|
||||||
<td style='vertical-align: top;'>
|
<td style='vertical-align: top; border-left: 0px;'>
|
||||||
<small style="color:grey;">{{ post.created_at|naturaltime }}</small>
|
<small style="color:grey;">{{ post.created_at|naturaltime }}</small>
|
||||||
<br>
|
<hr>
|
||||||
<br>
|
|
||||||
{{ post.content|safe }}
|
{{ post.content|safe }}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue