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>
|
||||
<body>
|
||||
<style>
|
||||
html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -23,55 +23,63 @@
|
|||
}
|
||||
|
||||
body {
|
||||
overflow-y: scroll;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
height: 100%;
|
||||
background-image: url("{% static 'img/bg.png' %}");
|
||||
background-color: #868F69;
|
||||
background-repeat: repeat;
|
||||
background-attachment: fixed;
|
||||
color: #000000;
|
||||
font-family: "Cormorant Garamond", serif;
|
||||
line-height: 1.5em;
|
||||
font-size: 1.1em;
|
||||
background-image: url("{% static 'img/bg.png' %}");
|
||||
|
||||
font-family: "Cormorant Garamond", serif;
|
||||
color: #000000;
|
||||
|
||||
line-height: 1.5em;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h1.header {
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
color: #603814;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 70px;
|
||||
text-shadow: 1px 1px 0px #868F69, 2px 2px 0px #254117;
|
||||
font-family: "Girassol", serif;
|
||||
color: #603814;
|
||||
text-shadow: 1px 1px 0px #868F69, 2px 2px 0px #254117;
|
||||
text-align: center;
|
||||
|
||||
font-family: "Girassol", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
.container {
|
||||
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%;
|
||||
max-width: 1400px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
|
||||
margin: -10px auto 0px auto;
|
||||
}
|
||||
|
||||
|
||||
.avatar {}
|
||||
.content {
|
||||
padding: 10px 20px 0px 20px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(96,56,20, .9);
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: -10px auto 0px auto;
|
||||
|
||||
background-color: rgba(96,56,20);
|
||||
color: white;
|
||||
margin-bottom: 0px;
|
||||
box-shadow: 0 5px 5px -2px #603814;
|
||||
border-top-style: ridge;
|
||||
border-left-style: ridge;
|
||||
border-right-style: ridge;
|
||||
|
||||
box-shadow: 0 5px 5px -2px #603814;
|
||||
border-top-style: ridge;
|
||||
border-color: #603814;
|
||||
padding: 1px;
|
||||
|
||||
margin-bottom: 0px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -84,47 +92,26 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
.nav a:hover, .nav a:active {
|
||||
font-style: italic;
|
||||
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 {
|
||||
position: relative;
|
||||
|
||||
background-color: #603814;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
||||
height: 40px;
|
||||
max-width: 100%;
|
||||
height: 40px;
|
||||
background-color: #603814;
|
||||
color: white;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
padding: 6px 0px 3px 10px;
|
||||
}
|
||||
|
||||
.forum-thread {
|
||||
width: 100%;
|
||||
border: solid #657346 1px;
|
||||
border: solid #AEBDB6 1px;
|
||||
border-top: 0px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -136,11 +123,17 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid #657346;
|
||||
.row-spacing {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 5px;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid #AEBDB6;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.hide {
|
||||
|
|
@ -157,12 +150,6 @@
|
|||
border-left: solid 8px #16A085;
|
||||
}
|
||||
|
||||
/* blockquote:before { */
|
||||
/* position: relative; */
|
||||
/* content: "> "; */
|
||||
/* margin-left: -1em; */
|
||||
/* } */
|
||||
|
||||
.messages {
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
|
|
@ -216,7 +203,6 @@
|
|||
|
||||
h1.header {
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
color: #603814;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
|
@ -226,8 +212,21 @@
|
|||
}
|
||||
}
|
||||
</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>
|
||||
<div class="container nav">
|
||||
<div class="container">
|
||||
<div class="nav">
|
||||
<center>
|
||||
<a href="https://christian-webring.nekoweb.org/">Home</a>
|
||||
<a href="https://christian-webring.nekoweb.org/widget.html">Widget</a>
|
||||
|
|
@ -238,7 +237,7 @@
|
|||
<a href="{% url 'signup' %}">Join</a>
|
||||
</center>
|
||||
</div>
|
||||
<div class="container nav" style="margin-top:-10px;">
|
||||
<div class="nav">
|
||||
<center>
|
||||
<a href="{% url 'forum_threads' %}">Forum</a>
|
||||
<a href="{% url 'profile' %}">Profile</a>
|
||||
|
|
@ -246,17 +245,6 @@
|
|||
<a href="{% url 'custom_logout' %}">Logout</a>
|
||||
</center>
|
||||
</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 %}
|
||||
<ul class="messages">
|
||||
{% for message in messages %}
|
||||
|
|
@ -264,10 +252,12 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
{% 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>
|
||||
<div style="float:right"><small>v1.0.1</small></div>
|
||||
<div style="clear:both;"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -32,25 +32,23 @@
|
|||
<div style="clear:both;"></div>
|
||||
|
||||
<h2>{{ thread_category }} > {{ thread_name }}</h2>
|
||||
<table>
|
||||
<table class="row-spacing">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 15%;">
|
||||
<col span="1" style="width: 70%;">
|
||||
</colgroup>
|
||||
{% for post in posts %}
|
||||
<tr>
|
||||
<td>
|
||||
<img src="{{ post.created_by.avatar }}" alt="" class="avatar"><br>
|
||||
<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 %}
|
||||
<br>
|
||||
joined {{ post.created_by.date_joined|naturaltime }}
|
||||
<td style="border-right: 0px; text-align: center;">
|
||||
<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 %}
|
||||
<img src="{{ post.created_by.avatar }}" alt="" class="avatar" style="margin-top: 5px;"><br>
|
||||
joined {{ post.created_by.date_joined|naturaltime }}
|
||||
</small>
|
||||
</td>
|
||||
<td style='vertical-align: top;'>
|
||||
<td style='vertical-align: top; border-left: 0px;'>
|
||||
<small style="color:grey;">{{ post.created_at|naturaltime }}</small>
|
||||
<br>
|
||||
<br>
|
||||
<hr>
|
||||
{{ post.content|safe }}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Reference in a new issue