Difference between revisions of "User:Davipb/CSS Sandbox"

From sureai
Jump to: navigation, search
(Grid-like structure)
(Reduce eye-hurting red usage, make "Featured" items vertical)
Line 1: Line 1:
 +
<!-- Top Container -->
 
<div style = "display: flex; justify-content: space-between; clear: both; ">
 
<div style = "display: flex; justify-content: space-between; clear: both; ">
  
 +
<!-- SureAI Logo -->
 
<div style = "order: 0; border: 1px solid gray; border-radius: 5px; padding: 0 20px; height: 225px; width: 225px; display: flex; align-items: center; justify-content: space-around; margin-right: 5px; ">
 
<div style = "order: 0; border: 1px solid gray; border-radius: 5px; padding: 0 20px; height: 225px; width: 225px; display: flex; align-items: center; justify-content: space-around; margin-right: 5px; ">
 
[[File:SureaiLogo2016.png]]
 
[[File:SureaiLogo2016.png]]
 
</div>
 
</div>
 +
<!-- End SureAI Logo -->
 +
<!-- Top-Right -->
 
<div style = "order: 1; flex-grow: 1; ">
 
<div style = "order: 1; flex-grow: 1; ">
 +
<!-- Main Title -->
 
<div style="background: RGB(147, 56, 56); border-radius: 5px; color: white; font-weight: bold; font-size: 1.75em; padding: 0 .75em; margin-bottom: 5px; height: 70px; display: flex; align-items: center; justify-content: center; ">Welcome to the SureAI Wiki!</div>
 
<div style="background: RGB(147, 56, 56); border-radius: 5px; color: white; font-weight: bold; font-size: 1.75em; padding: 0 .75em; margin-bottom: 5px; height: 70px; display: flex; align-items: center; justify-content: center; ">Welcome to the SureAI Wiki!</div>
 +
<!-- End Main Title -->
 +
<!-- Main Text -->
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 20px; height: 150px; display: flex; flex-flow: column nowrap; justify-content: center;">
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 20px; height: 150px; display: flex; flex-flow: column nowrap; justify-content: center;">
 
The SureAI Wiki is an encyclopedia about all games by SureAI. <br />
 
The SureAI Wiki is an encyclopedia about all games by SureAI. <br />
Line 14: Line 21:
 
We are currently maintaining [[Special:AllPages|'''{{NUMBEROFARTICLES}}''' articles]] and [[Special:ListFiles|'''{{NUMBEROFFILES}}''' files]]. We have [[Special:ListUsers|'''{{NUMBEROFUSERS}}''' Users]].
 
We are currently maintaining [[Special:AllPages|'''{{NUMBEROFARTICLES}}''' articles]] and [[Special:ListFiles|'''{{NUMBEROFFILES}}''' files]]. We have [[Special:ListUsers|'''{{NUMBEROFUSERS}}''' Users]].
 
</div>
 
</div>
 +
<!-- End Main Text -->
 
</div>
 
</div>
−
 
+
<!-- End Top-Right -->
 
</div>
 
</div>
 +
<!-- End Top Container -->
  
−
<div style = "display: flex; justify-content: space-between; clear: both; ">
+
<!-- Bottom Container -->
−
 
+
<div style = "display: flex; align-items: stretch; justify-content: space-between; clear: both; ">
−
<div style = "order: 0; flex-basis: 50%; margin-right: 5px; ">
+
<!-- Games Container -->
−
<div style="background: RGB(147, 56, 56); border-radius: 5px; color: white; font-size: 1.75em; padding: 0 .75em; margin: 5px 0; height: 70px; display: flex; align-items: center; justify-content: center; ">The World of Vyn</div>
+
<div style = "order: 0; flex: 2; margin-right: 5px; ">
 +
<!-- Vyn Games Title -->
 +
<div style="background: RGB(73, 73, 59); border-radius: 5px; color: white; font-size: 1.75em; padding: 0 .75em; margin: 5px 0; height: 70px; display: flex; align-items: center; justify-content: center; ">The World of Vyn</div>
 +
<!-- End Vyn Games Title -->
  
 +
<!-- Vyn Game -->
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin: 5px 0; height: 70px; ">
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin: 5px 0; height: 70px; ">
 
<div style = "margin-right: 1em; ">[[File:SureaiLogo2016.png|40px|style="margin-right: 1em; "]]</div>
 
<div style = "margin-right: 1em; ">[[File:SureaiLogo2016.png|40px|style="margin-right: 1em; "]]</div>
Line 30: Line 43:
 
</p>
 
</p>
 
</div>
 
</div>
 +
<!-- End Vyn Game -->
  
 +
<!-- Enderal Game -->
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin: 5px 0; height: 70px; ">
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin: 5px 0; height: 70px; ">
 
<div style = "margin-right: 1em; ">[[File:Ico_enderal_s.png]]</div>
 
<div style = "margin-right: 1em; ">[[File:Ico_enderal_s.png]]</div>
Line 38: Line 53:
 
</p>
 
</p>
 
</div>
 
</div>
 +
<!-- End Enderal Game -->
  
 +
<!-- Nehrim Game -->
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin: 5px 0; height: 70px; ">
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin: 5px 0; height: 70px; ">
 
<div style = "margin-right: 1em; ">[[File:Ico_nehrim_s.png]]</div>
 
<div style = "margin-right: 1em; ">[[File:Ico_nehrim_s.png]]</div>
−
'''[[Nehrim]]'''
+
'''[[Nehrim]]''' <br />
 +
[[Nehrim:Technical Information|Technical Information]] • [[Nehrim:Patch|Patches]] • [[Nehrim:Quests|Quests]] • [[Nehrim:Places|Locations]] • [[Nehrim:Classes|Classes]]
 
</div>
 
</div>
 +
<!-- End Nehrim Game -->
  
 +
<!-- Arkwent Game -->
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin: 5px 0; height: 70px; ">
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin: 5px 0; height: 70px; ">
 
<div style = "margin-right: 1em; ">[[File:Ico_arktwend_s.png]]</div>
 
<div style = "margin-right: 1em; ">[[File:Ico_arktwend_s.png]]</div>
−
'''[[Arktwend]]'''
+
'''[[Arktwend]]''' <br />
 +
[[Arktwend:Technical Information|Technical Information]] • [[Arktwend:Patch|Patches]] • [[Arktwend:Quests|Quests]] • [[Arktwend:Places|Locations]] • [[Arktwend:Classes|Classes]]
 
</div>
 
</div>
 +
<!-- End Arkwent Game -->
  
 +
<!-- Myar Game -->
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin: 5px 0; height: 70px; ">
 
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin: 5px 0; height: 70px; ">
 
<div style = "margin-right: 1em; ">[[File:Ico_myar_s.png]]</div>
 
<div style = "margin-right: 1em; ">[[File:Ico_myar_s.png]]</div>
−
'''[[Myar Aranath: Relict of Kallidar]]'''
+
'''[[Myar Aranath|Myar Aranath: Relict of Kallidar]]''' <br />
 +
[[Myar:Technical Information|Technical Information]] • [[Myar:Patch|Patches]] • [[Myar:Quests|Quests]] • [[Myar:Places|Locations]] • [[Myar:Classes|Classes]]
 
</div>
 
</div>
 +
<!-- End Myar Game -->
  
−
<div style="background: RGB(147, 56, 56); border-radius: 5px; color: white; font-size: 1.75em; padding: 0 .75em; margin: 5px 0; height: 70px; display: flex; align-items: center; justify-content: center; ">Other Projects</div>
+
<!-- Other Games Title -->
 +
<div style="background: RGB(73, 73, 59); border-radius: 5px; color: white; font-size: 1.75em; padding: 0 .75em; margin: 5px 0; height: 70px; display: flex; align-items: center; justify-content: center; ">Other Projects</div>
 +
<!-- End Other Games Title -->
  
−
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin: 5px 0; height: 70px; ">
+
<!-- Cube Game -->
 +
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; margin-top: 5px; height: 70px; ">
 
<div style = "margin-right: 1em; ">[[File:ico_cubeex_s.png]]</div>
 
<div style = "margin-right: 1em; ">[[File:ico_cubeex_s.png]]</div>
 
'''[[Cube Experimental]]'''
 
'''[[Cube Experimental]]'''
 
</div>
 
</div>
 +
<!-- End Cube Game -->
  
 
</div>
 
</div>
 +
<!-- End Games Container -->
  
−
<div style = "order: 1; flex-basis: 50%; ">
+
<!-- Featured Image Container-->
 +
<div style = "order: 1; flex: 1; margin-right: 5px; display: flex; flex-flow: column nowrap; ">
  
−
<div style="background: RGB(147, 56, 56); border-radius: 5px; color: white; font-size: 1.75em; padding: 0 .75em; margin: 5px 0; height: 70px; display: flex; align-items: center; justify-content: center; ">Featured Image</div>
+
<!-- Featured Image Title -->
 +
<div style="order: 0; background: RGB(73, 73, 59); border-radius: 5px; color: white; font-size: 1.75em; padding: 0 .75em; margin: 5px 0; height: 70px; display: flex; align-items: center; justify-content: center; ">Featured Image</div>
 +
<!-- End Featured Image Title -->
 +
 
 +
<!-- Featured Image Content Container -->
 +
<div style = "order: 1; flex-grow: 1; border: 1px solid gray; border-radius: 5px; padding: 1.75em 1em; display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between; ">
 +
 
 +
<div style = "order: 0; font-size: 150%; font-weight: bold; ">[[Enderal:A Nice Day in Summer|A Nice Day in Summer]]</div>
 +
<div style = "order: 1; border-radius: 5px; overflow: hidden; ">[[File:EN-Quest-A_Nice_Day_in_Summer.png|320x320px|The first sight on your journey through Enderal]]</div>
 +
<p  style = "order: 2; text-align: justify; ">
 +
The first sight on your journey through [[Enderal]]: Home, Sweet Home, where [[Enderal:Daddy|Daddy]] awaits you, ready to be served with a nice crisp piece of meat.
 +
</p>
  
−
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 20px; height: 225px; display: flex; align-items: center; margin: 5px 0; ">
 
−
<div style = "border-radius: 5px; overflow: hidden; margin-right: 1em; ">[[File:EN-Quest-A_Nice_Day_in_Summer.png|x180px|The first sight on your journey through Enderal]]</div>
 
−
The first sight on your journey through [[Enderal]].
 
 
</div>
 
</div>
 +
<!-- End Featured Image Content Container -->
 +
</div>
 +
<!-- End Featured Image Container-->
  
−
<div style="background: RGB(147, 56, 56); border-radius: 5px; color: white; font-size: 1.75em; padding: 0 .75em; margin: 5px 0; height: 70px; display: flex; align-items: center; justify-content: center; ">Featured Article</div>
+
<!-- Featured Article Container-->
 +
<div style = "order: 2; flex: 1; display: flex; flex-flow: column nowrap; ">
  
−
<div style = "border: 1px solid gray; border-radius: 5px; padding: 0 20px; height: 225px; ; display: flex; align-items: center; justify-content: space-around; margin: 5px 0; ">
+
<!-- Featured Article Title -->
−
<div style = "margin-right: 1em; "> [[File:EN-NPC-Calia_Sakaresh.png|x180px|Calia Sakaresh|link=Enderal:Calia Sakaresh]]</div>
+
<div style="order: 0; background: RGB(73, 73, 59); border-radius: 5px; color: white; font-size: 1.75em; padding: 0 .75em; margin: 5px 0; height: 70px; display: flex; align-items: center; justify-content: center; ">Featured Article</div>
−
<p style = "max-width: 60%; text-align: justify; ">
+
<!-- End Featured Article Title -->
−
[[Enderal:Calia Sakaresh|'''Calia Sakaresh''']] is a Novice and later a Keeper of The Holy Order, who is first seen with Dunwar, in her trial. She later joins The Prophet during several quests and can eventually be romanced.  
+
 
 +
<!-- Featured Article Content -->
 +
<div style = "order: 1; flex-grow: 1; border: 1px solid gray; border-radius: 5px; padding: 1.75em 1em; display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between; ">
 +
 
 +
<div style = "order: 0; font-size: 150%; font-weight: bold; ">[[Enderal:Calia Sakaresh|Calia Sakaresh]]</div>
 +
<div style = "order: 1; border-radius: 5px; overflow: hidden; ">[[File:EN-NPC-Calia_Sakaresh.png|320x300px|Calia Sakaresh|link=Enderal:Calia Sakaresh]]</div>
 +
<p   style = "order: 2; text-align: justify; ">
 +
[[Enderal:Calia Sakaresh|'''Calia Sakaresh''']] is a Novice and later a Keeper of The Holy Order who later joins The Prophet during several quests and can eventually be romanced.  
 
</p>
 
</p>
−
</div>
 
  
 
</div>
 
</div>
 +
<!-- End Featured Article Content -->
 +
</div>
 +
<!-- End Featured Article Container-->
  
 
</div>
 
</div>
 +
<!-- End Bottom Container -->
  
  

Revision as of 20:31, 15 June 2017

SureaiLogo2016.png

Welcome to the SureAI Wiki!

The SureAI Wiki is an encyclopedia about all games by SureAI.
We need YOUR help to build it! You can register an forum account here which you can use to log in here.

This wiki contains spoilers, and no spoiler warnings are given. For more info, see Help:Spoiler.

We are currently maintaining 2,940 articles and 3,038 files. We have 371 Users.

The World of Vyn
Other Projects
Featured Image
The first sight on your journey through Enderal

The first sight on your journey through Enderal: Home, Sweet Home, where Daddy awaits you, ready to be served with a nice crisp piece of meat.

Featured Article
Calia Sakaresh

Calia Sakaresh is a Novice and later a Keeper of The Holy Order who later joins The Prophet during several quests and can eventually be romanced.



Retrieved from "https://en.wiki.sureai.net/index.php?title=User:Davipb/CSS_Sandbox&oldid=8124"