mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2024-12-29 10:56:10 +00:00
Fixing inconsistent sass files
Removed useless styling Fixed date
This commit is contained in:
parent
99c1d81869
commit
56c82513ba
|
|
@ -5,7 +5,7 @@
|
||||||
| |_| | | | | | |_| | |__| __/ (_| \__ \
|
| |_| | | | | | |_| | |__| __/ (_| \__ \
|
||||||
\___/|_| |_|_|\__, |_____\___|\__, |___/
|
\___/|_| |_|_|\__, |_____\___|\__, |___/
|
||||||
|___/ |___/
|
|___/ |___/
|
||||||
Created by Fluffy Bean - Version 23.03.04
|
Created by Fluffy Bean - Version 23.03.09
|
||||||
"""
|
"""
|
||||||
|
|
||||||
# Import system modules
|
# Import system modules
|
||||||
|
|
|
||||||
|
|
@ -41,12 +41,13 @@ def image(image_id):
|
||||||
Image view, shows the image and its metadata
|
Image view, shows the image and its metadata
|
||||||
"""
|
"""
|
||||||
img = db_session.query(db.Posts).filter(db.Posts.id == image_id).first()
|
img = db_session.query(db.Posts).filter(db.Posts.id == image_id).first()
|
||||||
author = db_session.query(db.Users.username).filter(db.Users.id == img.author_id).first()[0]
|
|
||||||
img.author_username = author
|
|
||||||
|
|
||||||
if img is None:
|
if img is None:
|
||||||
abort(404, 'Image not found')
|
abort(404, 'Image not found')
|
||||||
|
|
||||||
|
author = db_session.query(db.Users.username).filter(db.Users.id == img.author_id).first()[0]
|
||||||
|
img.author_username = author
|
||||||
|
|
||||||
return render_template('image.html', image=img, exif=img.image_exif)
|
return render_template('image.html', image=img, exif=img.image_exif)
|
||||||
|
|
||||||
@blueprint.route('/group', methods=['GET', 'POST'])
|
@blueprint.route('/group', methods=['GET', 'POST'])
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'layout.html' %}
|
||||||
|
|
||||||
{% block wrapper_class %}error-wrapper{% endblock %}
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h1>{{error}}</h1>
|
<span class="error-page">
|
||||||
<p>{{msg}}</p>
|
<h1>{{error}}</h1>
|
||||||
|
<p>{{msg}}</p>
|
||||||
|
</span>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -1,29 +1,27 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'layout.html' %}
|
||||||
|
|
||||||
{% block header %}
|
{% block nav_groups %}navigation-item__selected{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
|
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
|
||||||
<span></span>
|
<span></span>
|
||||||
|
|
||||||
<div class="banner__content">
|
<div class="banner-content">
|
||||||
{% block banner_subtitle%}{% endblock %}
|
{% block banner_subtitle%}{% endblock %}
|
||||||
<h1>Groups</h1>
|
<h1>Groups</h1>
|
||||||
<p>gwa gwa</p>
|
<p>gwa gwa</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
|
||||||
{% block nav_groups %}navigation-item__selected{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
<div class="gallery-grid">
|
||||||
<div class="gallery">
|
|
||||||
{% for group in groups %}
|
{% for group in groups %}
|
||||||
<a id="group-{{ group['id'] }}" class="gallery__item" href="/group/{{ group['id'] }}">
|
<a id="group-{{ group['id'] }}" class="gallery-item" href="/group/{{ group['id'] }}">
|
||||||
<span class="gallery__item-info">
|
<span>
|
||||||
<p>{{ group['id'] }}</p>
|
<p>{{ group['id'] }}</p>
|
||||||
<h2><span class="time">{{ group['created_at'] }}</span></h2>
|
<h2><span class="time">{{ group['created_at'] }}</span></h2>
|
||||||
</span>
|
</span>
|
||||||
<img
|
<img
|
||||||
class="gallery__item-group"
|
|
||||||
data-src="{{ group['file_name'] }}"
|
data-src="{{ group['file_name'] }}"
|
||||||
onload="imgFade(this)"
|
onload="imgFade(this)"
|
||||||
style="opacity:0;"
|
style="opacity:0;"
|
||||||
|
|
|
||||||
|
|
@ -1,200 +1,181 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'layout.html' %}
|
||||||
|
|
||||||
{% block header %}
|
|
||||||
<div class="background-decoration">
|
|
||||||
<img src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000" onload="imgFade(this)" style="opacity:0;"/>
|
|
||||||
<span style="background-image: linear-gradient(to top, rgba({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }}, 1), transparent);"></span>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
{% block wrapper_class %}image-wrapper{% endblock %}
|
{% block wrapper_class %}image-wrapper{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<div class="background">
|
||||||
|
<img src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000" onload="imgFade(this)" style="opacity:0;"/>
|
||||||
|
<span style="background-image: linear-gradient(to top, rgba({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }}, 1), transparent);"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="image-fullscreen">
|
<div class="image-fullscreen">
|
||||||
<img src="" onload="imgFade(this);" style="opacity:0;" />
|
<img src="" onload="imgFade(this);" style="opacity:0;" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="image-container">
|
<div class="image-grid">
|
||||||
<img
|
<div class="image-container" id="image-container">
|
||||||
src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000"
|
<img
|
||||||
onload="imgFade(this)" style="opacity:0;"
|
src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000"
|
||||||
onerror="this.src='/static/images/error.png'"
|
onload="imgFade(this)" style="opacity:0;"
|
||||||
width="{{ exif['File']['Width']['raw'] }}"
|
onerror="this.src='/static/images/error.png'"
|
||||||
height="{{ exif['File']['Height']['raw'] }}"
|
width="{{ exif['File']['Width']['raw'] }}"
|
||||||
/>
|
height="{{ exif['File']['Height']['raw'] }}"
|
||||||
</div>
|
/>
|
||||||
|
|
||||||
<div class="pill-row" id="image-tools">
|
|
||||||
<div>
|
|
||||||
<button class="pill-item" id="img-fullscreen">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 24 24" fill="currentColor">
|
|
||||||
<path d="M12.586 2H11a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V3.414L9.414 8 14 12.586V11a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h1.586L8 9.414 3.414 14H5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1v-4a1 1 0 0 1 2 0v1.586L6.586 8 2 3.414V5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H3.414L8 6.586 12.586 2z"></path>
|
|
||||||
</svg>
|
|
||||||
<span class="tool-tip">Fullscreen</span>
|
|
||||||
</button>
|
|
||||||
<button class="pill-item" id="img-share">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor">
|
|
||||||
<path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path>
|
|
||||||
</svg>
|
|
||||||
<span class="tool-tip">Share</span>
|
|
||||||
</button>
|
|
||||||
<a class="pill-item" id="img-download" href="/api/uploads/{{ image['file_name'] }}/0" download>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor">
|
|
||||||
<path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
|
|
||||||
</svg>
|
|
||||||
<span class="tool-tip">Download</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
{% if g.user['id'] == image['author_id'] %}
|
|
||||||
<div>
|
|
||||||
<button class="pill-item pill__critical" id="img-delete">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor">
|
|
||||||
<path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path>
|
|
||||||
</svg>
|
|
||||||
<span class="tool-tip">Delete</span>
|
|
||||||
</button>
|
|
||||||
<button class="pill-item pill__critical" id="img-edit">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor">
|
|
||||||
<path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path>
|
|
||||||
</svg>
|
|
||||||
<span class="tool-tip">Edit</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="image-info__container">
|
<div class="pill-row" id="image-tools">
|
||||||
{% if image['post_description'] %}
|
<div>
|
||||||
<div class="image-info">
|
<button class="pill-item" id="img-fullscreen">
|
||||||
<span class="image-info__collapse" id="collapse-info">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 24 24" fill="currentColor">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
<path d="M12.586 2H11a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V3.414L9.414 8 14 12.586V11a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h1.586L8 9.414 3.414 14H5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1v-4a1 1 0 0 1 2 0v1.586L6.586 8 2 3.414V5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H3.414L8 6.586 12.586 2z"></path>
|
||||||
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
<span class="tool-tip">Fullscreen</span>
|
||||||
<div class="image-info__header">
|
</button>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
|
<button class="pill-item" id="img-share">
|
||||||
<path d="M3 0h10a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm2 1h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2zm0 12h2a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2z"></path>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor">
|
||||||
|
<path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
<h2>Description</h2>
|
<span class="tool-tip">Share</span>
|
||||||
</div>
|
</button>
|
||||||
<div class="image-info__content">
|
<a class="pill-item" id="img-download" href="/api/uploads/{{ image['file_name'] }}/0" download>
|
||||||
<p>{{ image['post_description'] }}</p>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor">
|
||||||
</div>
|
<path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
<div class="image-info">
|
|
||||||
<span class="image-info__collapse" id="collapse-info">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
|
||||||
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div class="image-info__header">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
|
|
||||||
<path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
|
|
||||||
</svg>
|
|
||||||
<h2>Info</h2>
|
|
||||||
</div>
|
|
||||||
<div class="image-info__content">
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>Image ID</td>
|
|
||||||
<td>{{ image['id'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Author</td>
|
|
||||||
<td>{{ image['author_username'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Upload date</td>
|
|
||||||
<td><span class="time">{{ image['created_at'] }}</span></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<div class="img-colours">
|
|
||||||
{% for col in image.image_colours %}
|
|
||||||
<span style="background-color: rgb({{col[0]}}, {{col[1]}}, {{col[2]}})"></span>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% for tag in exif %}
|
|
||||||
<div class="image-info">
|
|
||||||
<span class="image-info__collapse" id="collapse-info">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
|
||||||
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
<span class="tool-tip">Download</span>
|
||||||
{% if tag == 'Photographer' %}
|
</a>
|
||||||
<div class="image-info__header">
|
</div>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -2 24 24" fill="currentColor">
|
{% if g.user['id'] == image['author_id'] %}
|
||||||
<path d="M3.534 10.07a1 1 0 1 1 .733 1.86A3.579 3.579 0 0 0 2 15.26V17a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.647a3.658 3.658 0 0 0-2.356-3.419 1 1 0 1 1 .712-1.868A5.658 5.658 0 0 1 14 15.353V17a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3v-1.74a5.579 5.579 0 0 1 3.534-5.19zM7 0a4 4 0 0 1 4 4v2a4 4 0 1 1-8 0V4a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0V4a2 2 0 0 0-2-2z"></path>
|
<div>
|
||||||
|
<button class="pill-item pill__critical" id="img-delete">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor">
|
||||||
|
<path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
<h2>Photographer</h2>
|
<span class="tool-tip">Delete</span>
|
||||||
</div>
|
</button>
|
||||||
{% elif tag == 'Camera' %}
|
<button class="pill-item pill__critical" id="img-edit">
|
||||||
<div class="image-info__header">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
|
<path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path>
|
||||||
<path d="M5.676 5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1.676l-.387-1.501A2.002 2.002 0 0 0 12 2H8a2 2 0 0 0-1.937 1.499L5.676 5zm-1.55-2C4.57 1.275 6.136 0 8 0h4a4.002 4.002 0 0 1 3.874 3H16a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h.126zM10 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
|
|
||||||
</svg>
|
</svg>
|
||||||
<h2>Camera</h2>
|
<span class="tool-tip">Edit</span>
|
||||||
</div>
|
</button>
|
||||||
{% elif tag == 'Software' %}
|
</div>
|
||||||
<div class="image-info__header">
|
{% endif %}
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
|
</div>
|
||||||
<path d="M2 13v1h3V2H2v9h1v2H2zM1 0h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm9 3h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 2v6h8V5h-8zm2 9h4a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2z"></path>
|
|
||||||
</svg>
|
<div class="info-container" id="image-info">
|
||||||
<h2>Software</h2>
|
{% if image['post_description'] %}
|
||||||
</div>
|
<div class="info-tab">
|
||||||
{% elif tag == 'File' %}
|
<div class="info-header">
|
||||||
<div class="image-info__header">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
|
||||||
<path d="M14 8.322V2H2v12h3.576l3.97-5.292A3 3 0 0 1 14 8.322zm0 3.753l-1.188-2.066a1 1 0 0 0-1.667-.101L8.076 14H14v-1.925zM14 16H2v2h12v-2zM2 0h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm4 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
|
<path d="M3 0h10a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm2 1h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2zm0 12h2a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
<h2>File</h2>
|
<h2>Description</h2>
|
||||||
</div>
|
<svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
||||||
{% else %}
|
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
||||||
<div class="image-info__header">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
|
|
||||||
<path d="M14.95 7.879l-.707-.707a1 1 0 0 1 1.414-1.415l.707.707 1.414-1.414-2.828-2.828L2.222 14.95l2.828 2.828 1.414-1.414L5.05 14.95a1 1 0 0 1 1.414-1.414L7.88 14.95l1.414-1.414-.707-.708A1 1 0 0 1 10 11.414l.707.707 1.414-1.414-1.414-1.414a1 1 0 0 1 1.414-1.414l1.415 1.414 1.414-1.414zM.808 13.536L13.536.808a2 2 0 0 1 2.828 0l2.828 2.828a2 2 0 0 1 0 2.828L6.464 19.192a2 2 0 0 1-2.828 0L.808 16.364a2 2 0 0 1 0-2.828z"></path>
|
|
||||||
</svg>
|
</svg>
|
||||||
<h2>{{tag}}</h2>
|
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
<div class="info-table">
|
||||||
<div class="image-info__content">
|
<p>{{ image['post_description'] }}</p>
|
||||||
<table>
|
</div>
|
||||||
{% for subtag in exif[tag] %}
|
|
||||||
<tr>
|
|
||||||
<td>{{subtag}}</td>
|
|
||||||
{% if exif[tag][subtag]['formatted'] %}
|
|
||||||
{% if exif[tag][subtag]['type'] == 'date' %}
|
|
||||||
<td><span class="time">{{exif[tag][subtag]['formatted']}}</span></td>
|
|
||||||
{% else %}
|
|
||||||
<td>{{exif[tag][subtag]['formatted']}}</td>
|
|
||||||
{% endif %}
|
|
||||||
{% elif exif[tag][subtag]['raw'] %}
|
|
||||||
<td>{{exif[tag][subtag]['raw']}}</td>
|
|
||||||
{% else %}
|
|
||||||
<td class="empty-table">Oops, an error</td>
|
|
||||||
{% endif %}
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{% endif %}
|
||||||
{% endfor %}
|
<div class="info-tab">
|
||||||
|
<div class="info-header">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
|
||||||
|
<path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
|
||||||
|
</svg>
|
||||||
|
<h2>Info</h2>
|
||||||
|
<svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
||||||
|
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="info-table">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>Image ID</td>
|
||||||
|
<td>{{ image['id'] }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Author</td>
|
||||||
|
<td>{{ image['author_username'] }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Upload date</td>
|
||||||
|
<td><span class="time">{{ image['created_at'] }}</span></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<div class="img-colours">
|
||||||
|
{% for col in image.image_colours %}
|
||||||
|
<span style="background-color: rgb({{col[0]}}, {{col[1]}}, {{col[2]}})"></span>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% for tag in exif %}
|
||||||
|
<div class="info-tab">
|
||||||
|
<div class="info-header">
|
||||||
|
{% if tag == 'Photographer' %}
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -2 24 24" fill="currentColor">
|
||||||
|
<path d="M3.534 10.07a1 1 0 1 1 .733 1.86A3.579 3.579 0 0 0 2 15.26V17a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.647a3.658 3.658 0 0 0-2.356-3.419 1 1 0 1 1 .712-1.868A5.658 5.658 0 0 1 14 15.353V17a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3v-1.74a5.579 5.579 0 0 1 3.534-5.19zM7 0a4 4 0 0 1 4 4v2a4 4 0 1 1-8 0V4a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0V4a2 2 0 0 0-2-2z"></path>
|
||||||
|
</svg>
|
||||||
|
<h2>Photographer</h2>
|
||||||
|
{% elif tag == 'Camera' %}
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
|
||||||
|
<path d="M5.676 5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1.676l-.387-1.501A2.002 2.002 0 0 0 12 2H8a2 2 0 0 0-1.937 1.499L5.676 5zm-1.55-2C4.57 1.275 6.136 0 8 0h4a4.002 4.002 0 0 1 3.874 3H16a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h.126zM10 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
|
||||||
|
</svg>
|
||||||
|
<h2>Camera</h2>
|
||||||
|
{% elif tag == 'Software' %}
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
|
||||||
|
<path d="M2 13v1h3V2H2v9h1v2H2zM1 0h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm9 3h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 2v6h8V5h-8zm2 9h4a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2z"></path>
|
||||||
|
</svg>
|
||||||
|
<h2>Software</h2>
|
||||||
|
{% elif tag == 'File' %}
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
|
||||||
|
<path d="M14 8.322V2H2v12h3.576l3.97-5.292A3 3 0 0 1 14 8.322zm0 3.753l-1.188-2.066a1 1 0 0 0-1.667-.101L8.076 14H14v-1.925zM14 16H2v2h12v-2zM2 0h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm4 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
|
||||||
|
</svg>
|
||||||
|
<h2>File</h2>
|
||||||
|
{% else %}
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
|
||||||
|
<path d="M14.95 7.879l-.707-.707a1 1 0 0 1 1.414-1.415l.707.707 1.414-1.414-2.828-2.828L2.222 14.95l2.828 2.828 1.414-1.414L5.05 14.95a1 1 0 0 1 1.414-1.414L7.88 14.95l1.414-1.414-.707-.708A1 1 0 0 1 10 11.414l.707.707 1.414-1.414-1.414-1.414a1 1 0 0 1 1.414-1.414l1.415 1.414 1.414-1.414zM.808 13.536L13.536.808a2 2 0 0 1 2.828 0l2.828 2.828a2 2 0 0 1 0 2.828L6.464 19.192a2 2 0 0 1-2.828 0L.808 16.364a2 2 0 0 1 0-2.828z"></path>
|
||||||
|
</svg>
|
||||||
|
<h2>{{tag}}</h2>
|
||||||
|
{% endif %}
|
||||||
|
<svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
||||||
|
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="info-table">
|
||||||
|
<table>
|
||||||
|
{% for subtag in exif[tag] %}
|
||||||
|
<tr>
|
||||||
|
<td>{{subtag}}</td>
|
||||||
|
{% if exif[tag][subtag]['formatted'] %}
|
||||||
|
{% if exif[tag][subtag]['type'] == 'date' %}
|
||||||
|
<td><span class="time">{{exif[tag][subtag]['formatted']}}</span></td>
|
||||||
|
{% else %}
|
||||||
|
<td>{{exif[tag][subtag]['formatted']}}</td>
|
||||||
|
{% endif %}
|
||||||
|
{% elif exif[tag][subtag]['raw'] %}
|
||||||
|
<td>{{exif[tag][subtag]['raw']}}</td>
|
||||||
|
{% else %}
|
||||||
|
<td class="empty-table">Oops, an error</td>
|
||||||
|
{% endif %}
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
<script>
|
<script>
|
||||||
var infoCollapse = document.querySelectorAll('#collapse-info');
|
var infoTab = document.querySelectorAll('.info-tab');
|
||||||
for (var i = 0; i < infoCollapse.length; i++) {
|
for (var i = 0; i < infoTab.length; i++) {
|
||||||
infoCollapse[i].addEventListener('click', function() {
|
infoTab[i].querySelector('.info-header').addEventListener('click', function() {
|
||||||
this.parentNode.classList.toggle('image-info__collapsed');
|
this.parentNode.classList.toggle('collapsed');
|
||||||
});
|
|
||||||
}
|
|
||||||
var infoHeader = document.querySelectorAll('.image-info__header');
|
|
||||||
for (var i = 0; i < infoHeader.length; i++) {
|
|
||||||
infoHeader[i].addEventListener('click', function() {
|
|
||||||
this.parentNode.classList.toggle('image-info__collapsed');
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,27 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'layout.html' %}
|
||||||
|
|
||||||
{% block header %}
|
{% block nav_home %}navigation-item__selected{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
|
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
|
||||||
<span></span>
|
<span></span>
|
||||||
|
|
||||||
<div class="banner__content">
|
<div class="banner-content">
|
||||||
{% block banner_subtitle%}{% endblock %}
|
|
||||||
<p>{{ motto }}</p>
|
<p>{{ motto }}</p>
|
||||||
<h1>{{ name }}</h1>
|
<h1>{{ name }}</h1>
|
||||||
<p>Serving {{ image_count }} images</p>
|
<p>Serving {{ image_count }} images</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
|
||||||
{% block nav_home %}navigation-item__selected{% endblock %}
|
|
||||||
{% block wrapper_class %}index-wrapper{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
<div class="gallery-grid">
|
||||||
<div class="gallery">
|
|
||||||
{% for image in images %}
|
{% for image in images %}
|
||||||
<a id="image-{{ image['id'] }}" class="gallery__item" href="/image/{{ image['id'] }}" style="background-color: rgb({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }})">
|
<a id="image-{{ image['id'] }}" class="gallery-item" href="/image/{{ image['id'] }}" style="background-color: rgb({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }})">
|
||||||
<span class="gallery__item-info">
|
<span>
|
||||||
<p></p>
|
<p></p>
|
||||||
<h2><span class="time">{{ image['created_at'] }}</span></h2>
|
<h2><span class="time">{{ image['created_at'] }}</span></h2>
|
||||||
</span>
|
</span>
|
||||||
<img
|
<img
|
||||||
class="gallery__item-image"
|
|
||||||
data-src="{{ image['file_name'] }}"
|
data-src="{{ image['file_name'] }}"
|
||||||
onload="imgFade(this)"
|
onload="imgFade(this)"
|
||||||
style="opacity:0;"
|
style="opacity:0;"
|
||||||
|
|
@ -38,7 +34,8 @@
|
||||||
{% block script %}
|
{% block script %}
|
||||||
<script>
|
<script>
|
||||||
function loadOnView() {
|
function loadOnView() {
|
||||||
var images = document.querySelectorAll('.gallery__item-image');
|
var images = document.querySelectorAll('.gallery-item img');
|
||||||
|
|
||||||
for (var i = 0; i < images.length; i++) {
|
for (var i = 0; i < images.length; i++) {
|
||||||
var image = images[i];
|
var image = images[i];
|
||||||
if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
|
if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
|
||||||
|
|
|
||||||
|
|
@ -22,12 +22,26 @@
|
||||||
<script src="{{ url_for('static', filename='js/ui/notifications.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/ui/notifications.js') }}"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<div class="notifications"></div>
|
||||||
<div class="notifications"></div>
|
|
||||||
|
|
||||||
<svg class="jumpUp" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
|
<svg class="jumpUp" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
|
||||||
<path d="M11 8.414V14a1 1 0 0 1-2 0V8.414L6.464 10.95A1 1 0 1 1 5.05 9.536l4.243-4.243a.997.997 0 0 1 1.414 0l4.243 4.243a1 1 0 1 1-1.414 1.414L11 8.414zM10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"></path>
|
<path d="M11 8.414V14a1 1 0 0 1-2 0V8.414L6.464 10.95A1 1 0 1 1 5.05 9.536l4.243-4.243a.997.997 0 0 1 1.414 0l4.243 4.243a1 1 0 1 1-1.414 1.414L11 8.414zM10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
<div class="pop-up">
|
||||||
|
<span class="pop-up__click-off" onclick="popupDissmiss()"></span>
|
||||||
|
<div class="pop-up-wrapper">
|
||||||
|
<div class="pop-up-content">
|
||||||
|
<h3>Title</h3>
|
||||||
|
<p>Very very very drawn out example description</p>
|
||||||
|
</div>
|
||||||
|
<div class="pop-up-controlls">
|
||||||
|
<button class="pop-up__btn" onclick="popupDissmiss()">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
<div class="navigation">
|
<div class="navigation">
|
||||||
<img src="{{url_for('static', filename='images/icon.png')}}" alt="Logo" class="logo" onload="imgFade(this)" style="opacity:0;">
|
<img src="{{url_for('static', filename='images/icon.png')}}" alt="Logo" class="logo" onload="imgFade(this)" style="opacity:0;">
|
||||||
|
|
@ -81,26 +95,11 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% block header %}{% endblock %}
|
<div class="content">
|
||||||
|
|
||||||
<div class="content {% block wrapper_class %}{% endblock %}">
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pop-up">
|
|
||||||
<span class="pop-up__click-off" onclick="popupDissmiss()"></span>
|
|
||||||
<div class="pop-up-wrapper">
|
|
||||||
<div class="pop-up-content">
|
|
||||||
<h3>Title</h3>
|
|
||||||
<p>Very very very drawn out example description</p>
|
|
||||||
</div>
|
|
||||||
<div class="pop-up-controlls">
|
|
||||||
<button class="pop-up__btn" onclick="popupDissmiss()">Cancel</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="upload-panel">
|
<div class="upload-panel">
|
||||||
<span class="click-off" onclick="closeUploadTab()"></span>
|
<span class="click-off" onclick="closeUploadTab()"></span>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,18 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'layout.html' %}
|
||||||
|
|
||||||
{% block header %}
|
|
||||||
<div class="background-decoration">
|
|
||||||
<img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block nav_profile %}navigation-item__selected{% endblock %}
|
{% block nav_profile %}navigation-item__selected{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<div class="banner">
|
||||||
|
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
|
||||||
|
<span></span>
|
||||||
|
|
||||||
|
<div class="banner-content">
|
||||||
|
<h1>Profile</h1>
|
||||||
|
<p>Hello {{ g.user['username'] }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h1>User</h1>
|
<h1>User</h1>
|
||||||
<p>{{user_id}}</p>
|
<p>{{user_id}}</p>
|
||||||
<ul>
|
|
||||||
{% if g.user %}
|
|
||||||
<li><span>{{ g.user['username'] }}</span>
|
|
||||||
<li><a href="{{ url_for('auth.logout') }}">Log Out</a>
|
|
||||||
{% else %}
|
|
||||||
<li><a href="{{ url_for('auth.register') }}">Register</a>
|
|
||||||
<li><a href="{{ url_for('auth.login') }}">Log In</a>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,18 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'layout.html' %}
|
||||||
|
|
||||||
{% block header %}
|
{% block nav_settings %}navigation-item__selected{% endblock %}
|
||||||
|
{% block content %}
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" onload="imgFade(this)" style="opacity:0;"/>
|
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
|
||||||
<span></span>
|
<span></span>
|
||||||
|
|
||||||
<div class="banner__content">
|
<div class="banner-content">
|
||||||
{% block banner_subtitle%}{% endblock %}
|
{% block banner_subtitle%}{% endblock %}
|
||||||
<h1>Settings</h1>
|
<h1>Settings</h1>
|
||||||
<p>All the red buttons in one place, what could go wrong?</p>
|
<p>All the red buttons in one place, what could go wrong?</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
|
||||||
{% block nav_settings %}navigation-item__selected{% endblock %}
|
|
||||||
{% block wrapper_class %}settings-wrapper{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<div class="settings-nav">
|
<div class="settings-nav">
|
||||||
<a href="{{ url_for('settings.general') }}" class="settings-nav__item {% block settings_general %}{% endblock %}">General</a>
|
<a href="{{ url_for('settings.general') }}" class="settings-nav__item {% block settings_general %}{% endblock %}">General</a>
|
||||||
<a href="{{ url_for('settings.server') }}" class="settings-nav__item {% block settings_server %}{% endblock %}">Server</a>
|
<a href="{{ url_for('settings.server') }}" class="settings-nav__item {% block settings_server %}{% endblock %}">Server</a>
|
||||||
|
|
|
||||||
96
gallery/themes/default/components/banner.sass
Normal file
96
gallery/themes/default/components/banner.sass
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
.banner
|
||||||
|
width: 100%
|
||||||
|
height: 40vh
|
||||||
|
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
background-color: $black
|
||||||
|
color: $black
|
||||||
|
|
||||||
|
overflow: hidden
|
||||||
|
transition: opacity 0.3s ease-in-out
|
||||||
|
|
||||||
|
img
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
|
||||||
|
background-color: $black
|
||||||
|
|
||||||
|
object-fit: cover
|
||||||
|
object-position: center center
|
||||||
|
|
||||||
|
span
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
|
||||||
|
background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
|
||||||
|
|
||||||
|
z-index: +1
|
||||||
|
|
||||||
|
.banner-content
|
||||||
|
padding: 1rem
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
height: inherit
|
||||||
|
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
justify-content: flex-end
|
||||||
|
gap: 0.5rem
|
||||||
|
|
||||||
|
z-index: +2
|
||||||
|
|
||||||
|
h1
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
font-size: 6.9rem
|
||||||
|
font-weight: 700
|
||||||
|
line-height: 1
|
||||||
|
text-align: left
|
||||||
|
|
||||||
|
color: $black
|
||||||
|
|
||||||
|
p
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: 600
|
||||||
|
line-height: 1
|
||||||
|
text-align: left
|
||||||
|
|
||||||
|
color: $black
|
||||||
|
|
||||||
|
@media (max-width: $breakpoint)
|
||||||
|
.banner
|
||||||
|
width: 100vw
|
||||||
|
height: 25vh
|
||||||
|
|
||||||
|
span
|
||||||
|
background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))
|
||||||
|
|
||||||
|
.banner-content
|
||||||
|
padding: 0.5rem
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
|
||||||
|
h1
|
||||||
|
font-size: 3.5rem
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
p
|
||||||
|
font-size: 1.1rem
|
||||||
|
text-align: center
|
||||||
112
gallery/themes/default/components/gallery.sass
Normal file
112
gallery/themes/default/components/gallery.sass
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
.gallery-grid
|
||||||
|
margin: 0
|
||||||
|
padding: 0.5rem
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
display: grid
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
|
||||||
|
gap: 0.5rem
|
||||||
|
|
||||||
|
.gallery-item
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
border-radius: $rad
|
||||||
|
|
||||||
|
box-sizing: border-box
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
span
|
||||||
|
margin: 0
|
||||||
|
padding: 0.5rem
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
|
||||||
|
position: absolute
|
||||||
|
left: 0
|
||||||
|
bottom: 0
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
justify-content: flex-end
|
||||||
|
|
||||||
|
background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))
|
||||||
|
|
||||||
|
z-index: +1
|
||||||
|
|
||||||
|
opacity: 0 // hide
|
||||||
|
transform: scale(1.05) // scale up
|
||||||
|
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
|
||||||
|
|
||||||
|
h2
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: 600
|
||||||
|
|
||||||
|
color: $primary
|
||||||
|
|
||||||
|
text-overflow: ellipsis
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
opacity: 0 // hide
|
||||||
|
transition: all 0.2s ease-in-out
|
||||||
|
|
||||||
|
p
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
font-size: 0.8rem
|
||||||
|
font-weight: 500
|
||||||
|
|
||||||
|
color: $white
|
||||||
|
|
||||||
|
text-overflow: ellipsis
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
opacity: 0 // hide
|
||||||
|
transition: all 0.2s ease-in-out
|
||||||
|
|
||||||
|
img
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
bottom: 0
|
||||||
|
|
||||||
|
object-fit: cover
|
||||||
|
object-position: center
|
||||||
|
|
||||||
|
background-color: $white
|
||||||
|
|
||||||
|
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
|
||||||
|
|
||||||
|
&:after
|
||||||
|
content: ""
|
||||||
|
display: block
|
||||||
|
padding-bottom: 100%
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
span
|
||||||
|
opacity: 1
|
||||||
|
transform: scale(1)
|
||||||
|
|
||||||
|
h2, p
|
||||||
|
opacity: 1
|
||||||
|
|
||||||
|
img
|
||||||
|
transform: scale(1.1)
|
||||||
|
|
||||||
|
@media (max-width: 800px)
|
||||||
|
.gallery-grid
|
||||||
|
grid-template-columns: auto auto auto
|
||||||
|
|
@ -1,7 +1,4 @@
|
||||||
.background-decoration
|
.background
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 100vh
|
height: 100vh
|
||||||
|
|
||||||
|
|
@ -17,6 +14,7 @@
|
||||||
|
|
||||||
user-select: none
|
user-select: none
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
z-index: 1
|
||||||
|
|
||||||
img
|
img
|
||||||
position: absolute
|
position: absolute
|
||||||
|
|
@ -42,4 +40,4 @@
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 100%
|
height: 100%
|
||||||
|
|
||||||
z-index: +1
|
z-index: +1
|
||||||
51
gallery/themes/default/components/image-view/fullscreen.sass
Normal file
51
gallery/themes/default/components/image-view/fullscreen.sass
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
.image-fullscreen
|
||||||
|
margin: 0
|
||||||
|
padding: 0 0 0 3.5rem
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
height: 100dvh
|
||||||
|
|
||||||
|
position: fixed
|
||||||
|
top: -100%
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
opacity: 0 // hide
|
||||||
|
|
||||||
|
background-color: rgba($black, 0.8)
|
||||||
|
z-index: 21
|
||||||
|
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
img
|
||||||
|
margin: auto
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
width: auto
|
||||||
|
height: auto
|
||||||
|
max-width: 100%
|
||||||
|
max-height: 100%
|
||||||
|
|
||||||
|
object-fit: contain
|
||||||
|
object-position: center
|
||||||
|
|
||||||
|
transform: scale(0.8)
|
||||||
|
|
||||||
|
.image-fullscreen__active
|
||||||
|
top: 0
|
||||||
|
|
||||||
|
opacity: 1 // show
|
||||||
|
|
||||||
|
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
|
||||||
|
|
||||||
|
img
|
||||||
|
transform: scale(1)
|
||||||
|
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
|
||||||
|
.image-fullscreen__hide
|
||||||
|
opacity: 0 // hide
|
||||||
|
|
||||||
|
transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
|
||||||
|
|
||||||
|
img
|
||||||
|
transform: scaleY(0) // scale(0.8)
|
||||||
|
transition: transform 0.2s ease
|
||||||
21
gallery/themes/default/components/image-view/image.sass
Normal file
21
gallery/themes/default/components/image-view/image.sass
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
.image-container
|
||||||
|
margin: auto
|
||||||
|
padding: 0.5rem
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
img
|
||||||
|
margin: auto
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
width: auto
|
||||||
|
height: auto
|
||||||
|
max-width: 100%
|
||||||
|
max-height: 100%
|
||||||
|
|
||||||
|
object-fit: contain
|
||||||
|
object-position: center
|
||||||
185
gallery/themes/default/components/image-view/info-tab.sass
Normal file
185
gallery/themes/default/components/image-view/info-tab.sass
Normal file
|
|
@ -0,0 +1,185 @@
|
||||||
|
.info-container
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
|
||||||
|
background-color: $black
|
||||||
|
|
||||||
|
overflow-y: auto
|
||||||
|
|
||||||
|
.info-tab
|
||||||
|
width: 100%
|
||||||
|
max-height: 100%
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
background-color: $black
|
||||||
|
border-radius: $rad
|
||||||
|
|
||||||
|
transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)
|
||||||
|
|
||||||
|
&.collapsed
|
||||||
|
height: 2.5rem
|
||||||
|
|
||||||
|
.collapse-indicator
|
||||||
|
transform: rotate(90deg)
|
||||||
|
|
||||||
|
.info-table
|
||||||
|
padding: 0
|
||||||
|
opacity: 0
|
||||||
|
|
||||||
|
.collapse-indicator
|
||||||
|
width: 1.25rem
|
||||||
|
height: 1.25rem
|
||||||
|
|
||||||
|
position: absolute
|
||||||
|
top: 0.6rem
|
||||||
|
right: 0.6rem
|
||||||
|
|
||||||
|
color: $primary
|
||||||
|
|
||||||
|
z-index: +2
|
||||||
|
|
||||||
|
transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
|
||||||
|
user-select: none
|
||||||
|
|
||||||
|
.info-header
|
||||||
|
margin: 0
|
||||||
|
padding: 0.5rem
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
height: 2.5rem
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
justify-content: start
|
||||||
|
align-items: center
|
||||||
|
gap: 0.5rem
|
||||||
|
|
||||||
|
position: sticky
|
||||||
|
top: 0
|
||||||
|
z-index: +1
|
||||||
|
|
||||||
|
background: $black2
|
||||||
|
|
||||||
|
svg
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
width: 1.25rem
|
||||||
|
height: 1.25rem
|
||||||
|
|
||||||
|
fill: $primary
|
||||||
|
|
||||||
|
h2
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
font-size: 1.25rem
|
||||||
|
font-weight: 600
|
||||||
|
|
||||||
|
color: $primary
|
||||||
|
|
||||||
|
text-overflow: ellipsis
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
.info-table
|
||||||
|
margin: 0
|
||||||
|
padding: 0.5rem
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
gap: 0.5rem
|
||||||
|
|
||||||
|
color: $white
|
||||||
|
|
||||||
|
overflow-x: hidden
|
||||||
|
|
||||||
|
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
|
||||||
|
|
||||||
|
p
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: 500
|
||||||
|
|
||||||
|
text-overflow: ellipsis
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
table
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
max-width: 100%
|
||||||
|
|
||||||
|
overflow-x: hidden
|
||||||
|
border-collapse: collapse
|
||||||
|
|
||||||
|
tr
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
white-space: nowrap
|
||||||
|
|
||||||
|
td
|
||||||
|
padding-bottom: 0.5rem
|
||||||
|
|
||||||
|
td:first-child
|
||||||
|
padding-right: 0.5rem
|
||||||
|
|
||||||
|
width: 50%
|
||||||
|
max-width: 0
|
||||||
|
|
||||||
|
overflow: hidden
|
||||||
|
text-overflow: ellipsis
|
||||||
|
white-space: nowrap
|
||||||
|
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: 500
|
||||||
|
td:last-child
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
width: 50%
|
||||||
|
max-width: 0
|
||||||
|
|
||||||
|
overflow: hidden
|
||||||
|
text-overflow: ellipsis
|
||||||
|
white-space: nowrap
|
||||||
|
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: 500
|
||||||
|
|
||||||
|
td.empty-table
|
||||||
|
opacity: 0.3
|
||||||
|
|
||||||
|
tr:last-of-type td
|
||||||
|
padding-bottom: 0
|
||||||
|
|
||||||
|
.img-colours
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
gap: 0.5rem
|
||||||
|
|
||||||
|
span
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
height: 2rem
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
|
||||||
|
border-radius: $rad
|
||||||
66
gallery/themes/default/components/image-view/view.sass
Normal file
66
gallery/themes/default/components/image-view/view.sass
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
@import 'background'
|
||||||
|
@import 'fullscreen'
|
||||||
|
@import 'info-tab'
|
||||||
|
@import 'image'
|
||||||
|
|
||||||
|
|
||||||
|
.image-grid
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
display: grid
|
||||||
|
grid-template-areas: 'info image' 'info tools'
|
||||||
|
grid-template-columns: 25rem 1fr
|
||||||
|
grid-template-rows: 1fr auto
|
||||||
|
gap: 0
|
||||||
|
|
||||||
|
height: 100vh
|
||||||
|
|
||||||
|
z-index: 3
|
||||||
|
|
||||||
|
#image-info
|
||||||
|
grid-area: info
|
||||||
|
#image-tools
|
||||||
|
grid-area: tools
|
||||||
|
padding: 0 0 0.5rem 0
|
||||||
|
#image-container
|
||||||
|
grid-area: image
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 1100px)
|
||||||
|
.image-grid
|
||||||
|
padding: 0.5rem
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
gap: 0.5rem
|
||||||
|
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
.image-container
|
||||||
|
margin: 0 auto
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
max-height: 69vh
|
||||||
|
|
||||||
|
img
|
||||||
|
max-height: 69vh
|
||||||
|
|
||||||
|
#image-tools
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
.info-container
|
||||||
|
gap: 0.5rem
|
||||||
|
background: transparent
|
||||||
|
|
||||||
|
.info-header
|
||||||
|
border-radius: $rad $rad 0 0
|
||||||
|
|
||||||
|
.info-tab.collapsed .info-header
|
||||||
|
border-radius: $rad
|
||||||
|
|
||||||
|
@media (max-width: $breakpoint)
|
||||||
|
.image-fullscreen
|
||||||
|
padding: 0 0 3.5rem 0
|
||||||
|
|
||||||
|
|
@ -4,18 +4,18 @@
|
||||||
@import "variables"
|
@import "variables"
|
||||||
@import "animations"
|
@import "animations"
|
||||||
|
|
||||||
@import "ui/notification"
|
@import "components/elements/notification"
|
||||||
@import "ui/pop-up"
|
@import "components/elements/pop-up"
|
||||||
@import "ui/upload-panel"
|
@import "components/elements/upload-panel"
|
||||||
|
|
||||||
@import "ui/navigation"
|
@import "components/navigation"
|
||||||
@import "ui/content"
|
@import "components/banner"
|
||||||
@import "ui/background"
|
@import "components/gallery"
|
||||||
@import "ui/banner"
|
|
||||||
@import "ui/gallery"
|
|
||||||
|
|
||||||
@import "buttons/jumpUp"
|
@import "components/buttons/jumpUp"
|
||||||
@import "buttons/pill"
|
@import "components/buttons/pill"
|
||||||
|
|
||||||
|
@import "components/image-view/view"
|
||||||
|
|
||||||
// Reset
|
// Reset
|
||||||
*
|
*
|
||||||
|
|
@ -36,9 +36,57 @@ html, body
|
||||||
|
|
||||||
.wrapper
|
.wrapper
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0
|
padding: 0 0 0 3.5rem
|
||||||
|
|
||||||
min-height: 100vh
|
min-height: 100vh
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
|
||||||
background-color: $white
|
background-color: $white
|
||||||
color: $black
|
color: $black
|
||||||
|
|
||||||
|
|
||||||
|
.error-page
|
||||||
|
width: 100%
|
||||||
|
height: 100vh
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
|
||||||
|
background-color: $black
|
||||||
|
|
||||||
|
h1
|
||||||
|
margin: 0 2rem
|
||||||
|
|
||||||
|
font-size: 6.9rem
|
||||||
|
font-weight: 900
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
color: $primary
|
||||||
|
|
||||||
|
p
|
||||||
|
margin: 0 2rem
|
||||||
|
|
||||||
|
max-width: 40rem
|
||||||
|
font-size: 1.25rem
|
||||||
|
font-weight: 400
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
color: $white
|
||||||
|
|
||||||
|
@media (max-width: $breakpoint)
|
||||||
|
.wrapper
|
||||||
|
padding: 0 0 3.5rem 0
|
||||||
|
|
||||||
|
.error-page
|
||||||
|
height: calc(100vh - 3.5rem)
|
||||||
|
|
||||||
|
h1
|
||||||
|
font-size: 4.5rem
|
||||||
|
|
||||||
|
p
|
||||||
|
max-width: 100%
|
||||||
|
font-size: 1rem
|
||||||
|
|
@ -1,104 +0,0 @@
|
||||||
.banner
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: calc(100vw - 3.5rem)
|
|
||||||
height: 40vh
|
|
||||||
|
|
||||||
position: relative
|
|
||||||
top: 0
|
|
||||||
left: 3.5rem
|
|
||||||
|
|
||||||
background-color: $black
|
|
||||||
color: $black
|
|
||||||
|
|
||||||
overflow: hidden
|
|
||||||
transition: opacity 0.3s ease-in-out
|
|
||||||
|
|
||||||
img
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
background-color: $black
|
|
||||||
|
|
||||||
object-fit: cover
|
|
||||||
object-position: center center
|
|
||||||
|
|
||||||
span
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
|
|
||||||
|
|
||||||
z-index: +1
|
|
||||||
|
|
||||||
.banner__content
|
|
||||||
margin: 0
|
|
||||||
padding: 1rem
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: flex-end
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
z-index: +2
|
|
||||||
|
|
||||||
h1
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
font-size: 6.9rem
|
|
||||||
font-weight: 700
|
|
||||||
line-height: 1
|
|
||||||
text-align: left
|
|
||||||
|
|
||||||
color: $black
|
|
||||||
|
|
||||||
p
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 600
|
|
||||||
line-height: 1
|
|
||||||
text-align: left
|
|
||||||
|
|
||||||
color: $black
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint)
|
|
||||||
.banner
|
|
||||||
width: 100vw
|
|
||||||
height: 25vh
|
|
||||||
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
span
|
|
||||||
background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))
|
|
||||||
|
|
||||||
.banner__content
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
h1
|
|
||||||
font-size: 3.5rem
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
p
|
|
||||||
font-size: 1.1rem
|
|
||||||
text-align: center
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
@import "wrappers/index"
|
|
||||||
@import "wrappers/image"
|
|
||||||
@import "wrappers/settings"
|
|
||||||
@import "wrappers/error"
|
|
||||||
|
|
||||||
.content
|
|
||||||
width: calc(100% - 3.5rem)
|
|
||||||
min-height: 100vh
|
|
||||||
|
|
||||||
position: relative
|
|
||||||
left: 3.5rem
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint)
|
|
||||||
.content
|
|
||||||
width: 100%
|
|
||||||
left: 0
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
.gallery
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
display: grid
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
@media (max-width: 800px)
|
|
||||||
.gallery
|
|
||||||
grid-template-columns: auto auto auto
|
|
||||||
|
|
||||||
.gallery__item
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
// background: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
|
|
||||||
// background-size: 1000px 640px
|
|
||||||
// animation: imgLoading 1.8s linear infinite forwards
|
|
||||||
border-radius: $rad
|
|
||||||
|
|
||||||
box-sizing: border-box
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
&:after
|
|
||||||
content: ""
|
|
||||||
display: block
|
|
||||||
padding-bottom: 100%
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
.gallery__item-info
|
|
||||||
opacity: 1
|
|
||||||
transform: scale(1)
|
|
||||||
|
|
||||||
h2, p
|
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
.gallery__item-image
|
|
||||||
transform: scale(1.1)
|
|
||||||
|
|
||||||
.gallery__item-info
|
|
||||||
margin: 0
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
position: absolute
|
|
||||||
left: 0
|
|
||||||
bottom: 0
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: flex-end
|
|
||||||
|
|
||||||
background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))
|
|
||||||
|
|
||||||
z-index: +1
|
|
||||||
|
|
||||||
opacity: 0 // hide
|
|
||||||
transform: scale(1.05) // scale up
|
|
||||||
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
|
|
||||||
|
|
||||||
h2
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 600
|
|
||||||
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
text-overflow: ellipsis
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
opacity: 0 // hide
|
|
||||||
transition: all 0.2s ease-in-out
|
|
||||||
|
|
||||||
p
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
font-size: 0.8rem
|
|
||||||
font-weight: 500
|
|
||||||
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
text-overflow: ellipsis
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
opacity: 0 // hide
|
|
||||||
transition: all 0.2s ease-in-out
|
|
||||||
|
|
||||||
.gallery__item-image
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
right: 0
|
|
||||||
bottom: 0
|
|
||||||
|
|
||||||
object-fit: cover
|
|
||||||
object-position: center
|
|
||||||
|
|
||||||
background-color: $white
|
|
||||||
|
|
||||||
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
.error-wrapper
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
background-color: $black
|
|
||||||
|
|
||||||
h1
|
|
||||||
margin: 0 2rem
|
|
||||||
|
|
||||||
font-size: 6.9rem
|
|
||||||
font-weight: 900
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
p
|
|
||||||
margin: 0 2rem
|
|
||||||
|
|
||||||
max-width: 40rem
|
|
||||||
font-size: 1.25rem
|
|
||||||
font-weight: 400
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint)
|
|
||||||
.error-wrapper
|
|
||||||
h1
|
|
||||||
font-size: 4.5rem
|
|
||||||
|
|
||||||
p
|
|
||||||
max-width: 100%
|
|
||||||
font-size: 1rem
|
|
||||||
|
|
@ -1,351 +0,0 @@
|
||||||
.image-wrapper
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
display: grid
|
|
||||||
grid-template-areas: 'info image' 'info tools'
|
|
||||||
grid-template-columns: 25rem 1fr
|
|
||||||
grid-template-rows: 1fr auto
|
|
||||||
gap: 0
|
|
||||||
|
|
||||||
height: 100vh
|
|
||||||
|
|
||||||
.image-fullscreen
|
|
||||||
margin: 0
|
|
||||||
padding: 0 0 0 3.5rem
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100dvh
|
|
||||||
|
|
||||||
position: fixed
|
|
||||||
top: -100%
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
opacity: 0 // hide
|
|
||||||
|
|
||||||
background-color: rgba($black, 0.8)
|
|
||||||
z-index: 21
|
|
||||||
|
|
||||||
box-sizing: border-box
|
|
||||||
|
|
||||||
img
|
|
||||||
margin: auto
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: auto
|
|
||||||
height: auto
|
|
||||||
max-width: 100%
|
|
||||||
max-height: 100%
|
|
||||||
|
|
||||||
object-fit: contain
|
|
||||||
object-position: center
|
|
||||||
|
|
||||||
transform: scale(0.8)
|
|
||||||
|
|
||||||
.image-fullscreen__active
|
|
||||||
top: 0
|
|
||||||
|
|
||||||
opacity: 1 // show
|
|
||||||
|
|
||||||
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
|
|
||||||
|
|
||||||
img
|
|
||||||
transform: scale(1)
|
|
||||||
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
|
|
||||||
.image-fullscreen__hide
|
|
||||||
opacity: 0 // hide
|
|
||||||
|
|
||||||
transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
|
|
||||||
|
|
||||||
img
|
|
||||||
transform: scaleY(0) // scale(0.8)
|
|
||||||
transition: transform 0.2s ease
|
|
||||||
|
|
||||||
.image-container
|
|
||||||
margin: auto
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
grid-area: image
|
|
||||||
|
|
||||||
img
|
|
||||||
margin: auto
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: auto
|
|
||||||
height: auto
|
|
||||||
max-width: 100%
|
|
||||||
max-height: 100%
|
|
||||||
|
|
||||||
object-fit: contain
|
|
||||||
object-position: center
|
|
||||||
|
|
||||||
// box-shadow: 0 0 0.5rem rgba($black, 0.5)
|
|
||||||
|
|
||||||
.image-info__container
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
|
|
||||||
background-color: $black
|
|
||||||
|
|
||||||
overflow-y: auto
|
|
||||||
|
|
||||||
grid-area: info
|
|
||||||
|
|
||||||
.image-info
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
background-color: $black
|
|
||||||
border-radius: $rad
|
|
||||||
|
|
||||||
.image-info__collapse
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 1.25rem
|
|
||||||
height: 1.25rem
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
position: absolute
|
|
||||||
top: 0.6rem
|
|
||||||
right: 0.6rem
|
|
||||||
|
|
||||||
cursor: pointer
|
|
||||||
z-index: +2
|
|
||||||
|
|
||||||
transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
|
|
||||||
|
|
||||||
svg
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
fill: $primary
|
|
||||||
|
|
||||||
.image-info__header
|
|
||||||
margin: 0
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 2.5rem
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
justify-content: start
|
|
||||||
align-items: center
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
position: sticky
|
|
||||||
top: 0
|
|
||||||
z-index: +1
|
|
||||||
|
|
||||||
background-image: linear-gradient(to right, rgba($black2, 1), rgba($black, 1))
|
|
||||||
|
|
||||||
svg
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 1.25rem
|
|
||||||
height: 1.25rem
|
|
||||||
|
|
||||||
fill: $primary
|
|
||||||
|
|
||||||
h2
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
font-size: 1.25rem
|
|
||||||
font-weight: 600
|
|
||||||
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
text-overflow: ellipsis
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
.image-info__content
|
|
||||||
margin: 0
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
overflow-x: hidden
|
|
||||||
|
|
||||||
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
|
|
||||||
|
|
||||||
p
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 500
|
|
||||||
|
|
||||||
text-overflow: ellipsis
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
table
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
overflow-x: hidden
|
|
||||||
border-collapse: collapse
|
|
||||||
|
|
||||||
tr
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
white-space: nowrap
|
|
||||||
|
|
||||||
td
|
|
||||||
padding-bottom: 0.5rem
|
|
||||||
|
|
||||||
td:first-child
|
|
||||||
padding-right: 0.5rem
|
|
||||||
|
|
||||||
width: 50%
|
|
||||||
max-width: 0
|
|
||||||
|
|
||||||
overflow: hidden
|
|
||||||
text-overflow: ellipsis
|
|
||||||
white-space: nowrap
|
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 500
|
|
||||||
td:last-child
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 50%
|
|
||||||
max-width: 0
|
|
||||||
|
|
||||||
overflow: hidden
|
|
||||||
text-overflow: ellipsis
|
|
||||||
white-space: nowrap
|
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 500
|
|
||||||
|
|
||||||
td.empty-table
|
|
||||||
opacity: 0.3
|
|
||||||
|
|
||||||
tr:last-of-type td
|
|
||||||
padding-bottom: 0
|
|
||||||
|
|
||||||
.img-colours
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
span
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 2rem
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
border-radius: $rad
|
|
||||||
|
|
||||||
.image-info__collapsed
|
|
||||||
height: 2.5rem
|
|
||||||
|
|
||||||
.image-info__collapse
|
|
||||||
transform: rotate(90deg)
|
|
||||||
|
|
||||||
.image-info__content
|
|
||||||
padding: 0
|
|
||||||
opacity: 0
|
|
||||||
|
|
||||||
#image-tools
|
|
||||||
margin-bottom: 0.5rem
|
|
||||||
|
|
||||||
grid-area: tools
|
|
||||||
|
|
||||||
@media (max-width: 1100px)
|
|
||||||
.image-wrapper
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
display: flex !important
|
|
||||||
flex-direction: column
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
.image-container
|
|
||||||
margin: 0 auto
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
max-height: 69vh
|
|
||||||
|
|
||||||
img
|
|
||||||
max-height: 69vh
|
|
||||||
|
|
||||||
#image-tools
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
.image-info__container
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
background: none
|
|
||||||
|
|
||||||
.image-info__container
|
|
||||||
border-radius: $rad
|
|
||||||
|
|
||||||
.image-info__header
|
|
||||||
border-radius: $rad $rad 0 0
|
|
||||||
|
|
||||||
.image-info__collapsed
|
|
||||||
.image-info__header
|
|
||||||
border-radius: $rad
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint)
|
|
||||||
.image-fullscreen
|
|
||||||
padding: 0 0 3.5rem 0
|
|
||||||
|
|
||||||
.image-wrapper
|
|
||||||
padding-bottom: 4rem
|
|
||||||
|
|
||||||
.image-info__header
|
|
||||||
background-image: none
|
|
||||||
background-color: $black2
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
.index-wrapper
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint)
|
|
||||||
.index-wrapper
|
|
||||||
padding-bottom: 4rem
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
@mixin settings-btn($color, $fill: false)
|
|
||||||
@if $fill
|
|
||||||
color: $white
|
|
||||||
background-color: $color
|
|
||||||
border: 2px solid $color
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: $white
|
|
||||||
color: $color
|
|
||||||
@else
|
|
||||||
color: $color
|
|
||||||
background-color: $white
|
|
||||||
border: 2px solid $color
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: $color
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
@mixin settings-log($color)
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 600
|
|
||||||
|
|
||||||
color: $white
|
|
||||||
background-color: $black
|
|
||||||
background-image: linear-gradient(120deg, rgba($color, 0.3), rgba($color, 0));
|
|
||||||
//border-left: 3px solid $color
|
|
||||||
|
|
||||||
|
|
||||||
.settings-wrapper
|
|
||||||
margin: 0
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
gap: 0
|
|
||||||
|
|
||||||
.settings-nav
|
|
||||||
width: 100%
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
position: sticky
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: row
|
|
||||||
justify-content: center
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
background-color: $white
|
|
||||||
|
|
||||||
.settings-nav__item
|
|
||||||
margin: 0
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 2.5rem
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 600
|
|
||||||
text-align: center
|
|
||||||
line-height: 1
|
|
||||||
text-decoration: none
|
|
||||||
|
|
||||||
border-radius: $rad
|
|
||||||
|
|
||||||
cursor: pointer
|
|
||||||
transition: background-color 0.2s ease, color 0.2s ease
|
|
||||||
|
|
||||||
@include settings-btn($black)
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
.settings-nav__item-selected
|
|
||||||
@include settings-btn($black, true)
|
|
||||||
|
|
||||||
.settings-list
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
.log
|
|
||||||
margin: 0
|
|
||||||
padding: 1rem
|
|
||||||
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
border-radius: $rad
|
|
||||||
|
|
||||||
@include settings-log($critical)
|
|
||||||
|
|
||||||
@media (max-width: 450px)
|
|
||||||
.settings-nav
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
flex-direction: column
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
.settings-wrapper
|
|
||||||
padding-bottom: 4rem
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
[tool.poetry]
|
[tool.poetry]
|
||||||
name = "onlylegs"
|
name = "onlylegs"
|
||||||
version = "23.03.03"
|
version = "23.03.09"
|
||||||
description = "Gallery built for fast and simple image management"
|
description = "Gallery built for fast and simple image management"
|
||||||
authors = ["Fluffy-Bean <michal-gdula@protonmail.com>"]
|
authors = ["Fluffy-Bean <michal-gdula@protonmail.com>"]
|
||||||
license = "MIT"
|
license = "MIT"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue